Title: [98348] trunk
Revision
98348
Author
yu...@chromium.org
Date
2011-10-25 08:35:50 -0700 (Tue, 25 Oct 2011)

Log Message

Web Inspector: redesign workers sidebar pane
https://bugs.webkit.org/show_bug.cgi?id=70815

Source/WebCore:

Changed workers sidebar pane design.

Now there is a link to worker inspector for each dedicated worker created
by inspected page. The sidebar display a link to a page with list of all
shared workers if there one is supported by the WebKit port. Also there
is a checkbox that allows pause all new workers on first statements.

Reviewed by Pavel Feldman.

* inspector/front-end/Settings.js:
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype._rebuildSectionsForStyleRules):
* inspector/front-end/WorkerManager.js:
(WebInspector.WorkerManager.prototype.openWorkerInspector):
(WebInspector.WorkerManager.prototype._workerInspectorClosing):
* inspector/front-end/WorkersSidebarPane.js:
(WebInspector.WorkerListSidebarPane):
(WebInspector.WorkerListSidebarPane.prototype._workerRemoved):
(WebInspector.WorkerListSidebarPane.prototype._workersCleared):
(WebInspector.WorkerListSidebarPane.prototype._addWorker):
(WebInspector.WorkerListSidebarPane.prototype._workerItemClicked):
(WebInspector.WorkerListSidebarPane.prototype._autoattachToWorkersClicked):
(WebInspector.WorkerListSidebarPane.prototype._createSharedWorkersLink.link.onclick):
(WebInspector.WorkerListSidebarPane.prototype._createSharedWorkersLink):
* inspector/front-end/elementsPanel.css:
* inspector/front-end/inspectorCommon.css:
(.sidebar-separator):
(.sidebar-label):
* inspector/front-end/scriptsPanel.css:
(.dedicated-worker-item):
(#shared-workers-list):
(#pause-workers-checkbox > input):

Source/WebKit/chromium:

Reviewed by Pavel Feldman.

* src/js/DevTools.js: Expose link to shared workers inspection page to WebCore.
():

LayoutTests:

Update tests in accord with change of class name from
styles-sidebar-pane to sidebar-pane.

Reviewed by Pavel Feldman.

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.InspectorTest.dumpSelectedElementStyles):

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (98347 => 98348)


--- trunk/LayoutTests/ChangeLog	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/LayoutTests/ChangeLog	2011-10-25 15:35:50 UTC (rev 98348)
@@ -1,3 +1,16 @@
+2011-10-25  Yury Semikhatsky  <yu...@chromium.org>
+
+        Web Inspector: redesign workers sidebar pane
+        https://bugs.webkit.org/show_bug.cgi?id=70815
+
+        Update tests in accord with change of class name from
+        styles-sidebar-pane to sidebar-pane.
+
+        Reviewed by Pavel Feldman.
+
+        * http/tests/inspector/elements-test.js:
+        (initialize_ElementTest.InspectorTest.dumpSelectedElementStyles):
+
 2011-10-25  Vsevolod Vlasov  <vse...@chromium.org>
 
         Web Inspector: Debugger fails when there is an invalid watch _expression_.

Modified: trunk/LayoutTests/http/tests/inspector/elements-test.js (98347 => 98348)


--- trunk/LayoutTests/http/tests/inspector/elements-test.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/LayoutTests/http/tests/inspector/elements-test.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -122,7 +122,7 @@
                 continue;
             if (section.rule && excludeMatched)
                 continue;
-            if (section.element.previousSibling && section.element.previousSibling.className === "styles-sidebar-separator")
+            if (section.element.previousSibling && section.element.previousSibling.className === "sidebar-separator")
                 InspectorTest.addResult("======== " + section.element.previousSibling.textContent + " ========");
             InspectorTest.addResult((section.expanded ? "[expanded] " : "[collapsed] ") + section.titleElement.textContent + " (" + section.subtitleAsTextForTest + ")");
             section.expand();

Modified: trunk/Source/WebCore/ChangeLog (98347 => 98348)


--- trunk/Source/WebCore/ChangeLog	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/ChangeLog	2011-10-25 15:35:50 UTC (rev 98348)
@@ -1,3 +1,41 @@
+2011-10-25  Yury Semikhatsky  <yu...@chromium.org>
+
+        Web Inspector: redesign workers sidebar pane
+        https://bugs.webkit.org/show_bug.cgi?id=70815
+
+        Changed workers sidebar pane design.
+
+        Now there is a link to worker inspector for each dedicated worker created
+        by inspected page. The sidebar display a link to a page with list of all
+        shared workers if there one is supported by the WebKit port. Also there
+        is a checkbox that allows pause all new workers on first statements.
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/Settings.js:
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane.prototype._rebuildSectionsForStyleRules):
+        * inspector/front-end/WorkerManager.js:
+        (WebInspector.WorkerManager.prototype.openWorkerInspector):
+        (WebInspector.WorkerManager.prototype._workerInspectorClosing):
+        * inspector/front-end/WorkersSidebarPane.js:
+        (WebInspector.WorkerListSidebarPane):
+        (WebInspector.WorkerListSidebarPane.prototype._workerRemoved):
+        (WebInspector.WorkerListSidebarPane.prototype._workersCleared):
+        (WebInspector.WorkerListSidebarPane.prototype._addWorker):
+        (WebInspector.WorkerListSidebarPane.prototype._workerItemClicked):
+        (WebInspector.WorkerListSidebarPane.prototype._autoattachToWorkersClicked):
+        (WebInspector.WorkerListSidebarPane.prototype._createSharedWorkersLink.link.onclick):
+        (WebInspector.WorkerListSidebarPane.prototype._createSharedWorkersLink):
+        * inspector/front-end/elementsPanel.css:
+        * inspector/front-end/inspectorCommon.css:
+        (.sidebar-separator):
+        (.sidebar-label):
+        * inspector/front-end/scriptsPanel.css:
+        (.dedicated-worker-item):
+        (#shared-workers-list):
+        (#pause-workers-checkbox > input):
+
 2011-10-25  Nico Weber  <tha...@chromium.org>
 
         [chromium/mac] Fix an ODR violation.

Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js


(Binary files differ)

Modified: trunk/Source/WebCore/inspector/front-end/Settings.js (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/Settings.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/Settings.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -56,7 +56,8 @@
     canClearCacheAndCookies: false,
     canDisableCache: false,
     showNetworkPanelInitiatorColumn: false,
-    haveExtensions: false
+    haveExtensions: false,
+    sharedWorkersListURL: undefined
 }
 
 /**

Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -579,7 +579,7 @@
             var styleRule = styleRules[i];
             if (styleRule.isStyleSeparator) {
                 var separatorElement = document.createElement("div");
-                separatorElement.className = "styles-sidebar-separator";
+                separatorElement.className = "sidebar-separator";
                 if (styleRule.node) {
                     var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(styleRule.node);
                     separatorElement.appendChild(document.createTextNode(WebInspector.UIString("Inherited from") + " "));

Modified: trunk/Source/WebCore/inspector/front-end/WorkerManager.js (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/WorkerManager.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/WorkerManager.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -110,7 +110,6 @@
     WorkerAdded: "worker-added",
     WorkerRemoved: "worker-removed",
     WorkersCleared: "workers-cleared",
-    WorkerInspectorClosed: "worker-inspector-closed"
 }
 
 WebInspector.WorkerManager.prototype = {
@@ -136,6 +135,12 @@
 
     openWorkerInspector: function(workerId)
     {
+        var existingInspector = this._workerIdToWindow[workerId];
+        if (existingInspector) {
+            existingInspector.focus();
+            return;
+        }
+
         this._openInspectorWindow(workerId, false);
         WorkerAgent.connectToWorker(workerId);
     },
@@ -185,7 +190,6 @@
             return;
         delete this._workerIdToWindow[workerId];
         WorkerAgent.disconnectFromWorker(workerId);
-        this.dispatchEventToListeners(WebInspector.WorkerManager.Events.WorkerInspectorClosed, workerId);
     }
 }
 

Modified: trunk/Source/WebCore/inspector/front-end/WorkersSidebarPane.js (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/WorkersSidebarPane.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/WorkersSidebarPane.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -126,20 +126,29 @@
  */
 WebInspector.WorkerListSidebarPane = function(workerManager)
 {
-    WebInspector.SidebarPane.call(this, WebInspector.UIString("Worker inspectors"));
+    WebInspector.SidebarPane.call(this, WebInspector.UIString("Workers"));
 
     this._enableWorkersCheckbox = new WebInspector.Checkbox(
-        WebInspector.UIString("Debug"),
-        "sidebar-pane-subtitle",
-        WebInspector.UIString("Automatically attach to new workers. Enabling this option will force opening inspector for all new workers."));
-    this.titleElement.insertBefore(this._enableWorkersCheckbox.element, this.titleElement.firstChild);
+        WebInspector.UIString("Pause on start"),
+        "sidebar-label",
+        WebInspector.UIString("Automatically attach to new workers and pause them. Enabling this option will force opening inspector for all new workers."));
+    this._enableWorkersCheckbox.element.id = "pause-workers-checkbox";
+    this.bodyElement.appendChild(this._enableWorkersCheckbox.element);
     this._enableWorkersCheckbox.addEventListener(this._autoattachToWorkersClicked.bind(this));
     this._enableWorkersCheckbox.checked = false;
 
+    if (Preferences.sharedWorkersListURL) {
+        var link = this._createSharedWorkersLink(Preferences.sharedWorkersListURL)
+        this.bodyElement.appendChild(link);
+    }
+
+    var separator = this.bodyElement.createChild("div", "sidebar-separator");
+    separator.textContent = WebInspector.UIString("Dedicated worker inspectors");
+
     this._workerListElement = document.createElement("ol");
     this._workerListElement.tabIndex = 0;
     this._workerListElement.addStyleClass("properties-tree");
-    this._workerListTreeOutline = new TreeOutline(this._workerListElement);
+    this._workerListElement.addStyleClass("sidebar-label");
     this.bodyElement.appendChild(this._workerListElement);
 
     this._idToWorkerItem = {};
@@ -148,7 +157,6 @@
     workerManager.addEventListener(WebInspector.WorkerManager.Events.WorkerAdded, this._workerAdded, this);
     workerManager.addEventListener(WebInspector.WorkerManager.Events.WorkerRemoved, this._workerRemoved, this);
     workerManager.addEventListener(WebInspector.WorkerManager.Events.WorkersCleared, this._workersCleared, this);
-    workerManager.addEventListener(WebInspector.WorkerManager.Events.WorkerInspectorClosed, this._workerInspectorClosed, this);
 }
 
 WebInspector.WorkerListSidebarPane.prototype = {
@@ -161,56 +169,53 @@
     {
         var workerItem = this._idToWorkerItem[event.data];
         delete this._idToWorkerItem[event.data];
-        workerItem.element.parent.removeChild(workerItem.element);
+        workerItem.parentElement.removeChild(workerItem);
     },
 
-    _workerInspectorClosed: function(event)
-    {
-        var workerItem = this._idToWorkerItem[event.data];
-        workerItem.checkbox.checked = false;
-    },
-
     _workersCleared: function(event)
     {
         this._idToWorkerItem = {};
-        this._workerListTreeOutline.removeChildren();
+        this._workerListElement.removeChildren();
     },
 
     _addWorker: function(workerId, url, inspectorConnected)
     {
-        var workerItem = {};
-        workerItem.workerId = workerId;
-        workerItem.element = new TreeElement(url);
-        this._workerListTreeOutline.appendChild(workerItem.element);
-        workerItem.element.selectable = true;
-
-        workerItem.checkbox = this._createCheckbox(workerItem.element);
-        workerItem.checkbox.checked = inspectorConnected;
-        workerItem.checkbox.addEventListener("click", this._workerItemClicked.bind(this, workerItem), true);
-
-        this._idToWorkerItem[workerId] = workerItem;
+        var item = this._workerListElement.createChild("div", "dedicated-worker-item");
+        var link = item.createChild("a");
+        link.textContent = url;
+        link.href = ""
+        link.target = "_blank";
+        link.addEventListener("click", this._workerItemClicked.bind(this, workerId), true);
+        this._idToWorkerItem[workerId] = item;
     },
 
-    _createCheckbox: function(treeElement)
+    _workerItemClicked: function(workerId, event)
     {
-        var checkbox = document.createElement("input");
-        checkbox.className = "checkbox-elem";
-        checkbox.type = "checkbox";
-        treeElement.listItemElement.insertBefore(checkbox, treeElement.listItemElement.firstChild);
-        return checkbox;
+        event.preventDefault();
+        this._workerManager.openWorkerInspector(workerId);
     },
 
-    _workerItemClicked: function(workerItem, event)
+    _autoattachToWorkersClicked: function(event)
     {
-        if (event.target.checked)
-            this._workerManager.openWorkerInspector(workerItem.workerId);
-        else
-            this._workerManager.closeWorkerInspector(workerItem.workerId);
+        WorkerAgent.setAutoconnectToWorkers(event.target.checked);
     },
 
-    _autoattachToWorkersClicked: function(event)
+    _createSharedWorkersLink: function(url)
     {
-        WorkerAgent.setAutoconnectToWorkers(event.target.checked);
+        var linkBlock = document.createElement("div");
+        linkBlock.id = "shared-workers-list";
+        linkBlock.addStyleClass("sidebar-label");
+        linkBlock.title = WebInspector.UIString("Open a page with list of all shared workers");
+
+        var link = linkBlock.createChild("a");
+        link.href = ""
+        link.textContent = WebInspector.UIString("Discover shared workers");
+        link.target = "_blank";
+        link._onclick_ = function(event) {
+            PageAgent.open(url, true);
+            event.preventDefault();
+        };
+        return linkBlock;
     }
 }
 

Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css	2011-10-25 15:35:50 UTC (rev 98348)
@@ -412,19 +412,6 @@
     vertical-align: -2px;
 }
 
