ligned breakpoints and XHR breakpoints panes (firefox-devtools#8094)

Author: jaril

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,64 +38,65 @@
 
 .breakpoints-list .breakpoint-heading,
 .breakpoints-list .breakpoint {
-  font-size: 12px;
   color: var(--theme-content-color1);
   position: relative;
-  transition: all 0.25s ease;
   cursor: pointer;
 }
 
 .breakpoints-list .breakpoint-heading,
 .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-bottom: 3px;
+  padding-top: 3px;
+  padding-inline-start: 36px;
 }
 
-.breakpoints-exceptions-caught {
-  padding: 0 1em 0.5em 3em;
-  margin-top: -0.25em;
+.breakpoints-exceptions-options {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
-html[dir="rtl"] .breakpoints-exceptions-caught {
-  padding: 0 3em 0.5em 1em;
+.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;
 }
 

src/components/SecondaryPanes/Breakpoints/index.js

@@ -77,43 +77,49 @@ class Breakpoints extends Component<Props> {
 
   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 [
-          <BreakpointHeading
-            source={source}
-            sources={sources}
-            path={path}
-            key={source.url}
-          />,
-          ...sortedBreakpoints.map(breakpoint => (
-            <Breakpoint
-              breakpoint={breakpoint}
+    return (
+      <div className="pane breakpoints-list">
+        {breakpointSources.map(({ source, breakpoints, i }) => {
+          const path = getDisplayPath(source, sources);
+          const sortedBreakpoints = sortSelectedBreakpoints(
+            breakpoints,
+            selectedSource
+          );
+
+          return [
+            <BreakpointHeading
               source={source}
-              selectedSource={selectedSource}
-              key={makeBreakpointId(
-                getSelectedLocation(breakpoint, selectedSource)
-              )}
-            />
-          ))
-        ];
-      })
-    ];
+              sources={sources}
+              path={path}
+              key={source.url}
+            />,
+            ...sortedBreakpoints.map(breakpoint => (
+              <Breakpoint
+                breakpoint={breakpoint}
+                source={source}
+                selectedSource={selectedSource}
+                key={makeBreakpointId(
+                  getSelectedLocation(breakpoint, selectedSource)
+                )}
+              />
+            ))
+          ];
+        })}
+      </div>
+    );
   }
 
   render() {
     return (
-      <div className="pane breakpoints-list">
+      <div>
         {this.renderExceptionsOptions()}
         {this.renderBreakpoints()}
       </div>

src/components/SecondaryPanes/Expressions.css

@@ -44,7 +44,7 @@
 .expressions-list {
   /* TODO: add normalize */
   margin: 0;
-  padding: 0;
+  padding: 4px 0px;
 }
 
 .expression-input-container {

src/components/SecondaryPanes/SecondaryPanes.css

@@ -57,3 +57,8 @@
   width: 20em;
   overflow: auto;
 }
+
+.secondary-panes input[type="checkbox"] {
+  margin: 0;
+  margin-inline-end: 4px;
+}

src/components/SecondaryPanes/XHRBreakpoints.css

@@ -3,7 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .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;
 }

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 {

test/mochitest/browser_dbg-breakpoints-actions.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 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