Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(214)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

Issue 2179123004: DevTools: fix stick to bottom in console viewport (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Don't stick onkeydown when prompt fills viewport Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2009 Joseph Pecoraro 3 * Copyright (C) 2009 Joseph Pecoraro
4 * 4 *
5 * Redistribution and use in source and binary forms, with or without 5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions 6 * modification, are permitted provided that the following conditions
7 * are met: 7 * are met:
8 * 8 *
9 * 1. Redistributions of source code must retain the above copyright 9 * 1. Redistributions of source code must retain the above copyright
10 * notice, this list of conditions and the following disclaimer. 10 * notice, this list of conditions and the following disclaimer.
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after
129 /** @type {!Array.<!WebInspector.ConsoleViewMessage>} */ 129 /** @type {!Array.<!WebInspector.ConsoleViewMessage>} */
130 this._consoleMessages = []; 130 this._consoleMessages = [];
131 this._viewMessageSymbol = Symbol("viewMessage"); 131 this._viewMessageSymbol = Symbol("viewMessage");
132 132
133 this._prompt = new WebInspector.TextPromptWithHistory(WebInspector.Execution ContextSelector.completionsForTextPromptInCurrentContext); 133 this._prompt = new WebInspector.TextPromptWithHistory(WebInspector.Execution ContextSelector.completionsForTextPromptInCurrentContext);
134 this._prompt.setSuggestBoxEnabled(true); 134 this._prompt.setSuggestBoxEnabled(true);
135 this._prompt.setAutocompletionTimeout(0); 135 this._prompt.setAutocompletionTimeout(0);
136 this._prompt.renderAsBlock(); 136 this._prompt.renderAsBlock();
137 var proxyElement = this._prompt.attach(this._promptElement); 137 var proxyElement = this._prompt.attach(this._promptElement);
138 proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this), fal se); 138 proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this), fal se);
139 proxyElement.addEventListener("input", this._promptInput.bind(this), false);
139 140
140 this._consoleHistorySetting = WebInspector.settings.createLocalSetting("cons oleHistory", []); 141 this._consoleHistorySetting = WebInspector.settings.createLocalSetting("cons oleHistory", []);
141 var historyData = this._consoleHistorySetting.get(); 142 var historyData = this._consoleHistorySetting.get();
142 this._prompt.history().setHistoryData(historyData); 143 this._prompt.history().setHistoryData(historyData);
143 144
144 this._consoleHistoryAutocompleteSetting = WebInspector.moduleSetting("consol eHistoryAutocomplete"); 145 this._consoleHistoryAutocompleteSetting = WebInspector.moduleSetting("consol eHistoryAutocomplete");
145 this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHisto ryAutocompleteChanged, this); 146 this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHisto ryAutocompleteChanged, this);
146 this._consoleHistoryAutocompleteChanged(); 147 this._consoleHistoryAutocompleteChanged();
147 148
148 this._updateFilterStatus(); 149 this._updateFilterStatus();
149 WebInspector.moduleSetting("consoleTimestampsEnabled").addChangeListener(thi s._consoleTimestampsSettingChanged, this); 150 WebInspector.moduleSetting("consoleTimestampsEnabled").addChangeListener(thi s._consoleTimestampsSettingChanged, this);
150 151
151 this._registerWithMessageSink(); 152 this._registerWithMessageSink();
152 WebInspector.targetManager.observeTargets(this); 153 WebInspector.targetManager.observeTargets(this);
153 154
154 this._initConsoleMessages(); 155 this._initConsoleMessages();
155 156
156 WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this._executionContextChanged, this); 157 WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this._executionContextChanged, this);
158
159 this._messagesElement.addEventListener("mousedown", this._updateStickToBotto mOnMouseDown.bind(this), false);
160 this._messagesElement.addEventListener("mouseup", this._updateStickToBottomO nMouseUp.bind(this), false);
161 this._messagesElement.addEventListener("mouseleave", this._updateStickToBott omOnMouseUp.bind(this), false);
162 this._messagesElement.addEventListener("wheel", this._updateStickToBottomOnW heel.bind(this), false);
157 } 163 }
158 164
159 WebInspector.ConsoleView.persistedHistorySize = 300; 165 WebInspector.ConsoleView.persistedHistorySize = 300;
160 166
161 WebInspector.ConsoleView.prototype = { 167 WebInspector.ConsoleView.prototype = {
162 /** 168 /**
163 * @return {!WebInspector.SearchableView} 169 * @return {!WebInspector.SearchableView}
164 */ 170 */
165 searchableView: function() 171 searchableView: function()
166 { 172 {
(...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after
337 if (this._promptElement === WebInspector.currentFocusElement()) 343 if (this._promptElement === WebInspector.currentFocusElement())
338 return; 344 return;
339 // Set caret position before setting focus in order to avoid scrolling 345 // Set caret position before setting focus in order to avoid scrolling
340 // by focus(). 346 // by focus().
341 this._prompt.moveCaretToEndOfPrompt(); 347 this._prompt.moveCaretToEndOfPrompt();
342 WebInspector.setCurrentFocusElement(this._promptElement); 348 WebInspector.setCurrentFocusElement(this._promptElement);
343 }, 349 },
344 350
345 restoreScrollPositions: function() 351 restoreScrollPositions: function()
346 { 352 {
347 if (this._viewport.scrolledToBottom()) 353 if (this._viewport.stickToBottom())
348 this._immediatelyScrollToBottom(); 354 this._immediatelyScrollToBottom();
349 else 355 else
350 WebInspector.Widget.prototype.restoreScrollPositions.call(this); 356 WebInspector.Widget.prototype.restoreScrollPositions.call(this);
351 }, 357 },
352 358
353 onResize: function() 359 onResize: function()
354 { 360 {
355 this._scheduleViewportRefresh(); 361 this._scheduleViewportRefresh();
356 this._hidePromptSuggestBox(); 362 this._hidePromptSuggestBox();
357 if (this._viewport.scrolledToBottom()) 363 if (this._viewport.stickToBottom())
358 this._immediatelyScrollToBottom(); 364 this._immediatelyScrollToBottom();
359 for (var i = 0; i < this._visibleViewMessages.length; ++i) 365 for (var i = 0; i < this._visibleViewMessages.length; ++i)
360 this._visibleViewMessages[i].onResize(); 366 this._visibleViewMessages[i].onResize();
361 }, 367 },
362 368
363 _hidePromptSuggestBox: function() 369 _hidePromptSuggestBox: function()
364 { 370 {
365 this._prompt.hideSuggestBox(); 371 this._prompt.hideSuggestBox();
366 this._prompt.clearAutoComplete(true); 372 this._prompt.clearAutoComplete(true);
367 }, 373 },
368 374
369 _scheduleViewportRefresh: function() 375 _scheduleViewportRefresh: function()
370 { 376 {
371 /** 377 /**
372 * @this {WebInspector.ConsoleView} 378 * @this {WebInspector.ConsoleView}
373 * @return {!Promise.<undefined>} 379 * @return {!Promise.<undefined>}
374 */ 380 */
375 function invalidateViewport() 381 function invalidateViewport()
376 { 382 {
383 if (this._muteViewportUpdates)
dgozman 2016/08/09 21:16:47 Let's do dirty flag here as well.
luoe 2016/08/10 01:03:07 Done.
384 return Promise.resolve();
377 if (this._needsFullUpdate) { 385 if (this._needsFullUpdate) {
378 this._updateMessageList(); 386 this._updateMessageList();
379 delete this._needsFullUpdate; 387 delete this._needsFullUpdate;
380 } else { 388 } else {
381 this._viewport.invalidate(); 389 this._viewport.invalidate();
382 } 390 }
383 return Promise.resolve(); 391 return Promise.resolve();
384 } 392 }
393 if (this._muteViewportUpdates) {
394 this._maybeDirtyWhileMuted = true;
395 return;
396 }
385 this._viewportThrottler.schedule(invalidateViewport.bind(this)); 397 this._viewportThrottler.schedule(invalidateViewport.bind(this));
386 }, 398 },
387 399
388 _immediatelyScrollToBottom: function() 400 _immediatelyScrollToBottom: function()
389 { 401 {
390 // This will scroll viewport and trigger its refresh. 402 // This will scroll viewport and trigger its refresh.
403 this._viewport.setStickToBottom(true);
391 this._promptElement.scrollIntoView(true); 404 this._promptElement.scrollIntoView(true);
392 }, 405 },
393 406
394 _updateFilterStatus: function() 407 _updateFilterStatus: function()
395 { 408 {
396 this._filterStatusTextElement.textContent = WebInspector.UIString(this._ hiddenByFilterCount === 1 ? "%d message is hidden by filters." : "%d messages ar e hidden by filters.", this._hiddenByFilterCount); 409 this._filterStatusTextElement.textContent = WebInspector.UIString(this._ hiddenByFilterCount === 1 ? "%d message is hidden by filters." : "%d messages ar e hidden by filters.", this._hiddenByFilterCount);
397 this._filterStatusMessageElement.style.display = this._hiddenByFilterCou nt ? "" : "none"; 410 this._filterStatusMessageElement.style.display = this._hiddenByFilterCou nt ? "" : "none";
398 }, 411 },
399 412
400 /** 413 /**
(...skipping 336 matching lines...) Expand 10 before | Expand all | Expand 10 after
737 section.addKey(shortcut.makeDescriptor(shortcut.Keys.Enter), WebInspecto r.UIString("Execute command")); 750 section.addKey(shortcut.makeDescriptor(shortcut.Keys.Enter), WebInspecto r.UIString("Execute command"));
738 }, 751 },
739 752
740 _clearPromptBackwards: function() 753 _clearPromptBackwards: function()
741 { 754 {
742 this._prompt.setText(""); 755 this._prompt.setText("");
743 }, 756 },
744 757
745 _promptKeyDown: function(event) 758 _promptKeyDown: function(event)
746 { 759 {
747 if (isEnterKey(event)) { 760 if (event.key === "PageUp") {
761 this._updateStickToBottomOnWheel();
762 } else if (isEnterKey(event)) {
748 this._enterKeyPressed(event); 763 this._enterKeyPressed(event);
749 return; 764 return;
750 } 765 }
751 766
752 var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(event); 767 var shortcut = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
753 var handler = this._shortcuts[shortcut]; 768 var handler = this._shortcuts[shortcut];
754 if (handler) { 769 if (handler) {
755 handler(); 770 handler();
756 event.preventDefault(); 771 event.preventDefault();
757 } 772 }
(...skipping 230 matching lines...) Expand 10 before | Expand all | Expand 10 after
988 this._currentMatchRangeIndex = index; 1003 this._currentMatchRangeIndex = index;
989 this._searchableView.updateCurrentMatchIndex(index); 1004 this._searchableView.updateCurrentMatchIndex(index);
990 matchRange = this._regexMatchRanges[index]; 1005 matchRange = this._regexMatchRanges[index];
991 var message = this._visibleViewMessages[matchRange.messageIndex]; 1006 var message = this._visibleViewMessages[matchRange.messageIndex];
992 var highlightNode = message.searchHighlightNode(matchRange.matchIndex); 1007 var highlightNode = message.searchHighlightNode(matchRange.matchIndex);
993 highlightNode.classList.add(WebInspector.highlightedCurrentSearchResultC lassName); 1008 highlightNode.classList.add(WebInspector.highlightedCurrentSearchResultC lassName);
994 this._viewport.scrollItemIntoView(matchRange.messageIndex); 1009 this._viewport.scrollItemIntoView(matchRange.messageIndex);
995 highlightNode.scrollIntoViewIfNeeded(); 1010 highlightNode.scrollIntoViewIfNeeded();
996 }, 1011 },
997 1012
1013 _updateStickToBottomOnMouseDown: function()
1014 {
1015 this._muteViewportUpdates = true;
1016 this._viewport.setStickToBottom(false);
1017 if (this._waitForScrollTimeout) {
1018 clearTimeout(this._waitForScrollTimeout);
1019 delete this._waitForScrollTimeout;
1020 }
1021 },
1022
1023 _updateStickToBottomOnMouseUp: function()
1024 {
1025 if (!this._muteViewportUpdates)
1026 return;
1027
1028 // Delay querying isScrolledToBottom to give time for smooth scroll
1029 // events to arrive. The value for the longest timeout duration is
1030 // retrieved from crbug.com/575409.
1031 this._waitForScrollTimeout = setTimeout(updateViewportState.bind(this), 200);
1032
1033 /**
1034 * @this {!WebInspector.ConsoleView}
1035 */
1036 function updateViewportState()
1037 {
1038 this._muteViewportUpdates = false;
dgozman 2016/08/09 21:16:47 Also do |delete this._waitForScrollTimeout|
luoe 2016/08/10 01:03:07 Done.
1039 this._viewport.setStickToBottom(this._messagesElement.isScrolledToBo ttom());
1040 if (this._maybeDirtyWhileMuted) {
1041 this._scheduleViewportRefresh();
dgozman 2016/08/09 21:16:47 Let's add a test which adds new messages while use
luoe 2016/08/10 01:03:07 Done.
1042 delete this._maybeDirtyWhileMuted;
1043 }
1044 this._updateViewportStickinessForTest();
1045 }
1046 },
1047
1048 _updateViewportStickinessForTest: function()
1049 {
1050 // This method is sniffed in tests.
1051 },
1052
1053 _updateStickToBottomOnWheel: function()
1054 {
1055 this._updateStickToBottomOnMouseDown();
1056 this._updateStickToBottomOnMouseUp();
1057 },
1058
1059 _promptInput: function(event)
1060 {
1061 // When the prompt is the only visible item, do not scroll to bottom.
1062 if (this.itemCount() === 0 || this._viewport.firstVisibleIndex() === thi s.itemCount())
1063 this._viewport.setStickToBottom(false);
dgozman 2016/08/09 21:16:47 I don't think we should set it false - just return
luoe 2016/08/10 01:03:07 Done.
1064 else
1065 this._immediatelyScrollToBottom();
1066 },
1067
998 __proto__: WebInspector.VBox.prototype 1068 __proto__: WebInspector.VBox.prototype
999 } 1069 }
1000 1070
1001 /** 1071 /**
1002 * @constructor 1072 * @constructor
1003 * @extends {WebInspector.Object} 1073 * @extends {WebInspector.Object}
1004 * @param {!WebInspector.ConsoleView} view 1074 * @param {!WebInspector.ConsoleView} view
1005 */ 1075 */
1006 WebInspector.ConsoleViewFilter = function(view) 1076 WebInspector.ConsoleViewFilter = function(view)
1007 { 1077 {
(...skipping 322 matching lines...) Expand 10 before | Expand all | Expand 10 after
1330 return true; 1400 return true;
1331 } 1401 }
1332 return false; 1402 return false;
1333 } 1403 }
1334 } 1404 }
1335 1405
1336 /** 1406 /**
1337 * @typedef {{messageIndex: number, matchIndex: number}} 1407 * @typedef {{messageIndex: number, matchIndex: number}}
1338 */ 1408 */
1339 WebInspector.ConsoleView.RegexMatchRange; 1409 WebInspector.ConsoleView.RegexMatchRange;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698