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

Source/devtools/front_end/screencastView.css

 /*
  * 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 15 matching lines @@
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 .screencast {
     overflow: hidden;
 }
 
 .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,
         url(Images/navigationControls_2x.png) 2x);
     background-clip: content-box;
     background-origin: content-box;
     background-repeat: no-repeat;
     border: 1px solid transparent;
     height: 23px;
-    padding: 3px 2px 1px;
+    padding: 2px;
     width: 23px;
 }
 
 .screencast-navigation button:hover {
     border-color: #ccc;
 }
 
 .screencast-navigation button:active {
     border-color: #aaa;
 }
@@ skipping 31 matching lines @@
     background-color: rgb(66, 129, 235);
     height: 3px;
     left: 0;
     position: absolute;
     top: 100%;  /* Align with the bottom edge of the parent. */
     width: 0;
     z-index: 2;  /* Above .screencast-glasspane. */
 }
 
 .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;
+}
+
+.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 {
     color: rgb(128, 128, 128);
 }
 
 .screencast-element-title {
     position: absolute;
     z-index: 10;
 }
 
 .screencast-tag-name {
     /* Keep this in sync with view-source.css (.webkit-html-tag) */
     color: rgb(136, 18, 128);
 }
 
 .screencast-node-id {
     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
     color: rgb(26, 26, 166);
 }
 
 .screencast-class-name {
     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
     color: rgb(153, 69, 0);
 }
 
 .screencast-glasspane {
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: rgba(255, 255, 255, 0.8);
-  bottom: 0;
-  display: -webkit-box;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 25px;  /* Align with the botton edge of .screencast .navigation. */
   font-size: 30px;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }