[webkit-changes] [266066] trunk/Source/WebInspectorUI

Mon, 24 Aug 2020 10:12:45 -0700

Title: [266066] trunk/Source/WebInspectorUI
Revision
266066
Author
drou...@apple.com
Date
2020-08-24 10:11:11 -0700 (Mon, 24 Aug 2020)

Log Message

Web Inspector: Elements: Styles: grey out properties that aren't used/apply
https://bugs.webkit.org/show_bug.cgi?id=215680

Reviewed by Brian Burg.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(:hover, .editing)): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing)): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(.editing), body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(:hover, .editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(:hover, .editing)): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-link, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-link): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-string, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-string): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-comment, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-comment): Added.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(:hover, .editing)): Deleted.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing)): Deleted.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-link, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-link): Deleted.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-string, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-string): Deleted.
(body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-comment, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-comment): Deleted.
Add additional `:not`s to existing rules to ensure that they don't conflict with a new rule
that changes the color of the `.name`/`.value` to grey when the property is not applied/used.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (266065 => 266066)


--- trunk/Source/WebInspectorUI/ChangeLog	2020-08-24 17:01:03 UTC (rev 266065)
+++ trunk/Source/WebInspectorUI/ChangeLog	2020-08-24 17:11:11 UTC (rev 266066)
@@ -1,3 +1,25 @@
+2020-08-24  Devin Rousso  <drou...@apple.com>
+
+        Web Inspector: Elements: Styles: grey out properties that aren't used/apply
+        https://bugs.webkit.org/show_bug.cgi?id=215680
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(:hover, .editing)): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing)): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(.editing), body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(:hover, .editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(:hover, .editing)): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-link, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-link): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-string, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-string): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-comment, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-comment): Added.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(:hover, .editing)): Deleted.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing), body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing)): Deleted.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-link, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-link): Deleted.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-string, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-string): Deleted.
+        (body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-comment, body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-comment): Deleted.
+        Add additional `:not`s to existing rules to ensure that they don't conflict with a new rule
+        that changes the color of the `.name`/`.value` to grey when the property is not applied/used.
+
 2020-08-14  Devin Rousso  <drou...@apple.com>
 
         Web Inspector: Assertion Failed: Appended a string with newlines. This breaks the source map.

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (266065 => 266066)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2020-08-24 17:01:03 UTC (rev 266065)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2020-08-24 17:11:11 UTC (rev 266066)
@@ -47,8 +47,8 @@
     outline: none;
 }
 
-body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(.editing),
-body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(:hover, .editing) {
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(.editing),
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(:hover, .editing) {
     color: var(--syntax-highlight-boolean-color);
 }
 
@@ -56,8 +56,8 @@
     white-space: pre-wrap;
 }
 
-body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing),
-body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) {
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing),
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) {
     color: var(--text-color);
 }
 
@@ -106,6 +106,13 @@
     color: var(--syntax-highlight-comment-color);
 }
 
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(.editing),
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(.editing),
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(:hover, .editing),
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .value-container > .value:not(:hover, .editing) {
+    color: var(--text-color-secondary);
+}
+
 .spreadsheet-style-declaration-editor > .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) > .content > *:not(.name, .value-container),
 .spreadsheet-style-declaration-editor > .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) > .content > .value-container > *:not(.value),
 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) > .content > :matches(.name, .value-container):not(.editing),
@@ -184,13 +191,13 @@
     color: hsl(0, 0%, 50%) !important;
 }
 
-body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-link,
-body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-link {
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-link,
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-link {
     color: var(--syntax-highlight-link-color);
 }
 
-body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-string,
-body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-string {
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-string,
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-string {
     color: var(--syntax-highlight-string-color);
 }
 
@@ -233,8 +240,8 @@
     -webkit-text-stroke-width: 0 !important;
 }
 
-body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-comment,
-body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-comment {
+body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-comment,
+body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-comment {
     color: var(--syntax-highlight-comment-color);
 }
 

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to