[DevTools] UI improvements for responsive design view.

BUG=none
TBR=pfeldman@chromium.org

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

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

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

@@ -11,6 +11,7 @@
 WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
 {
     WebInspector.VBox.call(this);
+    this.setMinimumSize(150, 150);
     this.registerRequiredCSS("responsiveDesignView.css");
     this.element.classList.add("overflow-hidden");
 

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

@@ -29,16 +29,18 @@
     background-color: lightgray;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 1 100px;
 }
 
 .responsive-design-slider-width .responsive-design-slider-thumb {
-    padding: 44px 5px;
     border-radius: 0 3px 3px 0;
     border-left: none;
 }
 
 .responsive-design-slider-height .responsive-design-slider-thumb {
-    padding: 4px 44px;
     border-radius: 0 0 3px 3px;
     border-top: none;
 }