Add reproduce steps

appengine/swarming/ui/res/imp/taskpage/task-page.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <task-page>
 
@@ skipping 63 matching lines @@
 
       .stdout {
         white-space: pre-line;
         padding: 2px;
       }
 
       .refresh_input {
         padding: 0 5px;
       }
 
+      .reproduce {
+        margin-left: 5px;
+      }
+
       .tabbed {
         border: 3px solid #1F78B4;
         margin-left: 5px;
         min-height: 80vh;
       }
     </style>
 
     <url-param name="id"
       value="{{task_id}}">
     </url-param>
@@ skipping 349 matching lines @@
                   <td>Uploading Outputs To Isolate</td>
                   <td>[[_humanDuration(_result.performance_stats.isolated_upload.duration)]]</td>
                 </tr>
                 <tr>
                   <td>Initial bot cache</td>
                   <td>[[_result.performance_stats.isolated_download.initial_number_items]] items;
                   [[_bytes(_result.performance_stats.isolated_download.initial_size)]]</td>
                 </tr>
               </table>
             </template>
+
+            <div class="title">Reproducing the task locally</div>
+            <div class="reproduce">
+              <div>Download inputs files into directory <i>foo</i>:</div>
+              <div class="code">  python isolateserver.py download -I [[_request.properties.inputs_ref.isolatedserver]] --namespace [[_request.properties.inputs_ref.namespace]] -s [[_request.properties.inputs_ref.isolated]] --target foo</div>
+              <br>
+              <div>Run this task locally:</div>
+              <div class="code">  python swarming.py reproduce -S [[_host_url]] [[task_id]]</div>
+              <br>
+              <div>Download output results into directory <i>foo</i>:</div>
+              <div class="code">  python swarming.py collect -S [[_host_url]] --task-output-dir=foo [[task_id]]</div>
+              <br>
+              <div>Looking for <i>swarming.py</i>?</div>
+              <div class="code">  git clone https://github.com/luci/client-py</div>
+            </div>
           </div>
 
           <div class="flex right" hidden$="[[_not(_task_exists)]]">
             <div class="horizontal layout">
               <div class="tabs">
                 <paper-tabs selected="{{_show_raw}}" no-bar>
                   <paper-tab disabled$="[[_noMilo(_request)]]">Milo Output</paper-tab>
                   <paper-tab>Raw Output</paper-tab>
                 </paper-tabs>
               </div>
@@ skipping 19 matching lines @@
             <template is="dom-if" if="[[_show_raw]]">
               <div class="code stdout tabbed">[[_stdout]]</div>
             </template>
           </div>
         </div>
       </div>
     </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>Are you sure you want to [[_dialog_prompt]]?</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>
 
     <interval-timer period="[[_refresh_interval]]" on-trigger="_softRefresh">
     </interval-timer>
@@ skipping 10 matching lines @@
       ],
 
       properties: {
         task_id: {
           type: String,
         },
         client_id: {
           type: String,
         },
 
-        _dialogPrompt: {
+        _dialog_prompt: {
           type: String,
           value: "",
         },
+        _host_url: {
+          type: String,
+          value: function(){
+            return window.location.hostname;
+          }
+        },
         _refresh_interval: {
           type: Number,
         },
         _request: {
           type: Object,
           observer: "_requestUpdated"
         },
         _request_detail: {
           type: Boolean,
         },
@@ skipping 136 matching lines @@
         var end = result.started_ts || result.abandoned_ts || new Date();
         // In the case of deduplicated tasks, started_ts comes before the task.
         if (end <= result.created_ts) {
           return "0s";
         }
         return this._timeDiffExact(result.created_ts, end);
       },
 
       _promptClosed: function(e) {
         if (e.detail.confirmed) {
-          if (this._dialogPrompt.startsWith("cancel")) {
+          if (this._dialog_prompt.startsWith("cancel")) {
             this._cancelTask();
           } else {
             this._retryTask();
           }
         }
       },
 
       _promptCancel: function() {
-        this.set("_dialogPrompt", "cancel task "+this.task_id);
+        this.set("_dialog_prompt", "cancel task "+this.task_id);
         this.$.prompt.open();
       },
 
       _promptRetry: function() {
-        this.set("_dialogPrompt", "retry task "+this.task_id);
+        this.set("_dialog_prompt", "retry task "+this.task_id);
         this.$.prompt.open();
       },
 
       _refresh: function() {
         this.$.data.reload();
       },
 
       _requestUpdated: function(request) {
         if (this._noMilo(request)) {
           this.set("_show_raw", 1);
@@ skipping 70 matching lines @@
         return result && result.state !== this.PENDING && result.state !== this.CANCELED && result.state != this.EXPIRED;
       },
 
       _wasNotPickedUp: function(result) {
         return result && !this._wasPickedUp(result);
       },
     });
   })();
   </script>
 </dom-module>