Web Inspector: Canvas Tab: clicking on a canvas card causes details sidebar to show...
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 23:13:19 +0000 (23:13 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 23:13:19 +0000 (23:13 +0000)
https://bugs.webkit.org/show_bug.cgi?id=178803
<rdar://problem/35176082>

Reviewed by Brian Burg.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/CanvasDetailsSidebarPanel.css:
(.sidebar > .panel.details.canvas > .content > .empty-content-placeholder):
(.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message):
* UserInterface/Views/CanvasDetailsSidebarPanel.js:
(WI.CanvasDetailsSidebarPanel):
(WI.CanvasDetailsSidebarPanel.prototype.inspect):
(WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
(WI.CanvasDetailsSidebarPanel.prototype.layout):

* UserInterface/Views/RecordingNavigationSidebarPanel.js:
(WI.RecordingNavigationSidebarPanel.disallowInstanceForClass): Deleted.
* UserInterface/Views/RecordingStateDetailsSidebarPanel.js:
(WI.RecordingStateDetailsSidebarPanel.disallowInstanceForClass): Deleted.
* UserInterface/Views/RecordingTraceDetailsSidebarPanel.js:
(WI.RecordingTraceDetailsSidebarPanel.disallowInstanceForClass): Deleted.
Drive-by: these sidebar panels are now only used by the Canvas tab, so we no longer need to
provide support for multiple instances of them.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js

index c5ee9e7..04a001d 100644 (file)
@@ -1,3 +1,30 @@
+2017-10-25  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas Tab: clicking on a canvas card causes details sidebar to show and mess up card arrangement
+        https://bugs.webkit.org/show_bug.cgi?id=178803
+        <rdar://problem/35176082>
+
+        Reviewed by Brian Burg.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Views/CanvasDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder):
+        (.sidebar > .panel.details.canvas > .content > .empty-content-placeholder > .message):
+        * UserInterface/Views/CanvasDetailsSidebarPanel.js:
+        (WI.CanvasDetailsSidebarPanel):
+        (WI.CanvasDetailsSidebarPanel.prototype.inspect):
+        (WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
+        (WI.CanvasDetailsSidebarPanel.prototype.layout):
+
+        * UserInterface/Views/RecordingNavigationSidebarPanel.js:
+        (WI.RecordingNavigationSidebarPanel.disallowInstanceForClass): Deleted.
+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.js:
+        (WI.RecordingStateDetailsSidebarPanel.disallowInstanceForClass): Deleted.
+        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js:
+        (WI.RecordingTraceDetailsSidebarPanel.disallowInstanceForClass): Deleted.
+        Drive-by: these sidebar panels are now only used by the Canvas tab, so we no longer need to
+        provide support for multiple instances of them.
+
 2017-10-25  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Display fetch() initiated loads as "fetch" instead of "xhr" in the Network Tab
index f9159ae..9494583 100644 (file)
@@ -165,7 +165,6 @@ localizedStrings["Canvas"] = "Canvas";
 localizedStrings["Canvas %d"] = "Canvas %d";
 localizedStrings["Canvas %s"] = "Canvas %s";
 localizedStrings["Canvas Overview"] = "Canvas Overview";
-localizedStrings["Canvas:"] = "Canvas:";
 localizedStrings["Canvases"] = "Canvases";
 localizedStrings["Cap"] = "Cap";
 localizedStrings["Caps"] = "Caps";
@@ -363,7 +362,6 @@ localizedStrings["Element overlaps other compositing element"] = "Element overla
 localizedStrings["Elements"] = "Elements";
 localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
 localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";
-localizedStrings["Enable Canvas Tab"] = "Enable Canvas Tab";
 localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";
 localizedStrings["Enable Program"] = "Enable Program";
 localizedStrings["Enable all breakpoints (%s)"] = "Enable all breakpoints (%s)";
@@ -606,6 +604,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 Selected"] = "No Canvas Selected";
 localizedStrings["No Chart Available"] = "No Chart Available";
 localizedStrings["No Child Layers"] = "No Child Layers";
 localizedStrings["No Entries"] = "No Entries";
@@ -834,7 +833,6 @@ localizedStrings["Show All"] = "Show All";
 localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
 localizedStrings["Show Console"] = "Show Console";
 localizedStrings["Show Console tab"] = "Show Console tab";
-localizedStrings["Show Contexts in Resources Tab"] = "Show Contexts in Resources Tab";
 localizedStrings["Show Grid"] = "Show Grid";
 localizedStrings["Show Path"] = "Show Path";
 localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
index 864a65f..1bc98a5 100644 (file)
 .sidebar > .panel.details.canvas .details-section > .content .row.simple > .value > .node-link {
     display: block;
 }
+
+.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 8c008de..f13b55c 100644 (file)
@@ -33,6 +33,9 @@ WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
 
         this._canvas = null;
         this._node = null;
+
+        this._sections = [];
+        this._emptyContentPlaceholder = null;
     }
 
     // Public
@@ -52,7 +55,7 @@ WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
 
         this.canvas = objects.find((object) => object instanceof WI.Canvas);
 
-        return !!this._canvas;
+        return true;
     }
 
     get canvas()
