DevTools: fix stick to bottom in console viewport

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

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
index 10eeee0902406c2fbb9b593490a3a0d9e9a7bd97..a1dd5849c985e740dd7fc829f2ed5d7d43bbb08f 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js
@@ -136,6 +136,7 @@ WebInspector.ConsoleView = function()
     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();
@@ -154,6 +155,11 @@ WebInspector.ConsoleView = function()
     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;
@@ -353,7 +359,7 @@ WebInspector.ConsoleView.prototype = {
 
     restoreScrollPositions: function()
     {
-        if (this._viewport.scrolledToBottom())
+        if (this._viewport.stickToBottom())
             this._immediatelyScrollToBottom();
         else
             WebInspector.Widget.prototype.restoreScrollPositions.call(this);
@@ -363,7 +369,7 @@ WebInspector.ConsoleView.prototype = {
     {
         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();
@@ -383,6 +389,8 @@ WebInspector.ConsoleView.prototype = {
          */
         function invalidateViewport()
         {
+            if (this._muteViewportUpdates)
+                return Promise.resolve();
             if (this._needsFullUpdate) {
                 this._updateMessageList();
                 delete this._needsFullUpdate;
@@ -391,12 +399,15 @@ WebInspector.ConsoleView.prototype = {
             }
             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);
     },
 
@@ -753,7 +764,9 @@ WebInspector.ConsoleView.prototype = {
 
     _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;
         }
@@ -1004,6 +1017,49 @@ WebInspector.ConsoleView.prototype = {
         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
 }