Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (225486 => 225487)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-12-04 20:40:27 UTC (rev 225487)
@@ -1,3 +1,123 @@
+2017-12-04 Matt Baker <mattba...@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 <nvasil...@apple.com>
Web Inspector: Styles Redesign: can't add new property after property without trailing semicolon
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -609,6 +609,7 @@
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 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["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: ";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -2243,7 +2243,9 @@
if (isError)
messageElement.classList.add("error");
- messageElement.textContent = message;
+ let textElement = messageElement.appendChild(document.createElement("div"));
+ textElement.className = "message";
+ textElement.textContent = message;
return messageElement;
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -31,24 +31,3 @@
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);
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -148,12 +148,7 @@
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()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -29,8 +29,13 @@
{
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");
this._refreshButtonNavigationItem = new WI.ButtonNavigationItem("refresh-all", WI.UIString("Refresh all"), "Images/ReloadFull.svg", 13, 13);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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 @@
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 @@
_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();
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -52,3 +52,13 @@
.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;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -301,6 +301,10 @@
padding: 4px 6px;
}
+.details-section > .content > .group > .row > .message-text-view {
+ position: static;
+}
+
.details-section > .content .data-grid {
border-left: none;
border-right: none;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -165,6 +165,7 @@
.message-text-view {
display: flex;
+ flex-direction: column;
z-index: var(--z-index-popover);
position: absolute;
@@ -173,25 +174,23 @@
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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -47,31 +47,3 @@
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;
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -253,12 +253,10 @@
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 @@
}
}
- _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.OverflowShadowElementStyleClassName = "overflow-shadow";
WI.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
-WI.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
-WI.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -116,41 +116,16 @@
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);
+.content-view.network .message-text-view > .message {
+ font-size: var(--message-text-view-font-size);
+ font-weight: normal;
}
-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;
-}
-
.waterfall .block {
position: absolute;
top: 8px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -1042,17 +1042,12 @@
_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);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -66,23 +66,10 @@
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 > .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 {
- 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:not(.filter-non-matching) > .message-text-view {
+ display: none;
}
-
-.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);
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -35,14 +35,8 @@
this._ruleMediaAndInherticanceList = [];
this._propertyToSelectAndHighlight = null;
- this._emptyFilterResultsElement = document.createElement("div");
- this._emptyFilterResultsElement.classList.add("no-filter-results");
+ this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
- 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._boundRemoveSectionWithActiveEditor = this._removeSectionWithActiveEditor.bind(this);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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 @@
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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-12-04 20:40:27 UTC (rev 225487)
@@ -40,12 +40,7 @@
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
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (225486 => 225487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-12-04 20:35:05 UTC (rev 225486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-12-04 20:40:27 UTC (rev 225487)
@@ -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%);
