Bug 1482454 - update a11y panel's tree/sidebar keyboard focus styling. r=gl
authorYura Zenevich <yura.zenevich@gmail.com>
Wed, 15 Aug 2018 11:48:01 -0400
changeset 432825 bcb838fd92f08e167ec87877904831a408fb0120
parent 432824 80e54dbe8329644695c2fc786b8d62a133364eef
child 432826 5c44264ed1fec9b4fad27c0c18de7d383597d847
push id106885
push useryura.zenevich@gmail.com
push dateWed, 22 Aug 2018 14:23:40 +0000
treeherdermozilla-inbound@5c44264ed1fe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1482454
milestone63.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 1482454 - update a11y panel's tree/sidebar keyboard focus styling. r=gl MozReview-Commit-ID: 8NIuRyCkuws
devtools/client/accessibility/accessibility.css
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -7,16 +7,23 @@
   --accessibility-toolbar-height: 24px;
   --accessibility-toolbar-height-tall: 35px;
   --accessibility-toolbar-focus: var(--blue-50);
   --accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
   --accessibility-full-length-minus-splitter: calc(100% - 1px);
   --accessibility-horizontal-padding: 5px;
   --accessibility-arrow-horizontal-padding: 4px;
   --accessibility-tree-row-height: 21px;
+  --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
+  --accessibility-tree-focused-node-twisty-brightness: brightness(20%);
+}
+
+:root.theme-dark {
+  --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
+  --accessibility-tree-focused-node-twisty-brightness: unset;
 }
 
 /* General */
 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
@@ -150,19 +157,31 @@ body {
   outline: 0;
 }
 
 .treeTable::-moz-focus-inner,
 .treeTable > tbody::-moz-focus-inner {
   border: 0;
 }
 
-.treeTable:focus > tbody {
-  outline: var(--theme-focus-outline);
-  outline-offset: -1px;
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
+  background-color: var(--accessibility-unfocused-tree-focused-node-background);
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
+  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
+  color: inherit;
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
+  color: var(--string-color);
 }
 
 .treeTable > thead {
   pointer-events: none;
 }
 
 .treeTable > tbody tr {
   height: var(--accessibility-tree-row-height);
@@ -255,33 +274,54 @@ body {
   position: relative;
   display: flex;
   height: var(--accessibility-tree-row-height);
   width: calc(100% - var(--accessibility-horizontal-padding));
   cursor: default;
   align-items: center;
 }
 
-.accessible .tree .node.focused {
-  background-color: var(--theme-selection-background);
+.accessible .tree:focus {
+  outline: 0;
+}
+
+.accessible .tree::-moz-focus-inner {
+  border: 0;
 }
 
-.accessible .tree .tree-node:hover:not(.focused) {
+/* Unset tree styles leaking from reps.css */
+.accessible .tree .tree-node:not(.focused):hover {
+  background-color: transparent;
+}
+
+.accessible .tree:not(:focus) .node.focused {
+  background-color: var(--accessibility-unfocused-tree-focused-node-background);
+}
+
+.accessible .tree:not(:focus) .node.focused .theme-twisty {
+  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+}
+
+.accessible .tree .node:not(.focused):hover {
   background-color: var(--theme-selection-background-hover);
 }
 
-.accessible .tree .node.focused * {
+.accessible .tree:focus .node.focused {
+  background-color: var(--theme-selection-background);
+}
+
+.accessible .tree:focus .node.focused * {
   color: var(--theme-selection-color);
 }
 
-.accessible .tree .node.focused .open-inspector {
+.accessible .tree:focus .node.focused .open-inspector {
   background-color: var(--grey-30);
 }
 
-.accessible .tree .node.focused:hover .open-inspector {
+.accessible .tree:focus .node.focused:hover .open-inspector {
   background-color: var(--theme-selection-color);
 }
 
 .accessible .tree .arrow {
   flex-shrink: 0;
 }
 
 .accessible .tree .object-value {