Source/WebInspectorUI/ChangeLog

 12017-10-26 Devin Rousso <webkit@devinrousso.com>
 2
 3 Web Inspector: Canvas Tab: canvases overview should support navigation via keyboard
 4 https://bugs.webkit.org/show_bug.cgi?id=178800
 5 <rdar://problem/35175856>
 6
 7 Reviewed by NOBODY (OOPS!).
 8
 9 Create a KeyboardShorcut for each of the following:
 10 - Up: selects the previous canvas in the selected column
 11 - Down: selects the next canvas in the selected column
 12 - Right: selects the next canvas in the selected row
 13 - Left: selects the previous canvas in the selected row
 14 - Space: toggle recording of the selected canvas
 15 - Shift+Space: toggle single-frame recording of the selected canvas
 16
 17 The calculation for selected row/colum is based on the `offsetWidth` of the parent element
 18 and the selected item's content view element. Since this view uses a flexbox, all of the
 19 items are expected to have the same dimensions, meaning that this value is uniform. The
 20 intended functionality is that of a spreadsheet, where pressing pressing left/right will
 21 never change the selected row and up/down will never change the selected column.
 22
 23 * UserInterface/Views/CanvasOverviewContentView.js:
 24 (WI.CanvasOverviewContentView):
 25 (WI.CanvasOverviewContentView.prototype.contentViewAdded):
 26 (WI.CanvasOverviewContentView.prototype.contentViewRemoved):
 27 (WI.CanvasOverviewContentView.prototype.attached):
 28 (WI.CanvasOverviewContentView.prototype.detached):
 29 (WI.CanvasOverviewContentView.prototype._changeSelectedItemVertically):
 30 (WI.CanvasOverviewContentView.prototype._changeSelectedItemHorizontally):
 31 (WI.CanvasOverviewContentView.prototype._updateNavigationItems):
 32 (WI.CanvasOverviewContentView.prototype._handleUp):
 33 (WI.CanvasOverviewContentView.prototype._handleRight):
 34 (WI.CanvasOverviewContentView.prototype._handleDown):
 35 (WI.CanvasOverviewContentView.prototype._handleLeft):
 36 (WI.CanvasOverviewContentView.prototype._handleSpace):
 37 (WI.CanvasOverviewContentView.prototype._supplementalRepresentedObjectsDidChange):
 38 Drive-by: call `_updateNavigationItems` whenever an item is added/removed so that if there
 39 are no items the navigation items cannot be clicked.
 40
1412017-10-25 Devin Rousso <webkit@devinrousso.com>
242
343 Web Inspector: provide a way to enable/disable event listeners

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
3434 this.element.classList.add("canvas-overview");
3535
3636 this._refreshButtonNavigationItem = new WI.ButtonNavigationItem("refresh-all", WI.UIString("Refresh all"), "Images/ReloadFull.svg", 13, 13);
37  this._refreshButtonNavigationItem.disabled = true;
 37 this._refreshButtonNavigationItem.enabled = false;
3838 this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._refreshPreviews, this);
3939
4040 this._showGridButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-grid", WI.UIString("Show transparency grid"), WI.UIString("Hide Grid"), "Images/NavigationItemCheckers.svg", 13, 13);
4141 this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;
42  this._showGridButtonNavigationItem.disabled = true;
 42 this._showGridButtonNavigationItem.enabled = false;
4343 this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
4444
4545 this.selectionEnabled = true;
 46
 47 this._keyboardShortcuts = [
 48 new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Up, this._handleUp.bind(this)),
 49 new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Right, this._handleRight.bind(this)),
 50 new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Down, this._handleDown.bind(this)),
 51 new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Left, this._handleLeft.bind(this)),
 52 new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this)),
 53 new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.Shift, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this)),
 54 ];
 55
 56 for (let shortcut of this._keyboardShortcuts)
 57 shortcut.disabled = true;
4658 }
4759
4860 // Public

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
8698 {
8799 contentView.element.addEventListener("mouseenter", this._contentViewMouseEnter);
88100 contentView.element.addEventListener("mouseleave", this._contentViewMouseLeave);
 101
 102 this._updateNavigationItems();
89103 }
90104
91105 contentViewRemoved(contentView)
92106 {
93107 contentView.element.removeEventListener("mouseenter", this._contentViewMouseEnter);
94108 contentView.element.removeEventListener("mouseleave", this._contentViewMouseLeave);
 109
 110 this._updateNavigationItems();
95111 }
96112
97113 attached()

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
101117 WI.settings.showImageGrid.addEventListener(WI.Setting.Event.Changed, this._updateShowImageGrid, this);
102118
103119 this.addEventListener(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._supplementalRepresentedObjectsDidChange, this);
 120
 121 for (let shortcut of this._keyboardShortcuts)
 122 shortcut.disabled = false;
104123 }
105124
106125 detached()

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
109128
110129 this.removeEventListener(null, null, this);
111130
 131 for (let shortcut of this._keyboardShortcuts)
 132 shortcut.disabled = true;
 133
112134 super.detached();
113135 }
114136

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
120142 canvasContentView.refresh();
121143 }
122144
 145 _changeSelectedItemVertically(shift)
 146 {
 147 let itemElementWidth = this.element.firstElementChild.offsetWidth + (2 * WI.CanvasOverviewContentView._itemMargin);
 148 let itemsPerRow = Math.floor(this.element.offsetWidth / itemElementWidth);
 149
 150 let items = Array.from(this.representedObject.items);
 151 let index = items.indexOf(this._selectedItem);
 152 if (index === -1)
 153 index = shift < 0 ? items.length + 1 : itemsPerRow;
 154
 155 index += shift * itemsPerRow;
 156 if (index < 0)
 157 index = items.length + index;
 158
 159 this.setSelectedItem(items[index % items.length]);
 160 }
 161
 162 _changeSelectedItemHorizontally(shift)
 163 {
 164 let itemElementWidth = this.element.firstElementChild.offsetWidth + (2 * WI.CanvasOverviewContentView._itemMargin);
 165 let itemsPerRow = Math.floor(this.element.offsetWidth / itemElementWidth);
 166
 167 let items = Array.from(this.representedObject.items);
 168 let index = items.indexOf(this._selectedItem);
 169 if (index === -1)
 170 index = shift >= 0 ? itemsPerRow - 1 : 0;
 171
 172 let selectedRow = Math.floor(index / itemsPerRow);
 173 index += shift;
 174 if (index < selectedRow * itemsPerRow)
 175 index += itemsPerRow;
 176 else if (index >= (selectedRow + 1) * itemsPerRow)
 177 index -= itemsPerRow;
 178
 179 this.setSelectedItem(items[index]);
 180 }
 181
 182 _updateNavigationItems()
 183 {
 184 let hasItems = !!this.representedObject.items.size;
 185 this._refreshButtonNavigationItem.enabled = hasItems;
 186 this._showGridButtonNavigationItem.enabled = hasItems;
 187 }
 188
123189 _selectionPathComponentsChanged(event)
124190 {
125191 let pathComponent = event.data.pathComponent;

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
132198 WI.settings.showImageGrid.value = !this._showGridButtonNavigationItem.activated;
133199 }
134200
135  _supplementalRepresentedObjectsDidChange()
 201 _handleUp(event)
136202 {
137  this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange);
 203 this._changeSelectedItemVertically(-1);
138204 }
139205
140  _updateNavigationItems()
 206 _handleRight(event)
 207 {
 208 this._changeSelectedItemHorizontally(1);
 209 }
 210
 211 _handleDown(event)
 212 {
 213 this._changeSelectedItemVertically(1);
 214 }
 215
 216 _handleLeft(event)
141217 {
142  let disabled = !this.representedObject.items.size;
143  this._refreshButtonNavigationItem.disabled = disabled;
144  this._showGridButtonNavigationItem.disabled = disabled;
 218 this._changeSelectedItemHorizontally(-1);
 219 }
 220
 221 _handleSpace(event)
 222 {
 223 if (!this._selectedItem)
 224 return;
 225
 226 if (this._selectedItem.isRecording)
 227 WI.canvasManager.stopRecording();
 228 else if (!WI.canvasManager.recordingCanvas) {
 229 let singleFrame = !!event.shiftKey;
 230 WI.canvasManager.startRecording(this._selectedItem, singleFrame);
 231 }
145232 }
146233
147234 _updateShowImageGrid()

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
149236 this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;
150237 }
151238
 239 _supplementalRepresentedObjectsDidChange()
 240 {
 241 this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange);
 242 }
 243
152244 _contentViewMouseEnter(event)
153245 {
154246 let contentView = WI.View.fromElement(event.target);

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
175267 WI.domTreeManager.hideDOMNodeHighlight();
176268 }
177269};
 270
 271WI.CanvasOverviewContentView._itemMargin = 10;