Add navigation controls to DevTools screencast view

Source/devtools/front_end/ScreencastView.js

Index: Source/devtools/front_end/ScreencastView.js
diff --git a/Source/devtools/front_end/ScreencastView.js b/Source/devtools/front_end/ScreencastView.js
index 2b33ee0f3c59d10b2e9259c2e4c3439d0710dbd2..d4134a20b628829fc7bcf19669c4b2433fec3ddc 100644
--- a/Source/devtools/front_end/ScreencastView.js
+++ b/Source/devtools/front_end/ScreencastView.js
@@ -40,6 +40,9 @@ WebInspector.ScreencastView = function()
 
     this.element.addStyleClass("fill");
     this.element.addStyleClass("screencast");
+
+    this._createNavigationBar();
+
     this._viewportElement = this.element.createChild("div", "screencast-viewport hidden");
     this._canvasElement = this._viewportElement.createChild("canvas");
     this._canvasElement.tabIndex = 1;
@@ -74,6 +77,8 @@ WebInspector.ScreencastView = function()
 
 WebInspector.ScreencastView._bordersSize = 40;
 
+WebInspector.ScreencastView.HTTP_REGEXP = /^https?:\/\/(.+)/;

[pfeldman, 2013/09/05 11:34:13]

HttpRegex

[Vladislav Kaznacheev, 2013/09/05 12:53:55]

Renamed to _HttpRegex

On 2013/09/05 11:34:13, pfeldman wrote:

+
 WebInspector.ScreencastView.prototype = {
     wasShown: function()
     {
@@ -619,5 +624,78 @@ WebInspector.ScreencastView.prototype = {
         return context.createPattern(pattern, "repeat");
     },
 
+    _createNavigationBar: function()
+    {
+        this._navigationBar = this.element.createChild("div", "screencast-navigation");
+
+        this._navigationBack = this._navigationBar.createChild("button");
+        this._navigationBack.textContent = "\u21E6";  // Back arrow.
+        this._navigationBack.disabled = true;
+        this._navigationBack.addEventListener("click", this._navigateToHistoryEntry.bind(this, -1), false);
+
+        this._navigationForward = this._navigationBar.createChild("button");
+        this._navigationForward.textContent = "\u21E8";  // Forward arrow.
+        this._navigationForward.disabled = true;
+        this._navigationForward.addEventListener("click", this._navigateToHistoryEntry.bind(this, 1), false);
+
+        this._navigationReload = this._navigationBar.createChild("button");
+        this._navigationReload.textContent = "\u21BB";  // Circle arrow.
+        this._navigationReload.addEventListener("click", this._navigateReload.bind(this), false);
+
+        this._navigationUrl = this._navigationBar.createChild("input");
+        this._navigationUrl.type = "text";
+        this._navigationUrl.addEventListener('keyup', this._navigationUrlKeyUp.bind(this), true);
+
+        this._requestNavigationHistory();
+        WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.InspectedURLChanged, this._requestNavigationHistory, this);
+    },
+
+    _navigateToHistoryEntry: function(offset)
+    {
+        PageAgent.navigateToHistoryEntry(this._currentHistoryIndex + offset);
+        this._requestNavigationHistory();
+    },
+
+    _navigateReload: function()
+    {
+        PageAgent.reload();
+    },
+
+    _navigationUrlKeyUp: function(event)
+    {
+        if (event.keyIdentifier != 'Enter')
+            return;
+        var url = this._navigationUrl.value;
+        if (!url)
+            return;
+        if (!url.match(WebInspector.ScreencastView.HTTP_REGEXP))
+            url = "http://" + url;
+        PageAgent.navigate(url);
+    },
+
+    _requestNavigationHistory: function()
+    {
+        PageAgent.getNavigationHistory(this._onNavigationHistory.bind(this));
+    },
+
+    _onNavigationHistory: function(error, currentIndex, entries)
+    {
+        if (error) {
+          this._navigationBack.hidden = true;
+          this._navigationForward.hidden = true;
+          return;
+        }
+
+        this._currentHistoryIndex = currentIndex;
+        this._navigationBack.disabled = currentIndex == 0;
+        this._navigationForward.disabled = currentIndex == (entries.length - 1);
+
+        var url = entries[currentIndex].url;
+        var match = url.match(WebInspector.ScreencastView.HTTP_REGEXP);
+        if (match)
+            url = match[1];
+        this._navigationUrl.value = url;
+    },
+
     __proto__: WebInspector.View.prototype
 }