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

R=kaznacheev@chromium.org

Review URL: https://codereview.chromium.org/272753002

git-svn-id: svn://svn.chromium.org/blink/trunk@173636 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/ScreencastView.js

@@ -57,9 +57,10 @@ WebInspector.ScreencastView.prototype = {
         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);
@@ -71,7 +72,7 @@ WebInspector.ScreencastView.prototype = {
         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");
@@ -855,6 +856,8 @@ WebInspector.ScreencastView.prototype = {
     _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;
@@ -924,6 +927,7 @@ WebInspector.ScreencastView.prototype = {
         var match = url.match(WebInspector.ScreencastView._HttpRegex);
         if (match)
             url = match[1];
+        InspectorFrontendHost.inspectedURLChanged(url);
         this._navigationUrl.value = url;
     },
 

third_party/WebKit/Source/devtools/front_end/screencastView.css

@@ -33,14 +33,14 @@
 }
 
 .screencast-navigation {
-    -webkit-flex-direction: row;
-    display: -webkit-flex;
-    height: 25px;
+    flex-direction: row;
+    display: flex;
+    flex: 24px 0 0;
     position: relative;
 }
 
 .screencast-navigation button {
-    -webkit-border-radius: 2px;
+    border-radius: 2px;
     background-color: transparent;
     background-image: -webkit-image-set(
         url(Images/navigationControls.png) 1x,
@@ -50,7 +50,7 @@
     background-repeat: no-repeat;
     border: 1px solid transparent;
     height: 23px;
-    padding: 3px 2px 1px;
+    padding: 2px;
     width: 23px;
 }
 
@@ -102,19 +102,25 @@
 }
 
 .screencast-viewport {
-    border: 20px solid #333;
+    display: flex;
+    border: 1px solid #999;
     border-radius: 20px;
-    position: absolute;
-    top: 36px;
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
+    flex: auto;
+    padding: 20px;
+    margin: 10px;
+    background-color: #eee;
+}
+
+.screencast-canvas-container {
+    flex: auto;
+    display: flex;
+    border: 1px solid #999;
+    position: relative;
 }
 
 .screencast canvas {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+    flex: auto;
+    position: relative;
 }
 
 .screencast-px {
@@ -142,15 +148,15 @@
 }
 
 .screencast-glasspane {
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  bottom: 0;
-  display: -webkit-box;
-  left: 0;
   position: absolute;
+  top: 0;
   right: 0;
-  top: 25px;  /* Align with the botton edge of .screencast .navigation. */
+  bottom: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.8);
   font-size: 30px;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }