DevTools: fix stick to bottom in console viewport

third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 118 matching lines @@
     /** @type {!Array.<!WebInspector.ConsoleViewMessage>} */
     this._consoleMessages = [];
     this._viewMessageSymbol = Symbol("viewMessage");
 
     this._prompt = new WebInspector.TextPromptWithHistory(WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
     this._prompt.setSuggestBoxEnabled(true);
     this._prompt.setAutocompletionTimeout(0);
     this._prompt.renderAsBlock();
     var proxyElement = this._prompt.attach(this._promptElement);
     proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this), false);
+    proxyElement.addEventListener("input", this._promptInput.bind(this), false);
 
     this._consoleHistorySetting = WebInspector.settings.createLocalSetting("consoleHistory", []);
     var historyData = this._consoleHistorySetting.get();
     this._prompt.setHistoryData(historyData);
 
     this._consoleHistoryAutocompleteSetting = WebInspector.moduleSetting("consoleHistoryAutocomplete");
     this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHistoryAutocompleteChanged, this);
     this._consoleHistoryAutocompleteChanged();
 
     this._updateFilterStatus();
     WebInspector.moduleSetting("consoleTimestampsEnabled").addChangeListener(this._consoleTimestampsSettingChanged, this);
 
     this._registerWithMessageSink();
     WebInspector.targetManager.observeTargets(this);
 
     this._initConsoleMessages();
 
     WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this._executionContextChanged, this);
