Bug 1450070 - WIP: Add update button to application panel UI draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 18 May 2018 11:02:21 +0900
changeset 796721 36a561e30d14970330a3f11db8be854b92605a9c
parent 796720 58d738f0fa0160fe2c59fd291d5eaf16d4e86afc
child 796722 4bc5dba8c6fde5b249fdf0ac0820232201433f88
push id110345
push userjdescottes@mozilla.com
push dateFri, 18 May 2018 06:04:47 +0000
bugs1450070
milestone62.0a1
Bug 1450070 - WIP: Add update button to application panel UI MozReview-Commit-ID: LUQU3gTx5QI
devtools/client/application/src/components/Worker.css
devtools/client/application/src/components/Worker.js
--- a/devtools/client/application/src/components/Worker.css
+++ b/devtools/client/application/src/components/Worker.css
@@ -11,22 +11,26 @@
  *  |   | "Source" | script name | debug link     |
  *  |   |----------+-------------+----------------|
  *  |   | "Status" | status      | start link     |
  *  +---+----------+-------------+----------------|
  */
 .service-worker-container {
   margin-bottom: 20px;
   width: 100%;
-  max-width: 600px;
+  max-width: 800px;
   position: relative;
   line-height: 1.5;
   font-size: 13px;
 }
 
+.service-worker-actions {
+  display: flex;
+}
+
 .service-worker-container > .service-worker-scope {
   padding-inline-start: 30px;
 }
 
 .service-worker-container > :not(.service-worker-scope) {
   padding-inline-start: 70px;
 }
 
--- a/devtools/client/application/src/components/Worker.js
+++ b/devtools/client/application/src/components/Worker.js
@@ -41,16 +41,17 @@ class Worker extends Component {
   }
 
   constructor(props) {
     super(props);
 
     this.debug = this.debug.bind(this);
     this.start = this.start.bind(this);
     this.unregister = this.unregister.bind(this);
+    this.update = this.update.bind(this);
   }
 
   debug() {
     if (!this.isRunning()) {
       console.log("Service workers cannot be debugged if they are not running");
       return;
     }
 
@@ -74,16 +75,24 @@ class Worker extends Component {
   unregister() {
     let { client, worker } = this.props;
     client.request({
       to: worker.registrationActor,
       type: "unregister"
     });
   }
 
+  update() {
+    let { client, worker } = this.props;
+    client.request({
+      to: worker.registrationActor,
+      type: "update"
+    });
+  }
+
   isRunning() {
     // We know the worker is running if it has a worker actor.
     return !!this.props.worker.workerActor;
   }
 
   isActive() {
     return this.props.worker.active;
   }
@@ -123,16 +132,25 @@ class Worker extends Component {
       button({
         onClick: this.unregister,
         className: "devtools-button unregister-button",
         "data-standalone": true
       },
         Strings.GetStringFromName("unregister"))
       : null;
 
+    const updateButton = this.isActive() ?
+      button({
+        onClick: this.update,
+        className: "devtools-button update-button",
+        "data-standalone": true
+      },
+        "update")
+      : null;
+
     const debugLinkDisabled = this.isRunning() ? "" : "disabled";
     const debugLink = a({
       onClick: this.isRunning() ? this.debug : null,
       title: this.isRunning() ? null : "Only running service workers can be debugged",
       className: `${debugLinkDisabled} debug-link`
     },
       Strings.GetStringFromName("debug"));
 
@@ -140,17 +158,22 @@ class Worker extends Component {
       a({ onClick: this.start, className: "start-link" },
         Strings.GetStringFromName("start"))
       : null;
 
     return li({ className: "service-worker-container" },
       div(
         { className: "service-worker-scope" },
         span({ title: worker.scope }, this.formatScope(worker.scope)),
-        unregisterButton),
+        div(
+          { className: "service-worker-actions" },
+          unregisterButton,
+          updateButton
+        )
+      ),
       div(
         { className: "service-worker-source" },
         span({ className: "service-worker-meta-name" }, "Source"),
         span({ className: "js-source-url", title: worker.scope },
           this.formatSource(worker.url)),
         debugLink),
       div(
         { className: "service-worker-time" },