Fix small glitches in bot-page and task-list

appengine/swarming/elements/res/imp/tasklist/task-list.html

Index: appengine/swarming/elements/res/imp/tasklist/task-list.html
diff --git a/appengine/swarming/elements/res/imp/tasklist/task-list.html b/appengine/swarming/elements/res/imp/tasklist/task-list.html
index 6cfee118634e54fd0b7d62448b6ff013f97515d7..14882c16ebff1ec308ac77b2586b395c4ebd4f11 100644
--- a/appengine/swarming/elements/res/imp/tasklist/task-list.html
+++ b/appengine/swarming/elements/res/imp/tasklist/task-list.html
@@ -26,6 +26,8 @@
 
 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
+<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
+<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/dynamic-table-behavior.html">
@@ -89,8 +91,6 @@
           primary_arr="{{_primary_arr}}">
         </task-list-data>
 
-        <error-toast></error-toast>
-
         <div class="horizontal layout">
 
           <task-filters
@@ -177,7 +177,7 @@
                   <paper-button
                       raised
                       hidden$="[[_cannotCancel(task,_permissions)]]"
-                      on-tap="_cancelTask">
+                      on-tap="_promptCancel">
                     Cancel
                   </paper-button>
                 </td>
@@ -207,6 +207,17 @@
 
     </swarming-app>
 
+    <paper-dialog id="prompt" modal on-iron-overlay-closed="_promptClosed">
+      <h2>Are you sure?</h2>
+      <div>Are you sure you want to [[_dialogPrompt]]?</div>
+      <div class="buttons">
+        <paper-button dialog-dismiss autofocus>No</paper-button>
+        <paper-button dialog-confirm>Yes</paper-button>
+      </div>
+    </paper-dialog>
+
+    <error-toast></error-toast>
+
   </template>
   <script>
   (function(){
@@ -283,6 +294,11 @@
           type: String,
         },
 
+        // The task id to cancel if the prompt is accepted.
+        _toCancel: {
+          type: String,
+        },
+
         // For dynamic table.
         _columnMap: {
           type: Object,
@@ -324,16 +340,27 @@
               this._column("state", task) === "PENDING");
       },
 
-      _cancelTask: function(e) {
+      _cancelTask: function() {
+        var url = "/_ah/api/swarming/v1/task/" + this._toCancel +"/cancel";
+        swarming.postWithToast(url, "Canceling task " + this._toCancel, this._auth_headers);
+        this.set("_toCancel", "");
+      },
+
+      _promptClosed: function(e) {
+        if (e.detail.confirmed) {
+          this._cancelTask();
+        }
+      },
+
+      _promptCancel: function(e) {
         var task = e.model.task;
         if (!task || !task.task_id) {
           console.log("Missing task info", task);
           return
         }
-        var id = task.task_id
-
-        var url = "/_ah/api/swarming/v1/task/" + id +"/cancel";
-        swarming.postWithToast(url, "Canceling task " + id, this._auth_headers);
+        this.set("_toCancel", task.task_id);
+        this.set("_dialogPrompt", 'cancel task "'+ task.name +'"');
+        this.$.prompt.open();
       },
 
       _tag: function(task, col) {