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
--- 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 {