Changeset 238594 in webkit

Timestamp:

Nov 27, 2018 5:45:17 PM (5 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Experimental Computed panel is unreadable in Dark Mode
​https://bugs.webkit.org/show_bug.cgi?id=192053

Reviewed by Matt Baker.

• UserInterface/Views/ComputedStyleDetailsPanel.css:

(@media (prefers-dark-interface)):
(.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):

• UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .computed-property-item.expanded):
(.computed-style-section .computed-property-item.expanded + .computed-property-item):
(@media (prefers-dark-interface)):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/ComputedStyleDetailsPanel.css (modified) (1 diff)
• UserInterface/Views/ComputedStyleSection.css (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-11-27  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Experimental Computed panel is unreadable in Dark Mode
+        https://bugs.webkit.org/show_bug.cgi?id=192053
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (@media (prefers-dark-interface)):
+        (.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):
+        * UserInterface/Views/ComputedStyleSection.css:
+        (.computed-style-section .computed-property-item.expanded):
+        (.computed-style-section .computed-property-item.expanded + .computed-property-item):
+        (@media (prefers-dark-interface)):
+
 2018-11-27  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -56 +56 @@
     height: var(--disclosure-button-size);
 }
+
+@media (prefers-dark-interface) {
+    .computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
+        background-color: var(--background-color);
+    }
+}

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

@@ -43 +43 @@
 .computed-style-section .computed-property-item.expanded {
     padding-bottom: 2px;
-    background-color: var(--background-color);
-    border-top-color: hsla(0, 0%, 0%, 0.2);
+    background-color: var(--background-color-code);
+    border-top-color: var(--text-color-quaternary);
 }
 
 .computed-style-section .computed-property-item.expanded + .computed-property-item {
-    border-top-color: hsla(0, 0%, 0%, 0.2);
+    border-top-color: var(--text-color-quaternary);
 }
 
@@ -147 +147 @@
     display: block;
 }
+
+@media (prefers-dark-interface) {
+    .computed-style-section .computed-property-item.expanded {
+        background-color: var(--background-color-code);
+    }
+}