[logdog-view] Update UX, fix bugs.

web/inc/logdog-stream-view/logdog-stream-view.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.
   -->
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/google-signin/google-signin-aware.html">
 <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../bower_components/iron-icons/av-icons.html">
@@ skipping 161 matching lines @@
       This must be after "rpc-client" so we get the signin event after it
       does.
     -->
     <google-signin-aware
       id="aware"
       on-google-signin-aware-success="_onSignin"></google-signin-aware>
 
     <!-- Stream view options. -->
     <div id="mainView">
       <div id="buttons">
-        <!-- If we have exactly one stream, we will enable users to split. -->
-        <template is="dom-if" if="{{showStreamingControls}}">
-          <paper-icon-button class="paper-icon-button-highlight" toggles
-              title="Stick to bottom." icon="icons:update"
-              active="{{follow}}">
-          </paper-icon-button>
-
+        <template is="dom-if" if="{{showPlayPause}}">
           <paper-icon-button class="paper-icon-button-highlight" toggles
               title="Auto-Load" icon="{{playingIconName}}"
               active="{{playing}}">
           </paper-icon-button>
+        </template>
 
-          <template is="dom-if" if="{{canSplit}}">
-            <paper-icon-button
-                title="Jump to latest."
-                icon="editor:vertical-align-bottom"
-                on-tap="_splitClicked">
+        <template is="dom-if" if="{{showSplitButton}}">
+          <paper-icon-button
+              title="Jump to latest."
+              icon="editor:vertical-align-bottom"
+              on-tap="_splitClicked">
+          </paper-icon-button>
+        </template>
+
+        <template is="dom-if" if="{{showStreamControls}}">
+          <template is="dom-if" if="{{showSplitControls}}">
+            <paper-icon-button toggles
+                title="Load new logs, or backfill from top."
+                icon="{{backfillIconName}}"
+                active="{{backfill}}">
             </paper-icon-button>
-          </template>
 
-          <template is="dom-if" if="{{isSplit}}">
             <paper-icon-button title="Scroll to split"
                 icon="editor:vertical-align-center" on-tap="_scrollToSplit">
             </paper-icon-button>
           </template>
 
-          <template is="dom-if" if="{{isSplit}}">
-            <paper-icon-button toggles
-                title="Load new logs, or backfill from top."
-                icon="{{backfillIconName}}"
-                active="{{backfill}}">
-            </paper-icon-button>
-          </template>
-        </template>
-
-        <template is="dom-if" if="{{_not(playing)}}">
           <paper-button class="paper-button-highlight" toggles raised
               active="{{wrapLines}}">
             Wrap
           </paper-button>
 
           <template is="dom-if" if="{{metadata}}">
             <paper-button class="paper-button-highlight" toggles raised
                 active="{{showMetadata}}">
               Metadata
             </paper-button>
           </template>
         </template>
       </div>
 
       <!-- Display current fetching status, if stream data is still loading. -->
       <div id="streamStatus">
         <template is="dom-if" if="{{streamStatus}}">
           <table>
             <template is="dom-repeat" items="{{streamStatus}}">
               <tr>
                 <td>{{item.name}}</td>
                 <td>{{item.desc}}</td>
               </tr>
             </template>
           </table>
         </template>
       </div>
 
       <!-- Muxed log content. -->
-      <div id="logContent"
-          on-mousewheel="_handleMouseWheel">
+      <div id="logContent">
         <div id="logs">
           <!-- Content will be populated with JavaScript as logs are loaded.
 
             <div class="log-entry">
               <div class="log-entry-meta">
                 <div class="log-entry-meta-line">(Meta 0)</div>
                 ...
                 <div class="log-entry-meta-line">(Meta N)</div>
               </div>
               <div class="log-entry-content">
                 LINE #0
                 ...
                 LINE #N
               </div>
             </div>
             ...
 
 
             Note that we can't use templating to show/hide the log dividers,
             since our positional log insertion requires them to be present and
             move along with insertions as points of reference.
           -->
 
           <div id="logSplit" class="logFetchButtonContainer">
             <!-- Insert point (prepend for head, append for tail). -->
             <paper-button id="logSplitUp"
                 class="logFetchButton logSplitUpButton giant"
                 text="Load Above"
