Changeset 260839 in webkit

Timestamp:

Apr 28, 2020 12:18:42 PM (4 years ago)

Author:

Nikita Vasilyev

Message:

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):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (modified) (1 diff)
• UserInterface/Views/Variables.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-04-28  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        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  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css

@@ -107 +107 @@
 }
 
+.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;

trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

@@ -184 +184 @@
     --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);