DevTools: Support keyboard arrows navigation on flame chart

Source/devtools/front_end/ui_lazy/FlameChart.js

Index: Source/devtools/front_end/ui_lazy/FlameChart.js
diff --git a/Source/devtools/front_end/ui_lazy/FlameChart.js b/Source/devtools/front_end/ui_lazy/FlameChart.js
index 8b588207ef5d3f4004e6fc61f62d9ebc149bb703..ca6f21316b7bacdd90fc580c030aa670d503c868 100644
--- a/Source/devtools/front_end/ui_lazy/FlameChart.js
+++ b/Source/devtools/front_end/ui_lazy/FlameChart.js
@@ -41,6 +41,11 @@ WebInspector.FlameChartDelegate.prototype = {
     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
      */
@@ -767,6 +772,82 @@ WebInspector.FlameChart.prototype = {
      */
     _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;