Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2013 Google Inc. All rights reserved. |
| 3 | * |
| 4 | * Redistribution and use in source and binary forms, with or without |
| 5 | * modification, are permitted provided that the following conditions are |
| 6 | * met: |
| 7 | * |
| 8 | * * Redistributions of source code must retain the above copyright |
| 9 | * notice, this list of conditions and the following disclaimer. |
| 10 | * * Redistributions in binary form must reproduce the above |
| 11 | * copyright notice, this list of conditions and the following disclaimer |
| 12 | * in the documentation and/or other materials provided with the |
| 13 | * distribution. |
| 14 | * * Neither the name of Google Inc. nor the names of its |
| 15 | * contributors may be used to endorse or promote products derived from |
| 16 | * this software without specific prior written permission. |
| 17 | * |
| 18 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 19 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 20 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 21 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 22 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 23 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 24 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 28 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 | */ |
| 30 | |
Jan Scheffler | c5bc69f | 2020-07-30 09:51:52 | [diff] [blame] | 31 | |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 32 | import * as Components from '../components/components.js'; |
| 33 | import * as UI from '../ui/ui.js'; |
Patrick Brosset | e3474dc | 2020-09-29 12:38:26 | [diff] [blame] | 34 | import {ConsoleViewMessage} from './ConsoleViewMessage.js'; // eslint-disable-line no-unused-vars |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 35 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 36 | /** |
| 37 | * @unrestricted |
| 38 | */ |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 39 | export class ConsoleViewport { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 40 | /** |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 41 | * @param {!ConsoleViewportProvider} provider |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 42 | */ |
| 43 | constructor(provider) { |
Sigurd Schneider | 53f3352 | 2020-10-08 15:00:49 | [diff] [blame] | 44 | this.element = /** @type {!HTMLElement} */ (document.createElement('div')); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 45 | this.element.style.overflow = 'auto'; |
| 46 | this._topGapElement = this.element.createChild('div'); |
| 47 | this._topGapElement.style.height = '0px'; |
| 48 | this._topGapElement.style.color = 'transparent'; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 49 | this._topGapElementActive = false; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 50 | this._contentElement = this.element.createChild('div'); |
| 51 | this._bottomGapElement = this.element.createChild('div'); |
| 52 | this._bottomGapElement.style.height = '0px'; |
| 53 | this._bottomGapElement.style.color = 'transparent'; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 54 | this._bottomGapElementActive = false; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 55 | |
| 56 | // Text content needed for range intersection checks in _updateSelectionModel. |
| 57 | // Use Unicode ZERO WIDTH NO-BREAK SPACE, which avoids contributing any height to the element's layout overflow. |
| 58 | this._topGapElement.textContent = '\uFEFF'; |
| 59 | this._bottomGapElement.textContent = '\uFEFF'; |
| 60 | |
Joel Einbinder | ca8fa5a | 2018-08-24 23:30:25 | [diff] [blame] | 61 | UI.ARIAUtils.markAsHidden(this._topGapElement); |
| 62 | UI.ARIAUtils.markAsHidden(this._bottomGapElement); |
| 63 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 64 | this._provider = provider; |
| 65 | this.element.addEventListener('scroll', this._onScroll.bind(this), false); |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 66 | this.element.addEventListener('copy', /** @type {!EventListener} */ (this._onCopy.bind(this)), false); |
| 67 | this.element.addEventListener('dragstart', /** @type {function(!Event):*} */ (this._onDragStart.bind(this)), false); |
| 68 | this._contentElement.addEventListener('focusin', /** @type {!EventListener} */ (this._onFocusIn.bind(this)), false); |
| 69 | this._contentElement.addEventListener( |
| 70 | 'focusout', /** @type {!EventListener} */ (this._onFocusOut.bind(this)), false); |
| 71 | this._contentElement.addEventListener('keydown', /** @type {!EventListener} */ (this._onKeyDown.bind(this)), false); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 72 | this._virtualSelectedIndex = -1; |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 73 | this._contentElement.tabIndex = -1; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 74 | |
| 75 | this._firstActiveIndex = -1; |
| 76 | this._lastActiveIndex = -1; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 77 | /** @type {!Array<!ConsoleViewportElement>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 78 | this._renderedItems = []; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 79 | /** @type {?{item: number, node: !Node, offset: number}} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 80 | this._anchorSelection = null; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 81 | /** @type {?{item: number, node: !Node, offset: number}} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 82 | this._headSelection = null; |
| 83 | this._itemCount = 0; |
| 84 | this._cumulativeHeights = new Int32Array(0); |
| 85 | this._muteCopyHandler = false; |
| 86 | |
| 87 | // Listen for any changes to descendants and trigger a refresh. This ensures |
| 88 | // that items updated asynchronously will not break stick-to-bottom behavior |
| 89 | // if they change the scroll height. |
| 90 | this._observer = new MutationObserver(this.refresh.bind(this)); |
| 91 | this._observerConfig = {childList: true, subtree: true}; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 92 | this._stickToBottom = false; |
| 93 | this._selectionIsBackward = false; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 94 | } |
| 95 | |
| 96 | /** |
| 97 | * @return {boolean} |
| 98 | */ |
| 99 | stickToBottom() { |
| 100 | return this._stickToBottom; |
| 101 | } |
| 102 | |
| 103 | /** |
| 104 | * @param {boolean} value |
| 105 | */ |
| 106 | setStickToBottom(value) { |
| 107 | this._stickToBottom = value; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 108 | if (this._stickToBottom) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 109 | this._observer.observe(this._contentElement, this._observerConfig); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 110 | } else { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 111 | this._observer.disconnect(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 112 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 113 | } |
| 114 | |
Erik Luo | ad6c91c | 2018-12-06 03:28:42 | [diff] [blame] | 115 | /** |
| 116 | * @return {boolean} |
| 117 | */ |
| 118 | hasVirtualSelection() { |
| 119 | return this._virtualSelectedIndex !== -1; |
| 120 | } |
| 121 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 122 | copyWithStyles() { |
| 123 | this._muteCopyHandler = true; |
| 124 | this.element.ownerDocument.execCommand('copy'); |
| 125 | this._muteCopyHandler = false; |
| 126 | } |
| 127 | |
| 128 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 129 | * @param {!ClipboardEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 130 | */ |
| 131 | _onCopy(event) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 132 | if (this._muteCopyHandler) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 133 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 134 | } |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 135 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 136 | const text = this._selectedText(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 137 | if (!text) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 138 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 139 | } |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 140 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 141 | event.preventDefault(); |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 142 | |
| 143 | if (this._selectionContainsTable()) { |
| 144 | this.copyWithStyles(); |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 145 | } else if (event.clipboardData) { |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 146 | event.clipboardData.setData('text/plain', text); |
| 147 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 148 | } |
| 149 | |
| 150 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 151 | * @param {!FocusEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 152 | */ |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 153 | _onFocusIn(event) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 154 | const renderedIndex = |
| 155 | this._renderedItems.findIndex(item => item.element().isSelfOrAncestor(/** @type {?Node} */ (event.target))); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 156 | if (renderedIndex !== -1) { |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 157 | this._virtualSelectedIndex = this._firstActiveIndex + renderedIndex; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 158 | } |
Erik Luo | fc6a630 | 2018-11-02 06:48:52 | [diff] [blame] | 159 | let focusLastChild = false; |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 160 | // Make default selection when moving from external (e.g. prompt) to the container. |
| 161 | if (this._virtualSelectedIndex === -1 && this._isOutsideViewport(/** @type {?Element} */ (event.relatedTarget)) && |
Erik Luo | ad6c91c | 2018-12-06 03:28:42 | [diff] [blame] | 162 | event.target === this._contentElement && this._itemCount) { |
Erik Luo | fc6a630 | 2018-11-02 06:48:52 | [diff] [blame] | 163 | focusLastChild = true; |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 164 | this._virtualSelectedIndex = this._itemCount - 1; |
Erik Luo | 840be6b | 2018-12-03 20:54:27 | [diff] [blame] | 165 | |
| 166 | // Update stick to bottom before scrolling into view. |
| 167 | this.refresh(); |
| 168 | this.scrollItemIntoView(this._virtualSelectedIndex); |
Erik Luo | fc6a630 | 2018-11-02 06:48:52 | [diff] [blame] | 169 | } |
| 170 | this._updateFocusedItem(focusLastChild); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 171 | } |
| 172 | |
| 173 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 174 | * @param {!FocusEvent} event |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 175 | */ |
| 176 | _onFocusOut(event) { |
| 177 | // Remove selection when focus moves to external location (e.g. prompt). |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 178 | if (this._isOutsideViewport(/** @type {?Element} */ (event.relatedTarget))) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 179 | this._virtualSelectedIndex = -1; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 180 | } |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 181 | this._updateFocusedItem(); |
| 182 | } |
| 183 | |
| 184 | /** |
| 185 | * @param {?Element} element |
| 186 | * @return {boolean} |
| 187 | */ |
| 188 | _isOutsideViewport(element) { |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 189 | return !!element && !element.isSelfOrDescendant(this._contentElement); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 190 | } |
| 191 | |
| 192 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 193 | * @param {!DragEvent} event |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 194 | */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 195 | _onDragStart(event) { |
| 196 | const text = this._selectedText(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 197 | if (!text) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 198 | return false; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 199 | } |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 200 | if (event.dataTransfer) { |
| 201 | event.dataTransfer.clearData(); |
| 202 | event.dataTransfer.setData('text/plain', text); |
| 203 | event.dataTransfer.effectAllowed = 'copy'; |
| 204 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 205 | return true; |
| 206 | } |
| 207 | |
| 208 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 209 | * @param {!KeyboardEvent} event |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 210 | */ |
| 211 | _onKeyDown(event) { |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 212 | if (UI.UIUtils.isEditing() || !this._itemCount || event.shiftKey) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 213 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 214 | } |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 215 | let isArrowUp = false; |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 216 | switch (event.key) { |
| 217 | case 'ArrowUp': |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 218 | if (this._virtualSelectedIndex > 0) { |
| 219 | isArrowUp = true; |
| 220 | this._virtualSelectedIndex--; |
| 221 | } else { |
| 222 | return; |
| 223 | } |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 224 | break; |
| 225 | case 'ArrowDown': |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 226 | if (this._virtualSelectedIndex < this._itemCount - 1) { |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 227 | this._virtualSelectedIndex++; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 228 | } else { |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 229 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 230 | } |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 231 | break; |
| 232 | case 'Home': |
| 233 | this._virtualSelectedIndex = 0; |
| 234 | break; |
| 235 | case 'End': |
| 236 | this._virtualSelectedIndex = this._itemCount - 1; |
| 237 | break; |
| 238 | default: |
| 239 | return; |
| 240 | } |
| 241 | event.consume(true); |
| 242 | this.scrollItemIntoView(this._virtualSelectedIndex); |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 243 | this._updateFocusedItem(isArrowUp); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 244 | } |
| 245 | |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 246 | /** |
| 247 | * @param {boolean=} focusLastChild |
| 248 | */ |
| 249 | _updateFocusedItem(focusLastChild) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 250 | const selectedElement = this.renderedElementAt(this._virtualSelectedIndex); |
| 251 | const changed = this._lastSelectedElement !== selectedElement; |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 252 | const containerHasFocus = this._contentElement === this.element.ownerDocument.deepActiveElement(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 253 | if (this._lastSelectedElement && changed) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 254 | this._lastSelectedElement.classList.remove('console-selected'); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 255 | } |
Erik Luo | 840be6b | 2018-12-03 20:54:27 | [diff] [blame] | 256 | if (selectedElement && (focusLastChild || changed || containerHasFocus) && this.element.hasFocus()) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 257 | selectedElement.classList.add('console-selected'); |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 258 | // Do not focus the message if something within holds focus (e.g. object). |
Erik Luo | 840be6b | 2018-12-03 20:54:27 | [diff] [blame] | 259 | if (focusLastChild) { |
| 260 | this.setStickToBottom(false); |
| 261 | this._renderedItems[this._virtualSelectedIndex - this._firstActiveIndex].focusLastChildOrSelf(); |
| 262 | } else if (!selectedElement.hasFocus()) { |
Peter Marshall | 477ef99 | 2020-05-12 17:59:55 | [diff] [blame] | 263 | selectedElement.focus({preventScroll: true}); |
Erik Luo | 0b8282e | 2018-10-08 20:37:46 | [diff] [blame] | 264 | } |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 265 | } |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 266 | if (this._itemCount && !this._contentElement.hasFocus()) { |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 267 | this._contentElement.tabIndex = 0; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 268 | } else { |
Erik Luo | b5bfff4 | 2018-09-20 02:52:39 | [diff] [blame] | 269 | this._contentElement.tabIndex = -1; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 270 | } |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 271 | this._lastSelectedElement = selectedElement; |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 272 | } |
| 273 | |
| 274 | /** |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 275 | * @return {!Element} |
| 276 | */ |
| 277 | contentElement() { |
| 278 | return this._contentElement; |
| 279 | } |
| 280 | |
| 281 | invalidate() { |
| 282 | delete this._cachedProviderElements; |
| 283 | this._itemCount = this._provider.itemCount(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 284 | if (this._virtualSelectedIndex > this._itemCount - 1) { |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 285 | this._virtualSelectedIndex = this._itemCount - 1; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 286 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 287 | this._rebuildCumulativeHeights(); |
| 288 | this.refresh(); |
| 289 | } |
| 290 | |
| 291 | /** |
| 292 | * @param {number} index |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 293 | * @return {?ConsoleViewportElement} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 294 | */ |
| 295 | _providerElement(index) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 296 | if (!this._cachedProviderElements) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 297 | this._cachedProviderElements = new Array(this._itemCount); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 298 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 299 | let element = this._cachedProviderElements[index]; |
| 300 | if (!element) { |
| 301 | element = this._provider.itemElement(index); |
| 302 | this._cachedProviderElements[index] = element; |
| 303 | } |
| 304 | return element; |
| 305 | } |
| 306 | |
| 307 | _rebuildCumulativeHeights() { |
| 308 | const firstActiveIndex = this._firstActiveIndex; |
| 309 | const lastActiveIndex = this._lastActiveIndex; |
| 310 | let height = 0; |
| 311 | this._cumulativeHeights = new Int32Array(this._itemCount); |
| 312 | for (let i = 0; i < this._itemCount; ++i) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 313 | if (firstActiveIndex <= i && i - firstActiveIndex < this._renderedItems.length && i <= lastActiveIndex) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 314 | height += this._renderedItems[i - firstActiveIndex].element().offsetHeight; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 315 | } else { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 316 | height += this._provider.fastHeight(i); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 317 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 318 | this._cumulativeHeights[i] = height; |
| 319 | } |
| 320 | } |
| 321 | |
| 322 | _rebuildCumulativeHeightsIfNeeded() { |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 323 | let totalCachedHeight = 0; |
| 324 | let totalMeasuredHeight = 0; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 325 | // Check whether current items in DOM have changed heights. Tolerate 1-pixel |
| 326 | // error due to double-to-integer rounding errors. |
| 327 | for (let i = 0; i < this._renderedItems.length; ++i) { |
| 328 | const cachedItemHeight = this._cachedItemHeight(this._firstActiveIndex + i); |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 329 | const measuredHeight = this._renderedItems[i].element().offsetHeight; |
| 330 | if (Math.abs(cachedItemHeight - measuredHeight) > 1) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 331 | this._rebuildCumulativeHeights(); |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 332 | return; |
| 333 | } |
| 334 | totalMeasuredHeight += measuredHeight; |
| 335 | totalCachedHeight += cachedItemHeight; |
| 336 | if (Math.abs(totalCachedHeight - totalMeasuredHeight) > 1) { |
| 337 | this._rebuildCumulativeHeights(); |
| 338 | return; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 339 | } |
| 340 | } |
| 341 | } |
| 342 | |
| 343 | /** |
| 344 | * @param {number} index |
| 345 | * @return {number} |
| 346 | */ |
| 347 | _cachedItemHeight(index) { |
| 348 | return index === 0 ? this._cumulativeHeights[0] : |
| 349 | this._cumulativeHeights[index] - this._cumulativeHeights[index - 1]; |
| 350 | } |
| 351 | |
| 352 | /** |
| 353 | * @param {?Selection} selection |
| 354 | * @suppressGlobalPropertiesCheck |
| 355 | */ |
| 356 | _isSelectionBackwards(selection) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 357 | if (!selection || !selection.rangeCount || !selection.anchorNode || !selection.focusNode) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 358 | return false; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 359 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 360 | const range = document.createRange(); |
| 361 | range.setStart(selection.anchorNode, selection.anchorOffset); |
| 362 | range.setEnd(selection.focusNode, selection.focusOffset); |
| 363 | return range.collapsed; |
| 364 | } |
| 365 | |
| 366 | /** |
| 367 | * @param {number} itemIndex |
| 368 | * @param {!Node} node |
| 369 | * @param {number} offset |
| 370 | * @return {!{item: number, node: !Node, offset: number}} |
| 371 | */ |
| 372 | _createSelectionModel(itemIndex, node, offset) { |
| 373 | return {item: itemIndex, node: node, offset: offset}; |
| 374 | } |
| 375 | |
| 376 | /** |
| 377 | * @param {?Selection} selection |
| 378 | */ |
| 379 | _updateSelectionModel(selection) { |
| 380 | const range = selection && selection.rangeCount ? selection.getRangeAt(0) : null; |
Sigurd Schneider | 3fe3c21 | 2020-10-06 05:14:41 | [diff] [blame] | 381 | if (!range || (!selection || selection.isCollapsed) || !this.element.hasSelection()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 382 | this._headSelection = null; |
| 383 | this._anchorSelection = null; |
| 384 | return false; |
| 385 | } |
| 386 | |
Sigurd Schneider | 3fe3c21 | 2020-10-06 05:14:41 | [diff] [blame] | 387 | let firstSelectedIndex = Number.MAX_VALUE; |
| 388 | let lastSelectedIndex = -1; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 389 | |
| 390 | let hasVisibleSelection = false; |
| 391 | for (let i = 0; i < this._renderedItems.length; ++i) { |
| 392 | if (range.intersectsNode(this._renderedItems[i].element())) { |
| 393 | const index = i + this._firstActiveIndex; |
Sigurd Schneider | 3fe3c21 | 2020-10-06 05:14:41 | [diff] [blame] | 394 | firstSelectedIndex = Math.min(firstSelectedIndex, index); |
| 395 | lastSelectedIndex = Math.max(lastSelectedIndex, index); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 396 | hasVisibleSelection = true; |
| 397 | } |
| 398 | } |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 399 | const topOverlap = range.intersectsNode(this._topGapElement) && this._topGapElementActive; |
| 400 | const bottomOverlap = range.intersectsNode(this._bottomGapElement) && this._bottomGapElementActive; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 401 | if (!topOverlap && !bottomOverlap && !hasVisibleSelection) { |
| 402 | this._headSelection = null; |
| 403 | this._anchorSelection = null; |
| 404 | return false; |
| 405 | } |
| 406 | |
| 407 | if (!this._anchorSelection || !this._headSelection) { |
| 408 | this._anchorSelection = this._createSelectionModel(0, this.element, 0); |
| 409 | this._headSelection = this._createSelectionModel(this._itemCount - 1, this.element, this.element.children.length); |
| 410 | this._selectionIsBackward = false; |
| 411 | } |
| 412 | |
| 413 | const isBackward = this._isSelectionBackwards(selection); |
| 414 | const startSelection = this._selectionIsBackward ? this._headSelection : this._anchorSelection; |
| 415 | const endSelection = this._selectionIsBackward ? this._anchorSelection : this._headSelection; |
Sigurd Schneider | 3fe3c21 | 2020-10-06 05:14:41 | [diff] [blame] | 416 | let firstSelected = null; |
| 417 | let lastSelected = null; |
| 418 | if (hasVisibleSelection) { |
| 419 | firstSelected = this._createSelectionModel( |
| 420 | firstSelectedIndex, /** @type {!Node} */ (range.startContainer), range.startOffset); |
| 421 | lastSelected = |
| 422 | this._createSelectionModel(lastSelectedIndex, /** @type {!Node} */ (range.endContainer), range.endOffset); |
| 423 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 424 | if (topOverlap && bottomOverlap && hasVisibleSelection) { |
Sigurd Schneider | 3fe3c21 | 2020-10-06 05:14:41 | [diff] [blame] | 425 | firstSelected = (firstSelected && firstSelected.item < startSelection.item) ? firstSelected : startSelection; |
| 426 | lastSelected = (lastSelected && lastSelected.item > endSelection.item) ? lastSelected : endSelection; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 427 | } else if (!hasVisibleSelection) { |
| 428 | firstSelected = startSelection; |
| 429 | lastSelected = endSelection; |
| 430 | } else if (topOverlap) { |
| 431 | firstSelected = isBackward ? this._headSelection : this._anchorSelection; |
| 432 | } else if (bottomOverlap) { |
| 433 | lastSelected = isBackward ? this._anchorSelection : this._headSelection; |
| 434 | } |
| 435 | |
| 436 | if (isBackward) { |
| 437 | this._anchorSelection = lastSelected; |
| 438 | this._headSelection = firstSelected; |
| 439 | } else { |
| 440 | this._anchorSelection = firstSelected; |
| 441 | this._headSelection = lastSelected; |
| 442 | } |
| 443 | this._selectionIsBackward = isBackward; |
| 444 | return true; |
| 445 | } |
| 446 | |
| 447 | /** |
| 448 | * @param {?Selection} selection |
| 449 | */ |
| 450 | _restoreSelection(selection) { |
Sigurd Schneider | a6388b0 | 2020-10-06 05:16:45 | [diff] [blame] | 451 | if (!selection || !this._anchorSelection || !this._headSelection) { |
| 452 | return; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 453 | } |
| 454 | |
Sigurd Schneider | a6388b0 | 2020-10-06 05:16:45 | [diff] [blame] | 455 | /** |
| 456 | * @param {!{item: number, node: !Node, offset: number}} selection |
| 457 | * @param {boolean} isSelectionBackwards |
| 458 | * @return {!{element: !Node, offset: number}} |
| 459 | */ |
| 460 | const clampSelection = (selection, isSelectionBackwards) => { |
| 461 | if (this._firstActiveIndex <= selection.item && selection.item <= this._lastActiveIndex) { |
| 462 | return {element: selection.node, offset: selection.offset}; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 463 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 464 | |
Sigurd Schneider | a6388b0 | 2020-10-06 05:16:45 | [diff] [blame] | 465 | const element = selection.item < this._firstActiveIndex ? this._topGapElement : this._bottomGapElement; |
| 466 | return {element, offset: isSelectionBackwards ? 1 : 0}; |
| 467 | }; |
| 468 | |
| 469 | const {element: anchorElement, offset: anchorOffset} = |
| 470 | clampSelection(this._anchorSelection, !!this._selectionIsBackward); |
| 471 | const {element: headElement, offset: headOffset} = clampSelection(this._headSelection, !this._selectionIsBackward); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 472 | selection.setBaseAndExtent(anchorElement, anchorOffset, headElement, headOffset); |
| 473 | } |
| 474 | |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 475 | _selectionContainsTable() { |
| 476 | if (!this._anchorSelection || !this._headSelection) { |
| 477 | return false; |
| 478 | } |
| 479 | |
Patrick Brosset | dc27877 | 2020-09-07 13:36:37 | [diff] [blame] | 480 | const start = this._selectionIsBackward ? this._headSelection.item : this._anchorSelection.item; |
| 481 | const end = this._selectionIsBackward ? this._anchorSelection.item : this._headSelection.item; |
| 482 | |
| 483 | for (let i = start; i <= end; i++) { |
| 484 | const element = /** @type {!ConsoleViewMessage} */ (this._providerElement(i)); |
| 485 | if (element && element.consoleMessage().type === 'table') { |
Patrick Brosset | 874a730 | 2020-08-11 13:52:22 | [diff] [blame] | 486 | return true; |
| 487 | } |
| 488 | } |
| 489 | |
| 490 | return false; |
| 491 | } |
| 492 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 493 | refresh() { |
| 494 | this._observer.disconnect(); |
| 495 | this._innerRefresh(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 496 | if (this._stickToBottom) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 497 | this._observer.observe(this._contentElement, this._observerConfig); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 498 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 499 | } |
| 500 | |
| 501 | _innerRefresh() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 502 | if (!this._visibleHeight()) { |
| 503 | return; |
| 504 | } // Do nothing for invisible controls. |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 505 | |
| 506 | if (!this._itemCount) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 507 | for (let i = 0; i < this._renderedItems.length; ++i) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 508 | this._renderedItems[i].willHide(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 509 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 510 | this._renderedItems = []; |
| 511 | this._contentElement.removeChildren(); |
| 512 | this._topGapElement.style.height = '0px'; |
| 513 | this._bottomGapElement.style.height = '0px'; |
| 514 | this._firstActiveIndex = -1; |
| 515 | this._lastActiveIndex = -1; |
Pavel Feldman | db31091 | 2019-01-30 00:31:20 | [diff] [blame] | 516 | this._updateFocusedItem(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 517 | return; |
| 518 | } |
| 519 | |
| 520 | const selection = this.element.getComponentSelection(); |
| 521 | const shouldRestoreSelection = this._updateSelectionModel(selection); |
| 522 | |
| 523 | const visibleFrom = this.element.scrollTop; |
| 524 | const visibleHeight = this._visibleHeight(); |
| 525 | const activeHeight = visibleHeight * 2; |
| 526 | this._rebuildCumulativeHeightsIfNeeded(); |
| 527 | |
| 528 | // When the viewport is scrolled to the bottom, using the cumulative heights estimate is not |
| 529 | // precise enough to determine next visible indices. This stickToBottom check avoids extra |
| 530 | // calls to refresh in those cases. |
| 531 | if (this._stickToBottom) { |
| 532 | this._firstActiveIndex = |
| 533 | Math.max(this._itemCount - Math.ceil(activeHeight / this._provider.minimumRowHeight()), 0); |
| 534 | this._lastActiveIndex = this._itemCount - 1; |
| 535 | } else { |
| 536 | this._firstActiveIndex = |
| 537 | Math.max(this._cumulativeHeights.lowerBound(visibleFrom + 1 - (activeHeight - visibleHeight) / 2), 0); |
| 538 | // Proactively render more rows in case some of them will be collapsed without triggering refresh. @see crbug.com/390169 |
| 539 | this._lastActiveIndex = this._firstActiveIndex + Math.ceil(activeHeight / this._provider.minimumRowHeight()) - 1; |
| 540 | this._lastActiveIndex = Math.min(this._lastActiveIndex, this._itemCount - 1); |
| 541 | } |
| 542 | |
| 543 | const topGapHeight = this._cumulativeHeights[this._firstActiveIndex - 1] || 0; |
| 544 | const bottomGapHeight = |
| 545 | this._cumulativeHeights[this._cumulativeHeights.length - 1] - this._cumulativeHeights[this._lastActiveIndex]; |
| 546 | |
| 547 | /** |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 548 | * @this {ConsoleViewport} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 549 | */ |
| 550 | function prepare() { |
| 551 | this._topGapElement.style.height = topGapHeight + 'px'; |
| 552 | this._bottomGapElement.style.height = bottomGapHeight + 'px'; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 553 | this._topGapElementActive = !!topGapHeight; |
| 554 | this._bottomGapElementActive = !!bottomGapHeight; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 555 | this._contentElement.style.setProperty('height', '10000000px'); |
| 556 | } |
| 557 | |
| 558 | this._partialViewportUpdate(prepare.bind(this)); |
| 559 | this._contentElement.style.removeProperty('height'); |
| 560 | // Should be the last call in the method as it might force layout. |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 561 | if (shouldRestoreSelection) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 562 | this._restoreSelection(selection); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 563 | } |
| 564 | if (this._stickToBottom) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 565 | this.element.scrollTop = 10000000; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 566 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 567 | } |
| 568 | |
| 569 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 570 | * @param {function():void} prepare |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 571 | */ |
| 572 | _partialViewportUpdate(prepare) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 573 | /** @type {!Set<!ConsoleViewportElement>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 574 | const itemsToRender = new Set(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 575 | for (let i = this._firstActiveIndex; i <= this._lastActiveIndex; ++i) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 576 | const providerElement = this._providerElement(i); |
| 577 | console.assert(!!providerElement, 'Expected provider element to be defined'); |
| 578 | if (providerElement) { |
| 579 | itemsToRender.add(providerElement); |
| 580 | } |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 581 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 582 | const willBeHidden = this._renderedItems.filter(item => !itemsToRender.has(item)); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 583 | for (let i = 0; i < willBeHidden.length; ++i) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 584 | willBeHidden[i].willHide(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 585 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 586 | prepare(); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 587 | let hadFocus = false; |
| 588 | for (let i = 0; i < willBeHidden.length; ++i) { |
Pavel Feldman | db31091 | 2019-01-30 00:31:20 | [diff] [blame] | 589 | hadFocus = hadFocus || willBeHidden[i].element().hasFocus(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 590 | willBeHidden[i].element().remove(); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 591 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 592 | |
| 593 | const wasShown = []; |
| 594 | let anchor = this._contentElement.firstChild; |
| 595 | for (const viewportElement of itemsToRender) { |
| 596 | const element = viewportElement.element(); |
| 597 | if (element !== anchor) { |
| 598 | const shouldCallWasShown = !element.parentElement; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 599 | if (shouldCallWasShown) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 600 | wasShown.push(viewportElement); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 601 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 602 | this._contentElement.insertBefore(element, anchor); |
| 603 | } else { |
| 604 | anchor = anchor.nextSibling; |
| 605 | } |
| 606 | } |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 607 | for (let i = 0; i < wasShown.length; ++i) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 608 | wasShown[i].wasShown(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 609 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 610 | this._renderedItems = Array.from(itemsToRender); |
Erik Luo | 39452ff | 2018-09-01 01:08:07 | [diff] [blame] | 611 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 612 | if (hadFocus) { |
Pavel Feldman | db31091 | 2019-01-30 00:31:20 | [diff] [blame] | 613 | this._contentElement.focus(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 614 | } |
Pavel Feldman | db31091 | 2019-01-30 00:31:20 | [diff] [blame] | 615 | this._updateFocusedItem(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 616 | } |
| 617 | |
| 618 | /** |
| 619 | * @return {?string} |
| 620 | */ |
| 621 | _selectedText() { |
| 622 | this._updateSelectionModel(this.element.getComponentSelection()); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 623 | if (!this._headSelection || !this._anchorSelection) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 624 | return null; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 625 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 626 | |
| 627 | let startSelection = null; |
| 628 | let endSelection = null; |
| 629 | if (this._selectionIsBackward) { |
| 630 | startSelection = this._headSelection; |
| 631 | endSelection = this._anchorSelection; |
| 632 | } else { |
| 633 | startSelection = this._anchorSelection; |
| 634 | endSelection = this._headSelection; |
| 635 | } |
| 636 | |
| 637 | const textLines = []; |
| 638 | for (let i = startSelection.item; i <= endSelection.item; ++i) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 639 | const providerElement = this._providerElement(i); |
| 640 | console.assert(!!providerElement); |
| 641 | if (!providerElement) { |
| 642 | continue; |
| 643 | } |
| 644 | const element = providerElement.element(); |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 645 | const lineContent = element.childTextNodes().map(Components.Linkifier.Linkifier.untruncatedNodeText).join(''); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 646 | textLines.push(lineContent); |
| 647 | } |
| 648 | |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 649 | const endProviderElement = this._providerElement(endSelection.item); |
| 650 | const endSelectionElement = endProviderElement && endProviderElement.element(); |
| 651 | if (endSelectionElement && endSelection.node && endSelection.node.isSelfOrDescendant(endSelectionElement)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 652 | const itemTextOffset = this._textOffsetInNode(endSelectionElement, endSelection.node, endSelection.offset); |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 653 | if (textLines.length > 0) { |
| 654 | textLines[textLines.length - 1] = textLines[textLines.length - 1].substring(0, itemTextOffset); |
| 655 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 656 | } |
| 657 | |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 658 | const startProviderElement = this._providerElement(startSelection.item); |
| 659 | const startSelectionElement = startProviderElement && startProviderElement.element(); |
| 660 | if (startSelectionElement && startSelection.node && startSelection.node.isSelfOrDescendant(startSelectionElement)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 661 | const itemTextOffset = this._textOffsetInNode(startSelectionElement, startSelection.node, startSelection.offset); |
| 662 | textLines[0] = textLines[0].substring(itemTextOffset); |
| 663 | } |
| 664 | |
| 665 | return textLines.join('\n'); |
| 666 | } |
| 667 | |
| 668 | /** |
| 669 | * @param {!Element} itemElement |
| 670 | * @param {!Node} selectionNode |
| 671 | * @param {number} offset |
| 672 | * @return {number} |
| 673 | */ |
| 674 | _textOffsetInNode(itemElement, selectionNode, offset) { |
| 675 | // If the selectionNode is not a TextNode, we may need to convert a child offset into a character offset. |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 676 | const textContentLength = selectionNode.textContent ? selectionNode.textContent.length : 0; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 677 | if (selectionNode.nodeType !== Node.TEXT_NODE) { |
| 678 | if (offset < selectionNode.childNodes.length) { |
| 679 | selectionNode = /** @type {!Node} */ (selectionNode.childNodes.item(offset)); |
| 680 | offset = 0; |
| 681 | } else { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 682 | offset = textContentLength; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 683 | } |
| 684 | } |
| 685 | |
| 686 | let chars = 0; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 687 | /** @type {?Node} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 688 | let node = itemElement; |
| 689 | while ((node = node.traverseNextNode(itemElement)) && node !== selectionNode) { |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 690 | if (node.nodeType !== Node.TEXT_NODE || |
| 691 | (node.parentElement && |
| 692 | (node.parentElement.nodeName === 'STYLE' || node.parentElement.nodeName === 'SCRIPT'))) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 693 | continue; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 694 | } |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 695 | chars += Components.Linkifier.Linkifier.untruncatedNodeText(node).length; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 696 | } |
| 697 | // If the selected node text was truncated, treat any non-zero offset as the full length. |
Tim van der Lippe | 9b2f871 | 2020-02-12 17:46:22 | [diff] [blame] | 698 | const untruncatedContainerLength = Components.Linkifier.Linkifier.untruncatedNodeText(selectionNode).length; |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 699 | if (offset > 0 && untruncatedContainerLength !== textContentLength) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 700 | offset = untruncatedContainerLength; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 701 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 702 | return chars + offset; |
| 703 | } |
| 704 | |
| 705 | /** |
| 706 | * @param {!Event} event |
| 707 | */ |
| 708 | _onScroll(event) { |
| 709 | this.refresh(); |
| 710 | } |
| 711 | |
| 712 | /** |
| 713 | * @return {number} |
| 714 | */ |
| 715 | firstVisibleIndex() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 716 | if (!this._cumulativeHeights.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 717 | return -1; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 718 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 719 | this._rebuildCumulativeHeightsIfNeeded(); |
| 720 | return this._cumulativeHeights.lowerBound(this.element.scrollTop + 1); |
| 721 | } |
| 722 | |
| 723 | /** |
| 724 | * @return {number} |
| 725 | */ |
| 726 | lastVisibleIndex() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 727 | if (!this._cumulativeHeights.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 728 | return -1; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 729 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 730 | this._rebuildCumulativeHeightsIfNeeded(); |
| 731 | const scrollBottom = this.element.scrollTop + this.element.clientHeight; |
| 732 | const right = this._itemCount - 1; |
| 733 | return this._cumulativeHeights.lowerBound(scrollBottom, undefined, undefined, right); |
| 734 | } |
| 735 | |
| 736 | /** |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 737 | * @param {number} index |
Sigurd Schneider | 53f3352 | 2020-10-08 15:00:49 | [diff] [blame] | 738 | * @return {?HTMLElement} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 739 | */ |
| 740 | renderedElementAt(index) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 741 | if (index === -1 || index < this._firstActiveIndex || index > this._lastActiveIndex) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 742 | return null; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 743 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 744 | return this._renderedItems[index - this._firstActiveIndex].element(); |
| 745 | } |
| 746 | |
| 747 | /** |
| 748 | * @param {number} index |
| 749 | * @param {boolean=} makeLast |
| 750 | */ |
| 751 | scrollItemIntoView(index, makeLast) { |
| 752 | const firstVisibleIndex = this.firstVisibleIndex(); |
| 753 | const lastVisibleIndex = this.lastVisibleIndex(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 754 | if (index > firstVisibleIndex && index < lastVisibleIndex) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 755 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 756 | } |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 757 | // If the prompt is visible, then the last item must be fully on screen. |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 758 | if (index === lastVisibleIndex && |
| 759 | this._cumulativeHeights[index] <= this.element.scrollTop + this._visibleHeight()) { |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 760 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 761 | } |
| 762 | if (makeLast) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 763 | this.forceScrollItemToBeLast(index); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 764 | } else if (index <= firstVisibleIndex) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 765 | this.forceScrollItemToBeFirst(index); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 766 | } else if (index >= lastVisibleIndex) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 767 | this.forceScrollItemToBeLast(index); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 768 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 769 | } |
| 770 | |
| 771 | /** |
| 772 | * @param {number} index |
| 773 | */ |
| 774 | forceScrollItemToBeFirst(index) { |
| 775 | console.assert(index >= 0 && index < this._itemCount, 'Cannot scroll item at invalid index'); |
| 776 | this.setStickToBottom(false); |
| 777 | this._rebuildCumulativeHeightsIfNeeded(); |
| 778 | this.element.scrollTop = index > 0 ? this._cumulativeHeights[index - 1] : 0; |
Sigurd Schneider | 7393b32 | 2020-10-05 14:25:40 | [diff] [blame] | 779 | if (UI.UIUtils.isScrolledToBottom(this.element)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 780 | this.setStickToBottom(true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 781 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 782 | this.refresh(); |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 783 | // After refresh, the item is in DOM, but may not be visible (items above were larger than expected). |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 784 | const renderedElement = this.renderedElementAt(index); |
| 785 | if (renderedElement) { |
| 786 | renderedElement.scrollIntoView(true /* alignTop */); |
| 787 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 788 | } |
| 789 | |
| 790 | /** |
| 791 | * @param {number} index |
| 792 | */ |
| 793 | forceScrollItemToBeLast(index) { |
| 794 | console.assert(index >= 0 && index < this._itemCount, 'Cannot scroll item at invalid index'); |
| 795 | this.setStickToBottom(false); |
| 796 | this._rebuildCumulativeHeightsIfNeeded(); |
| 797 | this.element.scrollTop = this._cumulativeHeights[index] - this._visibleHeight(); |
Sigurd Schneider | 7393b32 | 2020-10-05 14:25:40 | [diff] [blame] | 798 | if (UI.UIUtils.isScrolledToBottom(this.element)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 799 | this.setStickToBottom(true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 800 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 801 | this.refresh(); |
Erik Luo | 4b00232 | 2018-07-30 21:23:31 | [diff] [blame] | 802 | // After refresh, the item is in DOM, but may not be visible (items above were larger than expected). |
Sigurd Schneider | cd3f429 | 2020-10-09 08:56:31 | [diff] [blame] | 803 | const renderedElement = this.renderedElementAt(index); |
| 804 | if (renderedElement) { |
| 805 | renderedElement.scrollIntoView(false /* alignTop */); |
| 806 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 807 | } |
| 808 | |
| 809 | /** |
| 810 | * @return {number} |
| 811 | */ |
| 812 | _visibleHeight() { |
| 813 | // Use offsetHeight instead of clientHeight to avoid being affected by horizontal scroll. |
| 814 | return this.element.offsetHeight; |
| 815 | } |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 816 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 817 | |
| 818 | /** |
| 819 | * @interface |
| 820 | */ |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 821 | export class ConsoleViewportProvider { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 822 | /** |
| 823 | * @param {number} index |
| 824 | * @return {number} |
| 825 | */ |
| 826 | fastHeight(index) { |
| 827 | return 0; |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 828 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 829 | |
| 830 | /** |
| 831 | * @return {number} |
| 832 | */ |
| 833 | itemCount() { |
| 834 | return 0; |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 835 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 836 | |
| 837 | /** |
| 838 | * @return {number} |
| 839 | */ |
| 840 | minimumRowHeight() { |
| 841 | return 0; |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 842 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 843 | |
| 844 | /** |
| 845 | * @param {number} index |
Tim van der Lippe | eaacb72 | 2020-01-10 12:16:00 | [diff] [blame] | 846 | * @return {?ConsoleViewportElement} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 847 | */ |
| 848 | itemElement(index) { |
| 849 | return null; |
| 850 | } |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 851 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 852 | |
| 853 | /** |
| 854 | * @interface |
| 855 | */ |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 856 | export class ConsoleViewportElement { |
| 857 | willHide() { |
| 858 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 859 | |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 860 | wasShown() { |
| 861 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 862 | |
| 863 | /** |
Sigurd Schneider | 53f3352 | 2020-10-08 15:00:49 | [diff] [blame] | 864 | * @return {!HTMLElement} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 865 | */ |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 866 | element() { |
Sigurd Schneider | 53f3352 | 2020-10-08 15:00:49 | [diff] [blame] | 867 | throw new Error('Unimplemented method'); |
| 868 | } |
| 869 | |
| 870 | focusLastChildOrSelf() { |
Paul Lewis | bf7aa3c | 2019-11-20 17:03:38 | [diff] [blame] | 871 | } |
| 872 | } |