DevTools: polish service worker inspector UI

third_party/WebKit/Source/devtools/front_end/resources/ServiceWorkersView.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.ServiceWorkersView = function()
@@ skipping 257 matching lines @@
     var toolbar = new WebInspector.Toolbar("", this.element);
     this._updateButton = new WebInspector.ToolbarButton(WebInspector.UIString("Update"), "refresh-toolbar-item", WebInspector.UIString("Update"));
     this._updateButton.addEventListener("click", this._updateButtonClicked.bind(this));
     toolbar.appendToolbarItem(this._updateButton);
 
     toolbar.appendSeparator();
     this._pushButton = new WebInspector.ToolbarButton(WebInspector.UIString("Emulate push event"), "notification-toolbar-item", WebInspector.UIString("Push"));
     this._pushButton.addEventListener("click", this._pushButtonClicked.bind(this));
     toolbar.appendToolbarItem(this._pushButton);
     toolbar.appendSpacer();
-    this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString("Delete"), "garbage-collect-toolbar-item", WebInspector.UIString("Delete"));
+    this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString("Unregister service worker"), "garbage-collect-toolbar-item", WebInspector.UIString("Unregister"));
     this._deleteButton.addEventListener("click", this._deleteButtonClicked.bind(this));
     toolbar.appendToolbarItem(this._deleteButton);
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
     var modes = WebInspector.ServiceWorkerVersion.Modes;
     this._tabbedPane.appendTab(modes.Installing, WebInspector.UIString("Installing"), new WebInspector.VBox());
     this._tabbedPane.appendTab(modes.Waiting, WebInspector.UIString("Waiting"), new WebInspector.VBox());
     this._tabbedPane.appendTab(modes.Active, WebInspector.UIString("Active"), new WebInspector.VBox());
     this._tabbedPane.appendTab(modes.Redundant, WebInspector.UIString("Redundant"), new WebInspector.VBox());
@@ skipping 128 matching lines @@
      */
     this._clientInfoCache = {};
     this._createElements();
     this._updateVersion(version);
 }
 
 WebInspector.SWVersionWidget.prototype = {
     _createElements: function()
     {
         var panel = createElementWithClass("div", "service-workers-versions-panel");
-        var leftPanel = panel.createChild("div", "service-workers-versions-panel-left");
-        var rightPanel = panel.createChild("div", "service-workers-versions-panel-right");
-        this._stateCell = this._addTableRow(leftPanel, WebInspector.UIString("State"));
-        this._workerCell = this._addTableRow(leftPanel, WebInspector.UIString("Worker"));
-        this._scriptCell = this._addTableRow(leftPanel, WebInspector.UIString("Script URL"));
+        var leftPanel = panel.createChild("div", "service-workers-versions-panel-top");
+        var rightPanel = panel.createChild("div", "service-workers-versions-panel-bottom");
+        this._scriptCell = this._addTableRow(leftPanel, WebInspector.UIString("URL"));
+        this._workerCell = this._addTableRow(leftPanel, WebInspector.UIString("State"));
         this._updatedCell = this._addTableRow(leftPanel, WebInspector.UIString("Updated"));
         this._updatedCell.classList.add("service-worker-script-response-time");
         this._scriptLastModifiedCell = this._addTableRow(leftPanel, WebInspector.UIString("Last-Modified"));
         this._scriptLastModifiedCell.classList.add("service-worker-script-last-modified");
-        rightPanel.createChild("div", "service-workers-versions-table-messages-title").createTextChild(WebInspector.UIString("Recent messages"));
+        rightPanel.createChild("div", "service-workers-versions-table-title").createTextChild(WebInspector.UIString("Recent messages"));
         this._messagesPanel = rightPanel.createChild("div", "service-workers-versions-table-messages-content");
-        this._clientsTitle = rightPanel.createChild("div", "service-workers-versions-table-clients-title");
+        this._clientsTitle = rightPanel.createChild("div", "service-workers-versions-table-title");
         this._clientsTitle.createTextChild(WebInspector.UIString("Controlled clients"));
         this._clientsPanel = rightPanel.createChild("div", "service-workers-versions-table-clients-content");
         this.element.appendChild(panel);
     },
 
     /**
      * @param {!WebInspector.ServiceWorkerVersion} version
      */
     _updateVersion: function(version)
     {
-        this._stateCell.setTextAndTitle(version.status);
-
         this._workerCell.removeChildren();
         if (version.isRunning() || version.isStarting() || version.isStartable()) {
             var runningStatusCell = this._workerCell.createChild("div", "service-workers-versions-table-worker-running-status-cell");
-            var runningStatusLeftCell = runningStatusCell.createChild("div", "service-workers-versions-table-running-status-left-cell");
-            var runningStatusRightCell = runningStatusCell.createChild("div", "service-workers-versions-table-running-status-right-cell");
+            var runningStatusLeftCell = runningStatusCell.createChild("div");
+            var runningStatusRightCell = runningStatusCell.createChild("div");
             if (version.isRunning() || version.isStarting()) {
-                var toolbar = new WebInspector.Toolbar("", runningStatusLeftCell);
+                var toolbar = new WebInspector.Toolbar("", runningStatusRightCell);
                 var stopButton = new WebInspector.ToolbarButton(WebInspector.UIString("Stop"), "stop-toolbar-item");
                 stopButton.addEventListener("click", this._stopButtonClicked.bind(this, version.id));
                 toolbar.appendToolbarItem(stopButton);
             } else if (version.isStartable()) {
-                var toolbar = new WebInspector.Toolbar("", runningStatusLeftCell);
+                var toolbar = new WebInspector.Toolbar("", runningStatusRightCell);
                 var startButton = new WebInspector.ToolbarButton(WebInspector.UIString("Start"), "play-toolbar-item");
                 startButton.addEventListener("click", this._startButtonClicked.bind(this));
                 toolbar.appendToolbarItem(startButton);
             }
-            runningStatusRightCell.setTextAndTitle(version.runningStatus);
-            if (version.isRunning() || version.isStarting()) {
-                var inspectButton = runningStatusRightCell.createChild("div", "service-workers-versions-table-running-status-inspect");
+            runningStatusLeftCell.setTextAndTitle(version.runningStatus);
+            if ((version.isRunning() || version.isStarting()) && !this._manager.hasWorkerWithVersionId(version.id)) {
+                var inspectButton = runningStatusLeftCell.createChild("span", "service-workers-versions-table-running-status-inspect");
                 inspectButton.setTextAndTitle(WebInspector.UIString("inspect"));
                 inspectButton.addEventListener("click", this._inspectButtonClicked.bind(this, version.id), false);
             }
         } else {
             this._workerCell.setTextAndTitle(version.runningStatus);
         }
 
         this._scriptCell.setTextAndTitle(version.scriptURL.asParsedURL().path);
         this._updatedCell.setTextAndTitle(version.scriptResponseTime ? (new Date(version.scriptResponseTime * 1000)).toConsoleTime() : "");
         this._scriptLastModifiedCell.setTextAndTitle(version.scriptLastModified ? (new Date(version.scriptLastModified * 1000)).toConsoleTime() : "");
@@ skipping 107 matching lines @@
      * @param {string} versionId
      * @param {!Event} event
      */
     _inspectButtonClicked: function(versionId, event)
     {
         this._manager.inspectWorker(versionId);
     },
 
     __proto__: WebInspector.VBox.prototype
 }