DevTools: zoom frames upon double click, iterate over frames using arrows.

Source/devtools/front_end/network/NetworkFilmStripView.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.HBox}
  * @implements {WebInspector.TracingManagerClient}
  * @param {!WebInspector.NetworkTimeCalculator} calculator
  */
 WebInspector.NetworkFilmStripView = function(calculator)
 {
     WebInspector.HBox.call(this, true);
     this.registerRequiredCSS("network/networkFilmStripView.css");
     this.element.classList.add("network-film-strip-view");
     this.contentElement.classList.add("shadow-network-film-strip-view");
-
     /** @type {!WebInspector.NetworkTimeCalculator} */
     this._calculator = calculator;
 
     this.reset();
 }
 
 WebInspector.NetworkFilmStripView._maximumFrameCount = 60;
 
 WebInspector.NetworkFilmStripView.Events = {
     FrameSelected: "FrameSelected",
@@ skipping 42 matching lines @@
                 }
             }
         }
 
         if (!frames.length) {
             this.reset();
             return;
         }
         this._label.remove();
 
-        for (var i = 0; i < frames.length; ++i)
+        for (var i = 0; i < frames.length; ++i) {
+            frames[i]._index = i;
             frames[i].show(this.contentElement);
+
+        }
         this._frames = frames;
         this._updateTimeOffset(true);
     },
 
     reset: function()
     {
         this.contentElement.removeChildren();
         /** @type {?number} */
         this._timeOffset = null;
         /** @type {!Array.<!WebInspector.NetworkFilmStripFrame>} */
@@ skipping 66 matching lines @@
         if (this._target)
             return;
 
         this.reset();
         this._target = WebInspector.targetManager.mainTarget();
         this._tracingModel = new WebInspector.TracingModel(new WebInspector.TempFileBackingStorage("tracing"));
         this._target.tracingManager.start(this, "-*,disabled-by-default-devtools.screenshot", "");
         this._label.textContent = WebInspector.UIString("Recording frames...");
     },
 
+    /**
+     * @return {boolean}
+     */
+    isRecording: function()
+    {
+        return !!this._target;
+    },
+
     stopRecording: function()
     {
         if (!this._target)
             return;
 
         this._target.tracingManager.stop();
         this._target = null;
     },
 
     /**
@@ skipping 12 matching lines @@
  * @param {!WebInspector.NetworkFilmStripView} parent
  * @param {?string} imageData
  * @param {number} timestamp
  */
 WebInspector.NetworkFilmStripFrame = function(parent, imageData, timestamp)
 {
     this._parent = parent;
     this._timestamp = timestamp;
     this._element = createElementWithClass("div", "frame");
     this._element.createChild("div", "thumbnail").createChild("img").src = "data:image/jpg;base64," + imageData;
+    this._imageData = imageData;
     this._timeLabel = this._element.createChild("div", "time");
     this._element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
+    this._element.addEventListener("dblclick", this._onDoubleClick.bind(this), false);
 }
 
 WebInspector.NetworkFilmStripFrame.prototype = {
     /**
      * @param {!Element} parent
      */
     show: function(parent)
     {
         parent.appendChild(this._element);
     },
 
-    /**
-     * @param {!Event} event
-     */
-    _onMouseDown: function(event)
+    _onMouseDown: function()
     {
         this._parent._selectFrame(this);
     },
 
+    _onDoubleClick: function()
+    {
+        WebInspector.Dialog.show(WebInspector.Dialog.modalHostView().element, new WebInspector.NetworkFilmStripFrame.DialogDelegate(this._parent._frames, this._index));
+    },
+
     /**
      * @return {number}
      */
     timestamp: function()
     {
         return this._timestamp;
     },
 
     /**
      * @param {number} offset
      */
     _setTimeOffset: function(offset)
     {
         this._timeLabel.textContent = Number.secondsToString(this._timestamp - offset);
     }
 }
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.DialogDelegate}
+ * @param {!Array<!WebInspector.NetworkFilmStripFrame>} frames
+ * @param {number} index
+ */
+WebInspector.NetworkFilmStripFrame.DialogDelegate = function(frames, index)
+{
+    WebInspector.DialogDelegate.call(this);
+    this.element.classList.add("network-filmstrip-preview");
+    this.element.tabIndex = 0;
+
+    this._frames = frames;
+    this._index = index;
+
+    this._imageElement = this.element.createChild("img");
+    var footerElement = this.element.createChild("div", "network-filmstrip-preview-footer");
+    footerElement.createChild("div", "flex-auto");
+    var prevButton = createTextButton("\u25C0", this._onPrevFrame.bind(this), undefined, WebInspector.UIString("Previous frame"));
+    footerElement.appendChild(prevButton);
+    this._timeLabel = footerElement.createChild("div", "network-filmstrip-preview-label");
+    var nextButton = createTextButton("\u25B6", this._onNextFrame.bind(this), undefined, WebInspector.UIString("Next frame"));
+    footerElement.appendChild(nextButton);
+    footerElement.createChild("div", "flex-auto");
+
+    this._render();
+    this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+}
+
+WebInspector.NetworkFilmStripFrame.DialogDelegate.prototype = {
+    /**
+     * @override
+     */
+    focus: function()
+    {
+        this.element.focus();
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _keyDown: function(event)
+    {
+        if (event.keyIdentifier === "Left") {
+            if (WebInspector.isMac() && event.metaKey) {
+                this._onFirstFrame();
+                return;
+            }
+
+            this._onPrevFrame();
+            return;
+        }
+
+        if (event.keyIdentifier === "Right") {
+            if (WebInspector.isMac() && event.metaKey) {
+                this._onLastFrame();
+                return;
+            }
+
+            this._onNextFrame();
+        }
+
+        if (event.keyIdentifier === "Home") {
+            this._onFirstFrame();
+            return;
+        }
+
+        if (event.keyIdentifier === "End") {
+            this._onLastFrame();
+            return;
+        }
+    },
+
+    _onPrevFrame: function()
+    {
+        if (this._index > 0)
+            --this._index;
+        this._render();
+    },
+
+    _onNextFrame: function()
+    {
+        if (this._index < this._frames.length - 1)
+            ++this._index;
+        this._render();
+    },
+
+    _onFirstFrame: function()
+    {
+        this._index = 0;
+        this._render();
+    },
+
+    _onLastFrame: function()
+    {
+        this._index = this._frames.length - 1;
+        this._render();
+    },
+
+    _render: function()
+    {
+        var frame = this._frames[this._index];
+        this._imageElement.src = "data:image/jpg;base64," + frame._imageData;
+        this._timeLabel.textContent = frame._timeLabel.textContent;
+    },
+
+    __proto__: WebInspector.DialogDelegate.prototype
+}