Web Inspector: Canvas Tab: canvases overview should support navigation via keyboard
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Oct 2017 23:41:23 +0000 (23:41 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Oct 2017 23:41:23 +0000 (23:41 +0000)
commit6a383af7fb0d1c6d5a86fe0c991caf09956037af
tree1bd8e7b744b9ec695014a03475316bf48482530e
parentf6ac2b59b73f88e99daf5c58f47996cce9664dc3
Web Inspector: Canvas Tab: canvases overview should support navigation via keyboard
https://bugs.webkit.org/show_bug.cgi?id=178800
<rdar://problem/35175856>

Reviewed by Brian Burg.

Create a KeyboardShorcut for each of the following:
 - Up: selects the previous canvas in the selected column
 - Down: selects the next canvas in the selected column
 - Right: selects the next canvas in the selected row
 - Left: selects the previous canvas in the selected row
 - Space: toggle recording of the selected canvas
 - Shift+Space: toggle single-frame recording of the selected canvas

The calculation for selected row/colum is based on the `offsetWidth` of the parent element
and the selected item's content view element. Since this view uses a flexbox, all of the
items are expected to have the same dimensions, meaning that this value is uniform. The
intended functionality is that of a spreadsheet, where pressing pressing left/right will
never change the selected row and up/down will never change the selected column.

* UserInterface/Views/CanvasOverviewContentView.css:
(.content-view.canvas-overview):
(.content-view.canvas-overview .content-view.canvas):
Move margin value to a CSS variable so that it can be easily retrieved via JavaScript.

* UserInterface/Views/CanvasOverviewContentView.js:
(WI.CanvasOverviewContentView):
(WI.CanvasOverviewContentView.prototype.contentViewAdded):
(WI.CanvasOverviewContentView.prototype.contentViewRemoved):
(WI.CanvasOverviewContentView.prototype.attached):
(WI.CanvasOverviewContentView.prototype.detached):
(WI.CanvasOverviewContentView.prototype.get _itemMargin):
(WI.CanvasOverviewContentView.prototype._changeSelectedItemVertically):
(WI.CanvasOverviewContentView.prototype._changeSelectedItemHorizontally):
(WI.CanvasOverviewContentView.prototype._updateNavigationItems):
(WI.CanvasOverviewContentView.prototype._handleUp):
(WI.CanvasOverviewContentView.prototype._handleRight):
(WI.CanvasOverviewContentView.prototype._handleDown):
(WI.CanvasOverviewContentView.prototype._handleLeft):
(WI.CanvasOverviewContentView.prototype._handleSpace):
(WI.CanvasOverviewContentView.prototype._supplementalRepresentedObjectsDidChange):
Drive-by: call `_updateNavigationItems` whenever an item is added/removed so that if there
are no items the navigation items cannot be clicked.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224067 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js