Bug 1548317 - Fix twisty color in selected TreeView rows; r=Honza,yzen
authorFlorens Verschelde <florens@fvsch.com>
Sun, 05 May 2019 13:39:41 +0000
changeset 472633 3499107fb6fed729654a8e6d719f7bbaff9c5ca1
parent 472632 7df5932c9da0928f3cc0ece509293e5aeb98864b
child 472634 5c493140403539373c1b2b04b75f49255146e72c
push id113030
push userccoroiu@mozilla.com
push dateMon, 06 May 2019 04:28:40 +0000
treeherdermozilla-inbound@e17258dcca60 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, yzen
bugs1548317
milestone68.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 1548317 - Fix twisty color in selected TreeView rows; r=Honza,yzen Changes impact theme-twisty icons in the TreeView component: - Make sure theme-twisty uses the selection color (white) in selected rows; but override that style for Network details accordion headers. - Improve the vertical alignment and pixel-perfect icon rendering by making sure the icon element takes the full available height (16px) and avoiding assymetrical padding (affects the rendering of centered background-image, making them blurry on 1x displays). - Tweak the horizontal spacing of theme-twisty icons so that they take up a total of 20px width (similar to what is used in Debugger and Inspector), versus 17px previously. Differential Revision: https://phabricator.services.mozilla.com/D29550
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/shared/components/tree/TreeView.css
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -123,16 +123,21 @@
 }
 
 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover,
 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeValueCell:not(:hover) * {
   color: var(--theme-toolbar-color);
 }
 
+/* Force the twisty icon to gray even if the treeRow has the selected class */
+.network-monitor .tree-container .treeTable .treeRow.tree-section .theme-twisty {
+  fill: var(--theme-icon-dimmed-color);
+}
+
 .network-monitor .tree-container .treeTable .treeValueCell {
   /* FIXME: Make value cell can be reduced to shorter width */
   max-width: 0;
   padding-inline-end: 5px;
 }
 
 .network-monitor .tree-container .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   text-decoration: none;
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.css
@@ -86,16 +86,17 @@
 
 .treeTable .treeRow.selected {
   background-color: var(--theme-selection-background);
 }
 
 .treeTable .treeRow.selected *,
 .treeTable .treeRow.selected .treeLabelCell::after {
   color: var(--theme-selection-color);
+  fill: currentColor;
 }
 
 /* Filtering */
 .treeTable .treeRow.hidden {
   display: none !important;
 }
 
 .treeTable .treeValueCellDivider {
@@ -115,23 +116,28 @@
 .treeTable .treeValueCell .learn-more-link:hover {
   text-decoration: underline;
 }
 
 /******************************************************************************/
 /* Toggle Icon */
 
 .treeTable .treeRow .treeIcon {
+  box-sizing: content-box;
   height: 14px;
   width: 14px;
-  font-size: 10px; /* Set the size of loading spinner */
+  padding: 1px;
+  /* Set the size of loading spinner (see .devtools-throbber) */
+  font-size: 10px;
+  line-height: 14px;
   display: inline-block;
   vertical-align: bottom;
+  /* Use a total width of 20px (margins + padding + width) */
   margin-inline-start: 3px;
-  padding-top: 1px;
+  margin-inline-end: 1px;
 }
 
 /* All expanded/collapsed styles need to apply on immediate children
   since there might be nested trees within a tree. */
 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
   cursor: pointer;
   background-repeat: no-repeat;
 }