-                disabled="[[streamAnchorsNotClickable]]"
+                disabled="[[playing]]"
                 on-click="_handleUpClick">
               <iron-icon icon="file-upload"></iron-icon>
             </paper-button>
             <paper-button id="logSplitDown"
                 class="logFetchButton logSplitDownButton giant"
                 text="Load Below"
-                disabled="[[streamAnchorsNotClickable]]"
+                disabled="[[playing]]"
                 on-click="_handleDownClick">
               <iron-icon icon="file-download"></iron-icon>
             </paper-button>
           </div>
 
           <div id="logBottom" class="logFetchButtonContainer">
             <!--
               Bottom of the log stream (red bottom line). When tail is complete,
               all future logs get prepended to this.
             -->
             <paper-button id="logBottomButton"
                 class="logFetchButton logBottomButton giant"
-                disabled="[[streamAnchorsNotClickable]]"
+                disabled="[[playing]]"
                 on-click="_handleBottomClick">
               <iron-icon icon="arrow-drop-down"></iron-icon>
             </paper-button>
           </div>
           <div id="logEnd"></div>
         </div>
       </div>
 
     </div>
 
@@ skipping 48 matching lines @@
        * The smaller the value, the smoother the page will behave while logs are
        * loading. However, the logs will also load slower because of forced
        * renders in between elements.
        */
       burst: {
         type: Number,
         value: 1000,
         notify: true,
       },
 
+      /** If populated, the stream name at the top will link to this URL. */
+      streamLinkUrl: {
+        type: String,
+        value: null,
+        notify: true,
+      },
+
       /**
        * If true, render metadata blocks alongside their log entries.
        *
        * This will cause significantly more HTML elements during rendering (so
        * that each metadata element can show up next to its row) and greatly
        * slow the viewer down.
        */
       metadata: {
         type: Boolean,
         value: false,
       },
 
       /** If true, show log metadata column. */
       showMetadata: {
         type: Boolean,
         value: false,
         observer: "_showMetadataChanged",
       },
 
       /** If true, wrap log lines to the screen. */
       wrapLines: {
         type: Boolean,
         value: false,
         observer: "_wrapLinesChanged",
       },
 
