Changeset 266066 in webkit


Ignore:
Timestamp:
Aug 24, 2020, 10:11:11 AM (4 years ago)
Author:
Devin Rousso
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 :nots 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.

Location:
trunk/Source/WebInspectorUI
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r265724 r266066  
     12020-08-24  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Elements: Styles: grey out properties that aren't used/apply
     4        https://bugs.webkit.org/show_bug.cgi?id=215680
     5
     6        Reviewed by Brian Burg.
     7
     8        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
     9        (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.
     10        (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.
     11        (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.
     12        (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.
     13        (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.
     14        (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.
     15        (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.
     16        (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.
     17        (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.
     18        (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.
     19        (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.
     20        Add additional `:not`s to existing rules to ensure that they don't conflict with a new rule
     21        that changes the color of the `.name`/`.value` to grey when the property is not applied/used.
     22
    1232020-08-14  Devin Rousso  <drousso@apple.com>
    224
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

    r259929 r266066  
    4848}
    4949
    50 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(.editing),
    51 body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .name:not(:hover, .editing) {
     50body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(.editing),
     51body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .name:not(:hover, .editing) {
    5252    color: var(--syntax-highlight-boolean-color);
    5353}
     
    5757}
    5858
    59 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing),
    60 body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) {
     59body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing),
     60body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) {
    6161    color: var(--text-color);
    6262}
     
    105105.spreadsheet-style-declaration-editor .property.disabled {
    106106    color: var(--syntax-highlight-comment-color);
     107}
     108
     109body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(.editing),
     110body: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),
     111body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled):is(.invalid-name, .invalid-value, .other-vendor, .overridden) > .content > .name:not(:hover, .editing),
     112body.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) {
     113    color: var(--text-color-secondary);
    107114}
    108115
     
    185192}
    186193
    187 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-link,
    188 body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-link {
     194body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-link,
     195body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-link {
    189196    color: var(--syntax-highlight-link-color);
    190197}
    191198
    192 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-string,
    193 body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-string {
     199body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-string,
     200body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-string {
    194201    color: var(--syntax-highlight-string-color);
    195202}
     
    234241}
    235242
    236 body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(.editing) .token-comment,
    237 body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled) > .content .value:not(:hover, .editing) .token-comment {
     243body:not(.meta-key-pressed) .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(.editing) .token-comment,
     244body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.disabled, .invalid-name, .invalid-value, .other-vendor, .overridden) > .content .value:not(:hover, .editing) .token-comment {
    238245    color: var(--syntax-highlight-comment-color);
    239246}
Note: See TracChangeset for help on using the changeset viewer.