Web Inspector: Elements: Classes toggle button has wrong outline on focus

https://bugs.webkit.org/show_bug.cgi?id=211104
<rdar://problem/62475340>

Reviewed by Devin Rousso.

* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:focus):
* UserInterface/Views/Variables.css:
(:root):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@260839 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Author: [email protected]

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,16 @@
+2020-04-28  Nikita Vasilyev  <[email protected]>
+
+        Web Inspector: Elements: Classes toggle button has wrong outline on focus
+        https://bugs.webkit.org/show_bug.cgi?id=211104
+        <rdar://problem/62475340>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:focus):
+        * UserInterface/Views/Variables.css:
+        (:root):
+
 2020-04-27  Nikita Vasilyev  <[email protected]>
 
         REGRESSION (r258730): Web Inspector: Sidebar tabs have incorrect tabIndex

Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css

@@ -106,6 +106,10 @@
     -webkit-appearance: none;
 }
 
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:focus {
+    outline-offset: var(--focus-ring-outline-offset);
+}
+
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle::before {
     position: absolute;
     content: "";

Source/WebInspectorUI/UserInterface/Views/Variables.css

@@ -183,6 +183,8 @@
     --odd-zebra-stripe-row-background-color: white;
     --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03)) top left / 100% 40px;
 
+    --focus-ring-outline-offset: -2px;
+
     --undocked-title-area-height: 0px;
     --tab-bar-height: var(--navigation-bar-height);
     --navigation-bar-height: 29px;