@@ -100,7 +103,7 @@ WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
 
         let identitySection = new WI.DetailsSection("canvas-details", WI.UIString("Identity"));
         identitySection.groups = [new WI.DetailsSectionGroup([this._nameRow, this._typeRow, this._memoryRow])];
-        this.contentView.element.appendChild(identitySection.element);
+        this._sections.push(identitySection);
 
         this._nodeRow = new WI.DetailsSectionSimpleRow(WI.UIString("Node"));
         this._cssCanvasRow = new WI.DetailsSectionSimpleRow(WI.UIString("CSS Canvas"));
@@ -110,28 +113,41 @@ WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
 
         let sourceSection = new WI.DetailsSection("canvas-source", WI.UIString("Source"));
         sourceSection.groups = [new WI.DetailsSectionGroup([this._nodeRow, this._cssCanvasRow, this._widthRow, this._heightRow, this._datachedRow])];
-        this.contentView.element.appendChild(sourceSection.element);
+        this._sections.push(sourceSection);
 
         this._attributesDataGridRow = new WI.DetailsSectionDataGridRow(null, WI.UIString("No Attributes"));
 
         let attributesSection = new WI.DetailsSection("canvas-attributes", WI.UIString("Attributes"));
         attributesSection.groups = [new WI.DetailsSectionGroup([this._attributesDataGridRow])];
-        this.contentView.element.appendChild(attributesSection.element);
+        this._sections.push(attributesSection);
 
         this._cssCanvasClientsRow = new WI.DetailsSectionSimpleRow(WI.UIString("Nodes"));
 
         this._cssCanvasSection = new WI.DetailsSection("canvas-css", WI.UIString("CSS"));
         this._cssCanvasSection.groups = [new WI.DetailsSectionGroup([this._cssCanvasClientsRow])];
         this._cssCanvasSection.element.hidden = true;
-        this.contentView.element.appendChild(this._cssCanvasSection.element);
+        this._sections.push(this._cssCanvasSection);
+
+        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");
     }
 
     layout()
     {
         super.layout();
 
-        if (!this._canvas)
+        this.contentView.element.removeChildren();
+
+        if (!this._canvas) {
+            this.contentView.element.appendChild(this._emptyContentPlaceholder);
             return;
+        }
+
+        this.contentView.element.append(...this._sections.map(section => section.element));
 
         this._refreshIdentitySection();
         this._refreshSourceSection();
index 126ed31..491eb3f 100644 (file)
@@ -38,13 +38,6 @@ WI.RecordingNavigationSidebarPanel = class RecordingNavigationSidebarPanel exten
         this._exportButton = null;
     }
 
-    // Static
-
-    static disallowInstanceForClass()
-    {
-        return true;
-    }
-
     // Public
 
     set recording(recording)
index a7e33df..97d528b 100644 (file)
@@ -35,13 +35,6 @@ WI.RecordingStateDetailsSidebarPanel = class RecordingStateDetailsSidebarPanel e
         this._dataGrid = null;
     }
 
-    // Static
-
-    static disallowInstanceForClass()
-    {
-        return true;
-    }
-
     // Public
 
     inspect(objects)
index fab87b9..d9416e1 100644 (file)
@@ -33,13 +33,6 @@ WI.RecordingTraceDetailsSidebarPanel = class RecordingTraceDetailsSidebarPanel e
         this._action = null;
     }
 
-    // Static
-
-    static disallowInstanceForClass()
-    {
-        return true;
-    }
-
     // Public
 
     inspect(objects)