Changeset 242604 in webkit


Ignore:
Timestamp:
Mar 7, 2019 11:24:23 AM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: REGRESSION(r242118): WI.ScopeBar missing background
https://bugs.webkit.org/show_bug.cgi?id=195299

Reviewed by Joseph Pecoraro.

Rework the way color, background-color, and border-color are set for WI.ScopeBar to
use CSS variables instead. Divides the variables into three categories:

  • default: these are the values that the WI.ScopeBar would use normally
  • override: these are values that take precidence over the default (e.g. set by other elements)
    • falls back to default when no value is set
  • actual: this is the resulting value that will be used when displaying
    • this way, other elements can "mirror" the styling of the WI.ScopeBar
  • UserInterface/Views/ScopeBar.css:

(.scope-bar):
(.scope-bar > li):
(.scope-bar > li::before):
(.scope-bar > li:matches(.selected, :hover)):
(.scope-bar > li:not(.selected):hover::after):
(.scope-bar > li.selected:active::after):
(.scope-bar > li.multiple > select):
(body[dir=ltr] .scope-bar > li.multiple > select):
(body[dir=rtl] .scope-bar > li.multiple > select):
(.scope-bar > li.multiple:not(.selected) > select): Added.
(.scope-bar > li.multiple > .arrows):
(.scope-bar > li::before): Deleted.
(.scope-bar.default-item-selected > li.multiple.selected::before): Deleted.
(.scope-bar > li:matches(.selected, :hover)::before): Deleted.
(.scope-bar > li.selected:active::before): Deleted.
(.scope-bar > li.multiple.selected > select): Deleted.
(body[dir=ltr] .scope-bar > li.multiple > .arrows): Deleted.
(body[dir=rtl] .scope-bar > li.multiple > .arrows): Deleted.
(.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows): Deleted.
(.scope-bar > li:matches(.selected, :active)): Deleted.
(@media (prefers-color-scheme: dark)): Deleted.
Switch to using ::after since ::before is more commonly used.

  • UserInterface/Views/MultipleScopeBarItem.js:

(WI.MultipleScopeBarItem.prototype._handleMouseDown):
Drive-by: fix the <select> alignment by re-firing the "mousedown" event on it.

  • UserInterface/Views/AuditTestGroupContentView.js:

(WI.AuditTestGroupContentView.prototype.layout):

  • UserInterface/Views/AuditTestGroupContentView.css:

