Add navigation controls to DevTools screencast view

Source/devtools/front_end/ScreencastView.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 22 matching lines @@
  * @extends {WebInspector.View}
  * @implements {WebInspector.DOMNodeHighlighter}
  */
 WebInspector.ScreencastView = function()
 {
     WebInspector.View.call(this);
     this.registerRequiredCSS("screencastView.css");
 
     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;
     this._canvasElement.addEventListener("mousedown", this._handleMouseEvent.bind(this), false);
     this._canvasElement.addEventListener("mouseup", this._handleMouseEvent.bind(this), false);
     this._canvasElement.addEventListener("mousemove", this._handleMouseEvent.bind(this), false);
     this._canvasElement.addEventListener("mousewheel", this._handleMouseEvent.bind(this), false);
     this._canvasElement.addEventListener("click", this._handleMouseEvent.bind(this), false);
     this._canvasElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
     this._canvasElement.addEventListener("keydown", this._handleKeyEvent.bind(this), false);
@@ skipping 14 matching lines @@
     this._imageElement = new Image();
     this._isCasting = false;
     this._context = this._canvasElement.getContext("2d");
     this._checkerboardPattern = this._createCheckerboardPattern(this._context);
 
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ScreencastFrame, this._screencastFrame, this);
 }
 
 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()
     {
         this._startCasting();
     },
 
     willHide: function()
     {
         this._stopCasting();
     },
@@ skipping 525 matching lines @@
 
         pctx.fillStyle = "rgb(195, 195, 195)";
         pctx.fillRect(0, 0, size * 2, size * 2);
 
         pctx.fillStyle = "rgb(225, 225, 225)";
         pctx.fillRect(0, 0, size, size);
         pctx.fillRect(size, size, size, size);
         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
 }