Web Inspector: Sources: increase the filter bar's width when it's focused if a resour...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Aug 2019 10:30:57 +0000 (10:30 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Aug 2019 10:30:57 +0000 (10:30 +0000)
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.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/FilterFieldActiveGlyph.svg [deleted file]
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/SearchBar.css
Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Toolbar.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index efbfb7f..80cb4d3 100644 (file)
@@ -1,3 +1,73 @@
+2019-08-21  Devin Rousso  <drousso@apple.com>
+
+        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.
+
 2019-08-21  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Remove unnecessary properties on SVGs
diff --git a/Source/WebInspectorUI/UserInterface/Images/FilterFieldActiveGlyph.svg b/Source/WebInspectorUI/UserInterface/Images/FilterFieldActiveGlyph.svg
deleted file mode 100644 (file)
index 5bb3d10..0000000
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
-    <g transform="translate(0.5, 0.5)" stroke="hsl(212, 92%, 54%)" stroke-width="1" fill="none">
-        <circle cx="6" cy="6" r="6"/>
-        <path d="M3 4 L 9 4" stroke-linecap="square"/>
-        <path d="M4 6 L 8 6" stroke-linecap="square"/>
-        <path d="M5 8 L 7 8" stroke-linecap="square"/>
-    </g>
-</svg>
index f539b48..c444415 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
     display: flex;
     flex: 1;
     min-width: 0;
-
     margin: 3px 0 4px;
     -webkit-margin-start: 6px;
-    padding-top: 0;
+}
 
+:matches(.filter-bar, .search-bar) > input[type="search"] {
+    height: 22px;
+    padding-top: 0;
+    color: var(--text-color-active);
+    background-color: transparent;
+    background-clip: padding-box;
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
     outline: none;
-
     -webkit-appearance: none;
-
-    border: 1px solid hsla(0, 0%, 0%, 0.25);
-    border-radius: 3px;
-    background-color: hsla(0, 0%, 100%, 0.2);
-    background-clip: padding-box;
-
-    height: 22px;
-}
-
-.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
-    -webkit-margin-end: 4px;
-}
-
-.filter-bar > .navigation-bar + input[type="search"] {
-    -webkit-margin-start: 0;
 }
 
-.filter-bar > input[type="search"]::placeholder {
-    color: hsla(0, 0%, 0%, 0.35);
+:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown)) {
+    background-color: var(--background-color-content);
 }
 
-.filter-bar > input[type="search"]:focus { background-color: white; }
-
-.filter-bar > input[type="search"]::-webkit-search-decoration {
+:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration {
+    align-self: center;
     width: 13px;
     height: 13px;
-
     margin: 4px 4px 3px 3px;
+    background-image: url(../Images/FilterFieldGlyph.svg);
+    -webkit-appearance: none;
+}
 
-    align-self: center;
+:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button {
+    -webkit-margin-end: 4px;
+}
 
-    background-image: url(../Images/FilterFieldGlyph.svg);
+/* FIXME: use a different image for ::-webkit-search-decoration when :not(:placeholder-shown) */
 
-    -webkit-appearance: none;
+:matches(.filter-bar, .search-bar) > input[type="search"]::placeholder {
+    color: var(--text-color-secondary);
 }
 
-.filter-bar.active > input[type="search"]::-webkit-search-decoration {
-    background-image: url(../Images/FilterFieldActiveGlyph.svg);
+:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button {
+    display: none;
 }
 
-.filter-bar.indicating-progress > input[type="search"]::-webkit-search-decoration {
-    background-image: url(../Images/IndeterminateProgressSpinner1.svg);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
+:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"] {
+    -webkit-margin-start: 0;
+}
 
-    animation-name: discrete-spinner;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-timing-function: step-start;
+:matches(.filter-bar, .search-bar) > input[type="search"]:focus {
+    -webkit-margin-end: 6px;
 }
 
-.filter-bar > input[type="search"] + .navigation-bar:empty {
+:matches(.filter-bar, .search-bar) > input[type="search"] + :empty {
     -webkit-margin-start: 6px;
 }
+
+:matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ * {
+    display: none;
+}
+
+:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
+    -webkit-margin-end: 4px;
+}
index ac8a521..7983da3 100644 (file)
@@ -96,26 +96,6 @@ WI.FilterBar = class FilterBar extends WI.Object
             this._handleFilterChanged();
     }
 
-    get indicatingProgress()
-    {
-        return this._element.classList.contains("indicating-progress");
-    }
-
-    set indicatingProgress(progress)
-    {
-        this._element.classList.toggle("indicating-progress", !!progress);
-    }
-
-    get indicatingActive()
-    {
-        return this._element.classList.contains("active");
-    }
-
-    set indicatingActive(active)
-    {
-        this._element.classList.toggle("active", !!active);
-    }
-
     focus()
     {
         // FIXME: Workaround for: <https://webkit.org/b/149504> Caret missing from <input> after clearing text and calling select()
@@ -201,7 +181,8 @@ WI.FilterBar = class FilterBar extends WI.Object
         if (this.hasFilterChanged()) {
             this._lastFilterValue = this.filters;
             this.dispatchEventToListeners(WI.FilterBar.Event.FilterDidChange);
-        }
+        } else if (!this._inputField.value)
+            this._inputField.blur();
     }
 
     _handleFilterInputEvent(event)