-.styles-sidebar-separator {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
-    padding: 0 5px;
-    border-top: 1px solid rgb(189, 189, 189);
-    border-bottom: 1px solid rgb(189, 189, 189);
-    color: rgb(110, 110, 110);
-    text-shadow: white 0 1px 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: 11px;
-}
-
 .styles-selector {
     cursor: text;
 }

Modified: trunk/Source/WebCore/inspector/front-end/inspectorCommon.css (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/inspectorCommon.css	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/inspectorCommon.css	2011-10-25 15:35:50 UTC (rev 98348)
@@ -169,3 +169,20 @@
     color: black;
 }
 
+.sidebar-separator {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
+    padding: 0 5px;
+    border-top: 1px solid rgb(189, 189, 189);
+    border-bottom: 1px solid rgb(189, 189, 189);
+    color: rgb(110, 110, 110);
+    text-shadow: white 0 1px 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 11px;
+}
+
+.sidebar-label {
+    font-size: 11px;
+}
+

Modified: trunk/Source/WebCore/inspector/front-end/scriptsPanel.css (98347 => 98348)


--- trunk/Source/WebCore/inspector/front-end/scriptsPanel.css	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebCore/inspector/front-end/scriptsPanel.css	2011-10-25 15:35:50 UTC (rev 98348)
@@ -172,3 +172,16 @@
     cursor: default;
     overflow: auto;
 }
