Bug 1427595 - Fix ObjectInspector css regressed by devtools-reps-0.16.0; r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 03 Jan 2018 10:38:14 +0100
changeset 397595 19c8ceb894b82584a8d6e18307a8c28db721ca47
parent 397594 c827e3de4db76b2775dddfe4a79bea106fbd6b0d
child 397596 b3af16adba66d058fddf57e35f5fd91728b7c8e1
push id33180
push useraciure@mozilla.com
push dateWed, 03 Jan 2018 21:35:29 +0000
treeherdermozilla-central@29245716751b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1427595
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1427595 - Fix ObjectInspector css regressed by devtools-reps-0.16.0; r=Honza. In the 0.16.0 bundle, we removed most of the ObjectInspector CSS custom properties because they were being slow. This means that some of the styles we overrided in the console weren't overriden anymore. This patch fixes that so we get to the same style we have prior to the new bundle. MozReview-Commit-ID: JP35pkX6PHZ
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1179,33 +1179,42 @@ body #output-container {
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   height: 100%;
   width: 100vw;
 }
 
 /* Object Inspector */
 .webconsole-output-wrapper .object-inspector.tree {
-  /*
-   * Make the arrow the same color and approximately the same size of the twisty icon.
-   * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
-   */
-  --arrow-width: 8px;
-  --arrow-fill-color: #AFA8AB;
-  --arrow-single-margin: 0.5rem;
-  --tree-indent-width: var(--console-output-indent-width);
-  --tree-indent-border-color: var(--console-output-indent-border-color);
-  --tree-node-hover-background-color : var(--object-inspector-hover-background);
   display: inline-block;
 }
 
-.theme-dark .webconsole-output-wrapper .object-inspector.tree {
-  --arrow-fill-color: #7F7E81;
+.webconsole-output-wrapper .object-inspector.tree .tree-indent {
+  border-inline-start-color: var(--console-output-indent-border-color);
+}
+
+.webconsole-output-wrapper .object-inspector.tree .tree-node:hover:not(.focused) {
+  background-color: var(--object-inspector-hover-background);
 }
 
+/*
+ * Make the arrow the same color and approximately the same size of the twisty icon.
+ * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
+ */
+.webconsole-output-wrapper .object-inspector.tree .tree-node .arrow svg {
+  width: 8px;
+  fill: #AFA8AB;
+  margin-inline-start: 1px;
+}
+
+.theme-dark .webconsole-output-wrapper .object-inspector.tree .tree-node .arrow svg {
+  fill: #7F7E81;
+}
+
+/* Sidebar */
 .sidebar {
   display: flex;
   grid-row: 1 / -1;
   grid-column: -1 / -2;
   background-color: var(--theme-sidebar-background);
 }
 
 .split-box.vert.sidebar {