DevTools: allow independent sidebar and viewport resize while in responsive mode.

Source/devtools/front_end/responsiveDesignView.css

Index: Source/devtools/front_end/responsiveDesignView.css
diff --git a/Source/devtools/front_end/responsiveDesignView.css b/Source/devtools/front_end/responsiveDesignView.css
index a84ad83725a38cf9e85fd4cfa30cbf1ac447a9f1..2b31e6096adddc0a2f6db619dc678e33445d6b26 100644
--- a/Source/devtools/front_end/responsiveDesignView.css
+++ b/Source/devtools/front_end/responsiveDesignView.css
@@ -32,59 +32,47 @@
 }
 
 .responsive-design-slider-thumb {
-    flex: 0 1 100px;
     border: 1px solid rgb(231, 231, 231);
     background-color: lightgray;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    background-repeat: no-repeat;
 }
 
 .responsive-design-slider-width .responsive-design-slider-thumb {
+    padding: 44px 5px;
     border-radius: 0 3px 3px 0;
     border-left: none;
 }
 
-.responsive-design-slider-width .responsive-design-slider-thumb.reversed {
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-}
-
 .responsive-design-slider-height .responsive-design-slider-thumb {
+    padding: 4px 44px;
     border-radius: 0 0 3px 3px;
     border-top: none;
 }
 
-.responsive-design-slider-height .responsive-design-slider-thumb.reversed {
-    border-radius: 0;
-    border-top: none;
-    border-bottom: 0;
-}
-
-.responsive-design-zero-button {
-    width: 14px;
-    height: 14px;
-    background-repeat: no-repeat;
-    background-position: 2px 5px;
-    background-image: url(Images/searchNext.png);
-    opacity: 0.3;
-    cursor: pointer;
+.responsive-design-thumb-handle {
+    content: url(Images/statusbarResizerHorizontal.png);
+    pointer-events: none;
 }
 
-.responsive-design-zero-button:hover {
-    opacity: 0.7;
+.responsive-design-slider-height .responsive-design-thumb-handle  {
+    transform: rotate(90deg);
 }
 
-.responsive-design-slider-height .reversed .responsive-design-zero-button {
-    -webkit-transform: rotate(180deg);
+.responsive-design-resolution-label {
+    position: absolute;
+    color: white;
+    background-color: hsl(41, 100%, 47%);
+    padding: 3px;
+    font-size: 12px;
+    text-align: center;
+    text-shadow: hsl(41, 100%, 39%) 1px 1px;
 }
 
-.responsive-design-slider-width .responsive-design-zero-button {
-    -webkit-transform: rotate(270deg);
+.responsive-design-resolution-width {
+    top: 0;
 }
 
-.responsive-design-slider-width .reversed .responsive-design-zero-button {
-    -webkit-transform: rotate(90deg);
+.responsive-design-resolution-height {
+    left: 0;
 }