index 7353bc8..38840b1 100644 (file)
@@ -1519,11 +1519,6 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         this._table.scrollContainer.style.width = this._nameColumn.width + "px";
     }
 
-    _updateURLFilterActiveIndicator()
-    {
-        this._urlFilterNavigationItem.filterBar.indicatingActive = this._hasURLFilter();
-    }
-
     _updateEmptyFilterResultsMessage()
     {
         if (this._hasActiveFilter() && !this._activeCollection.filteredEntries.length)
@@ -1957,7 +1952,6 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
             });
         }
 
-        this._updateURLFilterActiveIndicator();
         this._updateEmptyFilterResultsMessage();
     }
 
index 613a199..902f5cb 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  */
 
 .search-bar > input[type="search"] {
-    padding-top: 0;
     margin: 1px 6px;
-
-    outline: none;
-
-    -webkit-appearance: none;
-
-    border: 1px solid hsla(0, 0%, 0%, 0.25);
-    border-radius: 3px;
-    background-color: hsla(0, 0%, 100%, 0.2);
-    background-clip: padding-box;
-
-    height: 22px;
-}
-
-.search-bar > input[type="search"]::placeholder {
-    color: hsla(0, 0%, 0%, 0.35);
-}
-
-.search-bar > input[type="search"]:focus {
-    background-color: white;
 }
 
-/* Make the search field's background white when it is not focused and has content.
-   Needs to be a separate rule. See http://webkit.org/b/118162 */
-.search-bar > input[type="search"]:not(:placeholder-shown) {
-    background-color: white;
-}
-
-.search-bar > input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
-    display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    :matches(.search-bar, .filter-bar) > input[type="search"],
-    .search-bar > input[type="search"]:not(:placeholder-shown) {
-        border-color: var(--background-color-selected);
-        background-color: var(--background-color-alternate);
-    }
-
-    :matches(.search-bar, .filter-bar) > input[type="search"]::placeholder {
-        color: var(--text-color-secondary);
-    }
-
-    :matches(.search-bar, .filter-bar) > input[type="search"]:focus {
-        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
-        color: var(--text-color-active);
-    }
-}
+/* Many styles shared with `WI.FilterBar` */
index 25d66be..3e3a7d7 100644 (file)
     left: 0;
     right: 0;
     height: calc(var(--navigation-bar-height) - 1px);
-    margin: 0 6px;
     white-space: nowrap;
     overflow: hidden;
 }
 
 .sidebar > .panel.navigation.search > .search-bar > input[type="search"] {
-    display: flex;
-    flex: 1;
     width: 100%;
-    margin: 0;
-    -webkit-margin-end: 4px;
 }
 
-.sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button {
-    margin-right: 4px;
+.sidebar > .panel.navigation.search > .search-bar > .search-settings {
+    -webkit-margin-end: 6px;
 }
 
 body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
index e875948..7812ba3 100644 (file)
@@ -110,10 +110,6 @@ body.mac-platform:not(.docked) {
     margin: 4px;
 }
 
-.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
-    margin-left: 4px;
-}
-
 .toolbar .item.button,
 .toolbar .search-bar > input[type="search"],
 .toolbar .dashboard-container {
index 67f9800..404bb5c 100644 (file)
@@ -50,6 +50,9 @@
     --background-color-content: white;
     --background-color-code: white;
 
+    --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
+    --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
+
     /* Gray background with lighter foreground. In dark mode this is lighter. */
     --gray-background-color: hsl(0, 0%, 66%);
     --gray-foreground-color: white;
@@ -202,7 +205,6 @@ body.window-inactive * {
 }
 
 @media (prefers-color-scheme: dark) {
-
     :root {
         color: var(--text-color);
 
@@ -233,9 +235,6 @@ body.window-inactive * {
 
         --link-text-color: var(--text-color-secondary);
 
-        --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
-        --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
-
         --color-button: hsl(0, 0%, 99%);
         --color-button-active: var(--text-color-active);