DevTools: remove ugly black border from screencast, brush up styles.

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 39 matching lines @@
 WebInspector.ScreencastView._HttpRegex = /^https?:\/\/(.+)/;
 
 WebInspector.ScreencastView.prototype = {
     initialize: function()
     {
         this.element.classList.add("screencast");
 
         this._createNavigationBar();
 
         this._viewportElement = this.element.createChild("div", "screencast-viewport hidden");
-        this._glassPaneElement = this.element.createChild("div", "screencast-glasspane hidden");
+        this._canvasContainerElement = this._viewportElement.createChild("div", "screencast-canvas-container");
+        this._glassPaneElement = this._canvasContainerElement.createChild("div", "screencast-glasspane hidden");
 
-        this._canvasElement = this._viewportElement.createChild("canvas");
+        this._canvasElement = this._canvasContainerElement.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);
         this._canvasElement.addEventListener("keyup", this._handleKeyEvent.bind(this), false);
         this._canvasElement.addEventListener("keypress", this._handleKeyEvent.bind(this), false);
 
-        this._titleElement = this._viewportElement.createChild("div", "screencast-element-title monospace hidden");
+        this._titleElement = this._canvasContainerElement.createChild("div", "screencast-element-title monospace hidden");
         this._tagNameElement = this._titleElement.createChild("span", "screencast-tag-name");
         this._nodeIdElement = this._titleElement.createChild("span", "screencast-node-id");
         this._classNameElement = this._titleElement.createChild("span", "screencast-class-name");
         this._titleElement.appendChild(document.createTextNode(" "));
         this._nodeWidthElement = this._titleElement.createChild("span");
         this._titleElement.createChild("span", "screencast-px").textContent = "px";
         this._titleElement.appendChild(document.createTextNode(" \u00D7 "));
         this._nodeHeightElement = this._titleElement.createChild("span");
         this._titleElement.createChild("span", "screencast-px").textContent = "px";
 
@@ skipping 763 matching lines @@
 
         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", "toolbar-background screencast-navigation");
+        if (WebInspector.queryParam("hideNavigation"))
+            this._navigationBar.classList.add("hidden");
 
         this._navigationBack = this._navigationBar.createChild("button", "back");
         this._navigationBack.disabled = true;
         this._navigationBack.addEventListener("click", this._navigateToHistoryEntry.bind(this, -1), false);
 
         this._navigationForward = this._navigationBar.createChild("button", "forward");
         this._navigationForward.disabled = true;
         this._navigationForward.addEventListener("click", this._navigateToHistoryEntry.bind(this, 1), false);
 
         this._navigationReload = this._navigationBar.createChild("button", "reload");
@@ skipping 49 matching lines @@
         this._historyIndex = currentIndex;
         this._historyEntries = entries;
 
         this._navigationBack.disabled = currentIndex == 0;
         this._navigationForward.disabled = currentIndex == (entries.length - 1);
 
         var url = entries[currentIndex].url;
         var match = url.match(WebInspector.ScreencastView._HttpRegex);
         if (match)
             url = match[1];
+        InspectorFrontendHost.inspectedURLChanged(url);
         this._navigationUrl.value = url;
     },
 
     _focusNavigationBar: function()
     {
         this._navigationUrl.focus();
         this._navigationUrl.select();
         return true;
     },
 
@@ skipping 148 matching lines @@
      * @return {!Element}
      */
     statusBarItem: function()
     {
         if (this._initialized)
             return this._toggleScreencastButton.element;
         this._statusBarPlaceholder = document.createElement("div");
         return this._statusBarPlaceholder;
     }
 };