Make wide logs an option in task-page

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>
 
   task-page shows the request, results, stats, and standard output of a task.
 
   This is a top-level element.
 
   Properties:
     task_id: String, Used in testing to specify a task_id
     client_id: String, Oauth 2.0 client id.  It will be set by server-side
         template evaluation.
 
   Methods:
     None.
 
   Events:
     None.
 -->
 
 <link rel="import" href="/res/imp/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
+<link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
 <link rel="import" href="/res/imp/bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/common-behavior.html">
 <link rel="import" href="/res/imp/common/interval-timer.html">
 <link rel="import" href="/res/imp/common/single-page-style.html">
 <link rel="import" href="/res/imp/common/swarming-app.html">
 <link rel="import" href="/res/imp/common/task-behavior.html">
@@ skipping 25 matching lines @@
         min-width: 3em;
         vertical-align: middle;
         padding: .5em;
       }
 
       .code {
         font-family: monospace;
       }
 
       .stdout {
-        white-space: pre-line;
+        white-space: pre-wrap;
         padding: 2px;
       }
+      .stdout.wide {
+        white-space: pre;
+        overflow-x: auto
+      }
 
       .refresh_input {
         padding: 0 5px;
       }
 
       .reproduce {
         margin-left: 5px;
       }
 
       .tabbed {
         border: 3px solid #1F78B4;
         margin-left: 5px;
         min-height: 80vh;
         min-width: 550px;
       }
 
       .task-info {
         min-width: 500px;
       }
 
       .cipd-header {
         -moz-user-select: none;
         -webkit-user-select: none;
         -ms-user-select: none;
         user-select: none;
         font-weight: bold;
         margin-left: 8px;
       }
+
+      .full-width {
+        min-width: 100%;
+      }
+
+      .full-width-container {
+        position: relative;
+      }
+
+      .full-width-container > paper-checkbox {
+        position: absolute;
+        bottom: 10px;
+        width: 140px;
+        left: 5px;
+      }
     </style>
 
     <url-param name="id"
       value="{{task_id}}">
     </url-param>
     <url-param name="try_detail"
       value="{{_try_detail}}">
     </url-param>
     <url-param name="request_detail"
       value="{{_request_detail}}">
     </url-param>
     <url-param name="show_raw"
       value="{{_show_raw}}">
     </url-param>
+    <url-param name="wide_logs"
+      value="{{_wide_logs}}">
+    </url-param>
     <url-param name="refresh"
       value="{{_refresh_interval}}"
       default_value="10">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       permissions="{{_permissions}}"
       profile="{{_profile}}"
@@ skipping 363 matching lines @@
                 <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>
 
-          <div class="flex right" hidden$="[[_not(_task_exists)]]">
+          <div class$="flex right [[_classRight(_wide_logs)]]" 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>
 
               <paper-input
                 class="refresh_input"
                 label="Refresh Interval (seconds)"
                 value="{{_refresh_interval}}"
                 title="How often to refresh all information about the task"
                 auto-validate
                 min="1"
                 max="1000"
                 pattern="[0-9]+">
               </paper-input>
+
+              <div class="full-width-container">
+                <paper-checkbox checked="{{_wide_logs}}">
+                    Full Width Logs
+                </paper-checkbox>
+              </div>
+
             </div>
 
             <template is="dom-if" if="[[_supportsMilo(_request,_show_raw)]]">
               <div class="milo tabbed" hidden$="[[_isSummaryLink(task_id)]]">
                 Milo results are only generated for task summaires, that is, tasks whose ids end in 0.  Tasks ending in 1 or 2 represent possible retries of tasks.  See <a href="//goo.gl/LE4rwV">the docs</a> for more.
               </div>
               <iframe id="miloFrame" class="milo tabbed" src$="[[_getDisplayServerLink(_server_details.display_server_url_template,task_id)]]"></iframe>
             </template>
             <template is="dom-if" if="[[_show_raw]]">
-              <div class="code stdout tabbed break-all">[[_rawOutput(_stdout,_result)]]</div>
+              <div class$="code stdout tabbed break-all [[_classStdout(_wide_logs)]]">[[_rawOutput(_stdout,_result)]]</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 [[_dialog_prompt]]?</div>
       <div class="buttons">
@@ skipping 108 matching lines @@
           p.requested = p.package_name + ":" + p.version;
           actual.forEach(function(c) {
             if (c.path === p.path) {
               p.actual = c.package_name + ":" + c.version;
             }
           });
         });
         return packages;
       },
 
+      _classRight: function(wide_logs) {
+        if (wide_logs) {
+          return "full-width";
+        }
+        return "";
+      },
+
+      _classStdout: function(wide_logs) {
+         if (wide_logs) {
+          return "wide";
+        }
+        return "";
+      },
+
       _command: function(request) {
         if (!request || !request.properties) {
           return "";
         }
         var args = request.properties.command || [];
         return args.join(" ");
       },
 
       _disambiguate: function(taskId, result) {
         if (!taskId.endsWith("0") || !result) {
@@ skipping 183 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>