From a9405fe36c31323431f8cae593e2994f538c7c69 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Wed, 4 Jan 2023 13:43:12 -0500 Subject: [PATCH] Make the logger entry dialog modeless --- src/css/common.css | 2 +- src/css/logger-ui.css | 252 +++++++++++++++++++++++------------------- src/js/epicker-ui.js | 12 +- src/js/logger-ui.js | 118 ++++++++++++++++---- src/logger-ui.html | 11 +- 5 files changed, 248 insertions(+), 147 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index 15f1b4fab..7f6ed8895 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -85,7 +85,7 @@ button { color: var(--button-ink); display: inline-flex; fill: var(--button-ink); - font-size: 14px; + font-size: var(--font-size); justify-content: center; min-height: 36px; padding: 0 var(--font-size); diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 3dd940ea3..62dfec074 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -63,6 +63,7 @@ textarea { #inspectors { flex-grow: 1; font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + position: relative; } .inspector { border-top: 1px solid #ccc; @@ -224,11 +225,11 @@ body[dir="rtl"] #netInspector #filterExprPicker { white-space: nowrap; } #vwRenderer .logEntry > div[data-status="1"], -#netFilteringDialog > .panes > .details > div[data-status="1"] { +.netFilteringDialog > .panes > .details > div[data-status="1"] { background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%); } #vwRenderer .logEntry > div[data-status="1"][data-modifier], -#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] { +.netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] { background-color: var(--logger-modified-surface); } #vwRenderer .logEntry > div[data-status="3"] { @@ -238,7 +239,7 @@ body[dir="rtl"] #netInspector #filterExprPicker { background-color: rgba(96, 96, 96, 0.1); } #vwRenderer .logEntry > div[data-status="2"], -#netFilteringDialog > .panes > .details > div[data-status="2"] { +.netFilteringDialog > .panes > .details > div[data-status="2"] { background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%); } #vwRenderer .logEntry > div[data-tabid="-1"] { @@ -367,11 +368,11 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { font-weight: bold; } #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b, -#netFilteringDialog > .panes > .details > div[data-status="1"] b { +.netFilteringDialog > .panes > .details > div[data-status="1"] b { background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%); } #vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(8) b, -#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b { +.netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b { background-color: var(--logger-modified-em-surface); } #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(8) b { @@ -381,7 +382,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { background-color: rgba(96, 96, 96, 0.2); } #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(8) b, -#netFilteringDialog > .panes > .details > div[data-status="2"] b { +.netFilteringDialog > .panes > .details > div[data-status="2"] b { background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%); } #vwRenderer .logEntry > div > span:nth-of-type(8) a { @@ -428,6 +429,52 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { width: 100%; } +#netInspector .entryTools { + background-color: var(--surface-0); + filter: drop-shadow(2px 4px 6px black); + max-width: 60vw; + min-width: max(50vw, 400px); + position: absolute; + right: 0; + top: 20vh; + } +#netInspector .entryTools:empty { + display: none; + } +#netInspector .entryTools .dialogControls { + display: flex; + justify-content: stretch; + } + +.closeButton { + stroke: var(--ink-1); + stroke-width: 3px; + width: 1.6em; + height: 1.6em; + bottom: calc(100% + 2px); + } +body[dir="ltr"] .closeButton { + right: 0; + } +body[dir="rtl"] .closeButton { + left: 0; + } +.closeButton:hover { + background-color: var(--surface-2) !important; + } +.closeButton > * { + pointer-events: none; + } +.moveBand { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII='); + cursor: grab; + flex-grow: 1; + opacity: 0.5; + } +.moving .moveBand { + cursor: grabbing; +} + #popupContainer { background-color: var(--surface-1); border: 1px solid gray; @@ -464,7 +511,12 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { #modalOverlay > div { position: relative; } -#modalOverlay > div > div:nth-of-type(1) { +#modalOverlay .closeButton { + background-color: var(--surface-1); + position: absolute; + } + +#modalOverlayContainer { background-color: var(--surface-1); border: 0; box-sizing: border-box; @@ -473,39 +525,18 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child { overflow-y: auto; width: 90vw; } -#modalOverlay > div > div:nth-of-type(2) { - stroke: var(--ink-1); - stroke-width: 3px; - position: absolute; - width: 1.6em; - height: 1.6em; - bottom: calc(100% + 2px); - background-color: var(--surface-1); - } -body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) { - right: 0; - } -body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) { - left: 0; - } -#modalOverlay > div > div:nth-of-type(2):hover { - background-color: var(--surface-2); - } -#modalOverlay > div > div:nth-of-type(2) > * { - pointer-events: none; - } -#netFilteringDialog { +.netFilteringDialog { font-size: 95%; } -#netFilteringDialog a { +.netFilteringDialog a { text-decoration: none; } -#netFilteringDialog select { +.netFilteringDialog select { max-width: 75%; outline: none; } -#netFilteringDialog > .preview { +.netFilteringDialog > .preview { align-items: center; /* http://lea.verou.me/css3patterns/ */ background-color: #aaa; @@ -534,22 +565,22 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) { padding: 0.5em; text-align: center; } -#netFilteringDialog > .preview > * { +.netFilteringDialog > .preview > * { max-width: 100%; max-height: 20vh; } -#netFilteringDialog > .preview > span { +.netFilteringDialog > .preview > span { background-color: var(--surface-3); cursor: pointer; padding: 1em; } -#netFilteringDialog > .headers { +.netFilteringDialog > .headers { border-bottom: 1px solid var(--border-4); line-height: 2; position: relative; } -#netFilteringDialog > .headers > .header { +.netFilteringDialog > .headers > .header { border: 1px solid var(--border-2); border-bottom: 1px solid var(--border-4); border-top-left-radius: 4px; @@ -562,26 +593,26 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) { text-align: center; top: 1px; } -#netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"], -#netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"], -#netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] { +.netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"], +.netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"], +.netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] { background-color: var(--surface-1); border-color: var(--border-4); border-bottom: 1px solid transparent; color: var(--ink-1); } -#netFilteringDialog > .headers > .tools { +.netFilteringDialog > .headers > .tools { bottom: 0; display: flex; position: absolute; } -body[dir="ltr"] #netFilteringDialog > .headers > .tools { +body[dir="ltr"] .netFilteringDialog > .headers > .tools { right: 0; } -body[dir="rtl"] #netFilteringDialog > .headers > .tools { +body[dir="rtl"] .netFilteringDialog > .headers > .tools { left: 0; } -#netFilteringDialog > .headers > .tools > span { +.netFilteringDialog > .headers > .tools > span { color: var(--ink-4); fill: var(--ink-4); cursor: pointer; @@ -589,78 +620,76 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools { padding: 0 0.25em; text-align: center; } -#netFilteringDialog > .headers > .tools > span:hover { +.netFilteringDialog > .headers > .tools > span:hover { color: var(--ink-1); fill: var(--ink-1); } -#netFilteringDialog.extendedRealm > .headers > .dynamic, -#netFilteringDialog.extendedRealm > .panes > .dynamic { +.netFilteringDialog.extendedRealm > .headers > .dynamic, +.netFilteringDialog.extendedRealm > .panes > .dynamic { display: none; } -#netFilteringDialog.extendedRealm > .headers > .static, -#netFilteringDialog.extendedRealm > .panes > .static { +.netFilteringDialog.extendedRealm > .headers > .static, +.netFilteringDialog.extendedRealm > .panes > .static { display: none; } -#netFilteringDialog > div.panes { - min-height: 40vh; +.netFilteringDialog > div.panes { overflow: hidden; overflow-y: auto; padding-top: 1em; } -#netFilteringDialog > div.panes > div { +.netFilteringDialog > div.panes > div { display: none; } -#netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"], -#netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"], -#netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] { +.netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"], +.netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"], +.netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] { display: flex; flex-direction: column; - padding: 0 var(--default-gap-xsmall); + padding: 0 var(--default-gap-xsmall) var(--default-gap-xsmall) var(--default-gap-xsmall); } -#netFilteringDialog > .panes > .details > div { +.netFilteringDialog > .panes > .details > div { align-items: stretch; background-color: var(--surface-2); border: 0; border-bottom: 1px solid var(--surface-0); display: flex; } -#netFilteringDialog > .panes > .details > div > span { +.netFilteringDialog > .panes > .details > div > span { padding: 0.5em; } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { border: 0; flex-grow: 0; flex-shrink: 0; text-align: right; width: 8em; } -body[dir="ltr"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { +body[dir="ltr"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { border-right: 1px solid var(--surface-0); } -body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { +body[dir="rtl"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { border-left: 1px solid var(--surface-0); } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) { flex-grow: 1; - max-height: 20vh; + max-height: 10vh; overflow: hidden auto; white-space: pre-line } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) { word-break: break-all; } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry { display: inline-flex; } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon { font-size: 110%; opacity: 0.5; - vertical-align: bottom; } -#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover { +.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover { opacity: 1; } -#netFilteringDialog > .panes > .details .exceptor { +.netFilteringDialog > .panes > .details .exceptor { align-items: center; border-left: 1px solid var(--surface-0); cursor: pointer; @@ -668,29 +697,29 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type font-family: monospace; opacity: 0.8; } -#netFilteringDialog > .panes > .details .exceptor:hover { +.netFilteringDialog > .panes > .details .exceptor:hover { opacity: 1; } -#netFilteringDialog > .panes > .details .exceptored .filter { +.netFilteringDialog > .panes > .details .exceptored .filter { text-decoration: line-through; } -#netFilteringDialog > .panes > .details .exceptored .exceptor { +.netFilteringDialog > .panes > .details .exceptored .exceptor { background-color: rgb(var(--primary-50) / 50%); } -#netFilteringDialog > .panes > .details .exceptor::before { +.netFilteringDialog > .panes > .details .exceptor::before { content: '@@'; } -#netFilteringDialog.extendedRealm > .panes > .details .exceptor::before { +.netFilteringDialog.extendedRealm > .panes > .details .exceptor::before { content: '#@#'; } -#netFilteringDialog > div.panes > .dynamic > .toolbar { +.netFilteringDialog > div.panes > .dynamic > .toolbar { padding-bottom: 1em; } -#netFilteringDialog > div.panes > .dynamic .row { +.netFilteringDialog > div.panes > .dynamic .row { display: flex; min-height: 2.2em; } -#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { +.netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { align-self: stretch; border: 0; display: inline-flex; @@ -699,17 +728,17 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type text-align: center; width: 4.5em; } -body[dir="ltr"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { +body[dir="ltr"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { border-right: 1px solid var(--surface-0); } -body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { +body[dir="rtl"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { border-left: 1px solid var(--surface-0); } -#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) { +.netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) { align-self: center; padding: 0 0.5em; } -#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { +.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { background-color: #ffe; border: 1px solid #ddc; border-radius: 4px; @@ -719,29 +748,29 @@ body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-ty visibility: hidden; width: 100%; } -body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { +body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { visibility: visible; } -#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover { +.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover { fill: black; } -#netFilteringDialog > div.panes > .dynamic > .toolbar .entry { +.netFilteringDialog > div.panes > .dynamic > .toolbar .entry { display: none; } -#netFilteringDialog > div.panes > .dynamic .entry { +.netFilteringDialog > div.panes > .dynamic .entry { background-color: var(--surface-2); border: 0; border-bottom: 1px solid var(--surface-0); } -#netFilteringDialog > div.panes > .dynamic .entry:hover { +.netFilteringDialog > div.panes > .dynamic .entry:hover { background-color: var(--surface-3); } -#netFilteringDialog > div.panes > .dynamic .entry > .action { +.netFilteringDialog > div.panes > .dynamic .entry > .action { background-color: transparent; border: 0; cursor: pointer; } -#netFilteringDialog > div.panes > .dynamic .entry > .action > span { +.netFilteringDialog > div.panes > .dynamic .entry > .action > span { background-color: transparent; border: 0; display: inline-block; @@ -750,80 +779,77 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { visibility: hidden; width: 33.33%; } -#netFilteringDialog > div.panes > .dynamic .entry > .action.allow { +.netFilteringDialog > div.panes > .dynamic .entry > .action.allow { background-color: rgba(0, 160, 0, 0.3); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.allow { background-color: rgba(255, 194, 57, 0.4); } -#netFilteringDialog > div.panes > .dynamic .entry > .action.noop { +.netFilteringDialog > div.panes > .dynamic .entry > .action.noop { background-color: rgba(108, 108, 108, 0.3); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.noop { background-color: rgba(96, 96, 96, 0.4); } -#netFilteringDialog > div.panes > .dynamic .entry > .action.block { +.netFilteringDialog > div.panes > .dynamic .entry > .action.block { background-color: rgba(192, 0, 0, 0.3); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.block { background-color: rgba(0, 19, 110, 0.4); } -#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { background-color: rgba(0, 160, 0, 1); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { background-color: rgba(255, 194, 57, 1); } -#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop, -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop { +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop, +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop { background-color: rgba(108, 108, 108, 1); } -#netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { +.netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { background-color: rgba(192, 0, 0, 1); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { background-color: rgba(0, 19, 110, 1); } -#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span { +.netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span { opacity: 0.2; visibility: visible; } -#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover { +.netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover { opacity: 0.75; } -#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { +.netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { background-color: rgb(0, 160, 0); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { background-color: rgb(255, 194, 57); } -#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop { +.netFilteringDialog > div.panes > .dynamic .entry > .action > .noop { background-color: rgb(108, 108, 108); } -#netFilteringDialog > div.panes > .dynamic .entry > .action > .block { +.netFilteringDialog > div.panes > .dynamic .entry > .action > .block { background-color: rgb(192, 0, 0); } -:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block { +:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .block { background-color: rgb(0, 19, 110); } -#netFilteringDialog > div.panes > .dynamic .entry > .url { +.netFilteringDialog > div.panes > .dynamic .entry > .url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -#netFilteringDialog > div.panes > div.static > div { +.netFilteringDialog > div.panes > div.static > div { line-height: 2; } -#netFilteringDialog > div.panes > div.static > div { - padding-bottom: 1em; - } -#netFilteringDialog > div.panes > div.static textarea { +.netFilteringDialog > div.panes > div.static textarea { height: 6em; max-height: 20vh; min-height: 10vh; word-break: break-all; } -#netFilteringDialog > div.panes > div.static > div:nth-of-type(2) { +.netFilteringDialog > div.panes > div.static > div:nth-of-type(2) { text-align: center; } diff --git a/src/js/epicker-ui.js b/src/js/epicker-ui.js index fec76ccc0..e8bec57ff 100644 --- a/src/js/epicker-ui.js +++ b/src/js/epicker-ui.js @@ -601,6 +601,11 @@ const onStartMoving = (( ) => { let rMax = 0, bMax = 0; let timer; + const eatEvent = function(ev) { + ev.stopPropagation(); + ev.preventDefault(); + }; + const move = ( ) => { timer = undefined; const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax); @@ -705,13 +710,6 @@ const svgListening = (( ) => { /******************************************************************************/ -const eatEvent = function(ev) { - ev.stopPropagation(); - ev.preventDefault(); -}; - -/******************************************************************************/ - // Create lists of candidate filters. This takes into account whether the // current mode is narrow or broad. diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index caec4b3fd..ef03365cb 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -72,6 +72,69 @@ const tabIdFromAttribute = function(elem) { return isNaN(tabId) ? 0 : tabId; }; + +/******************************************************************************/ +/******************************************************************************/ + +const onStartMovingWidget = (( ) => { + let widget = null; + let mx0 = 0, my0 = 0; + let mx1 = 0, my1 = 0; + let r0 = 0, t0 = 0; + let rMax = 0, tMax = 0; + let timer; + + const eatEvent = function(ev) { + ev.stopPropagation(); + ev.preventDefault(); + }; + + const move = ( ) => { + timer = undefined; + const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax); + const t1 = Math.min(Math.max(t0 - my0 + my1, 2), tMax); + widget.style.setProperty('right', `${r1}px`); + widget.style.setProperty('top', `${t1}px`); + }; + + const moveAsync = ev => { + if ( timer !== undefined ) { return; } + mx1 = ev.pageX; + my1 = ev.pageY; + timer = self.requestAnimationFrame(move); + }; + + const stop = ev => { + if ( timer !== undefined ) { + self.cancelAnimationFrame(timer); + timer = undefined; + } + if ( widget.classList.contains('moving') === false ) { return; } + widget.classList.remove('moving'); + self.removeEventListener('mousemove', moveAsync, { capture: true }); + eatEvent(ev); + widget = null; + }; + + return function(target, ev) { + if ( dom.cl.has(target, 'moving') ) { return; } + widget = target; + mx0 = ev.pageX; + my0 = ev.pageY; + const style = self.getComputedStyle(target); + r0 = parseInt(style.right, 10); + t0 = parseInt(style.top, 10); + const rect = widget.getBoundingClientRect(); + const widgetParent = widget.parentElement; + rMax = widgetParent.clientWidth - 2 - rect.width ; + tMax = widgetParent.clientHeight - 2 - rect.height; + widget.classList.add('moving'); + self.addEventListener('mousemove', moveAsync, { capture: true }); + self.addEventListener('mouseup', stop, { capture: true, once: true }); + eatEvent(ev); + }; +})(); + /******************************************************************************/ /******************************************************************************/ @@ -79,8 +142,8 @@ const tabIdFromAttribute = function(elem) { // const modalDialog = (( ) => { const overlay = qs$('#modalOverlay'); - const container = qs$(overlay, ':scope > div > div:nth-of-type(1)'); - const closeButton = qs$(overlay, ':scope > div > div:nth-of-type(2)'); + const container = qs$('#modalOverlayContainer'); + const closeButton = qs$(overlay, ':scope .closeButton'); let onDestroyed; const removeChildren = logger.removeAllChildren = function(node) { @@ -125,6 +188,7 @@ const modalDialog = (( ) => { self.logger.modalDialog = modalDialog; + /******************************************************************************/ /******************************************************************************/ @@ -1292,7 +1356,14 @@ dom.on(document, 'keydown', ev => { const target = ev.target; const tcl = target.classList; - // Select a mode + // Close entry tools + if ( tcl.contains('closeButton') ) { + ev.stopPropagation(); + toggleOff(); + return; + } + + // Select a pane if ( tcl.contains('header') ) { ev.stopPropagation(); dom.attr(dialog, 'data-pane', dom.attr(target, 'data-pane')); @@ -1410,16 +1481,6 @@ dom.on(document, 'keydown', ev => { return; } - // Force a reload of the tab - if ( tcl.contains('reload') ) { - ev.stopPropagation(); - messaging.send('loggerUI', { - what: 'reloadTab', - tabId: targetTabId, - }); - return; - } - // Highlight corresponding element in target web page if ( tcl.contains('picker') ) { ev.stopPropagation(); @@ -1865,14 +1926,7 @@ dom.on(document, 'keydown', ev => { }; const fillDialog = function(domains) { - dialog = modalDialog.create( - '#netFilteringDialog', - ( ) => { - targetURLs = []; - targetRow = null; - dialog = null; - } - ); + dialog = dom.clone('#templates .netFilteringDialog'); dom.cl.toggle( dialog, 'extendedRealm', @@ -1888,7 +1942,15 @@ dom.on(document, 'keydown', ev => { dom.on(dialog, 'click', ev => { onClick(ev); }, true); dom.on(dialog, 'change', onSelectChange, true); dom.on(dialog, 'input', onInputChange, true); - modalDialog.show(); + const container = qs$('#netInspector .entryTools'); + if ( container.firstChild ) { + container.replaceChild(dialog, container.firstChild); + } else { + container.append(dialog); + } + dom.on(qs$(dialog, '.moveBand'), 'mousedown', ev => { + onStartMovingWidget(container, ev); + }); }; const toggleOn = async function(ev) { @@ -1913,10 +1975,20 @@ dom.on(document, 'keydown', ev => { fillDialog(domains); }; + const toggleOff = function() { + const container = qs$('#netInspector .entryTools'); + if ( container.firstChild ) { + container.firstChild.remove(); + } + targetURLs = []; + targetRow = null; + dialog = null; + }; + dom.on( '#netInspector', 'click', - '.canDetails > span:nth-of-type(2),.canDetails > span:nth-of-type(3),.canDetails > span:nth-of-type(5)', + '.canDetails > span:nth-of-type(2),.canDetails > span:nth-of-type(3)', ev => { toggleOn(ev); } ); })(); diff --git a/src/logger-ui.html b/src/logger-ui.html index 3423a0754..73c097c24 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -90,28 +90,33 @@ +
+
-