From 499adcfc4157bd480c351297800837e7b0348d12 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 5 Apr 2019 17:30:36 +0000 Subject: [PATCH] Bug 1541563 - Sync 131 - Aligned breakpoints and XHR breakpoints panes r=loganfsmyth Differential Revision: https://phabricator.services.mozilla.com/D25986 --HG-- extra : moz-landing-system : lando --- .../Breakpoints/Breakpoints.css | 85 +++++++++++-------- .../SecondaryPanes/Breakpoints/index.js | 60 +++++++------ .../components/SecondaryPanes/Expressions.css | 2 +- .../SecondaryPanes/SecondaryPanes.css | 5 ++ .../SecondaryPanes/XHRBreakpoints.css | 45 ++++------ .../new/src/components/shared/Accordion.css | 2 +- .../browser_dbg-breakpoints-actions.js | 2 +- .../mochitest/browser_dbg-breakpoints-cond.js | 2 +- .../test/mochitest/browser_dbg-breakpoints.js | 4 +- .../debugger/new/test/mochitest/helpers.js | 2 +- 10 files changed, 110 insertions(+), 99 deletions(-) diff --git a/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoints.css b/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoints.css index 06e1bf32fa59..6c600113ae7f 100644 --- a/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoints.css +++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoints.css @@ -6,20 +6,24 @@ margin: 2px 3px; } -.pane.breakpoints-list { - padding-bottom: 0.35em; -} - .breakpoints-list * { user-select: none; } +.breakpoints-list { + margin-top: 4px; + margin-bottom: 4px; +} + .breakpoints-list .breakpoint-heading { text-overflow: ellipsis; - overflow: hidden; - display: flex; width: 100%; - align-items: center; + font-size: 12px; + line-height: 16px; +} + +.breakpoint-heading:not(:first-child) { + margin-top: 2px; } .breakpoints-list .breakpoint-heading .filename { @@ -34,10 +38,8 @@ .breakpoints-list .breakpoint-heading, .breakpoints-list .breakpoint { - font-size: 12px; color: var(--theme-content-color1); position: relative; - transition: all 0.25s ease; cursor: pointer; } @@ -45,53 +47,56 @@ .breakpoints-list .breakpoint, .breakpoints-exceptions, .breakpoints-exceptions-caught { - padding: 0.25em 1em; + display: flex; + align-items: center; + overflow: hidden; + padding-top: 2px; + padding-bottom: 2px; + padding-inline-start: 16px; + padding-inline-end: 12px; } .breakpoints-exceptions { - padding-bottom: 0.5em; - padding-top: 0.5em; + padding-bottom: 3px; + padding-top: 3px; user-select: none; } -.breakpoints-list .breakpoint { - min-height: var(--breakpoint-expression-height); - overflow: hidden; -} - .breakpoints-exceptions-caught { - padding: 0 1em 0.5em 3em; - margin-top: -0.25em; + padding-bottom: 3px; + padding-top: 3px; + padding-inline-start: 36px; } -html[dir="rtl"] .breakpoints-exceptions-caught { - padding: 0 3em 0.5em 1em; +.breakpoints-exceptions-options { + padding-top: 4px; + padding-bottom: 4px; +} + +.xhr-breakpoints-pane .breakpoints-exceptions-options { + border-bottom: 1px solid var(--theme-splitter-color); } .breakpoints-exceptions-options:not(.empty) { border-bottom: 1px solid var(--theme-splitter-color); - margin-bottom: 3px; } .breakpoints-exceptions input, .breakpoints-exceptions-caught input { padding-inline-start: 2px; + margin-top: 0px; + margin-bottom: 0px; margin-inline-start: 0; + margin-inline-end: 2px; vertical-align: text-bottom; } .breakpoint-exceptions-label { - padding-top: 2px; - padding-inline-start: 2px; + line-height: 14px; padding-inline-end: 8px; cursor: default; -} - -.breakpoints-list .breakpoint, -.breakpoints-exceptions, -.breakpoints-exceptions-caught { - display: flex; - align-items: center; + overflow: hidden; + text-overflow: ellipsis; } html[dir="rtl"] .breakpoints-list .breakpoint, @@ -128,11 +133,17 @@ html .breakpoints-list .breakpoint.paused { background-color: var(--search-overlays-semitransparent); } +.breakpoint-line-close { + margin-inline-start: 4px; +} + .breakpoints-list .breakpoint .breakpoint-line { font-size: 11px; color: var(--theme-comment); min-width: 16px; text-align: end; + padding-top: 1px; + padding-bottom: 1px; } .breakpoints-list .breakpoint:hover .breakpoint-line, @@ -145,24 +156,24 @@ html .breakpoints-list .breakpoint.paused { } .breakpoints-list .breakpoint-label { - max-width: calc(100% - var(--breakpoint-expression-right-clear-space)); display: inline-block; - padding-inline-end: 8px; cursor: pointer; flex-grow: 1; text-overflow: ellipsis; overflow: hidden; - padding-top: 2px; font-size: 11px; } -.breakpoints-list .breakpoint-label, +.breakpoints-list .breakpoint-label span, .breakpoint-line-close { - line-height: 1.4em; + display: inline; + line-height: 14px; } .breakpoint-checkbox { - margin-inline-start: 0; + margin-inline-start: 0px; + margin-top: 0px; + margin-bottom: 0px; vertical-align: text-bottom; } diff --git a/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js b/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js index 0e4151e6fb6f..66cbb8782e61 100644 --- a/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js +++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js @@ -77,43 +77,49 @@ class Breakpoints extends Component { renderBreakpoints() { const { breakpointSources, selectedSource } = this.props; + if (!breakpointSources.length) { + return null; + } + const sources = [ ...breakpointSources.map(({ source, breakpoints }) => source) ]; - return [ - ...breakpointSources.map(({ source, breakpoints, i }) => { - const path = getDisplayPath(source, sources); - const sortedBreakpoints = sortSelectedBreakpoints( - breakpoints, - selectedSource - ); + return ( +
+ {breakpointSources.map(({ source, breakpoints, i }) => { + const path = getDisplayPath(source, sources); + const sortedBreakpoints = sortSelectedBreakpoints( + breakpoints, + selectedSource + ); - return [ - , - ...sortedBreakpoints.map(breakpoint => ( - - )) - ]; - }) - ]; + sources={sources} + path={path} + key={source.url} + />, + ...sortedBreakpoints.map(breakpoint => ( + + )) + ]; + })} +
+ ); } render() { return ( -
+
{this.renderExceptionsOptions()} {this.renderBreakpoints()}
diff --git a/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.css b/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.css index e57035f641e7..6af507b89da2 100644 --- a/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.css +++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.css @@ -44,7 +44,7 @@ .expressions-list { /* TODO: add normalize */ margin: 0; - padding: 0; + padding: 4px 0px; } .expression-input-container { diff --git a/devtools/client/debugger/new/src/components/SecondaryPanes/SecondaryPanes.css b/devtools/client/debugger/new/src/components/SecondaryPanes/SecondaryPanes.css index 9686b11cd570..89aadefc15da 100644 --- a/devtools/client/debugger/new/src/components/SecondaryPanes/SecondaryPanes.css +++ b/devtools/client/debugger/new/src/components/SecondaryPanes/SecondaryPanes.css @@ -57,3 +57,8 @@ width: 20em; overflow: auto; } + +.secondary-panes input[type="checkbox"] { + margin: 0; + margin-inline-end: 4px; +} diff --git a/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.css b/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.css index 7c3f3d2e6f7a..d53cb87faf3a 100644 --- a/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.css +++ b/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.css @@ -3,7 +3,7 @@ * file, You can obtain one at . */ .xhr-input-container { - display: block; + display: flex; border: 1px solid transparent; } @@ -19,27 +19,25 @@ border: 1px solid red; } -.xhr-container label { - display: flex; -} - .xhr-input-form { display: inline-flex; width: 100%; - padding: 0.5em 1em 0.5em 1em; + padding-inline-start: 20px; + padding-inline-end: 12px; } .xhr-checkbox { margin-inline-start: 0; + margin-inline-end: 4px; } .xhr-input-url { border: 1px; - padding: 0em 0.6em 0em 0.6em; + padding: 3px 0px; flex-grow: 1; background-color: var(--theme-sidebar-background); - font-size: 12px; - line-height: 18px; + font-size: inherit; + line-height: 14px; color: var(--theme-body-color); } @@ -57,26 +55,26 @@ border-left: 4px solid transparent; width: 100%; color: var(--theme-body-color); - padding: 0.25em 1em; + padding-inline-start: 16px; + padding-inline-end: 12px; background-color: var(--theme-body-background); display: flex; align-items: center; position: relative; - min-height: var(--breakpoint-expression-height); } :root.theme-light .xhr-container:hover { - background-color: var(--theme-selection-background-hover); + background-color: var(--search-overlays-semitransparent); } :root.theme-dark .xhr-container:hover { - background-color: var(--theme-selection-background-hover); + background-color: var(--search-overlays-semitransparent); } .xhr-label-method { - padding: 0px 2px 0px 2px; - line-height: 15px; + line-height: 14px; display: inline-block; + margin-inline-end: 2px; } .xhr-input-method { @@ -96,27 +94,18 @@ text-overflow: ellipsis; overflow: hidden; padding: 0px 2px 0px 2px; - line-height: 15px; - font-size: 11px; + line-height: 14px; } .xhr-container label { flex-grow: 1; display: flex; - padding-inline-end: 36px; align-items: center; overflow-x: hidden; } .xhr-container__close-btn { - position: absolute; - top: calc(50% - 8px); -} - -[dir="ltr"] .xhr-container__close-btn { - right: 12px; -} - -[dir="rtl"] .xhr-container__close-btn { - left: 12px; + display: flex; + padding-top: 2px; + padding-bottom: 2px; } diff --git a/devtools/client/debugger/new/src/components/shared/Accordion.css b/devtools/client/debugger/new/src/components/shared/Accordion.css index d715f480a11f..91d3498f1636 100644 --- a/devtools/client/debugger/new/src/components/shared/Accordion.css +++ b/devtools/client/debugger/new/src/components/shared/Accordion.css @@ -74,7 +74,7 @@ .accordion ._content { border-bottom: 1px solid var(--theme-splitter-color); - font-size: 12px; + font-size: var(--theme-body-font-size); } .accordion div:last-child ._content { diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js index 613280d1744f..ab3492be7ccc 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js @@ -3,7 +3,7 @@ * file, You can obtain one at . */ function openFirstBreakpointContextMenu(dbg) { - rightClickElement(dbg, "breakpointItem", 3); + rightClickElement(dbg, "breakpointItem", 2); } // Tests to see if we can trigger a breakpoint action via the context menu diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js index 2d48e92a7577..2ac9daedf41c 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js @@ -144,7 +144,7 @@ add_task(async function() { is(bp.options.condition, "1", "breakpoint is created with the condition"); await assertEditorBreakpoint(dbg, 5, { hasCondition: true }); - rightClickElement(dbg, "breakpointItem", 3); + rightClickElement(dbg, "breakpointItem", 2); info('select "remove condition"'); selectContextMenuItem(dbg, selectors.breakpointContextMenu.removeCondition); await waitForBreakpointWithoutCondition(dbg, "simple2", 5); diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints.js index 9c930e8c6c9d..5e2216845671 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints.js @@ -53,7 +53,7 @@ add_task(async function() { assertEmptyLines(dbg, [1, 2]); assertBreakpointSnippet(dbg, 3, "return x + y;"); - rightClickElement(dbg, "breakpointItem", 3); + rightClickElement(dbg, "breakpointItem", 2); const disableBreakpointDispatch = waitForDispatch(dbg, "SET_BREAKPOINT"); selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableSelf); await disableBreakpointDispatch; @@ -63,7 +63,7 @@ add_task(async function() { is(bp1.disabled, true, "first breakpoint is disabled"); is(bp2.disabled, false, "second breakpoint is enabled"); - rightClickElement(dbg, "breakpointItem", 3); + rightClickElement(dbg, "breakpointItem", 2); const enableBreakpointDispatch = waitForDispatch(dbg, "SET_BREAKPOINT"); selectContextMenuItem(dbg, selectors.breakpointContextMenu.enableSelf); await enableBreakpointDispatch; diff --git a/devtools/client/debugger/new/test/mochitest/helpers.js b/devtools/client/debugger/new/test/mochitest/helpers.js index 85fdecfc9992..760031407b25 100644 --- a/devtools/client/debugger/new/test/mochitest/helpers.js +++ b/devtools/client/debugger/new/test/mochitest/helpers.js @@ -1134,7 +1134,7 @@ async function assertEditorBreakpoint(dbg, line, shouldExist) { } function assertBreakpointSnippet(dbg, index, snippet) { - const actualSnippet = findElement(dbg, "breakpointLabel", 3).innerText; + const actualSnippet = findElement(dbg, "breakpointLabel", 2).innerText; is(snippet, actualSnippet, `Breakpoint ${index} snippet`); }