+
+.dedicated-worker-item {
+    margin: 5px 0px 5px 1px;
+}
+
+#shared-workers-list {
+    margin: 5px 0px 5px 20px;
+}
+
+#pause-workers-checkbox > input {
+    position: relative;
+    top: 2px;
+}

Modified: trunk/Source/WebKit/chromium/ChangeLog (98347 => 98348)


--- trunk/Source/WebKit/chromium/ChangeLog	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebKit/chromium/ChangeLog	2011-10-25 15:35:50 UTC (rev 98348)
@@ -1,3 +1,13 @@
+2011-10-25  Yury Semikhatsky  <yu...@chromium.org>
+
+        Web Inspector: redesign workers sidebar pane
+        https://bugs.webkit.org/show_bug.cgi?id=70815
+
+        Reviewed by Pavel Feldman.
+
+        * src/js/DevTools.js: Expose link to shared workers inspection page to WebCore.
+        ():
+
 2011-10-25  Nico Weber  <tha...@chromium.org>
 
         [chromium] Try to fix mac build after r98294

Modified: trunk/Source/WebKit/chromium/src/js/DevTools.js (98347 => 98348)


--- trunk/Source/WebKit/chromium/src/js/DevTools.js	2011-10-25 15:21:15 UTC (rev 98347)
+++ trunk/Source/WebKit/chromium/src/js/DevTools.js	2011-10-25 15:35:50 UTC (rev 98348)
@@ -57,6 +57,7 @@
     Preferences.canDisableCache = true;
     Preferences.showNetworkPanelInitiatorColumn = true;
     Preferences.haveExtensions = true;
+    Preferences.sharedWorkersListURL = "chrome://workers/";
 })();
 
 // Recognize WebP as a valid image mime type.
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to