DevTools: Support keyboard arrows navigation on flame chart

Source/devtools/front_end/ui_lazy/FlameChart.js

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 23 matching lines @@
 WebInspector.FlameChartDelegate = function() { }
 
 WebInspector.FlameChartDelegate.prototype = {
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     requestWindowTimes: function(startTime, endTime) { },
 
     /**
+     * @param {number} entryIndex
+     */
+    requestSelectionChange: function(entryIndex) { },

[caseq, 2015/05/22 00:09:19]

How is that different from FlameChart.Events.EntrySelected?

[alph, 2015/05/22 00:51:53]

Ahh, thanks. Missed that.

+
+    /**
      * @param {number} startTime
      * @param {number} endTime
      */
     updateRangeSelection: function(startTime, endTime) { }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.HBox}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
@@ skipping 706 matching lines @@
 
         // Block swipe gesture.
         e.consume(true);
     },
 
     /**
      * @param {!Event} e
      */
     _onKeyDown: function(e)
     {
+        this._handleZoomPanKeys(e);
+        this._handleSelectionNav(e);
+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _handleSelectionNav: function(e)

[caseq, 2015/05/22 00:09:18]

no abbreviations pls.

[alph, 2015/05/22 00:51:54]

Done.

+    {
+        if (e.altKey || e.ctrlKey || e.metaKey)
+            return;
+        if (this._selectedEntryIndex === -1)
+            return;
+        var timelineData = this._timelineData();
+        if (!timelineData)
+            return;
+
+        /**
+         * @param {number} time
+         * @param {number} entryIndex
+         * @return {number}
+         */
+        function timeComparator(time, entryIndex)
+        {
+            return time - timelineData.entryStartTimes[entryIndex];
+        }
+
+        /**
+         * @param {number} entry1
+         * @param {number} entry2
+         * @return {boolean}
+         */
+        function entriesIntersect(entry1, entry2)
+        {
+            var start1 = timelineData.entryStartTimes[entry1];
+            var start2 = timelineData.entryStartTimes[entry2];
+            var end1 = start1 + timelineData.entryTotalTimes[entry1];
+            var end2 = start2 + timelineData.entryTotalTimes[entry2];
+            return start1 < end2 && start2 < end1;
+        }
+
+        if (e.keyIdentifier === "Left" || e.keyIdentifier === "Right") {

[caseq, 2015/05/22 00:09:18]

Let's use constants from WebInspector.KeyboardShortcut.Keys?

[alph, 2015/05/22 00:51:53]

Done.

+            var level = timelineData.entryLevels[this._selectedEntryIndex];
+            var levelIndexes = this._timelineLevels[level];
+            var indexOnLevel = levelIndexes.lowerBound(this._selectedEntryIndex);
+            indexOnLevel += e.keyIdentifier === "Left" ? -1 : 1;
+            e.consume(true);
+            if (indexOnLevel < 0 || indexOnLevel >= levelIndexes.length)
+                return;
+            this._flameChartDelegate.requestSelectionChange(levelIndexes[indexOnLevel]);
+        } else if (e.keyIdentifier === "Up" || e.keyIdentifier === "Down") {
+            var level = timelineData.entryLevels[this._selectedEntryIndex];
+            var delta = e.keyIdentifier === "Up" ? 1 : -1;
+            e.consume(true);
+            if (this._isTopDown)
+                delta *= -1;

[caseq, 2015/05/22 00:09:18]

delta = -delta perhaps?

[alph, 2015/05/22 00:51:53]

Done.

+            level += delta;
+            if (level < 0 || level >= this._timelineLevels.length)
+                return;
+            var entryTime = timelineData.entryStartTimes[this._selectedEntryIndex];
+            var levelIndexes = this._timelineLevels[level];
+            var indexOnLevel = levelIndexes.upperBound(entryTime, timeComparator) - 1;
+            if (!entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel])) {
+                ++indexOnLevel;
+                if (indexOnLevel >= levelIndexes.length || !entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel]))
+                    return;
+            }
+            this._flameChartDelegate.requestSelectionChange(levelIndexes[indexOnLevel]);
+        }
+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _handleZoomPanKeys: function(e)
+    {
         if (e.altKey || e.ctrlKey || e.metaKey)
             return;
         var zoomMultiplier = e.shiftKey ? 0.8 : 0.3;
         var panMultiplier = e.shiftKey ? 320 : 80;
         if (e.keyCode === "A".charCodeAt(0)) {
             this._handlePanGesture(-panMultiplier * this._pixelToTime);
             e.consume(true);
         } else if (e.keyCode === "D".charCodeAt(0)) {
             this._handlePanGesture(panMultiplier * this._pixelToTime);
             e.consume(true);
@@ skipping 672 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }