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 487938 bcb838fd92f08e167ec87877904831a408fb0120
parent 487937 80e54dbe8329644695c2fc786b8d62a133364eef
child 487939 5c44264ed1fec9b4fad27c0c18de7d383597d847
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [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 {