Web Inspector: Elements: Computed: the background of the Properties/Variables section...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 14 Aug 2019 18:41:11 +0000 (18:41 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 14 Aug 2019 18:41:11 +0000 (18:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200724

Reviewed by Joseph Pecoraro.

* UserInterface/Views/ComputedStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content)): Added.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties): Added.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content): Added.
(.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)): Deleted.
(.computed-style-properties): Deleted.
(.computed-style-properties .property .go-to-arrow): Deleted.
(.computed-style-properties .property:hover .go-to-arrow): Deleted.
(.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)): Deleted.
(.details-section.computed-style-properties > .content): Deleted.
(@media (prefers-color-scheme: dark)): Deleted.
Use more specific selectors to match overall Web Inspector style.

* UserInterface/Views/ComputedStyleSection.css:
(.computed-style-section .computed-property-item.expanded):
Darken the background of any expanded computed property in light mode.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

index ed17534..f9792ba 100644 (file)
@@ -1,3 +1,29 @@
+2019-08-14  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Elements: Computed: the background of the Properties/Variables sections should match the Box Model section when expanded
+        https://bugs.webkit.org/show_bug.cgi?id=200724
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content)): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content): Added.
+        (.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)): Deleted.
+        (.computed-style-properties): Deleted.
+        (.computed-style-properties .property .go-to-arrow): Deleted.
+        (.computed-style-properties .property:hover .go-to-arrow): Deleted.
+        (.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)): Deleted.
+        (.details-section.computed-style-properties > .content): Deleted.
+        (@media (prefers-color-scheme: dark)): Deleted.
+        Use more specific selectors to match overall Web Inspector style.
+
+        * UserInterface/Views/ComputedStyleSection.css:
+        (.computed-style-section .computed-property-item.expanded):
+        Darken the background of any expanded computed property in light mode.
+
 2019-08-13  Joseph Pecoraro  <pecoraro@apple.com>
 
         Uncaught Exception: content.isJSON is not a function selecting image resource
index 8deec21..d738fad 100644 (file)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content) {
+.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content) {
     background-color: var(--background-color);
 }
 
-.computed-style-properties {
+.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties {
     --disclosure-button-size: 15px;
 }
 
-.computed-style-properties .property .go-to-arrow {
+.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow {
     display: none;
     position: absolute;
     width: var(--disclosure-button-size);
     vertical-align: text-bottom;
 }
 
-.computed-style-properties .property:hover .go-to-arrow {
+.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow {
     display: initial;
 }
 
-.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
-    background-color: hsl(0, 0%, 97%);
-}
-
-.details-section.computed-style-properties > .content {
+.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content {
     font: 12px -webkit-system-font, sans-serif;
 }
-
-@media (prefers-color-scheme: dark) {
-    .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
-        background-color: var(--background-color);
-    }
-}
index 03a0c52..d45201c 100644 (file)
@@ -42,7 +42,7 @@
 
 .computed-style-section .computed-property-item.expanded {
     padding-bottom: 2px;
-    background-color: var(--background-color-code);
+    background-color: hsl(0, 0%, 97%);
     border-top-color: var(--text-color-quaternary);
 }