-      /**
-       * If true, automatically scroll the page to the bottom of the logs
-       * while they are streaming.
-       */
-      follow: {
+      /** Whether or not to show play/pause button. */
+      showPlayPause: {
+        type: Boolean,
+        value: true,
+        readOnly: true,
+      },
+
+      /** Whether or not to show stream control buttons. */
+      showStreamControls: {
         type: Boolean,
         value: false,
-        observer: "_followChanged",
+        readOnly: true,
       },
 
-      /**
-       * True if the stream is capable of being split.
-       *
-       * This is set by the viewer via "_updateControls".
-       *
-       * A split is a visual break in the log continuity, where content above
-       * the split contains logs starting at the beginning of the stream, while
-       * content below the split contains data from the last log entry in the
-       * stream at the time of the split.
-       */
-      canSplit: {
+      /** Whether or not to show the "split streams" button. */
+      showSplitButton: {
+        type: Boolean,
+        value: false,
+        readOnly: true,
+      },
+
+      /** Whether or not to show the split controls. */
+      showSplitControls: {
         type: Boolean,
         value: false,
         readOnly: true,
       },
 
       /**
-       * True if log streaming controls should be visible.
-       *
-       * This is set by the viewer via "_updateControls".
-       */
-      showStreamingControls: {
-        type: Boolean,
-        value: true,
-        readOnly: true,
-      },
-
-      /**
-       * True if the view is currently split.
-       *
-       * This is set by the viewer via "_updateControls".
-       */
-      isSplit: {
-        type: Boolean,
-        value: false,
-        readOnly: true,
-      },
-
-      /**
-       * True if the stream anchors (split bar buttons) can be clicked.
-       */
-      streamAnchorsNotClickable: {
-        type: Boolean,
-        computed:
-          '_computeAnchorsNotClickable(playing, showStreamingControls)',
-      },
-
-      /**
        * True if the viewer should automatically load more logs after the
        * previous batch has finished.
        */
       playing: {
         type: Boolean,
         value: false,
         observer: "_playingChanged",
       },
 
       /**
@@ skipping 16 matching lines @@
       },
 
       /**
        * (Computed) the iron-icon name of the backfill button icon.
        */
       backfillIconName: {
         type: String,
         computed: '_computeBackfillIconName(backfill)',
       },
 
-      /** If populated, the stream name at the top will link to this URL. */
-      streamLinkUrl: {
-        type: String,
-        value: null,
-        notify: true,
-      },
-
       /**
        * The current stream status. This is an Array of objects:
        *   obj.name is the name of the stream.
        *   obj.desc is the status description of the stream.
        */
       streamStatus: {
         type: Array,
         value: null,
         notify: true,
         readOnly: true,
       },
 
       /**
        * The text content of the status element at the bottom of the page.
        */
       statusBar: {
         type: String,
         value: null,
         readOnly: true,
       },
     },
 
     created: function() {
       this._view = new LogDog.View(this);
     },
 
     attached: function() {
       this._view.reset();
+      this.$.logContent.addEventListener('wheel',
+          this._handleMouseWheel.bind(this));
     },
 
     detached: function() {
       this._view.detach();
+      this.$.logContent.removeEventListener('wheel',
+          this._handleMouseWheel.bind(this));
     },
 
     stop: function() {
       this._view.stop();
     },
 
     _polymerAppendChild: function(e) {
       Polymer.dom(this.root).appendChild(e);
     },
 
     _handleMouseWheel: function(e) {
-      this._view.handleMouseWheel();
+      this._view.handleMouseWheel(e.deltaY >= 0);
     },
 
     _handleDownClick: function(e) {
       this._view.handleDownClick();
     },
 
     _handleUpClick: function(e) {
       this._view.handleUpClick();
     },
 
@@ skipping 15 matching lines @@
     },
 
     /**
      * Callback when "wrapLines" has changed. This adds/removes the
      * "wrapLines" CSS class to the log data.
      */
     _wrapLinesChanged: function(v) {
       this.toggleClass("wrapLines", v, this.$.logs);
      },
 
-    /** Callback when "follow" has changed. */
+    /** Callback when "playing" has changed. */
     _playingChanged: function(v) {
-      this._view.handlePlayingChanged(v);
+      this._view.handlePlayPauseChanged(v);
     },
 
     _computePlayingIconName: function(playing) {
       return ( (playing) ?
           "av:pause-circle-outline" : "av:play-circle-outline" );
     },
 
-    /** Callback when "follow" has changed. */
+    /** Callback when "backfill" has changed. */
     _backfillChanged: function(v) {
       this._view.handleBackfillChanged(v);
     },
 
     _computeBackfillIconName: function(backfill) {
       return ( (backfill) ?
           "editor:border-bottom" : "editor:border-top" );
     },
 
-    /** Callback when "follow" has changed. */
-    _followChanged: function(v) {
-      this._view.handleFollowChanged(v);
-    },
-
     /** Callback when "split" button has been clicked. */
     _splitClicked: function() {
       this._view.handleSplitClicked();
     },
 
     /** Callback when "split" button has been clicked. */
     _scrollToSplit: function() {
       this._view.handleScrollToSplitClicked();
     },
 
     _updateSplitVisible: function(v) {
       this.toggleClass("logFetchButtonVisible", v, this.$.logSplit);
-    },
-
-    _updateBottomVisible: function(v) {
       this.toggleClass("logFetchButtonVisible", v, this.$.logBottom);
     },
 
-    _computeAnchorsNotClickable: function(playing, showStreamingControls,
-                                          rendering) {
-      // Anchors are not clickable if we're playing or the controls are
-      // not visible.
-      return ( playing || (!showStreamingControls) || rendering );
-    },
-
-    /** Filter function to invert a value. */
-    _not: function(v) {
-      return (!v);
-    },
-
     _onSignin: function() {
       this._view.handleSignin();
     },
   });
 </script>