Bug 1537724 - Make text selection visible in TreeView inputs; r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D24375

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css

@@ -134,14 +134,6 @@
   padding-inline-end: 5px;
 }
 
-.network-monitor .tree-container .treeTable .treeValueCell input {
-  color: var(--string-color);
-}
-
-.network-monitor .tree-container .treeTable .treeValueCell input:focus {
-  color: var(--theme-selection-color) !important;
-}
-
 .network-monitor .tree-container .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   text-decoration: none;
 }

devtools/client/shared/components/MdnLink.css

@@ -4,18 +4,28 @@
 
 /* Learn more links */
 
+.network-monitor .learn-more-link {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .network-monitor .learn-more-link::before {
+  display: block;
+  margin: 0;
   background-image: url(chrome://devtools/skin/images/help.svg);
+  background-position: center;
   background-size: contain;
 }
 
-.network-monitor .tree-container .treeTable tr .learn-more-link {
+.network-monitor .tree-container .learn-more-link {
   position: absolute;
   top: 0;
-  left: 0;
-  padding: 0;
+  inset-inline-start: 6px;
+  /* Override devtools-button styles to make this button 20x20,
+   * so that the icon is vertically centered in the table row */
+  padding: 2px;
 }
 
-.network-monitor .tree-container .treeTable tr:not(:hover) .learn-more-link {
+.network-monitor .tree-container tr:not(:hover) .learn-more-link {
   opacity: 0.4;
 }

devtools/client/shared/components/tree/TreeView.css

@@ -16,10 +16,22 @@
 /******************************************************************************/
 /* TreeView Table*/
 
-.treeTable .treeLabelCell {
+.treeTable {
+  color: var(--theme-highlight-blue);
+}
+
+.treeTable .treeLabelCell,
+.treeTable .treeValueCell {
   padding: 2px 0;
+  line-height: 16px; /* make rows 20px tall */
+  padding-inline-start: 4px;
   vertical-align: top;
+  overflow: hidden;
+}
+
+.treeTable .treeLabelCell {
   white-space: nowrap;
+  cursor: default;
 }
 
 .treeTable .treeLabelCell::after {
@@ -27,36 +39,27 @@
   color: var(--object-color);
 }
 
-.treeTable .treeValueCell {
-  padding: 2px 0;
-  padding-inline-start: 5px;
-  overflow: hidden;
-}
-
 .treeTable .treeValueCell.inputEnabled {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.treeTable .treeValueCell input {
+.treeTable .treeValueCell.inputEnabled input {
   width: 100%;
-  background: none;
-  border: none;
-  color: inherit;
-  margin-inline-end: 2px;
-}
-
-.treeTable .treeValueCell input:focus {
+  height: 20px;
+  margin: 0;
+  margin-inline-start: -2px;
+  border: solid 1px transparent;
   outline: none;
-  box-shadow: var(--theme-focus-box-shadow-textbox);
-  transition: all 0.2s ease-in-out;
+  box-shadow: none;
+  padding: 0 1px;
+  color: var(--theme-content-color1);
+  background: var(--theme-sidebar-background);
 }
 
-.treeTable .treeLabelCell {
-  cursor: default;
-  overflow: hidden;
-  padding-inline-start: 4px;
-  white-space: nowrap;
+.treeTable .treeValueCell.inputEnabled input:focus {
+  border-color: var(--theme-textbox-box-shadow);
+  transition: all 150ms ease-in-out;
 }
 
 .treeTable .treeValueCell > [aria-labelledby],
@@ -74,6 +77,12 @@
   text-decoration: underline;
 }
 
+/* :not(.selected) is used because row selection styles should have
+   more precedence than row hovering. */
+.treeTable .treeRow:not(.selected):hover {
+  background-color: var(--theme-selection-background-hover) !important;
+}
+
 .treeTable .treeRow.selected {
   background-color: var(--theme-selection-background);
 }
@@ -178,18 +187,3 @@
           rgba(0, 0, 0, 0.8) 0%,
           transparent 80%);
 }
-
-/******************************************************************************/
-/* Themes */
-
-/* :not(.selected) is used because row selection styles should have
-   more precedence than row hovering. */
-.theme-light .treeTable .treeRow:not(.selected):hover,
-.theme-dark .treeTable .treeRow:not(.selected):hover {
-  background-color: var(--theme-selection-background-hover) !important;
-}
-
-.theme-light .treeTable,
-.theme-dark .treeTable {
-  color: var(--theme-highlight-blue);
-}