Web Inspector: Canvas Tab initial user interface needs some polish
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Dec 2017 20:40:27 +0000 (20:40 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Dec 2017 20:40:27 +0000 (20:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179330
<rdar://problem/35367581>

Reviewed by Joseph Pecoraro.

Update the Canvas overview placeholder text and prevent appearance of
the vertical scrollbar when no canvases exist. This patch also includes
a bunch of cleanup of code that creates content placeholder text throughout
the UI, and makes sure all text is styled consistently.

* Localizations/en.lproj/localizedStrings.js:
Updated Canvas overview message text.

* UserInterface/Base/Main.js:
Make the "message text view" a container with child message element, instead
of a simple element with text content. This makes it simpler to customize
the message (by adding buttons, more text, etc).

* UserInterface/Views/CanvasDetailsSidebarPanel.css:
(.sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul):
(.sidebar > .panel.details.canvas > .content > .empty-content-placeholder): Deleted.
(.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message): Deleted.
* UserInterface/Views/CanvasDetailsSidebarPanel.js:
(WI.CanvasDetailsSidebarPanel.prototype.initialLayout):

* UserInterface/Views/CanvasOverviewContentView.js:
(WI.CanvasOverviewContentView):
Customize the content placeholder to include a description beneath
the "No Canvas Contexts" message.

* UserInterface/Views/CollectionContentView.css:
(.content-view.collection):
Change overflow-y to auto, to prevent scrollbar from appearing when
"Show scroll bars" system preference is enabled on macOS.

* UserInterface/Views/CollectionContentView.js:
Add support for custom content placeholders.
(WI.CollectionContentView):
(WI.CollectionContentView.prototype._showContentPlaceholder):
(WI.CollectionContentView.prototype._hideContentPlaceholder):

* UserInterface/Views/ContentView.css:
(.content-view > .message-text-view):
(.content-view > .message-text-view > .message):

* UserInterface/Views/DebuggerSidebarPanel.css:
(.sidebar > .panel.navigation.debugger > .content):
(.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder)): Deleted.

* UserInterface/Views/DetailsSection.css:
(.details-section > .content > .group > .row > .message-text-view):

* UserInterface/Views/Main.css:
(.message-text-view):
(.message-text-view > .message):
(.message-text-view.error):

* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .overflow-shadow):
(.sidebar > .panel.navigation > .content .empty-content-placeholder): Deleted.
(.sidebar > .panel.navigation > .content > .empty-content-placeholder): Deleted.
(.sidebar > .panel.navigation > .content .empty-content-placeholder > .message): Deleted.

* UserInterface/Views/NavigationSidebarPanel.js:
(WI.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
(WI.NavigationSidebarPanel.prototype._createEmptyContentPlaceholderIfNeeded):

* UserInterface/Views/NetworkTableContentView.css:
(.content-view.network .message-text-view):
(.content-view.network .message-text-view > .message):
Workaround to prevent "No Filter Results" message from being styled like
"full width" messages displayed in ContentViews (large, bold font).
This is needed because the placeholder message element is a immediate child
of the network content view, rather than the network table.

(.content-view.network .empty-content-placeholder): Deleted.
(body[dir=ltr] .content-view.network .empty-content-placeholder): Deleted.
(body[dir=rtl] .content-view.network .empty-content-placeholder): Deleted.
(.content-view.network .empty-content-placeholder > .message): Deleted.

* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype._showEmptyFilterResultsMessage):

* UserInterface/Views/RecordingNavigationSidebarPanel.css:
(.sidebar > .panel.navigation.recording > .content):
(.sidebar > .panel.navigation.recording > :matches(.content, .empty-content-placeholder)): Deleted.

* UserInterface/Views/ResourceSidebarPanel.css:
(.sidebar > .panel.navigation.resource > .content):
(.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)): Deleted.

* UserInterface/Views/RulesStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style > .content > .rules > .message-text-view):
(.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .message-text-view):
(.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results): Deleted.
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results): Deleted.
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message): Deleted.

* UserInterface/Views/RulesStyleDetailsPanel.js:
(WI.RulesStyleDetailsPanel):

* UserInterface/Views/SearchSidebarPanel.css:
(.sidebar > .panel.navigation.search > :matches(.content, .message-text-view)):
(.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view)):
(.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder)): Deleted.
(.sidebar > .panel.navigation.search.changed > :matches(.content, .empty-content-placeholder)): Deleted.

* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel):

* UserInterface/Views/StorageSidebarPanel.css:
(.sidebar > .panel.navigation.storage > .content):
(.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder)): Deleted.

* UserInterface/Views/Variables.css:
(:root):

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

24 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js
Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css
Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js
Source/WebInspectorUI/UserInterface/Views/ContentView.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index 7c1fd8e..2d2cb49 100644 (file)
@@ -1,3 +1,123 @@
+2017-12-04  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Canvas Tab initial user interface needs some polish
+        https://bugs.webkit.org/show_bug.cgi?id=179330
+        <rdar://problem/35367581>
+
+        Reviewed by Joseph Pecoraro.
+
+        Update the Canvas overview placeholder text and prevent appearance of
+        the vertical scrollbar when no canvases exist. This patch also includes
+        a bunch of cleanup of code that creates content placeholder text throughout
+        the UI, and makes sure all text is styled consistently.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Updated Canvas overview message text.
+
+        * UserInterface/Base/Main.js:
+        Make the "message text view" a container with child message element, instead
+        of a simple element with text content. This makes it simpler to customize
+        the message (by adding buttons, more text, etc).
+
+        * UserInterface/Views/CanvasDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul):
+        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder): Deleted.
+        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message): Deleted.
+        * UserInterface/Views/CanvasDetailsSidebarPanel.js:
+        (WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
+
+        * UserInterface/Views/CanvasOverviewContentView.js:
+        (WI.CanvasOverviewContentView):
+        Customize the content placeholder to include a description beneath
+        the "No Canvas Contexts" message.
+
+        * UserInterface/Views/CollectionContentView.css:
+        (.content-view.collection):
+        Change overflow-y to auto, to prevent scrollbar from appearing when
+        "Show scroll bars" system preference is enabled on macOS.
+
+        * UserInterface/Views/CollectionContentView.js:
+        Add support for custom content placeholders.
+        (WI.CollectionContentView):
+        (WI.CollectionContentView.prototype._showContentPlaceholder):
+        (WI.CollectionContentView.prototype._hideContentPlaceholder):
+
+        * UserInterface/Views/ContentView.css:
+        (.content-view > .message-text-view):
+        (.content-view > .message-text-view > .message):
+
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (.sidebar > .panel.navigation.debugger > .content):
+        (.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder)): Deleted.
+
+        * UserInterface/Views/DetailsSection.css:
+        (.details-section > .content > .group > .row > .message-text-view):
+
+        * UserInterface/Views/Main.css:
+        (.message-text-view):
+        (.message-text-view > .message):
+        (.message-text-view.error):
+
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .overflow-shadow):
+        (.sidebar > .panel.navigation > .content .empty-content-placeholder): Deleted.
+        (.sidebar > .panel.navigation > .content > .empty-content-placeholder): Deleted.
+        (.sidebar > .panel.navigation > .content .empty-content-placeholder > .message): Deleted.
+
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        (WI.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
+        (WI.NavigationSidebarPanel.prototype._createEmptyContentPlaceholderIfNeeded):
+
+        * UserInterface/Views/NetworkTableContentView.css:
+        (.content-view.network .message-text-view):
+        (.content-view.network .message-text-view > .message):
+        Workaround to prevent "No Filter Results" message from being styled like
+        "full width" messages displayed in ContentViews (large, bold font).
+        This is needed because the placeholder message element is a immediate child
+        of the network content view, rather than the network table.
+
+        (.content-view.network .empty-content-placeholder): Deleted.
+        (body[dir=ltr] .content-view.network .empty-content-placeholder): Deleted.
+        (body[dir=rtl] .content-view.network .empty-content-placeholder): Deleted.
+        (.content-view.network .empty-content-placeholder > .message): Deleted.
+
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView.prototype._showEmptyFilterResultsMessage):
+
+        * UserInterface/Views/RecordingNavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation.recording > .content):
+        (.sidebar > .panel.navigation.recording > :matches(.content, .empty-content-placeholder)): Deleted.
+
+        * UserInterface/Views/ResourceSidebarPanel.css:
+        (.sidebar > .panel.navigation.resource > .content):
+        (.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)): Deleted.
+
+        * UserInterface/Views/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .rules > .message-text-view):
+        (.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .message-text-view):
+        (.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results): Deleted.
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results): Deleted.
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message): Deleted.
+
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WI.RulesStyleDetailsPanel):
+
+        * UserInterface/Views/SearchSidebarPanel.css:
+        (.sidebar > .panel.navigation.search > :matches(.content, .message-text-view)):
+        (.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view)):
+        (.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder)): Deleted.
+        (.sidebar > .panel.navigation.search.changed > :matches(.content, .empty-content-placeholder)): Deleted.
+
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+        (WI.SpreadsheetRulesStyleDetailsPanel):
+
+        * UserInterface/Views/StorageSidebarPanel.css:
+        (.sidebar > .panel.navigation.storage > .content):
+        (.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder)): Deleted.
+
+        * UserInterface/Views/Variables.css:
+        (:root):
+
 2017-11-29  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Styles Redesign: can't add new property after property without trailing semicolon