+
+    this._messagesElement.addEventListener("mousedown", this._updateStickToBottomOnMouseDown.bind(this), false);
+    this._messagesElement.addEventListener("mouseup", this._updateStickToBottomOnMouseUp.bind(this), false);
+    this._messagesElement.addEventListener("mouseleave", this._updateStickToBottomOnMouseUp.bind(this), false);
+    this._messagesElement.addEventListener("wheel", this._updateStickToBottomOnWheel.bind(this), false);
 }
 
 WebInspector.ConsoleView.persistedHistorySize = 300;
 
 WebInspector.ConsoleView.prototype = {
     /**
      * @return {!WebInspector.SearchableView}
      */
     searchableView: function()
     {
@@ skipping 179 matching lines @@
         if (this._promptElement === WebInspector.currentFocusElement())
             return;
         // Set caret position before setting focus in order to avoid scrolling
         // by focus().
         this._prompt.moveCaretToEndOfPrompt();
         WebInspector.setCurrentFocusElement(this._promptElement);
     },
 
     restoreScrollPositions: function()
     {
-        if (this._viewport.scrolledToBottom())
+        if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         else
             WebInspector.Widget.prototype.restoreScrollPositions.call(this);
     },
 
     onResize: function()
     {
         this._scheduleViewportRefresh();
         this._hidePromptSuggestBox();
-        if (this._viewport.scrolledToBottom())
+        if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         for (var i = 0; i < this._visibleViewMessages.length; ++i)
             this._visibleViewMessages[i].onResize();
     },
 
     _hidePromptSuggestBox: function()
     {
         this._prompt.hideSuggestBox();
         this._prompt.clearAutoComplete(true);
     },
 
     _scheduleViewportRefresh: function()
     {
         /**
          * @this {WebInspector.ConsoleView}
          * @return {!Promise.<undefined>}
          */
         function invalidateViewport()
         {
+            if (this._muteViewportUpdates)
+                return Promise.resolve();
             if (this._needsFullUpdate) {
                 this._updateMessageList();
                 delete this._needsFullUpdate;
             } else {
                 this._viewport.invalidate();
             }
             return Promise.resolve();
         }
+        if (this._muteViewportUpdates)
+            return;
         this._viewportThrottler.schedule(invalidateViewport.bind(this));
     },
 
     _immediatelyScrollToBottom: function()
     {
         // This will scroll viewport and trigger its refresh.
+        this._viewport.setStickToBottom(true);
         this._promptElement.scrollIntoView(true);
     },
 
     _updateFilterStatus: function()
     {
         this._filterStatusTextElement.textContent = WebInspector.UIString(this._hiddenByFilterCount === 1 ? "%d message is hidden by filters." : "%d messages are hidden by filters.", this._hiddenByFilterCount);
         this._filterStatusMessageElement.style.display = this._hiddenByFilterCount ? "" : "none";
     },
 
     /**
@@ skipping 336 matching lines @@
         section.addKey(shortcut.makeDescriptor(shortcut.Keys.Enter), WebInspector.UIString("Execute command"));
     },
 
     _clearPromptBackwards: function()
     {
         this._prompt.setText("");
     },
 
     _promptKeyDown: function(event)
     {
-        if (isEnterKey(event)) {
+        if (event.key === "PageUp") {

[dgozman, 2016/08/05 21:08:25]

Let's move this back to keydown on element.

[luoe, 2016/08/05 23:05:57]

On a closer look, I think this actually can stay.  The reason why we decided on
moving it back was because we want to run the handler when the prompt is not
focused.

However, if the prompt is not focused, the consoleView isn't focused either and
the listener won't fire.

If we put a keydown listener on the entire document, it seems that native PageUp
scrolling only happens when the selected text is 'in view'.  Once it scrolls the
selection out of view, it doesn't scroll.

+            this._updateStickToBottomOnWheel();
+        } else if (isEnterKey(event)) {
             this._enterKeyPressed(event);
             return;
         }
 
         var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
         var handler = this._shortcuts[shortcut];
         if (handler) {
             handler();
             event.preventDefault();
         }
@@ skipping 230 matching lines @@
         this._currentMatchRangeIndex = index;
         this._searchableView.updateCurrentMatchIndex(index);
         matchRange = this._regexMatchRanges[index];
         var message = this._visibleViewMessages[matchRange.messageIndex];
         var highlightNode = message.searchHighlightNode(matchRange.matchIndex);
         highlightNode.classList.add(WebInspector.highlightedCurrentSearchResultClassName);
         this._viewport.scrollItemIntoView(matchRange.messageIndex);
         highlightNode.scrollIntoViewIfNeeded();
     },
 
+    _updateStickToBottomOnMouseDown: function()
+    {
+        this._muteViewportUpdates = true;
+        this._viewport.setStickToBottom(false);
+    },
+
+    _updateStickToBottomOnMouseUp: function()
+    {
+        if (!this._muteViewportUpdates)
+            return;
+
+        // Delay querying isScrolledToBottom to give time for smooth scroll
+        // events to arrive. The value for the longest timeout duration is
+        // retrieved from crbug.com/575409.
+        setTimeout(updateViewportState.bind(this), 200);

[dgozman, 2016/08/05 21:08:25]

Let's cancel previous one if any.

[luoe, 2016/08/05 23:05:57]

Done.

+
+        /**
+         * @this {!WebInspector.ConsoleView}
+         */
+        function updateViewportState()
+        {
+            this._muteViewportUpdates = false;

[dgozman, 2016/08/05 21:08:25]

We should schedule update here.

[luoe, 2016/08/05 23:05:57]

We should.  Doing so introduces an unfortunate slowdown when scrolling with a
console.table(document.all).  The reason it's slow is because the
scheduleViewportRefresh() does a ViewportControl.fullViewportUpdate().  Can we
add a flag that tells it to run partial updates only?

+            this._viewport.setStickToBottom(this._messagesElement.isScrolledToBottom());
+            this._updateViewportStickinessForTest();
+        }
+    },
+
+    _updateViewportStickinessForTest: function()
+    {
+        // This method is sniffed in tests.
+    },
+
+    _updateStickToBottomOnWheel: function()
+    {
+        this._updateStickToBottomOnMouseDown();
+        this._updateStickToBottomOnMouseUp();
+    },
+
+    _promptInput: function(event)
+    {
+        this._viewport.setStickToBottom(true);

[dgozman, 2016/08/05 21:08:25]

Let's use _immediatelyScrollToBottom.

[luoe, 2016/08/05 23:05:57]

Done.

+    },
+
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {!WebInspector.ConsoleView} view
  */
 WebInspector.ConsoleViewFilter = function(view)
 {
@@ skipping 322 matching lines @@
             return true;
         }
         return false;
     }
 }
 
 /**
 * @typedef {{messageIndex: number, matchIndex: number}}
 */
 WebInspector.ConsoleView.RegexMatchRange;