(.content-view.audit-test-group > header > nav > .scope-bar > li):
(.content-view.audit-test-group > header > nav > .scope-bar > li:not(:hover, .selected)):
(.content-view.audit-test-group > header > nav > .scope-bar > li > img): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li.pass > img): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li.warn > img): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li.fail > img): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li.error > img): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported > img): Added.
(.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-case.filtered ~ .audit-test-case:not(.filtered), .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Added.
(.content-view.audit-test-group > section > .audit-test-case:not(.filtered) ~ .audit-test-case:not(.filtered)): Added.
(.content-view.audit-test-group > header > nav > .scope-bar > li::before): Deleted.
(.content-view.audit-test-group > header > nav > .scope-bar > li.pass::before): Deleted.
(.content-view.audit-test-group > header > nav > .scope-bar > li.warn::before): Deleted.
(.content-view.audit-test-group > header > nav > .scope-bar > li.fail::before): Deleted.
(.content-view.audit-test-group > header > nav > .scope-bar > li.error::before): Deleted.
(.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported::before): Deleted.
(.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Deleted.
Replace the ::before image with an actual <img> now that the WI.ScopeBar itself uses
a pseudo-element for the background styling.

  • UserInterface/Views/LogContentView.js:

(WI.LogContentView):

  • UserInterface/Views/LogContentView.css:

(.log-scope-bar > li:not(.unread) > .indicator): Added.
(.log-scope-bar > li.unread > .indicator): Added.
(.log-scope-bar > li.unread:hover > .indicator): Added.
(.log-scope-bar > li.unread.errors > .indicator): Added.
(.log-scope-bar > li.unread.warnings > .indicator): Added.
(.log-scope-bar > li.unread.logs > .indicator): Added.
(.log-scope-bar > li.unread::before): Deleted.
(body[dir=ltr] .log-scope-bar > li.unread::before): Deleted.
(body[dir=rtl] .log-scope-bar > li.unread::before): Deleted.
(.log-scope-bar > li.unread:hover::before): Deleted.
(.log-scope-bar > li.unread.errors::before): Deleted.
(.log-scope-bar > li.unread.warnings::before): Deleted.
(.log-scope-bar > li.unread.logs::before): Deleted.
Replace the ::before unread indicator with an actual <div> now that the WI.ScopeBar
itself uses a pseudo-element for the background styling.

  • UserInterface/Views/TimelineRecordingContentView.css:

(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple): Deleted.
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows): Deleted.

  • UserInterface/Views/CanvasSidebarPanel.js:

(WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar):
Drive-by: fix typo.

Location:
trunk/Source/WebInspectorUI
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r242602 r242604  
     12019-03-07  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: REGRESSION(r242118): WI.ScopeBar missing background
     4        https://bugs.webkit.org/show_bug.cgi?id=195299
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Rework the way `color`, `background-color`, and `border-color` are set for `WI.ScopeBar` to
     9        use CSS variables instead. Divides the variables into three categories:
     10         - default: these are the values that the `WI.ScopeBar` would use normally
     11         - override: these are values that take precidence over the default (e.g. set by other elements)
     12            - falls back to default when no value is set
     13         - actual: this is the resulting value that will be used when displaying
     14            - this way, other elements can "mirror" the styling of the `WI.ScopeBar`
     15
     16        * UserInterface/Views/ScopeBar.css:
     17        (.scope-bar):
     18        (.scope-bar > li):
     19        (.scope-bar > li::before):
     20        (.scope-bar > li:matches(.selected, :hover)):
     21        (.scope-bar > li:not(.selected):hover::after):
     22        (.scope-bar > li.selected:active::after):
     23        (.scope-bar > li.multiple > select):
     24        (body[dir=ltr] .scope-bar > li.multiple > select):
     25        (body[dir=rtl] .scope-bar > li.multiple > select):
     26        (.scope-bar > li.multiple:not(.selected) > select): Added.
     27        (.scope-bar > li.multiple > .arrows):
     28        (.scope-bar > li::before): Deleted.
     29        (.scope-bar.default-item-selected > li.multiple.selected::before): Deleted.
     30        (.scope-bar > li:matches(.selected, :hover)::before): Deleted.
     31        (.scope-bar > li.selected:active::before): Deleted.
     32        (.scope-bar > li.multiple.selected > select): Deleted.
     33        (body[dir=ltr] .scope-bar > li.multiple > .arrows): Deleted.
     34        (body[dir=rtl] .scope-bar > li.multiple > .arrows): Deleted.
     35        (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows): Deleted.
     36        (.scope-bar > li:matches(.selected, :active)): Deleted.
     37        (@media (prefers-color-scheme: dark)): Deleted.
     38        Switch to using `::after` since `::before` is more commonly used.
     39
     40        * UserInterface/Views/MultipleScopeBarItem.js:
     41        (WI.MultipleScopeBarItem.prototype._handleMouseDown):
     42        Drive-by: fix the <select> alignment by re-firing the "mousedown" event on it.
     43
     44        * UserInterface/Views/AuditTestGroupContentView.js:
     45        (WI.AuditTestGroupContentView.prototype.layout):
     46        * UserInterface/Views/AuditTestGroupContentView.css:
     47        (.content-view.audit-test-group > header > nav > .scope-bar > li):
     48        (.content-view.audit-test-group > header > nav > .scope-bar > li:not(:hover, .selected)):
     49        (.content-view.audit-test-group > header > nav > .scope-bar > li > img): Added.
     50        (.content-view.audit-test-group > header > nav > .scope-bar > li.pass > img): Added.
     51        (.content-view.audit-test-group > header > nav > .scope-bar > li.warn > img): Added.
     52        (.content-view.audit-test-group > header > nav > .scope-bar > li.fail > img): Added.
     53        (.content-view.audit-test-group > header > nav > .scope-bar > li.error > img): Added.
     54        (.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported > img): Added.
     55        (.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-case.filtered ~ .audit-test-case:not(.filtered), .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Added.
     56        (.content-view.audit-test-group > section > .audit-test-case:not(.filtered) ~ .audit-test-case:not(.filtered)): Added.
     57        (.content-view.audit-test-group > header > nav > .scope-bar > li::before): Deleted.
     58        (.content-view.audit-test-group > header > nav > .scope-bar > li.pass::before): Deleted.
     59        (.content-view.audit-test-group > header > nav > .scope-bar > li.warn::before): Deleted.
     60        (.content-view.audit-test-group > header > nav > .scope-bar > li.fail::before): Deleted.
     61        (.content-view.audit-test-group > header > nav > .scope-bar > li.error::before): Deleted.
     62        (.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported::before): Deleted.
     63        (.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Deleted.
     64        Replace the `::before` image with an actual `<img>` now that the `WI.ScopeBar` itself uses
     65        a pseudo-element for the background styling.
     66
     67        * UserInterface/Views/LogContentView.js:
     68        (WI.LogContentView):
     69        * UserInterface/Views/LogContentView.css:
     70        (.log-scope-bar > li:not(.unread) > .indicator): Added.
     71        (.log-scope-bar > li.unread > .indicator): Added.
     72        (.log-scope-bar > li.unread:hover > .indicator): Added.
     73        (.log-scope-bar > li.unread.errors > .indicator): Added.
     74        (.log-scope-bar > li.unread.warnings > .indicator): Added.
     75        (.log-scope-bar > li.unread.logs > .indicator): Added.
     76        (.log-scope-bar > li.unread::before): Deleted.
     77        (body[dir=ltr] .log-scope-bar > li.unread::before): Deleted.
     78        (body[dir=rtl] .log-scope-bar > li.unread::before): Deleted.
     79        (.log-scope-bar > li.unread:hover::before): Deleted.
     80        (.log-scope-bar > li.unread.errors::before): Deleted.
     81        (.log-scope-bar > li.unread.warnings::before): Deleted.
     82        (.log-scope-bar > li.unread.logs::before): Deleted.
     83        Replace the `::before` unread indicator with an actual `<div>` now that the `WI.ScopeBar`
     84        itself uses a pseudo-element for the background styling.
     85
     86        * UserInterface/Views/TimelineRecordingContentView.css:
     87        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected):
     88        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple): Deleted.
     89        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows): Deleted.
     90
     91        * UserInterface/Views/CanvasSidebarPanel.js:
     92        (WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar):
     93        Drive-by: fix typo.
     94
    1952019-03-07  Devin Rousso  <drousso@apple.com>
    296
  • trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css

    r239760 r242604  
    8080
    8181.content-view.audit-test-group > header > nav > .scope-bar > li {
    82     display: inline-flex;
    83     align-items: center;
    8482    margin: 0 3px;
    8583}
    8684
    8785.content-view.audit-test-group > header > nav > .scope-bar > li:not(:hover, .selected) {
    88     border: 1px solid var(--selected-background-color-unfocused);
     86    --scope-bar-border-color-override: var(--selected-background-color-unfocused);
    8987}
    9088
     
    9391}
    9492
    95 .content-view.audit-test-group > header > nav > .scope-bar > li::before {
     93.content-view.audit-test-group > header > nav > .scope-bar > li > img {
    9694    width: 16px;
    9795    height: 16px;
    98     margin-top: 1px;
     96    margin-top: 2px;
    9997    -webkit-margin-end: 4px;
     98    vertical-align: -4px;
    10099}
    101100
    102 .content-view.audit-test-group > header > nav > .scope-bar > li.pass::before {
     101.content-view.audit-test-group > header > nav > .scope-bar > li.pass > img {
    103102    content: url(../Images/AuditTestPass.svg);
    104103}
    105104
    106 .content-view.audit-test-group > header > nav > .scope-bar > li.warn::before {
     105.content-view.audit-test-group > header > nav > .scope-bar > li.warn > img {
    107106    content: url(../Images/AuditTestWarn.svg);
    108107}
    109108
    110 .content-view.audit-test-group > header > nav > .scope-bar > li.fail::before {
     109.content-view.audit-test-group > header > nav > .scope-bar > li.fail > img {
    111110    content: url(../Images/AuditTestFail.svg);
    112111}
    113112
    114 .content-view.audit-test-group > header > nav > .scope-bar > li.error::before {
     113.content-view.audit-test-group > header > nav > .scope-bar > li.error > img {
    115114    content: url(../Images/AuditTestError.svg);
    116115}
    117116
    118 .content-view.audit-test-group > header > nav > .scope-bar > li.unsupported::before {
     117.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported > img {
    119118    content: url(../Images/AuditTestUnsupported.svg);
    120119}
     
    137136
    138137.content-view.audit-test-group > section > .audit-test-case:first-child,
     138.content-view.audit-test-group > section > .audit-test-case.filtered ~ .audit-test-case:not(.filtered),
    139139.content-view.audit-test-group > section > .audit-test-group + .audit-test-case,
    140140.content-view.audit-test-group > section > .audit-test-case + .audit-test-group {
    141141    margin-top: var(--audit-test-vertical-space);
     142}
     143
     144.content-view.audit-test-group > section > .audit-test-case:not(.filtered) ~ .audit-test-case:not(.filtered) {
     145    margin-top: unset;
    142146}
    143147
  • trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.js

    r240270 r242604  
    120120                });
    121121                scopeBarItem.selected = true;
     122
     123                scopeBarItem.element.insertBefore(document.createElement("img"), scopeBarItem.element.firstChild);
     124
    122125                scopeBarItems.push(scopeBarItem);
    123126            };
  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js

    r242511 r242604  
    516516        }
    517517
    518         this._scopeBar = new WI.ScopeBar("canvas-recordinga-scope-bar", scopeBarItems, selectedScopeBarItem, true);
     518        this._scopeBar = new WI.ScopeBar("canvas-recording-scope-bar", scopeBarItems, selectedScopeBarItem, true);
    519519        this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this);
    520520        this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0);
  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css

    r242578 r242604  
    2424 */
    2525
    26 .log-scope-bar > li.unread::before {
    27     content: '';
     26.log-scope-bar > li:not(.unread) > .indicator {
     27    display: none;
     28}
     29
     30.log-scope-bar > li.unread > .indicator {
    2831    display: inline-block;
    29     vertical-align: baseline;
    30 
    31     margin-left: -10px;
    32     margin-right: 2px;
    3332    width: 8px;
    3433    height: 8px;
    35 
     34    animation: unread-background-pulse 1.5s ease-in-out infinite alternate-reverse;
    3635    -webkit-clip-path: circle(50% at 50% 50%);
    37     animation: unread-background-pulse 1.5s ease-in-out infinite alternate-reverse;
    38 
    39     --unread-indicator-margin-start: -10px;
    40     --unread-indicator-margin-end: 2px;
    41 }
    42 
    43 body[dir=ltr] .log-scope-bar > li.unread::before {
    44     margin-left: var(--unread-indicator-margin-start);
    45     margin-right: var(--unread-indicator-margin-end);
    46 }
    47 
    48 body[dir=rtl] .log-scope-bar > li.unread::before {
    49     margin-left: var(--unread-indicator-margin-end);
    50     margin-right: var(--unread-indicator-margin-start);
    51 }
    52 
    53 .log-scope-bar > li.unread:hover::before {
     36
     37    -webkit-margin-start: -10px;
     38    -webkit-margin-end: 2px;
     39}
     40
     41.log-scope-bar > li.unread:hover > .indicator {
    5442    visibility: hidden;
    5543}
    5644
    57 .log-scope-bar > li.unread.errors::before {
     45.log-scope-bar > li.unread.errors > .indicator {
    5846    background-color: hsl(0, 95%, 72%);
    5947}
    6048
    61 .log-scope-bar > li.unread.warnings::before {
     49.log-scope-bar > li.unread.warnings > .indicator {
    6250    background-color: hsl(48, 98%, 51%);
    6351}
    6452
    65 .log-scope-bar > li.unread.logs::before {
     53.log-scope-bar > li.unread.logs > .indicator {
    6654    background-color: hsl(213, 92%, 77%);
    6755}
  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js

    r242174 r242604  
    9292        ];
    9393
     94        for (let scopeBarItem of scopeBarItems) {
     95            let indicatorElement = scopeBarItem.element.insertBefore(document.createElement("div"), scopeBarItem.element.firstChild);
     96            indicatorElement.className = "indicator";
     97        }
     98
    9499        this._scopeBar = new WI.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]);
    95100        this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
  • trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js

    r237593 r242604  
    172172            return;
    173173
     174        if (event.__original)
     175            return;
     176
    174177        // Only support click to select when the item is not selected yet.
    175         // Clicking when selected will cause the menu it appear instead.
    176         if (this._element.classList.contains("selected"))
    177             return;
     178        // Clicking when selected will cause the menu to appear instead.
     179        if (this._element.classList.contains("selected")) {
     180            let newEvent = new event.constructor(event.type, event);
     181            newEvent.__original = event;
     182
     183            event.stop();
     184
     185            this._selectElement.dispatchEvent(newEvent);
     186            return;
     187        }
    178188
    179189        this.selected = true;
  • trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css

    r242578 r242604  
    2727    padding: 0 3px;
    2828    overflow: hidden;
     29
     30    --scope-bar-text-color-default: var(--text-color);
     31    --scope-bar-background-color-default: unset;
     32    --scope-bar-border-color-default: unset;
    2933}
    3034
     
    3741    font-size: 11px;
    3842    line-height: 11px;
    39     color: hsl(0, 0%, 18%);
     43    color: var(--scope-bar-text-color);
    4044    text-align: center;
     45
     46    --scope-bar-text-color: var(--scope-bar-text-color-override, var(--scope-bar-text-color-default));
     47    --scope-bar-background-color: var(--scope-bar-background-color-override, var(--scope-bar-background-color-default));
     48    --scope-bar-border-color: var(--scope-bar-border-color-override, var(--scope-bar-border-color-default));
    4149}
    4250
    43 .scope-bar > li::before {
     51.scope-bar > li::after {
    4452    position: absolute;
    4553    content: "";
    4654    left: 0;
    4755    top: 0;
    48     width: 100%;
    49     height: 100%;
     56    z-index: -1;
     57    width: calc(100% - 2px);
     58    height: calc(100% - 2px);
     59    background-color: var(--scope-bar-background-color);
     60    border: 1px solid var(--scope-bar-border-color);
    5061    border-radius: 3px;
    5162    opacity: var(--glyph-opacity);
    52     z-index: -1;
    53 }
    54 
    55 .scope-bar.default-item-selected > li.multiple.selected::before {
    56     display: none;
    5763}
    5864
    5965.scope-bar > li:matches(.selected, :hover) {
    60     color: var(--selected-foreground-color);
     66    --scope-bar-text-color-default: var(--selected-foreground-color);
     67    --scope-bar-background-color-default: var(--glyph-color-active);
     68    --scope-bar-border-color-default: var(--glyph-color-active);
    6169}
    6270
    63 .scope-bar > li:matches(.selected, :hover)::before {
    64     background-color: var(--glyph-color-active);
    65 }
    66 
    67 .scope-bar > li:not(.selected):hover::before {
     71.scope-bar > li:not(.selected):hover::after {
    6872    opacity: 0.5;
    6973}
    7074
    71 .scope-bar > li.selected:active::before {
     75.scope-bar > li.selected:active::after {
    7276    filter: brightness(0.8);
    7377}
     
    7882
    7983.scope-bar > li.multiple > select {
    80     display: none;
     84    position: absolute;
     85    top: 1px;
     86    width: 0;
     87    height: 0;
     88    margin: 0;
    8189    opacity: 0;
    82 
    83  /* Positioned so the text in the menu aligns with the content text. */
    84     position: absolute;
    85     top: -5px;
    86     left: -4px;
    87     right: 0;
    88     bottom: 0;
     90    pointer-events: none;
    8991}
    9092
    9193body[dir=ltr] .scope-bar > li.multiple > select {
    92     top: -5px;
    93     left: -4px;
     94    left: 1px;
    9495}
    9596
    9697body[dir=rtl] .scope-bar > li.multiple > select {
    97     top: -6px;
    98     left: -10px;
     98    right: 1px;
    9999}
    100100
    101 .scope-bar > li.multiple.selected > select {
    102     display: block;
     101.scope-bar > li.multiple:not(.selected) > select {
     102    display: none;
    103103}
    104104
     
    110110    margin-top: -1px;
    111111    margin-bottom: -1px;
    112     --scope-bar-select-arrows-margin-start: 6px;
     112    -webkit-margin-start: 6px;
    113113}
    114 
    115 body[dir=ltr] .scope-bar > li.multiple > .arrows {
    116     margin-left: var(--scope-bar-select-arrows-margin-start);
    117 }
    118 
    119 body[dir=rtl] .scope-bar > li.multiple > .arrows {
    120     margin-right: var(--scope-bar-select-arrows-margin-start);
    121 }
    122 
    123 .scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows {
    124     color: var(--selected-foreground-color);
    125 }
    126 
    127 .scope-bar > li:matches(.selected, :active) {
    128     transition-duration: 75ms;
    129 }
    130 
    131 @media (prefers-color-scheme: dark) {
    132     .scope-bar > li {
    133         color: var(--text-color);
    134     }
    135 }
  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css

    r241857 r242604  
    5454}
    5555
    56 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
    57     background-color: transparent;
    58     color: var(--text-color);
    59 }
    60 
    61 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
    62     color: var(--text-color);
     56.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected {
     57    --scope-bar-text-color-override: var(--text-color);
     58    --scope-bar-background-color-override: transparent;
     59    --scope-bar-border-color-override: transparent;
    6360}
    6461
Note: See TracChangeset for help on using the changeset viewer.