index 231221a..80145ae 100644 (file)
@@ -609,6 +609,7 @@ localizedStrings["No Application Cache information available"] = "No Application
 localizedStrings["No Attributes"] = "No Attributes";
 localizedStrings["No Box Model Information"] = "No Box Model Information";
 localizedStrings["No Breakpoints"] = "No Breakpoints";
+localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
 localizedStrings["No Canvas Selected"] = "No Canvas Selected";
 localizedStrings["No Chart Available"] = "No Chart Available";
 localizedStrings["No Child Layers"] = "No Child Layers";
@@ -627,7 +628,6 @@ localizedStrings["No Response Headers"] = "No Response Headers";
 localizedStrings["No Results Found"] = "No Results Found";
 localizedStrings["No Search Results"] = "No Search Results";
 localizedStrings["No Watch Expressions"] = "No Watch Expressions";
-localizedStrings["No canvas contexts found"] = "No canvas contexts found";
 localizedStrings["No matching ARIA role"] = "No matching ARIA role";
 localizedStrings["No preview available"] = "No preview available";
 localizedStrings["No request cookies."] = "No request cookies.";
@@ -1014,6 +1014,7 @@ localizedStrings["View variable value"] = "View variable value";
 localizedStrings["Visibility"] = "Visibility";
 localizedStrings["Visible"] = "Visible";
 localizedStrings["Waiting"] = "Waiting";
+localizedStrings["Waiting for canvas contexts created by script or CSS."] = "Waiting for canvas contexts created by script or CSS.";
 localizedStrings["Waiting for frames…"] = "Waiting for frames…";
 localizedStrings["Warning"] = "Warning";
 localizedStrings["Warning: "] = "Warning: ";
index 2c013e3..1377301 100644 (file)
@@ -2243,7 +2243,9 @@ WI.createMessageTextView = function(message, isError)
     if (isError)
         messageElement.classList.add("error");
 
-    messageElement.textContent = message;
+    let textElement = messageElement.appendChild(document.createElement("div"));
+    textElement.className = "message";
+    textElement.textContent = message;
 
     return messageElement;
 };
index 99ee84c..95e22bd 100644 (file)
     margin: 4px 0;
     -webkit-padding-start: 22.5px;
 }
-
-.sidebar > .panel.details.canvas > .content > .empty-content-placeholder {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 15px 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message {
-    display: inline-block;
-    padding: 5px 15px 6px;
-    font-size: var(--sidebar-no-results-message-font-size);
-    white-space: nowrap;
-    color: var(--text-color-gray-medium);
-}
index a483e40..5f2545d 100644 (file)
@@ -148,12 +148,7 @@ WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
         this._backtraceSection.element.hidden = true;
         this._sections.push(this._backtraceSection);
 
-        this._emptyContentPlaceholder = document.createElement("div");
-        this._emptyContentPlaceholder.className = "empty-content-placeholder";
-
-        let emptyContentPlaceholderMessage = this._emptyContentPlaceholder.appendChild(document.createElement("div"));
-        emptyContentPlaceholderMessage.className = "message";
-        emptyContentPlaceholderMessage.textContent = WI.UIString("No Canvas Selected");
+        this._emptyContentPlaceholder = WI.createMessageTextView(WI.UIString("No Canvas Selected"));
     }
 
     layout()
