Changeset 225487 in webkit


Ignore:
Timestamp:
Dec 4, 2017 12:40:27 PM (6 years ago)
Author:
Matt Baker
Message:

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):

Location:
trunk/Source/WebInspectorUI
Files:
24 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r225299 r225487  
     12017-12-04  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Canvas Tab initial user interface needs some polish
     4        https://bugs.webkit.org/show_bug.cgi?id=179330
     5        <rdar://problem/35367581>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        Update the Canvas overview placeholder text and prevent appearance of
     10        the vertical scrollbar when no canvases exist. This patch also includes
     11        a bunch of cleanup of code that creates content placeholder text throughout
     12        the UI, and makes sure all text is styled consistently.
     13
     14        * Localizations/en.lproj/localizedStrings.js:
     15        Updated Canvas overview message text.
     16
     17        * UserInterface/Base/Main.js:
     18        Make the "message text view" a container with child message element, instead
     19        of a simple element with text content. This makes it simpler to customize
     20        the message (by adding buttons, more text, etc).
     21
     22        * UserInterface/Views/CanvasDetailsSidebarPanel.css:
     23        (.sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul):
     24        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder): Deleted.
     25        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message): Deleted.
     26        * UserInterface/Views/CanvasDetailsSidebarPanel.js:
     27        (WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
     28
     29        * UserInterface/Views/CanvasOverviewContentView.js:
     30        (WI.CanvasOverviewContentView):
     31        Customize the content placeholder to include a description beneath
     32        the "No Canvas Contexts" message.
     33
     34        * UserInterface/Views/CollectionContentView.css:
     35        (.content-view.collection):
     36        Change overflow-y to auto, to prevent scrollbar from appearing when
     37        "Show scroll bars" system preference is enabled on macOS.
     38
     39        * UserInterface/Views/CollectionContentView.js:
     40        Add support for custom content placeholders.
     41        (WI.CollectionContentView):
     42        (WI.CollectionContentView.prototype._showContentPlaceholder):
     43        (WI.CollectionContentView.prototype._hideContentPlaceholder):
     44
     45        * UserInterface/Views/ContentView.css:
     46        (.content-view > .message-text-view):
     47        (.content-view > .message-text-view > .message):
     48
     49        * UserInterface/Views/DebuggerSidebarPanel.css:
     50        (.sidebar > .panel.navigation.debugger > .content):
     51        (.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder)): Deleted.
     52
     53        * UserInterface/Views/DetailsSection.css:
     54        (.details-section > .content > .group > .row > .message-text-view):
     55
     56        * UserInterface/Views/Main.css:
     57        (.message-text-view):
     58        (.message-text-view > .message):
     59        (.message-text-view.error):
     60
     61        * UserInterface/Views/NavigationSidebarPanel.css:
     62        (.sidebar > .panel.navigation > .overflow-shadow):
     63        (.sidebar > .panel.navigation > .content .empty-content-placeholder): Deleted.
     64        (.sidebar > .panel.navigation > .content > .empty-content-placeholder): Deleted.
     65        (.sidebar > .panel.navigation > .content .empty-content-placeholder > .message): Deleted.
     66
     67        * UserInterface/Views/NavigationSidebarPanel.js:
     68        (WI.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
     69        (WI.NavigationSidebarPanel.prototype._createEmptyContentPlaceholderIfNeeded):
     70
     71        * UserInterface/Views/NetworkTableContentView.css:
     72        (.content-view.network .message-text-view):
     73        (.content-view.network .message-text-view > .message):
     74        Workaround to prevent "No Filter Results" message from being styled like
     75        "full width" messages displayed in ContentViews (large, bold font).
     76        This is needed because the placeholder message element is a immediate child
     77        of the network content view, rather than the network table.
     78
     79        (.content-view.network .empty-content-placeholder): Deleted.
     80        (body[dir=ltr] .content-view.network .empty-content-placeholder): Deleted.
     81        (body[dir=rtl] .content-view.network .empty-content-placeholder): Deleted.
     82        (.content-view.network .empty-content-placeholder > .message): Deleted.
     83
     84        * UserInterface/Views/NetworkTableContentView.js:
     85        (WI.NetworkTableContentView.prototype._showEmptyFilterResultsMessage):
     86
     87        * UserInterface/Views/RecordingNavigationSidebarPanel.css:
     88        (.sidebar > .panel.navigation.recording > .content):
     89        (.sidebar > .panel.navigation.recording > :matches(.content, .empty-content-placeholder)): Deleted.
     90
     91        * UserInterface/Views/ResourceSidebarPanel.css:
     92        (.sidebar > .panel.navigation.resource > .content):
     93        (.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)): Deleted.
     94
     95        * UserInterface/Views/RulesStyleDetailsPanel.css:
     96        (.sidebar > .panel.details.css-style > .content > .rules > .message-text-view):
     97        (.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .message-text-view):
     98        (.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results): Deleted.
     99        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results): Deleted.
     100        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message): Deleted.
     101
     102        * UserInterface/Views/RulesStyleDetailsPanel.js:
     103        (WI.RulesStyleDetailsPanel):
     104
     105        * UserInterface/Views/SearchSidebarPanel.css:
     106        (.sidebar > .panel.navigation.search > :matches(.content, .message-text-view)):
     107        (.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view)):
     108        (.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder)): Deleted.
     109        (.sidebar > .panel.navigation.search.changed > :matches(.content, .empty-content-placeholder)): Deleted.
     110
     111        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     112        (WI.SpreadsheetRulesStyleDetailsPanel):
     113
     114        * UserInterface/Views/StorageSidebarPanel.css:
     115        (.sidebar > .panel.navigation.storage > .content):
     116        (.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder)): Deleted.
     117
     118        * UserInterface/Views/Variables.css:
     119        (:root):
     120
    11212017-11-29  Nikita Vasilyev  <nvasilyev@apple.com>
    2122

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r225257 r225487  
    610610localizedStrings["No Box Model Information"] = "No Box Model Information";
    611611localizedStrings["No Breakpoints"] = "No Breakpoints";
     612localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
    612613localizedStrings["No Canvas Selected"] = "No Canvas Selected";
    613614localizedStrings["No Chart Available"] = "No Chart Available";
    … …  
    628629localizedStrings["No Search Results"] = "No Search Results";
    629630localizedStrings["No Watch Expressions"] = "No Watch Expressions";
    630 localizedStrings["No canvas contexts found"] = "No canvas contexts found";
    631631localizedStrings["No matching ARIA role"] = "No matching ARIA role";
    632632localizedStrings["No preview available"] = "No preview available";
    … …  
    10151015localizedStrings["Visible"] = "Visible";
    10161016localizedStrings["Waiting"] = "Waiting";
     1017localizedStrings["Waiting for canvas contexts created by script or CSS."] = "Waiting for canvas contexts created by script or CSS.";
    10171018localizedStrings["Waiting for frames…"] = "Waiting for frames…";
    10181019localizedStrings["Warning"] = "Warning";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r225280 r225487  
    22442244        messageElement.classList.add("error");
    22452245
    2246     messageElement.textContent = message;
     2246    let textElement = messageElement.appendChild(document.createElement("div"));
     2247    textElement.className = "message";
     2248    textElement.textContent = message;
    22472249
    22482250    return messageElement;

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

    r225259 r225487  
    3232    -webkit-padding-start: 22.5px;
    3333}
    34 
    35 .sidebar > .panel.details.canvas > .content > .empty-content-placeholder {
    36     position: absolute;
    37     top: 0;
    38     right: 0;
    39     bottom: 0;
    40     left: 0;
    41     padding: 15px 0;
    42     display: flex;
    43     justify-content: center;
    44     align-items: center;
    45     overflow: hidden;
    46 }
    47 
    48 .sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message {
    49     display: inline-block;
    50     padding: 5px 15px 6px;
    51     font-size: var(--sidebar-no-results-message-font-size);
    52     white-space: nowrap;
    53     color: var(--text-color-gray-medium);
    54 }

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

    r225261 r225487  
    149149        this._sections.push(this._backtraceSection);
    150150
    151         this._emptyContentPlaceholder = document.createElement("div");
    152         this._emptyContentPlaceholder.className = "empty-content-placeholder";
    153 
    154         let emptyContentPlaceholderMessage = this._emptyContentPlaceholder.appendChild(document.createElement("div"));
    155         emptyContentPlaceholderMessage.className = "message";
    156         emptyContentPlaceholderMessage.textContent = WI.UIString("No Canvas Selected");
     151        this._emptyContentPlaceholder = WI.createMessageTextView(WI.UIString("No Canvas Selected"));
    157152    }
    158153

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

    r224081 r225487  
    3030        console.assert(representedObject instanceof WI.CanvasCollection);
    3131
    32         super(representedObject, WI.CanvasContentView, WI.UIString("No canvas contexts found"));
     32        let contentPlaceholder = WI.createMessageTextView(WI.UIString("No Canvas Contexts"));
     33        let descriptionElement = contentPlaceholder.appendChild(document.createElement("div"));
     34        descriptionElement.className = "description";
     35        descriptionElement.textContent = WI.UIString("Waiting for canvas contexts created by script or CSS.");
     36
     37        super(representedObject, WI.CanvasContentView, contentPlaceholder);
    3338
    3439        this.element.classList.add("canvas-overview");

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

    r221748 r225487  
    2727    display: flex;
    2828    flex-wrap: wrap;
    29     overflow-y: scroll !important;
     29    overflow-y: auto !important;
    3030}
    3131

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

    r223997 r225487  
    2626WI.CollectionContentView = class CollectionContentView extends WI.ContentView
    2727{
    28     constructor(collection, contentViewConstructor, contentPlaceholderText)
     28    constructor(collection, contentViewConstructor, contentPlaceholder)
    2929    {
    3030        console.assert(collection instanceof WI.Collection);
    … …  
    3434        this.element.classList.add("collection");
    3535
    36         this._contentPlaceholderText = contentPlaceholderText || collection.displayName;
     36        this._contentPlaceholder = contentPlaceholder || collection.displayName;
     37        this._contentPlaceholderElement = null;
    3738        this._contentViewConstructor = contentViewConstructor;
    3839        this._contentViewMap = new Map;
    … …  
    249250    _showContentPlaceholder()
    250251    {
    251         if (!this._contentPlaceholder)
    252             this._contentPlaceholder = new WI.TitleView(this._contentPlaceholderText);
    253 
    254         if (!this._contentPlaceholder.parentView)
    255             this.addSubview(this._contentPlaceholder);
     252        if (!this._contentPlaceholderElement) {
     253            if (typeof this._contentPlaceholder === "string")
     254                this._contentPlaceholderElement = WI.createMessageTextView(this._contentPlaceholder);
     255            else if (this._contentPlaceholder instanceof HTMLElement)
     256                this._contentPlaceholderElement =  this._contentPlaceholder;
     257        }
     258
     259        if (!this._contentPlaceholderElement.parentNode)
     260            this.element.appendChild(this._contentPlaceholderElement);
    256261    }
    257262
    258263    _hideContentPlaceholder()
    259264    {
    260         this.addSubview.cancelDebounce();
    261 
    262         if (this._contentPlaceholder && this._contentPlaceholder.parentView)
    263             this.removeSubview(this._contentPlaceholder);
     265        if (this._contentPlaceholderElement)
     266            this._contentPlaceholderElement.remove();
    264267    }
    265268};

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

    r216147 r225487  
    5353    border-bottom: none;
    5454}
     55
     56.content-view > .message-text-view {
     57    background-color: var(--panel-background-color-light);
     58}
     59
     60.content-view > .message-text-view > .message {
     61    font-size: var(--message-text-view-large-font-size);
     62    font-weight: 600;
     63    letter-spacing: 0.02em;
     64}

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

    r214956 r225487  
    2424 */
    2525
    26 .sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder) {
     26.sidebar > .panel.navigation.debugger > .content {
    2727    top: var(--navigation-bar-height);
    2828}

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

    r217744 r225487  
    302302}
    303303
     304.details-section > .content > .group > .row > .message-text-view {
     305    position: static;
     306}
     307
    304308.details-section > .content .data-grid {
    305309    border-left: none;

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

    r223931 r225487  
    166166.message-text-view {
    167167    display: flex;
     168    flex-direction: column;
    168169    z-index: var(--z-index-popover);
    169170
    … …  
    173174    right: 0;
    174175    bottom: 0;
    175 
    176     padding-left: 20%;
    177     padding-right: 20%;
    178176
    179177    justify-content: center;
    180178    align-items: center;
    181179
    182     line-height: 20px;
    183180    white-space: pre-wrap;
    184181    text-align: center;
    185 
    186     font-size: 18px;
    187     font-weight: bold;
    188 
    189     color: hsl(0, 0%, 74%);
    190     background-color: white;
     182    font-size: 13px;
     183    color: var(--text-color-gray-medium);
     184}
     185
     186.message-text-view > .message {
     187    display: inline-block;
     188    padding: 15px;
     189    font-size: var(--message-text-view-font-size);
    191190}
    192191
    193192.message-text-view.error {
    194     color: hsl(0, 86%, 47%);
     193    color: var(--error-text-color);
    195194}
    196195

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

    r220710 r225487  
    4848    border-bottom: 1px solid var(--border-color);
    4949}
    50 
    51 .sidebar > .panel.navigation > .content .empty-content-placeholder {
    52     left: 0;
    53     right: 0;
    54     padding-top: 15px;
    55     padding-bottom: 15px;
    56     display: flex;
    57     justify-content: center;
    58     align-items: center;
    59     overflow: hidden;
    60 }
    61 
    62 .sidebar > .panel.navigation > .content > .empty-content-placeholder {
    63     position: absolute;
    64     top: 0;
    65     bottom: 0;
    66     padding: 0;
    67 }
    68 
    69 .sidebar > .panel.navigation > .content .empty-content-placeholder > .message {
    70     display: inline-block;
    71     white-space: nowrap;
    72 
    73     font-size: var(--sidebar-no-results-message-font-size);
    74     color: var(--text-color-gray-medium);
    75 
    76     padding: 5px 15px 6px;
    77 }

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

    r220119 r225487  
    254254        treeOutline = treeOutline || this._contentTreeOutline;
    255255
    256         let emptyContentPlaceholderElement = this._createEmptyContentPlaceholderIfNeeded(treeOutline);
    257         if (emptyContentPlaceholderElement.parentNode && emptyContentPlaceholderElement.children[0].textContent === message)
    258             return;
    259 
    260         emptyContentPlaceholderElement.children[0].textContent = message;
     256        let emptyContentPlaceholderElement = this._createEmptyContentPlaceholderIfNeeded(treeOutline, message);
     257        if (emptyContentPlaceholderElement.parentNode)
     258            return;
    261259
    262260        let emptyContentPlaceholderParentElement = treeOutline.element.parentNode;
    … …  
    716714    }
    717715
    718     _createEmptyContentPlaceholderIfNeeded(treeOutline)
     716    _createEmptyContentPlaceholderIfNeeded(treeOutline, message)
    719717    {
    720718        let emptyContentPlaceholderElement = this._emptyContentPlaceholderElements.get(treeOutline);
    … …  
    722720            return emptyContentPlaceholderElement;
    723721
    724         emptyContentPlaceholderElement = document.createElement("div");
    725         emptyContentPlaceholderElement.classList.add(WI.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName);
     722        emptyContentPlaceholderElement = WI.createMessageTextView(message);
    726723        this._emptyContentPlaceholderElements.set(treeOutline, emptyContentPlaceholderElement);
    727 
    728         let emptyContentPlaceholderMessageElement = document.createElement("div");
    729         emptyContentPlaceholderMessageElement.className = WI.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName;
    730         emptyContentPlaceholderElement.appendChild(emptyContentPlaceholderMessageElement);
    731724
    732725        return emptyContentPlaceholderElement;
    … …  
    755748WI.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
    756749WI.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
    757 WI.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
    758 WI.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";

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

    r224727 r225487  
    117117}
    118118
    119 .content-view.network .empty-content-placeholder {
    120     position: absolute;
     119.content-view.network .message-text-view {
    121120    top: var(--navigation-bar-height);
    122     bottom: 0;
    123     padding: 0;
    124     padding-top: 15px;
    125     padding-bottom: 15px;
    126     display: flex;
    127     justify-content: center;
    128     align-items: center;
    129     overflow: hidden;
    130121    background: var(--odd-zebra-stripe-row-background-color);
    131     --empty-content-placeholder-start: 0;
    132122}
    133123
    134 body[dir=ltr] .content-view.network .empty-content-placeholder {
    135     left: var(--empty-content-placeholder-start);
    136 }
    137 
    138 body[dir=rtl] .content-view.network .empty-content-placeholder {
    139     right: var(--empty-content-placeholder-start);
    140 }
    141 
    142 .content-view.network .empty-content-placeholder > .message {
    143     display: inline-block;
    144     white-space: nowrap;
    145 
    146     font-size: var(--sidebar-no-results-message-font-size);
    147     color: var(--text-color-gray-medium);
    148 
    149     padding: 5px 15px 6px;
    150     line-height: 25px;
    151     text-align: center;
     124.content-view.network .message-text-view > .message {
     125    font-size: var(--message-text-view-font-size);
     126    font-weight: normal;
    152127}
    153128

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

    r225250 r225487  
    10431043    {
    10441044        if (!this._emptyFilterResultsMessageElement) {
    1045             let message = WI.UIString("No Filter Results");
    10461045            let buttonElement = document.createElement("button");
    10471046            buttonElement.textContent = WI.UIString("Clear filters");
    10481047            buttonElement.addEventListener("click", () => { this._resetFilters(); });
    10491048
    1050             this._emptyFilterResultsMessageElement = document.createElement("div");
    1051             this._emptyFilterResultsMessageElement.className = "empty-content-placeholder";
    1052 
    1053             let messageElement = this._emptyFilterResultsMessageElement.appendChild(document.createElement("div"));
    1054             messageElement.className = "message";
    1055             messageElement.append(message, document.createElement("br"), buttonElement);
     1049            this._emptyFilterResultsMessageElement = WI.createMessageTextView(WI.UIString("No Filter Results"));
     1050            this._emptyFilterResultsMessageElement.appendChild(buttonElement);
    10561051        }
    10571052

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

    r224389 r225487  
    2424 */
    2525
    26 .sidebar > .panel.navigation.recording > :matches(.content, .empty-content-placeholder) {
     26.sidebar > .panel.navigation.recording > .content {
    2727    top: var(--navigation-bar-height);
    2828}

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

    r202064 r225487  
    2424 */
    2525
    26 .sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
     26.sidebar > .panel.navigation.resource > .content {
    2727    top: var(--navigation-bar-height);
    2828}

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

    r220710 r225487  
    6767}
    6868
    69 .sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results {
     69.sidebar > .panel.details.css-style > .content > .rules > .message-text-view {
     70    top: var(--navigation-bar-height);
     71}
     72
     73.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .message-text-view {
    7074    display: none;
    7175}
    72 
    73 .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results {
    74     position: absolute;
    75     top: 0;
    76     left: 0;
    77     right: 0;
    78     bottom: 0;
    79     display: flex;
    80     justify-content: center;
    81     align-items: center;
    82 }
    83 
    84 .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
    85     padding: 5px 15px 6px;
    86     font-size: var(--sidebar-no-results-message-font-size);
    87     color: var(--text-color-gray-medium);
    88 }

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

    r220119 r225487  
    3636        this._propertyToSelectAndHighlight = null;
    3737
    38         this._emptyFilterResultsElement = document.createElement("div");
    39         this._emptyFilterResultsElement.classList.add("no-filter-results");
    40 
    41         this._emptyFilterResultsMessage = document.createElement("div");
    42         this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
    43         this._emptyFilterResultsMessage.textContent = WI.UIString("No Results Found");
    44         this._emptyFilterResultsElement.appendChild(this._emptyFilterResultsMessage);
     38        this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
    4539
    4640        this._boundRemoveSectionWithActiveEditor = this._removeSectionWithActiveEditor.bind(this);

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

    r217733 r225487  
    2424 */
    2525
    26 .sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder) {
     26.sidebar > .panel.navigation.search > :matches(.content, .message-text-view) {
    2727    top: calc(var(--navigation-bar-height) - 1px);
    2828}
    … …  
    7676}
    7777
    78 .sidebar > .panel.navigation.search.changed > :matches(.content, .empty-content-placeholder) {
     78.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view) {
    7979    top: calc(var(--navigation-bar-height) + 40px - 1px);
    8080}

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

    r223333 r225487  
    4141        this._propertyToSelectAndHighlight = null;
    4242
    43         this._emptyFilterResultsElement = document.createElement("div");
    44         this._emptyFilterResultsElement.classList.add("no-filter-results");
    45 
    46         this._emptyFilterResultsMessage = this._emptyFilterResultsElement.appendChild(document.createElement("div"));
    47         this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
    48         this._emptyFilterResultsMessage.textContent = WI.UIString("No Results Found");
     43        this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
    4944    }
    5045

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

    r202064 r225487  
    2424 */
    2525
    26 .sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder) {
     26.sidebar > .panel.navigation.storage > .content {
    2727    top: var(--navigation-bar-height);
    2828}

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

    r223734 r225487  
    6060    --console-prompt-min-height: 30px;
    6161
    62     --sidebar-no-results-message-font-size: 16px;
     62    --message-text-view-font-size: 16px;
     63    --message-text-view-large-font-size: 28px;
    6364
    6465    --text-color-gray-dark: hsl(0, 0%, 20%);
Note: See TracChangeset for help on using the changeset viewer.