Changeset 248940 in webkit


Ignore:
Timestamp:
Aug 21, 2019 3:30:57 AM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Sources: increase the filter bar's width when it's focused if a resource type filter is active
​https://bugs.webkit.org/show_bug.cgi?id=200940

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/FilterBar.js:

(WI.FilterBar.prototype._handleFilterChanged):
(WI.FilterBar.prototype.get indicatingProgress): Deleted.
(WI.FilterBar.prototype.set indicatingProgress): Deleted.
(WI.FilterBar.prototype.get indicatingActive): Deleted.
(WI.FilterBar.prototype.set indicatingActive): Deleted.
If escape is pressed when the <input> is empty, unfocus (blur) the <input>.
Drive-by: remove unused/unnecessary functions.

  • UserInterface/Views/FilterBar.css:

(.filter-bar > input[type="search"]):
(:matches(.filter-bar, .search-bar) > input[type="search"]): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown))): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]::placeholder): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button): Added.
(:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]:focus): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"] + :empty): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ *): Added.
(:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Added.
(.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Deleted.
(.filter-bar > .navigation-bar + input[type="search"]): Deleted.
(.filter-bar > input[type="search"]::placeholder): Deleted.
(.filter-bar > input[type="search"]:focus): Deleted.
(.filter-bar > input[type="search"]::-webkit-search-decoration): Deleted.
(.filter-bar.active > input[type="search"]::-webkit-search-decoration): Deleted.
(.filter-bar.indicating-progress > input[type="search"]::-webkit-search-decoration): Deleted.
(.filter-bar > input[type="search"] + .navigation-bar:empty): Deleted.
When the <input> is :focus, hide the following WI.NavigationBar (if it's being used) so
that there's more room to show the filter text.
Drive-by: fix background, border, and text color styling when :focus.

  • UserInterface/Views/SearchBar.css:

(.search-bar > input[type="search"]):
(.search-bar > input[type="search"]::placeholder): Deleted.
(.search-bar > input[type="search"]:focus): Deleted.
(.search-bar > input[type="search"]:not(:placeholder-shown)): Deleted.
(.search-bar > input[type="search"]:placeholder-shown::-webkit-search-cancel-button): Deleted.
(@media (prefers-color-scheme: dark)): Deleted.
(:matches(.search-bar, .filter-bar) > input[type="search"],): Deleted.
(:matches(.search-bar, .filter-bar) > input[type="search"]::placeholder): Deleted.
(:matches(.search-bar, .filter-bar) > input[type="search"]:focus): Deleted.

  • UserInterface/Views/SearchSidebarPanel.css:

(.sidebar > .panel.navigation.search > .search-bar):
(.sidebar > .panel.navigation.search > .search-bar > input[type="search"]):
(.sidebar > .panel.navigation.search > .search-bar > .search-settings): Added.
(.sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button): Deleted.

  • UserInterface/Views/Toolbar.css:

(.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container): Deleted.
Move shared styles to FilterBar.css as WI.FilterBar are more common.

  • UserInterface/Views/Variables.css:

(:root):
(@media (prefers-color-scheme: dark) :root):
Expose some CSS variables in light mode that were previously only defined in dark mode.

  • UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype._updateFilteredEntries):
(WI.NetworkTableContentView.prototype._updateURLFilterActiveIndicator): Deleted.

  • UserInterface/Images/FilterFieldActiveGlyph.svg: Removed.
Location:
trunk/Source/WebInspectorUI
Files:
1 deleted
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r248939 r248940  
     12019-08-21  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: increase the filter bar's width when it's focused if a resource type filter is active
     4        https://bugs.webkit.org/show_bug.cgi?id=200940
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/FilterBar.js:
     9        (WI.FilterBar.prototype._handleFilterChanged):
     10        (WI.FilterBar.prototype.get indicatingProgress): Deleted.
     11        (WI.FilterBar.prototype.set indicatingProgress): Deleted.
     12        (WI.FilterBar.prototype.get indicatingActive): Deleted.
     13        (WI.FilterBar.prototype.set indicatingActive): Deleted.
     14        If escape is pressed when the <input> is empty, unfocus (blur) the <input>.
     15        Drive-by: remove unused/unnecessary functions.
     16
     17        * UserInterface/Views/FilterBar.css:
     18        (.filter-bar > input[type="search"]):
     19        (:matches(.filter-bar, .search-bar) > input[type="search"]): Added.
     20        (:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown))): Added.
     21        (:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration): Added.
     22        (:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button): Added.
     23        (:matches(.filter-bar, .search-bar) > input[type="search"]::placeholder): Added.
     24        (:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button): Added.
     25        (:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]): Added.
     26        (:matches(.filter-bar, .search-bar) > input[type="search"]:focus): Added.
     27        (:matches(.filter-bar, .search-bar) > input[type="search"] + :empty): Added.
     28        (:matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ *): Added.
     29        (:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Added.
     30        (.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Deleted.
     31        (.filter-bar > .navigation-bar + input[type="search"]): Deleted.
     32        (.filter-bar > input[type="search"]::placeholder): Deleted.
     33        (.filter-bar > input[type="search"]:focus): Deleted.
     34        (.filter-bar > input[type="search"]::-webkit-search-decoration): Deleted.
     35        (.filter-bar.active > input[type="search"]::-webkit-search-decoration): Deleted.
     36        (.filter-bar.indicating-progress > input[type="search"]::-webkit-search-decoration): Deleted.
     37        (.filter-bar > input[type="search"] + .navigation-bar:empty): Deleted.
     38        When the <input> is `:focus`, hide the following `WI.NavigationBar` (if it's being used) so
     39        that there's more room to show the filter text.
     40        Drive-by: fix background, border, and text color styling when `:focus`.
     41
     42        * UserInterface/Views/SearchBar.css:
     43        (.search-bar > input[type="search"]):
     44        (.search-bar > input[type="search"]::placeholder): Deleted.
     45        (.search-bar > input[type="search"]:focus): Deleted.
     46        (.search-bar > input[type="search"]:not(:placeholder-shown)): Deleted.
     47        (.search-bar > input[type="search"]:placeholder-shown::-webkit-search-cancel-button): Deleted.
     48        (@media (prefers-color-scheme: dark)): Deleted.
     49        (:matches(.search-bar, .filter-bar) > input[type="search"],): Deleted.
     50        (:matches(.search-bar, .filter-bar) > input[type="search"]::placeholder): Deleted.
     51        (:matches(.search-bar, .filter-bar) > input[type="search"]:focus): Deleted.
     52        * UserInterface/Views/SearchSidebarPanel.css:
     53        (.sidebar > .panel.navigation.search > .search-bar):
     54        (.sidebar > .panel.navigation.search > .search-bar > input[type="search"]):
     55        (.sidebar > .panel.navigation.search > .search-bar > .search-settings): Added.
     56        (.sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button): Deleted.
     57        * UserInterface/Views/Toolbar.css:
     58        (.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container): Deleted.
     59        Move shared styles to FilterBar.css as `WI.FilterBar` are more common.
     60
     61        * UserInterface/Views/Variables.css:
     62        (:root):
     63        (@media (prefers-color-scheme: dark) :root):
     64        Expose some CSS variables in light mode that were previously only defined in dark mode.
     65
     66        * UserInterface/Views/NetworkTableContentView.js:
     67        (WI.NetworkTableContentView.prototype._updateFilteredEntries):
     68        (WI.NetworkTableContentView.prototype._updateURLFilterActiveIndicator): Deleted.
     69        * UserInterface/Images/FilterFieldActiveGlyph.svg: Removed.
     70
    1712019-08-21  Joseph Pecoraro  <pecoraro@apple.com>
    272

  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css

    r248916 r248940  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2019 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    5656    flex: 1;
    5757    min-width: 0;
    58 
    5958    margin: 3px 0 4px;
    6059    -webkit-margin-start: 6px;
    61     padding-top: 0;
    62 
    63     outline: none;
    64 
    65     -webkit-appearance: none;
    66 
    67     border: 1px solid hsla(0, 0%, 0%, 0.25);
    68     border-radius: 3px;
    69     background-color: hsla(0, 0%, 100%, 0.2);
    70     background-clip: padding-box;
    71 
    72     height: 22px;
    7360}
    7461
    75 .filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
     62:matches(.filter-bar, .search-bar) > input[type="search"] {
     63    height: 22px;
     64    padding-top: 0;
     65    color: var(--text-color-active);
     66    background-color: transparent;
     67    background-clip: padding-box;
     68    border: 1px solid var(--border-color);
     69    border-radius: 3px;
     70    outline: none;
     71    -webkit-appearance: none;
     72}
     73
     74:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown)) {
     75    background-color: var(--background-color-content);
     76}
     77
     78:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration {
     79    align-self: center;
     80    width: 13px;
     81    height: 13px;
     82    margin: 4px 4px 3px 3px;
     83    background-image: url(../Images/FilterFieldGlyph.svg);
     84    -webkit-appearance: none;
     85}
     86
     87:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button {
    7688    -webkit-margin-end: 4px;
    7789}
    7890
    79 .filter-bar > .navigation-bar + input[type="search"] {
     91/* FIXME: use a different image for ::-webkit-search-decoration when :not(:placeholder-shown) */
     92
     93:matches(.filter-bar, .search-bar) > input[type="search"]::placeholder {
     94    color: var(--text-color-secondary);
     95}
     96
     97:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button {
     98    display: none;
     99}
     100
     101:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"] {
    80102    -webkit-margin-start: 0;
    81103}
    82104
    83 .filter-bar > input[type="search"]::placeholder {
    84     color: hsla(0, 0%, 0%, 0.35);
     105:matches(.filter-bar, .search-bar) > input[type="search"]:focus {
     106    -webkit-margin-end: 6px;
    85107}
    86108
    87 .filter-bar > input[type="search"]:focus { background-color: white; }
    88 
    89 .filter-bar > input[type="search"]::-webkit-search-decoration {
    90     width: 13px;
    91     height: 13px;
    92 
    93     margin: 4px 4px 3px 3px;
    94 
    95     align-self: center;
    96 
    97     background-image: url(../Images/FilterFieldGlyph.svg);
    98 
    99     -webkit-appearance: none;
     109:matches(.filter-bar, .search-bar) > input[type="search"] + :empty {
     110    -webkit-margin-start: 6px;
    100111}
    101112
    102 .filter-bar.active > input[type="search"]::-webkit-search-decoration {
    103     background-image: url(../Images/FilterFieldActiveGlyph.svg);
     113:matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ * {
     114    display: none;
    104115}
    105116
    106 .filter-bar.indicating-progress > input[type="search"]::-webkit-search-decoration {
    107     background-image: url(../Images/IndeterminateProgressSpinner1.svg);
    108     background-repeat: no-repeat;
    109     background-size: 100% 100%;
    110 
    111     animation-name: discrete-spinner;
    112     animation-duration: 1s;
    113     animation-iteration-count: infinite;
    114     animation-timing-function: step-start;
     117:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
     118    -webkit-margin-end: 4px;
    115119}
    116 
    117 .filter-bar > input[type="search"] + .navigation-bar:empty {
    118     -webkit-margin-start: 6px;
    119 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js

    r248916 r248940  
    9797    }
    9898
    99     get indicatingProgress()
    100     {
    101         return this._element.classList.contains("indicating-progress");
    102     }
    103 
    104     set indicatingProgress(progress)
    105     {
    106         this._element.classList.toggle("indicating-progress", !!progress);
    107     }
    108 
    109     get indicatingActive()
    110     {
    111         return this._element.classList.contains("active");
    112     }
    113 
    114     set indicatingActive(active)
    115     {
    116         this._element.classList.toggle("active", !!active);
    117     }
    118 
    11999    focus()
    120100    {
    … …  
    202182            this._lastFilterValue = this.filters;
    203183            this.dispatchEventToListeners(WI.FilterBar.Event.FilterDidChange);
    204         }
     184        } else if (!this._inputField.value)
     185            this._inputField.blur();
    205186    }
    206187

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js

    r248537 r248940  
    15201520    }
    15211521
    1522     _updateURLFilterActiveIndicator()
    1523     {
    1524         this._urlFilterNavigationItem.filterBar.indicatingActive = this._hasURLFilter();
    1525     }
    1526 
    15271522    _updateEmptyFilterResultsMessage()
    15281523    {
    … …  
    19581953        }
    19591954
    1960         this._updateURLFilterActiveIndicator();
    19611955        this._updateEmptyFilterResultsMessage();
    19621956    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css

    r242018 r248940  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2019 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2525
    2626.search-bar > input[type="search"] {
    27     padding-top: 0;
    2827    margin: 1px 6px;
    29 
    30     outline: none;
    31 
    32     -webkit-appearance: none;
    33 
    34     border: 1px solid hsla(0, 0%, 0%, 0.25);
    35     border-radius: 3px;
    36     background-color: hsla(0, 0%, 100%, 0.2);
    37     background-clip: padding-box;
    38 
    39     height: 22px;
    4028}
    4129
    42 .search-bar > input[type="search"]::placeholder {
    43     color: hsla(0, 0%, 0%, 0.35);
    44 }
    45 
    46 .search-bar > input[type="search"]:focus {
    47     background-color: white;
    48 }
    49 
    50 /* Make the search field's background white when it is not focused and has content.
    51    Needs to be a separate rule. See http://webkit.org/b/118162 */
    52 .search-bar > input[type="search"]:not(:placeholder-shown) {
    53     background-color: white;
    54 }
    55 
    56 .search-bar > input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
    57     display: none;
    58 }
    59 
    60 @media (prefers-color-scheme: dark) {
    61     :matches(.search-bar, .filter-bar) > input[type="search"],
    62     .search-bar > input[type="search"]:not(:placeholder-shown) {
    63         border-color: var(--background-color-selected);
    64         background-color: var(--background-color-alternate);
    65     }
    66 
    67     :matches(.search-bar, .filter-bar) > input[type="search"]::placeholder {
    68         color: var(--text-color-secondary);
    69     }
    70 
    71     :matches(.search-bar, .filter-bar) > input[type="search"]:focus {
    72         background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
    73         color: var(--text-color-active);
    74     }
    75 }
     30/* Many styles shared with `WI.FilterBar` */

  • trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css

    r242018 r248940  
    3636    right: 0;
    3737    height: calc(var(--navigation-bar-height) - 1px);
    38     margin: 0 6px;
    3938    white-space: nowrap;
    4039    overflow: hidden;
    … …  
    4241
    4342.sidebar > .panel.navigation.search > .search-bar > input[type="search"] {
    44     display: flex;
    45     flex: 1;
    4643    width: 100%;
    47     margin: 0;
    48     -webkit-margin-end: 4px;
    4944}
    5045
    51 .sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button {
    52     margin-right: 4px;
     46.sidebar > .panel.navigation.search > .search-bar > .search-settings {
     47    -webkit-margin-end: 6px;
    5348}
    5449

  • trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css

    r247928 r248940  
    111111}
    112112
    113 .toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
    114     margin-left: 4px;
    115 }
    116 
    117113.toolbar .item.button,
    118114.toolbar .search-bar > input[type="search"],

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r248898 r248940  
    5151    --background-color-code: white;
    5252
     53    --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
     54    --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
     55
    5356    /* Gray background with lighter foreground. In dark mode this is lighter. */
    5457    --gray-background-color: hsl(0, 0%, 66%);
    … …  
    203206
    204207@media (prefers-color-scheme: dark) {
    205 
    206208    :root {
    207209        color: var(--text-color);
    … …  
    233235
    234236        --link-text-color: var(--text-color-secondary);
    235 
    236         --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
    237         --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
    238237
    239238        --color-button: hsl(0, 0%, 99%);
Note: See TracChangeset for help on using the changeset viewer.