[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/responsiveDesignView.css

 /*
  * Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .responsive-design {
     position: relative;
     background-color: rgb(0, 0, 0);
     overflow: hidden;
@@ skipping 64 matching lines @@
 
 .responsive-design-thumb-handle {
     content: url(Images/toolbarResizerHorizontal.png);
     pointer-events: none;
 }
 
 .responsive-design-slider-height .responsive-design-thumb-handle  {
     transform: rotate(90deg);
 }
 
+.responsive-design-page-container {
+    background-color: #171717;
+}
+
 .responsive-design-page-scale-container {
     position: absolute !important;
     top: 0;
     right: 0;
     padding: 10px;
     background-color: rgba(0, 0, 0, 0.3);
     align-items: center;
 }
 
 .responsive-design-page-scale-label {
@@ skipping 116 matching lines @@
     padding: 0;
     display: inline-block;
 }
 
 .responsive-design-toolbar .field-error-message {
     display: none;
 }
 
 .responsive-design-toolbar label {
     cursor: default !important;
+    margin: 0 2px;
 }
 
 .responsive-design-toolbar input[type='text'] {
     text-align: left;
     background-color: transparent;
     border: none;
     margin: 0 1px 1px 0;
     padding: 3px 2px;
 }
 
@@ skipping 64 matching lines @@
 .responsive-design-icon-swap {
     background-color: rgb(255, 170, 0);
     -webkit-mask-position: -32px 0;
     -webkit-appearance: none;
     padding: 0;
     border: 0;
 }
 
 .responsive-design-icon-swap {
     margin-left: 1px;
+    top: 4px;
 }
 
 .responsive-design-icon-swap:hover {
     background-color: rgb(255, 180, 0);
 }
 
 .responsive-design-icon-swap:active {
     opacity: 0.8;
 }
 
@@ skipping 30 matching lines @@
     opacity: 0.8;
 }
 
 /* Device section */
 
 .responsive-design-section-device .responsive-design-section-decorator {
     background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0));
     margin-left: 0;
 }
 
-.responsive-design-section-device select {
-    width: 283px;
+.responsive-design-section-device .device-select {
+    width: 140px;
+}
+
+.responsive-design-section-device .mode-container {
+    display: inline-block;
+    width: 150px;
+    padding: 0 10px;
+}
+
+.responsive-design-section-device .mode-select select {
+    width: 116px;
+}
+
+.responsive-design-section-device .mode-select label {
+    margin-left: 4px;
+    color: rgb(255, 156, 0);
+    position: relative;
+    top: 1px;
 }
 
 .responsive-design-section-device input[type='text'],
 .responsive-design-section-device input[type='text']::-webkit-input-placeholder,
 .responsive-design-section-device select {
     color: rgb(255, 156, 0);
 }
 
 .responsive-design-section-device input[type='checkbox']:checked:after {
     background: rgb(255, 156, 0);
@@ skipping 104 matching lines @@
     pointer-events: none;
 }
 
 .media-inspector-label-right {
     right: 4px;
 }
 
 .media-inspector-label-left {
     left: 4px;
 }