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

Source/devtools/front_end/network/NetworkFilmStripView.js

Index: Source/devtools/front_end/network/NetworkFilmStripView.js
diff --git a/Source/devtools/front_end/network/NetworkFilmStripView.js b/Source/devtools/front_end/network/NetworkFilmStripView.js
index 8ab9e9ebbb30566ad1679b219e64b975c21a57c5..b735a61eba5fcc31c6ac6b2a31e37c488dd194cb 100644
--- a/Source/devtools/front_end/network/NetworkFilmStripView.js
+++ b/Source/devtools/front_end/network/NetworkFilmStripView.js
@@ -14,7 +14,6 @@ WebInspector.NetworkFilmStripView = function(calculator)
     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;
 
@@ -77,8 +76,12 @@ WebInspector.NetworkFilmStripView.prototype = {
         }
         this._label.remove();
 
-        for (var i = 0; i < frames.length; ++i)
+        for (var i = 0; i < frames.length; ++i) {
+            frames[i]._prevFrame = frames[i - 1];
+            frames[i]._nextFrame = frames[i + 1];
             frames[i].show(this.contentElement);
+
+        }
         this._frames = frames;
         this._updateTimeOffset(true);
     },
@@ -165,6 +168,14 @@ WebInspector.NetworkFilmStripView.prototype = {
         this._label.textContent = WebInspector.UIString("Recording frames...");
     },
 
+    /**
+     * @return {boolean}
+     */
+    isRecording: function()
+    {
+        return !!this._target;
+    },
+
     stopRecording: function()
     {
         if (!this._target)
@@ -197,8 +208,10 @@ WebInspector.NetworkFilmStripFrame = function(parent, imageData, timestamp)
     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 = {
@@ -210,14 +223,16 @@ WebInspector.NetworkFilmStripFrame.prototype = {
         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));

[dgozman, 2015/04/22 10:16:54]

First parameter should be NetworkPanel.element.

[pfeldman, 2015/04/22 12:13:12]

I was thinking that we introduced WebInspector.Dialog.modalHostView() for this
very reason.

+    },
+
     /**
      * @return {number}
      */
@@ -234,3 +249,79 @@ WebInspector.NetworkFilmStripFrame.prototype = {
         this._timeLabel.textContent = Number.secondsToString(this._timestamp - offset);
     }
 }
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.DialogDelegate}
+ * @param {!WebInspector.NetworkFilmStripFrame} frame
+ */
+WebInspector.NetworkFilmStripFrame.DialogDelegate = function(frame)
+{
+    WebInspector.DialogDelegate.call(this, createElementWithClass("div", "network-filmstrip-preview"));
+    this.element.tabIndex = 0;
+    this._frame = frame;
+    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)
+    {

[dgozman, 2015/04/22 10:16:54]

Would be nice to support Home/End as well.

[pfeldman, 2015/04/22 12:13:12]

Done.

+        if (event.keyIdentifier === "Left") {
+            this._onPrevFrame();
+            return;
+        }
+
+        if (event.keyIdentifier === "Right")
+            this._onNextFrame();
+    },
+
+    _onPrevFrame: function()
+    {
+        var prevFrame = this._frame._prevFrame;
+        if (prevFrame) {
+            this._frame = prevFrame;
+            this._render();
+        }
+    },
+
+    _onNextFrame: function()
+    {
+        var nextFrame = this._frame._nextFrame;
+        if (nextFrame) {
+            this._frame = nextFrame;
+            this._render();
+        }
+    },
+
+    _render: function()
+    {
+        this._imageElement.src = "data:image/jpg;base64," + this._frame._imageData;
+        this._timeLabel.textContent = this._frame._timeLabel.textContent;
+    },
+
+    __proto__: WebInspector.DialogDelegate.prototype
+}