[DevTools] Introduce Unregister/Start/Stop/Inspect buttons to ServiceWorkersView [2/2 blink]

Source/devtools/front_end/resources/ServiceWorkersView.js

Index: Source/devtools/front_end/resources/ServiceWorkersView.js
diff --git a/Source/devtools/front_end/resources/ServiceWorkersView.js b/Source/devtools/front_end/resources/ServiceWorkersView.js
index 52d57dd0f9f1257f7ef5a0a064b61674b2695fb3..1e9ba0cb18415437878f4033343c297668f735ec 100644
--- a/Source/devtools/front_end/resources/ServiceWorkersView.js
+++ b/Source/devtools/front_end/resources/ServiceWorkersView.js
@@ -85,7 +85,7 @@ WebInspector.ServiceWorkersView.prototype = {
         var originHost = parsedURL.host;
         var originElement = this._originHostToOriginElementMap.get(originHost);
         if (!originElement) {
-            originElement = new WebInspector.ServiceWorkerOriginElement(originHost);
+            originElement = new WebInspector.ServiceWorkerOriginElement(this._manager, originHost);
             if (this._securityOriginHosts.has(originHost))
                 this._appendOriginNode(originElement);
             this._originHostToOriginElementMap.set(originHost, originElement);
@@ -207,10 +207,12 @@ WebInspector.ServiceWorkersView.prototype = {
 
 /**
  * @constructor
+ * @param {!WebInspector.ServiceWorkerManager} manager
  * @param {string} originHost
  */
-WebInspector.ServiceWorkerOriginElement = function(originHost)
+WebInspector.ServiceWorkerOriginElement = function(manager, originHost)
 {
+    this._manager = manager;
     /** @type {!Map.<string, !WebInspector.SWRegistrationElement>} */
     this._registrationElements = new Map();
     this.originHost = originHost;
@@ -239,7 +241,7 @@ WebInspector.ServiceWorkerOriginElement.prototype = {
             swRegistrationElement._updateRegistration(registration);
             return;
         }
-        swRegistrationElement = new WebInspector.SWRegistrationElement(registration);
+        swRegistrationElement = new WebInspector.SWRegistrationElement(this._manager, registration);
         this._registrationElements.set(registration.registrationId, swRegistrationElement);
         this._childrenListNode.appendChild(swRegistrationElement.element);
     },
@@ -281,16 +283,22 @@ WebInspector.ServiceWorkerOriginElement.prototype = {
 
 /**
  * @constructor
+ * @param {!WebInspector.ServiceWorkerManager} manager
  * @param {!ServiceWorkerAgent.ServiceWorkerRegistration} registration
  */
-WebInspector.SWRegistrationElement = function(registration)
+WebInspector.SWRegistrationElement = function(manager, registration)
 {
+    this._manager = manager;
     /** @type {!ServiceWorkerAgent.ServiceWorkerRegistration} */
     this._registration = registration;
     /** @type {!Map.<string, !ServiceWorkerAgent.ServiceWorkerVersion>} */
     this._versions = new Map();
     this.element = createElementWithClass("div", "service-workers-registration");
-    this._titleNode = this.element.createChild("li").createChild("div", "service-workers-registration-title");
+    var headerNode = this.element.createChild("li").createChild("div", "service-workers-registration-header");
+    this._titleNode = headerNode.createChild("div", "service-workers-registration-title");
+    this._unregisterButton = headerNode.createChild("button", "service-workers-button service-workers-unregister-button");
+    this._unregisterButton.addEventListener("click", this._unregisterButtonClicked.bind(this), false);
+    this._unregisterButton.title = WebInspector.UIString("Unregister");
     this._childrenListNode = this.element.createChild("ol");
     this._updateRegistration(registration);
 }
@@ -320,9 +328,14 @@ WebInspector.SWRegistrationElement.prototype = {
     {
         this._registration = registration;
         var text = WebInspector.UIString("Scope: ") + registration.scopeURL.asParsedURL().path;
-        if (registration.isDeleted)
-          text += " - deleted";
+        if (registration.isDeleted) {
+            this._unregisterButton.style.display = "none";
+            text += " - deleted";

[pfeldman, 2015/03/23 10:51:09]

WebInspector.UIString supports message format %s, etc.

var text = WebInspector.UIString(registration.isDeleted ? "Scope: %s" : "Scope:
%s - deleted", url);

[horo, 2015/03/23 11:22:24]

Done.

+        } else {
+            this._unregisterButton.style.display = "block";
+        }
         this._titleNode.textContent = text;
+        this._updateVersionList();
     },
 
     /**
@@ -381,13 +394,30 @@ WebInspector.SWRegistrationElement.prototype = {
     _createVersionModeRow: function(modeVersionArrayMap, mode) {
         var versionList = /** @type {!Array.<!ServiceWorkerAgent.ServiceWorkerVersion>} */(modeVersionArrayMap.get(mode));
         var modeRowElement = createElementWithClass("div", "service-workers-version-mode-row  service-workers-version-mode-row-" + mode);
-        modeRowElement.createChild("div", "service-workers-version-mode").createTextChild(mode);
-        var versionsElement = modeRowElement.createChild("div", "service-workers-versions" + mode);
+        modeRowElement.createChild("div", "service-workers-version-mode").createChild("div", "service-workers-version-mode-text").createTextChild(mode);
+        var versionsElement = modeRowElement.createChild("div", "service-workers-versions");
         for (var version of versionList) {
             var stateRowElement = versionsElement.createChild("div", "service-workers-version-row");
-            stateRowElement.createChild("div", "service-workers-version-status").createTextChild(version.status);
-            stateRowElement.createChild("div", "service-workers-version-running-status").createTextChild(version.runningStatus);
-            stateRowElement.createChild("div", "service-workers-version-script-url").createTextChild(version.scriptURL.asParsedURL().path);
+            var statusDiv = stateRowElement.createChild("div", "service-workers-version-status");
+            statusDiv.createChild("div", "service-workers-version-status-text").createTextChild(version.status);
+            var runningStatusDiv = stateRowElement.createChild("div", "service-workers-version-running-status");
+            if (version.runningStatus == ServiceWorkerAgent.ServiceWorkerVersionRunningStatus.Running || version.runningStatus == ServiceWorkerAgent.ServiceWorkerVersionRunningStatus.Starting) {
+                var stopButton = runningStatusDiv.createChild("button", "service-workers-button service-workers-stop-button service-workers-version-running-status-button");
+                stopButton.addEventListener("click", this._stopButtonClicked.bind(this, version.versionId), false);
+                stopButton.title = WebInspector.UIString("Stop");
+            } else if (version.runningStatus == ServiceWorkerAgent.ServiceWorkerVersionRunningStatus.Stopped && !this._registration.isDeleted) {
+                var startButton = runningStatusDiv.createChild("button", "service-workers-button service-workers-start-button service-workers-version-running-status-button");
+                startButton.addEventListener("click", this._startButtonClicked.bind(this), false);
+                startButton.title = WebInspector.UIString("Start");
+            }
+            runningStatusDiv.createChild("div", "service-workers-version-running-status-text").createTextChild(version.runningStatus);
+            var scriptURLDiv = stateRowElement.createChild("div", "service-workers-version-script-url");
+            scriptURLDiv.createChild("div", "service-workers-version-script-url-text").createTextChild(version.scriptURL.asParsedURL().path);
+            if (version.runningStatus == ServiceWorkerAgent.ServiceWorkerVersionRunningStatus.Running || version.runningStatus == ServiceWorkerAgent.ServiceWorkerVersionRunningStatus.Starting) {
+                var inspectButton = scriptURLDiv.createChild("span", "service-workers-version-inspect");
+                inspectButton.createTextChild(WebInspector.UIString("inspect"));
+                inspectButton.addEventListener("click", this._inspectButtonClicked.bind(this, version.versionId), false);
+            }
         }
         if (versionList.length == 0) {
             var stateRowElement = versionsElement.createChild("div", "service-workers-version-row");
@@ -396,5 +426,35 @@ WebInspector.SWRegistrationElement.prototype = {
             stateRowElement.createChild("div", "service-workers-version-script-url");
         }
         return modeRowElement;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _unregisterButtonClicked: function(event) {

[pfeldman, 2015/03/23 10:51:09]

{ goes to the next line.

[horo, 2015/03/23 11:22:24]

Done.

+        this._manager.target().serviceWorkerAgent().unregister(this._registration.scopeURL);

[pfeldman, 2015/03/23 10:51:09]

You should not talk to the agent from here, all agents calls should be
encapsulated in the ServiceWorkerManager.

[horo, 2015/03/23 11:22:24]

Done.

+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _startButtonClicked: function(event) {
+        this._manager.target().serviceWorkerAgent().startWorker(this._registration.scopeURL);
+    },
+
+    /**
+     * @param {string} versionId
+     * @param {!Event} event
+     */
+    _stopButtonClicked: function(versionId, event) {
+        this._manager.target().serviceWorkerAgent().stopWorker(versionId);
+    },
+
+    /**
+     * @param {string} versionId
+     * @param {!Event} event
+     */
+    _inspectButtonClicked: function(versionId, event) {
+        this._manager.target().serviceWorkerAgent().inspectWorker(versionId);
     }
 }