Web Inspector: Styles: use the same green color for modified properties as in Changes...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 5 May 2019 01:01:56 +0000 (01:01 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 5 May 2019 01:01:56 +0000 (01:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=197538

Reviewed by Timothy Hatcher.

* UserInterface/Views/ChangesDetailsSidebarPanel.css:
(.changes-panel .css-property-line.added):
(.changes-panel .css-property-line.removed):
(.changes-panel .css-property-line.added::before):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property.modified):
(.spreadsheet-style-declaration-editor .property.modified:not(.selected)):
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Variables.css:
(:root):
(@media (prefers-color-scheme: dark)):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index c84b918..3ba2eb1 100644 (file)
@@ -1,3 +1,22 @@
+2019-05-04  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: use the same green color for modified properties as in Changes panel
+        https://bugs.webkit.org/show_bug.cgi?id=197538
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/ChangesDetailsSidebarPanel.css:
+        (.changes-panel .css-property-line.added):
+        (.changes-panel .css-property-line.removed):
+        (.changes-panel .css-property-line.added::before):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property.modified):
+        (.spreadsheet-style-declaration-editor .property.modified:not(.selected)):
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Variables.css:
+        (:root):
+        (@media (prefers-color-scheme: dark)):
+
 2019-05-03  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: DOM: dragging a node to the console should log the node
index 0a57b7f..ebee059 100644 (file)
 }
 
 .changes-panel .css-property-line.added {
-    color: hsl(90, 61%, 25%);
-    background-color: hsl(70, 90%, 86%);
+    color: var(--diff-addition-text-color);
+    background-color: var(--diff-addition-background-color);
 }
 
 .changes-panel .css-property-line.removed {
-    color: hsl(0, 100%, 35%);
-    background-color: hsl(5, 100%, 94%);
+    color: var(--diff-deletion-text-color);
+    background-color: var(--diff-deletion-background-color);
 }
 
 .changes-panel .css-property-line.removed::before {
     left: var(--css-declaration-horizontal-padding);
     pointer-events: none;
 }
-
-@media (prefers-color-scheme: dark) {
-    .changes-panel .css-property-line.added {
-        color: hsl(70, 64%, 70%);
-        background-color: hsl(89, 40%, 19%);
-    }
-
-    .changes-panel .css-property-line.removed {
-        color: hsl(0, 84%, 75%);
-        background-color: hsl(5, 40%, 28%);
-    }
-}
index 0e3454c..d5f57e1 100644 (file)
 }
 
 .spreadsheet-style-declaration-editor .property.modified {
-    border-right-color: hsl(120, 100%, 40%);
+    border-right-color: var(--diff-addition-border-color);
 }
 
 .spreadsheet-style-declaration-editor .property.modified:not(.selected) {
-    background-color: hsl(90, 100%, 93%);
+    background-color: var(--diff-addition-background-color);
 }
 
 .spreadsheet-style-declaration-editor .property.selected {
@@ -216,10 +216,6 @@ body:matches(.window-docked-inactive, .window-inactive) .spreadsheet-style-decla
         outline-color: var(--background-color-secondary) !important;
     }
 
-    .spreadsheet-style-declaration-editor .property.modified:not(.selected) {
-        background-color: hsl(106, 13%, 25%);
-    }
-
     .spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,
     .spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property::after {
         /* .select-effective-property has inverted colors. Invert the pseudo-element again to restore the original text color. */
index 0edb508..fe884fc 100644 (file)
 
     --css-declaration-vertical-padding: 4px;
     --css-declaration-horizontal-padding: 6px;
+
+    --diff-addition-text-color: hsl(90, 61%, 25%);
+    --diff-addition-background-color: hsl(70, 90%, 86%);
+    --diff-deletion-text-color: hsl(0, 100%, 35%);
+    --diff-deletion-background-color: hsl(5, 100%, 94%);
+    --diff-addition-border-color: hsl(90, 100%, 40%);
 }
 
 body.window-inactive {
@@ -327,6 +333,11 @@ body.window-inactive * {
         --overlay-background: hsla(0, 0%, 24%, 0.9);
 
         --console-message-separator: var(--text-color-quaternary);
+
+        --diff-addition-text-color: hsl(70, 64%, 70%);
+        --diff-addition-background-color: hsl(90, 40%, 19%);
+        --diff-deletion-text-color: hsl(0, 84%, 75%);
+        --diff-deletion-background-color: hsl(5, 40%, 28%);
     }
 
     body.window-inactive {