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.history().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 170 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) {
+                this._maybeDirtyWhileMuted = true;
+                return Promise.resolve();
+            }
             if (this._needsFullUpdate) {
                 this._updateMessageList();
                 delete this._needsFullUpdate;
             } else {
                 this._viewport.invalidate();
             }
             return Promise.resolve();
         }
+        if (this._muteViewportUpdates) {
+            this._maybeDirtyWhileMuted = true;
+            this._scheduleViewportRefreshForTest(true);
+            return;
+        } else {
+            this._scheduleViewportRefreshForTest(false);
+        }
         this._viewportThrottler.schedule(invalidateViewport.bind(this));
     },
 
+    /**
+     * @param {boolean} muted
+     */
+    _scheduleViewportRefreshForTest: function(muted)
+    {
+        // This functions is sniffed in tests.
+    },
+
     _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") {

[luoe, 2016/08/12 18:18:12]

Remove this

+            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);
+        if (this._waitForScrollTimeout) {
+            clearTimeout(this._waitForScrollTimeout);
+            delete this._waitForScrollTimeout;
+        }
+    },
+
+    _updateStickToBottomOnMouseUp: function()
+    {
+        if (!this._muteViewportUpdates)
+            return;
+
+        var selectedRange = cloneRange(this._viewport.getVisibleRange());
+        var isSelectionInPrompt = selectedRange && selectedRange.startContainer === this._promptElement;
+        var isMessagesSelected = selectedRange && this._messagesElement.isSelfOrAncestor(selectedRange.startContainer);
+
+        // 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. Force the viewport to stop sticking
+        // and allow keyboard navigation of the viewport (native behavior) when
+        // the user selects a new range inside viewport messages.
+        if (isMessagesSelected && !isSelectionInPrompt && !rangesAreEqual(selectedRange, this._lastSelectedRange))
+            this._waitForScrollTimeout = setTimeout(updateViewportState.bind(this, false), 200);
+        else
+            this._waitForScrollTimeout = setTimeout(updateViewportState.bind(this), 200);
+        this._lastSelectedRange = selectedRange;
+
+        /**
+         * @param {?{startContainer: ?Node, startOffset: number, endContainer: ?Node, endOffset: number, collapsed: boolean}} range1
+         * @param {?{startContainer: ?Node, startOffset: number, endContainer: ?Node, endOffset: number, collapsed: boolean}} range2
+         * @return {boolean}
+         */
+        function rangesAreEqual(range1, range2)
+        {
+            var collapsedOrNull1 = !range1 || range1.collapsed;
+            var collapsedOrNull2 = !range2 || range2.collapsed;
+            if (collapsedOrNull1 && collapsedOrNull2)
+                return true;
+            else if (collapsedOrNull1 !== collapsedOrNull2)
+                return false;
+            return range1.startContainer === range2.startContainer &&
+                range1.startOffset === range2.startOffset &&
+                range1.endContainer === range2.endContainer &&
+                range1.endOffset === range2.endOffset &&
+                range1.collapsed === range2.collapsed;
+        }
+
+        /**
+         * @param  {?Range} range
+         * @return {?{startContainer: ?Node, startOffset: number, endContainer: ?Node, endOffset: number, collapsed: boolean}}
+         */
+        function cloneRange(range)
+        {
+            // Return a safe copy of Range data just in case the native Range
+            // has changed without notice after DOM mutation.
+            if (!range)
+                return range;
+            return {
+                startContainer: range.startContainer,
+                startOffset: range.startOffset,
+                endContainer: range.endContainer,
+                endOffset: range.endOffset,
+                collapsed: range.collapsed
+            };
+        }
+
+        /**
+         * @this {!WebInspector.ConsoleView}
+         * @param {boolean=} shouldStickToBottom
+         */
+        function updateViewportState(shouldStickToBottom)
+        {
+            if (typeof shouldStickToBottom === "undefined")
+                shouldStickToBottom = this._messagesElement.isScrolledToBottom();
+            this._viewport.setStickToBottom(shouldStickToBottom);
+            this._muteViewportUpdates = false;
+            if (this._maybeDirtyWhileMuted) {
+                this._scheduleViewportRefresh();
+                delete this._maybeDirtyWhileMuted;
+            }
+            delete this._waitForScrollTimeout;
+            this._updateViewportStickinessForTest();
+        }
+    },
+
+    _updateViewportStickinessForTest: function()
+    {
+        // This method is sniffed in tests.
+    },
+
+    _updateStickToBottomOnWheel: function()
+    {
+        this._updateStickToBottomOnMouseDown();
+        this._updateStickToBottomOnMouseUp();
+    },
+
+    _promptInput: function(event)
+    {
+        // Scroll to the bottom, except when the prompt is the only visible item.
+        if (this.itemCount() !== 0 && this._viewport.firstVisibleIndex() !== this.itemCount())
+            this._immediatelyScrollToBottom();
+    },
+
     __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;