Align watch expressions and scopes pane (firefox-devtools#8066)

ruturajv · Mar 26, 2019 · 996932b · 996932b
1 parent 8b5f539
commit 996932b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 27 deletions.
diff --git a/packages/devtools-components/src/tree.css b/packages/devtools-components/src/tree.css
@@ -34,14 +34,15 @@
 .tree-indent {
   display: inline-block;
   width: 12px;
-  margin-inline-start: 5px;
+  margin-inline-start: 3px;
   border-inline-start: 1px solid #a2d1ff;
   flex-shrink: 0;
 }
 
-/* Align with expandables siblings (where we have the arrow) */
-.tree-node[data-expandable="false"] .tree-indent:last-of-type {
-  margin-inline-end: 15px;
+.debugger .tree-indent {
+  width: 16px;
+  margin-inline-start: 0px;
+  border-inline-start: 0;
 }
 
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
@@ -62,7 +63,6 @@
   height: 10px;
   border: 0;
   padding: 0;
-  margin-inline-start: 1px;
   margin-inline-end: 4px;
   transform-origin: center center;
   transition: transform 125ms var(--animation-curve);

diff --git a/packages/devtools-reps/src/object-inspector/components/ObjectInspector.css b/packages/devtools-reps/src/object-inspector/components/ObjectInspector.css
@@ -28,17 +28,22 @@
 }
 
 .tree.object-inspector .block .object-label::before {
-  content: "☲ ";
+  content: "☲";
   font-size: 1.1em;
+  display: inline;
+  padding-inline-end: 2px;
+  line-height: 14px;
 }
 
 .object-inspector .object-delimiter {
   color: var(--theme-comment);
+  white-space: pre-wrap;
 }
 
 .object-inspector .tree-node .arrow {
   display: inline-block;
   vertical-align: middle;
+  margin-inline-start: -1px;
 }
 
 /* Focused styles */

diff --git a/src/components/PrimaryPanes/Sources.css b/src/components/PrimaryPanes/Sources.css
@@ -118,10 +118,6 @@
   height: 100%;
 }
 
-.tree-indent {
-  border-inline-start: 0 none;
-}
-
 .source-outline-tabs {
   font-size: 12px;
   width: 100%;

diff --git a/src/components/SecondaryPanes/Expressions.css b/src/components/SecondaryPanes/Expressions.css
@@ -9,10 +9,14 @@
 .input-expression {
   width: 100%;
   margin: 0;
+  font-size: inherit;
   border: 1px;
   background-color: var(--theme-sidebar-background);
-  font-size: 12px;
-  padding: 0.5em 1.6em;
+  line-height: 16px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-inline-start: 19px;
+  padding-inline-end: 12px;
   color: var(--theme-body-color);
   outline: 0;
 }
@@ -65,28 +69,39 @@
 }
 
 .expression-container {
-  border: 1px;
-  padding: 0.6em 1em 0.6em 0.5em;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-inline-start: 20px;
+  padding-inline-end: 12px;
   width: 100%;
   color: var(--theme-body-color);
   background-color: var(--theme-body-background);
   display: block;
   position: relative;
   overflow: hidden;
-  min-height: var(--breakpoint-expression-height);
 }
 
 .expression-container > .tree {
   width: 100%;
   overflow: hidden;
 }
 
+.expression-container .tree .tree-node[aria-level="1"] {
+  padding-top: 0px;
+  /* keep line-height at 14px to prevent row from shifting upon expansion */
+  line-height: 14px;
+}
+
+.expression-container .tree-node[aria-level="1"] .object-label {
+  font-family: var(--monospace-font-family);
+}
+
 :root.theme-light .expression-container:hover {
-  background-color: var(--theme-selection-background-hover);
+  background-color: var(--search-overlays-semitransparent);
 }
 
 :root.theme-dark .expression-container:hover {
-  background-color: var(--theme-selection-background-hover);
+  background-color: var(--search-overlays-semitransparent);
 }
 
 .tree .tree-node:not(.focused):hover {
@@ -100,8 +115,23 @@
 }
 
 .expression-container:hover .expression-container__close-btn,
+.expression-container:focus-within .expression-container__close-btn,
 .expression-container__close-btn:focus-within {
-  top: calc(50% - 8px);
+  top: -1px;
+}
+
+.expression-content .object-node {
+  padding-inline-start: 0px;
+}
+
+.expressions-list .tree.object-inspector .node.object-node {
+  display: flex;
+  align-items: center;
+}
+
+.expression-container__close-btn {
+  max-height: 16px;
+  padding-inline-start: 4px;
 }
 
 [dir="ltr"] .expression-container__close-btn {
@@ -113,20 +143,20 @@
 }
 
 .expression-content {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
   position: relative;
 }
 
 .expression-content .tree {
-  overflow-x: hidden;
-  max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
-}
-
-.expression-content .tree-node {
-  overflow-x: hidden;
+  overflow: hidden;
+  flex-grow: 1;
+  line-height: 15px;
 }
 
 .expression-content .tree-node[data-expandable="false"][aria-level="1"] {
-  padding-inline-start: 10px;
+  padding-inline-start: 0px;
 }
 
 .input-expression:not(:placeholder-shown) {

diff --git a/src/components/SecondaryPanes/Scopes.css b/src/components/SecondaryPanes/Scopes.css
@@ -26,7 +26,7 @@
 }
 
 .object-node {
-  padding-left: 4px;
+  padding-inline-start: 20px;
 }
 
 html[dir="rtl"] .object-node {
@@ -52,7 +52,8 @@ html[dir="rtl"] .object-node {
   white-space: nowrap;
 }
 
-.scopes-pane {
+.scopes-list {
+  padding: 4px 0px;
   overflow: auto;
 }
 
@@ -77,3 +78,12 @@ html[dir="rtl"] .object-node {
 .scopes-list .scope-type-toggle button:hover {
   background: transparent;
 }
+
+.scopes-list .tree.object-inspector .node.object-node {
+  display: flex;
+  align-items: center;
+}
+
+.scopes-list .tree {
+  line-height: 15px;
+}