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 749 matching lines @@
 
         // Block swipe gesture.
         e.consume(true);
     },
 
     /**
      * @param {!Event} e
      */
     _onKeyDown: function(e)
     {
-        if (e.altKey || e.ctrlKey || e.metaKey)
+        this._handleZoomPanKeys(e);
+        this._handleSelectionNavigation(e);
+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _handleSelectionNavigation: function(e)
+    {
+        if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
+            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;
+        }
+
+        var keys = WebInspector.KeyboardShortcut.Keys;
+        if (e.keyCode === keys.Left.code || e.keyCode === keys.Right.code) {
+            var level = timelineData.entryLevels[this._selectedEntryIndex];
+            var levelIndexes = this._timelineLevels[level];
+            var indexOnLevel = levelIndexes.lowerBound(this._selectedEntryIndex);
+            indexOnLevel += e.keyCode === keys.Left.code ? -1 : 1;
+            e.consume(true);
+            if (indexOnLevel < 0 || indexOnLevel >= levelIndexes.length)
+                return;
+            this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);

[caseq, 2015/05/22 01:14:03]

nit: return here...

[alph, 2015/05/22 01:20:51]

Done.

+        } else if (e.keyCode === keys.Up.code || e.keyCode === keys.Down.code) {

[caseq, 2015/05/22 01:14:03]

... and then remove else here. (I think this is more readable than having both
returns from within ifs and elses)

+            var level = timelineData.entryLevels[this._selectedEntryIndex];
+            var delta = e.keyCode === keys.Up.code ? 1 : -1;
+            e.consume(true);
+            if (this._isTopDown)
+                delta = -delta;
+            level += delta;
+            if (level < 0 || level >= this._timelineLevels.length)
+                return;
+            var entryTime = timelineData.entryStartTimes[this._selectedEntryIndex] + timelineData.entryTotalTimes[this._selectedEntryIndex] / 2;
+            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.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+        }
+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _handleZoomPanKeys: function(e)
+    {
+        if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
             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);
         } else if (e.keyCode === "W".charCodeAt(0)) {
@@ skipping 671 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }