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..c3779cafc93684cb7d5ae6e73656b283f0694137 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,12 @@ 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("mousewheel", this._updateStickToBottomOnMouseWheel.bind(this), false);
+    this._messagesElement.addEventListener("mouseup", this._updateStickToBottomOnMouseUp.bind(this), false);
+    this._messagesElement.addEventListener("mouseleave", this._updateStickToBottomOnMouseUp.bind(this), false);
+    this._messagesElement.addEventListener("keydown", this._updateStickToBottomOnKeyDown.bind(this), true);

[dgozman, 2016/08/05 17:36:42]

false

[luoe, 2016/08/05 19:43:57]

Done.

 }
 
 WebInspector.ConsoleView.persistedHistorySize = 300;
@@ -353,7 +360,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 +370,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 +390,8 @@ WebInspector.ConsoleView.prototype = {
          */
         function invalidateViewport()
         {
+            if (this._muteViewportUpdates)
+                return Promise.resolve();
             if (this._needsFullUpdate) {
                 this._updateMessageList();
                 delete this._needsFullUpdate;
@@ -391,12 +400,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);
     },
 
@@ -1004,6 +1016,75 @@ WebInspector.ConsoleView.prototype = {
         highlightNode.scrollIntoViewIfNeeded();
     },
 
+    _updateStickToBottomOnMouseDown: function()
+    {
+        this._muteViewportUpdates = true;
+        this._viewport.setStickToBottom(false);
+        this._wasScrolledToBottom = this._messagesElement.isScrolledToBottom();

[dgozman, 2016/08/05 17:36:41]

This we can remove.

[luoe, 2016/08/05 19:43:57]

Done.

+    },
+
+    _updateStickToBottomOnMouseUp: function()
+    {
+        if (!this._muteViewportUpdates)
+            return;
+
+        this._muteViewportUpdates = false;

[dgozman, 2016/08/05 17:36:41]

This goes to updateViewportState, together with scheduleUpdate.

[luoe, 2016/08/05 19:43:57]

Done.

+        if (this._wasScrolledToBottom) {
+            // Clicking the scrollbar may trigger events in the order:
+            // mousedown > mouseup > scroll. 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);
+        } else {
+            // In another case, when users drag the scroll thumb to the bottom,
+            // the viewport should stick. Checking whether the mouse is released
+            // at the bottom of the viewport is not verifiable after an async
+            // timeout, so we do it immediately.
+            updateViewportState.call(this);
+        }
+        delete this._wasScrolledToBottom;
+
+        /**
+         * @this {!WebInspector.ConsoleView}
+         */
+        function updateViewportState()
+        {
+            this._viewport.setStickToBottom(this._messagesElement.isScrolledToBottom());
+            this._updateViewportStickinessForTest();
+        }
+    },
+
+    _updateViewportStickinessForTest: function()
+    {
+        // This method is sniffed in tests.
+    },
+
+    _updateStickToBottomOnMouseWheel: function()

[dgozman, 2016/08/05 17:10:01]

Do we handle touchpad here? Are there any other types of input to handle?
Could it be that scroll/input api already has a mechanism to handle this?

[luoe, 2016/08/05 19:43:57]

Good catch, switched from 'mousewheel' to 'wheel'.  Tested on Mac, touchpad
scrolls & flings fire wheel event.  According to MDN, 'wheel' can be generated
by an actual mouse or touch event.

+    {
+        this._updateStickToBottomOnMouseDown();
+        this._updateStickToBottomOnMouseUp();
+    },
+
+    _promptInput: function(event)
+    {
+        this._viewport.setStickToBottom(true);
+    },
+
+    _updateStickToBottomOnKeyDown: function(event)
+    {
+        if (!this._prompt.isCaretInsidePrompt())
+            return;
+
+        // Check for keys that should focus on prompt but do not change input.
+        var isHomeEnd = event.key === "Home" || event.key === "End";
+        var isArrowKey = event.key === "ArrowUp" || event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft";
+
+        if (isHomeEnd || isArrowKey || event.key === "PageDown")
+            this._viewport.setStickToBottom(true);
+        else if (event.key === "PageUp")

[dgozman, 2016/08/05 17:10:01]

PageUp/PageDown are handled by multiline prompt - it moves the caret.
Can we avoid listening to the keyboard at all? As I understand it, we want to
stick to bottom when prompt gets attention (either input or selection changed).

[luoe, 2016/08/05 19:43:57]

We can actually move this logic into promptKeyDown(), which should fire when the
prompt is focused.

+            this._updateStickToBottomOnMouseWheel();

[dgozman, 2016/08/05 17:36:41]

We call this for all the keys listed above.

[luoe, 2016/08/05 19:43:57]

After manual testing, it looks like the rest of these don't need to call
updateStickToBottomOnMouseWheel.  Native behavior handles them fine

+    },
+
     __proto__: WebInspector.VBox.prototype
 }