index d7276d2..2533f47 100644 (file)
@@ -29,7 +29,12 @@ WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
     {
         console.assert(representedObject instanceof WI.CanvasCollection);
 
-        super(representedObject, WI.CanvasContentView, WI.UIString("No canvas contexts found"));
+        let contentPlaceholder = WI.createMessageTextView(WI.UIString("No Canvas Contexts"));
+        let descriptionElement = contentPlaceholder.appendChild(document.createElement("div"));
+        descriptionElement.className = "description";
+        descriptionElement.textContent = WI.UIString("Waiting for canvas contexts created by script or CSS.");
+
+        super(representedObject, WI.CanvasContentView, contentPlaceholder);
 
         this.element.classList.add("canvas-overview");
 
index bfdfafc..87bb924 100644 (file)
@@ -26,7 +26,7 @@
 .content-view.collection {
     display: flex;
     flex-wrap: wrap;
-    overflow-y: scroll !important;
+    overflow-y: auto !important;
 }
 
 .content-view.collection > .content-view {
index 129a0ce..1209f00 100644 (file)
@@ -25,7 +25,7 @@
 
 WI.CollectionContentView = class CollectionContentView extends WI.ContentView
 {
-    constructor(collection, contentViewConstructor, contentPlaceholderText)
+    constructor(collection, contentViewConstructor, contentPlaceholder)
     {
         console.assert(collection instanceof WI.Collection);
 
@@ -33,7 +33,8 @@ WI.CollectionContentView = class CollectionContentView extends WI.ContentView
 
         this.element.classList.add("collection");
 
-        this._contentPlaceholderText = contentPlaceholderText || collection.displayName;
+        this._contentPlaceholder = contentPlaceholder || collection.displayName;
+        this._contentPlaceholderElement = null;
         this._contentViewConstructor = contentViewConstructor;
         this._contentViewMap = new Map;
         this._handleClickMap = new WeakMap;
@@ -248,18 +249,20 @@ WI.CollectionContentView = class CollectionContentView extends WI.ContentView
 
     _showContentPlaceholder()
     {
-        if (!this._contentPlaceholder)
-            this._contentPlaceholder = new WI.TitleView(this._contentPlaceholderText);
+        if (!this._contentPlaceholderElement) {
+            if (typeof this._contentPlaceholder === "string")
+                this._contentPlaceholderElement = WI.createMessageTextView(this._contentPlaceholder);
+            else if (this._contentPlaceholder instanceof HTMLElement)
+                this._contentPlaceholderElement =  this._contentPlaceholder;
+        }
 
-        if (!this._contentPlaceholder.parentView)
-            this.addSubview(this._contentPlaceholder);
+        if (!this._contentPlaceholderElement.parentNode)
+            this.element.appendChild(this._contentPlaceholderElement);
     }
 
     _hideContentPlaceholder()
     {
-        this.addSubview.cancelDebounce();
-
-        if (this._contentPlaceholder && this._contentPlaceholder.parentView)
-            this.removeSubview(this._contentPlaceholder);
+        if (this._contentPlaceholderElement)
+            this._contentPlaceholderElement.remove();
     }
 };
index 31b269c..3fad9c3 100644 (file)
 .content-view .details-section:last-child {
     border-bottom: none;
 }
+
+.content-view > .message-text-view {
+    background-color: var(--panel-background-color-light);
+}
+
+.content-view > .message-text-view > .message {
+    font-size: var(--message-text-view-large-font-size);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
index e84cd76..a954cdf 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.debugger > .content {
     top: var(--navigation-bar-height);
 }
 
index 79d37f4..6c4be7b 100644 (file)
@@ -301,6 +301,10 @@ body[dir=rtl] .details-section > .content > .group > .row.simple > .value .go-to
     padding: 4px 6px;
 }
 
+.details-section > .content > .group > .row > .message-text-view {
+    position: static;
+}
+
 .details-section > .content .data-grid {
     border-left: none;
     border-right: none;
index 61ab302..2130203 100644 (file)
@@ -165,6 +165,7 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
 
 .message-text-view {
     display: flex;
+    flex-direction: column;
     z-index: var(--z-index-popover);
 
     position: absolute;
@@ -173,25 +174,23 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
     right: 0;
     bottom: 0;
 
-    padding-left: 20%;
-    padding-right: 20%;
-
     justify-content: center;
     align-items: center;
 
-    line-height: 20px;
     white-space: pre-wrap;
     text-align: center;
+    font-size: 13px;
+    color: var(--text-color-gray-medium);
+}
 
-    font-size: 18px;
-    font-weight: bold;
-
-    color: hsl(0, 0%, 74%);
-    background-color: white;
+.message-text-view > .message {
+    display: inline-block;
+    padding: 15px;
+    font-size: var(--message-text-view-font-size);
 }
 
 .message-text-view.error {
-    color: hsl(0, 86%, 47%);
+    color: var(--error-text-color);
 }
 
 .resource-link {
index e51be5e..495fc06 100644 (file)
 
     border-bottom: 1px solid var(--border-color);
 }
-
-.sidebar > .panel.navigation > .content .empty-content-placeholder {
-    left: 0;
-    right: 0;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.sidebar > .panel.navigation > .content > .empty-content-placeholder {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    padding: 0;
-}
-
-.sidebar > .panel.navigation > .content .empty-content-placeholder > .message {
-    display: inline-block;
-    white-space: nowrap;
-
-    font-size: var(--sidebar-no-results-message-font-size);
-    color: var(--text-color-gray-medium);
-
-    padding: 5px 15px 6px;
-}
index 1734c93..180f41f 100644 (file)
@@ -253,12 +253,10 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
 
         treeOutline = treeOutline || this._contentTreeOutline;
 
-        let emptyContentPlaceholderElement = this._createEmptyContentPlaceholderIfNeeded(treeOutline);
-        if (emptyContentPlaceholderElement.parentNode && emptyContentPlaceholderElement.children[0].textContent === message)
+        let emptyContentPlaceholderElement = this._createEmptyContentPlaceholderIfNeeded(treeOutline, message);
+        if (emptyContentPlaceholderElement.parentNode)
             return;
 
-        emptyContentPlaceholderElement.children[0].textContent = message;
-
         let emptyContentPlaceholderParentElement = treeOutline.element.parentNode;
         emptyContentPlaceholderParentElement.appendChild(emptyContentPlaceholderElement);
 
@@ -715,20 +713,15 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
         }
     }
 
-    _createEmptyContentPlaceholderIfNeeded(treeOutline)
+    _createEmptyContentPlaceholderIfNeeded(treeOutline, message)
     {
         let emptyContentPlaceholderElement = this._emptyContentPlaceholderElements.get(treeOutline);
         if (emptyContentPlaceholderElement)
             return emptyContentPlaceholderElement;
 
-        emptyContentPlaceholderElement = document.createElement("div");
-        emptyContentPlaceholderElement.classList.add(WI.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName);
+        emptyContentPlaceholderElement = WI.createMessageTextView(message);
         this._emptyContentPlaceholderElements.set(treeOutline, emptyContentPlaceholderElement);
 
-        let emptyContentPlaceholderMessageElement = document.createElement("div");
-        emptyContentPlaceholderMessageElement.className = WI.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName;
-        emptyContentPlaceholderElement.appendChild(emptyContentPlaceholderMessageElement);
-
         return emptyContentPlaceholderElement;
     }
 
@@ -754,5 +747,3 @@ WI.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol = Symbol("was-expande
 
 WI.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
 WI.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
-WI.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
-WI.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
index bdbcbc0..4345fd5 100644 (file)
@@ -116,39 +116,14 @@ body[dir=rtl] .network-table .cell.name > .status {
     top: calc(var(--navigation-bar-height) - var(--timeline-ruler-height));
 }
 
-.content-view.network .empty-content-placeholder {
-    position: absolute;
+.content-view.network .message-text-view {
     top: var(--navigation-bar-height);
-    bottom: 0;
-    padding: 0;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
     background: var(--odd-zebra-stripe-row-background-color);
-    --empty-content-placeholder-start: 0;
-}
-
-body[dir=ltr] .content-view.network .empty-content-placeholder {
-    left: var(--empty-content-placeholder-start);
 }
 
-body[dir=rtl] .content-view.network .empty-content-placeholder {
-    right: var(--empty-content-placeholder-start);
-}
-
-.content-view.network .empty-content-placeholder > .message {
-    display: inline-block;
-    white-space: nowrap;
-
-    font-size: var(--sidebar-no-results-message-font-size);
-    color: var(--text-color-gray-medium);
-
-    padding: 5px 15px 6px;
-    line-height: 25px;
-    text-align: center;
+.content-view.network .message-text-view > .message {
+    font-size: var(--message-text-view-font-size);
+    font-weight: normal;
 }
 
 .waterfall .block {
index e8f5598..3e2b6e9 100644 (file)
@@ -1042,17 +1042,12 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
     _showEmptyFilterResultsMessage()
     {
         if (!this._emptyFilterResultsMessageElement) {
-            let message = WI.UIString("No Filter Results");
             let buttonElement = document.createElement("button");
             buttonElement.textContent = WI.UIString("Clear filters");
             buttonElement.addEventListener("click", () => { this._resetFilters(); });
 
-            this._emptyFilterResultsMessageElement = document.createElement("div");
-            this._emptyFilterResultsMessageElement.className = "empty-content-placeholder";
-
-            let messageElement = this._emptyFilterResultsMessageElement.appendChild(document.createElement("div"));
-            messageElement.className = "message";
-            messageElement.append(message, document.createElement("br"), buttonElement);
+            this._emptyFilterResultsMessageElement = WI.createMessageTextView(WI.UIString("No Filter Results"));
+            this._emptyFilterResultsMessageElement.appendChild(buttonElement);
         }
 
         this.element.appendChild(this._emptyFilterResultsMessageElement);
index 5e88c74..9b6970e 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.navigation.recording > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.recording > .content {
     top: var(--navigation-bar-height);
 }
 
index 3109735..fae633e 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.resource > .content {
     top: var(--navigation-bar-height);
 }
 
index 0767fcb..1983008 100644 (file)
     padding-top: 15px;
 }
 
-.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results {
-    display: none;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.sidebar > .panel.details.css-style > .content > .rules > .message-text-view {
+    top: var(--navigation-bar-height);
 }
 
-.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
-    padding: 5px 15px 6px;
-    font-size: var(--sidebar-no-results-message-font-size);
-    color: var(--text-color-gray-medium);
+.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .message-text-view {
+    display: none;
 }
index 066e25a..4fa77ea 100644 (file)
@@ -35,13 +35,7 @@ WI.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WI.StyleDetails
         this._ruleMediaAndInherticanceList = [];
         this._propertyToSelectAndHighlight = null;
 
-        this._emptyFilterResultsElement = document.createElement("div");
-        this._emptyFilterResultsElement.classList.add("no-filter-results");
-
-        this._emptyFilterResultsMessage = document.createElement("div");
-        this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
-        this._emptyFilterResultsMessage.textContent = WI.UIString("No Results Found");
-        this._emptyFilterResultsElement.appendChild(this._emptyFilterResultsMessage);
+        this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
 
         this._boundRemoveSectionWithActiveEditor = this._removeSectionWithActiveEditor.bind(this);
     }
index cb357fe..ce2fc0b 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.search > :matches(.content, .message-text-view) {
     top: calc(var(--navigation-bar-height) - 1px);
 }
 
@@ -75,6 +75,6 @@ body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
     cursor: pointer;
 }
 
-.sidebar > .panel.navigation.search.changed > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view) {
     top: calc(var(--navigation-bar-height) + 40px - 1px);
 }
index f93fb6d..663c0b6 100644 (file)
@@ -40,12 +40,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         this._ruleMediaAndInherticanceList = [];
         this._propertyToSelectAndHighlight = null;
 
-        this._emptyFilterResultsElement = document.createElement("div");
-        this._emptyFilterResultsElement.classList.add("no-filter-results");
-
-        this._emptyFilterResultsMessage = this._emptyFilterResultsElement.appendChild(document.createElement("div"));
-        this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
-        this._emptyFilterResultsMessage.textContent = WI.UIString("No Results Found");
+        this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
     }
 
     // Public
index d418a9f..d83329d 100644 (file)
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder) {
+.sidebar > .panel.navigation.storage > .content {
     top: var(--navigation-bar-height);
 }
 
index 34b3873..4339f61 100644 (file)
@@ -59,7 +59,8 @@
     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
     --console-prompt-min-height: 30px;
 
-    --sidebar-no-results-message-font-size: 16px;
+    --message-text-view-font-size: 16px;
+    --message-text-view-large-font-size: 28px;
 
     --text-color-gray-dark: hsl(0, 0%, 20%);
     --text-color-gray-medium: hsl(0, 0%, 52%);