Bug 1548076. Let the devtools gain focus even if the click hits an empty area on UI. r=jdescottes,yzen
authorHerpiko Dwi Aguno <herpiko@aguno.xyz>
Thu, 27 Jun 2019 13:01:28 +0000
changeset 543184 a22e6caaafe168876a4f2803fe3b9430b998fa55
parent 543183 3d5aab809ce8f73fd96378b430e1fba6eca8698f
child 543185 666a43a4ae8427cf60f4b606a0317127a647f144
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, yzen
bugs1548076
milestone69.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 1548076. Let the devtools gain focus even if the click hits an empty area on UI. r=jdescottes,yzen Differential Revision: https://phabricator.services.mozilla.com/D35686
devtools/client/themes/performance.css
devtools/client/themes/storage.css
devtools/client/themes/toolbox.css
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -23,16 +23,25 @@
 /*
  * DE-XUL: Set a sidebar width because inline XUL components will cause the flex
  * to overflow if dynamically sized.
  */
 .performance-tool {
   --sidebar-width: 185px;
 }
 
+/* Let the component gain focus when a click hits an empty area */
+.performance-tool {
+  -moz-user-focus: normal;
+}
+
+.performance-tool:focus {
+  outline: 0;
+}
+
 /**
  * A generic class to hide elements, replacing the `element.hidden` attribute
  * that we use to hide elements that can later be active
  */
 .hidden {
   display: none;
   width: 0px;
   height: 0px;
--- a/devtools/client/themes/storage.css
+++ b/devtools/client/themes/storage.css
@@ -9,16 +9,34 @@
   max-width: 500px;
   overflow: auto;
 }
 
 #storage-tree {
   background: var(--theme-sidebar-background);
 }
 
+/* Let the component gain focus when a click hits an empty area */
+#storage-tree {
+  -moz-user-focus: normal;
+}
+
+#storage-tree:focus {
+  outline: 0;
+}
+
+/* Let the component gain focus when a click hits an empty area */
+#storage-table {
+  -moz-user-focus: normal;
+}
+
+#storage-table:focus {
+  outline: 0;
+}
+
 /* The minimum column width needs to be determined by the header width */
 .table-widget-cell {
   min-width: unset;
 }
 
 /* Set minimum column widths */
 #name {
   min-width: 65px;
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -387,16 +387,25 @@
 /**
  * Enrure that selected toolbox panel's contents are keyboard accessible as they
  * are explicitly made not to be when hidden (default).
  */
 .toolbox-panel[selected] * {
   -moz-user-focus: normal;
 }
 
+/* Let the component gain focus when a click hits an empty area */
+#toolbox-container {
+  -moz-user-focus: normal;
+}
+
+#toolbox-container:focus {
+  outline: 0;
+}
+
 /* Toolbox tabs reordering */
 #toolbox-container.tabs-reordering > .theme-body {
   pointer-events: none;
 }
 
 #toolbox-container.tabs-reordering
   .devtools-tab:not(.selected):hover
   .devtools-tab-line {