[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..5564d200a1cbc0b702e7ff263fb3acfd3434dd7e 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);
 }
@@ -319,10 +327,9 @@ WebInspector.SWRegistrationElement.prototype = {
     _updateRegistration: function(registration)
     {
         this._registration = registration;
-        var text = WebInspector.UIString("Scope: ") + registration.scopeURL.asParsedURL().path;
-        if (registration.isDeleted)
-          text += " - deleted";
-        this._titleNode.textContent = text;
+        this._titleNode.textContent = WebInspector.UIString(registration.isDeleted ? "Scope: %s - deleted" : "Scope: %s", registration.scopeURL.asParsedURL().path);
+        this._unregisterButton.style.display = registration.isDeleted? "none" : "block";
+        this._updateVersionList();
     },
 
     /**
@@ -378,16 +385,34 @@ WebInspector.SWRegistrationElement.prototype = {
      * @param {!Map.<string, !Array.<!ServiceWorkerAgent.ServiceWorkerVersion>>} modeVersionArrayMap
      * @param {string} mode
      */
-    _createVersionModeRow: function(modeVersionArrayMap, mode) {
+    _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 +421,39 @@ WebInspector.SWRegistrationElement.prototype = {
             stateRowElement.createChild("div", "service-workers-version-script-url");
         }
         return modeRowElement;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _unregisterButtonClicked: function(event)
+    {
+        this._manager.unregister(this._registration.scopeURL);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _startButtonClicked: function(event)
+    {
+        this._manager.startWorker(this._registration.scopeURL);
+    },
+
+    /**
+     * @param {string} versionId
+     * @param {!Event} event
+     */
+    _stopButtonClicked: function(versionId, event)
+    {
+        this._manager.stopWorker(versionId);
+    },
+
+    /**
+     * @param {string} versionId
+     * @param {!Event} event
+     */
+    _inspectButtonClicked: function(versionId, event)
+    {
+        this._manager.inspectWorker(versionId);
     }
 }