[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 118 matching lines @@
 }
 
 .responsive-design-toolbar .field-error-message {
     display: none;
 }
 
 .responsive-design-toolbar label {
     cursor: default !important;
 }
 
+.device-art .responsive-design-toolbar label {
+    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;
 }
 
 .responsive-design-toolbar input[type='text'].numeric {
     text-align: center;
@@ skipping 58 matching lines @@
 }
 
 .responsive-design-icon {
     display: inline-block;
     width: 16px;
     height: 16px;
     position: relative;
     top: 3px;
 }
 
+.device-art .responsive-design-icon {
+    margin: 0 3px;
+}
+
 div.responsive-design-icon:disabled {
     opacity: 1 !important;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .responsive-design-icon {
     -webkit-mask-image: url(Images/responsiveDesign_2x.png);
 }
 } /* media */
 
@@ skipping 22 matching lines @@
     -webkit-mask-position: -32px 0;
     -webkit-appearance: none;
     padding: 0;
     border: 0;
 }
 
 .responsive-design-icon-swap {
     margin-left: 1px;
 }
 
+.device-art .responsive-design-icon-swap {
+    margin: 0 4px;
+}
+
 .responsive-design-icon-swap:hover {
     background-color: rgb(255, 180, 0);
 }
 
 .responsive-design-icon-swap:active {
     opacity: 0.8;
 }
 
 /* Buttons section */
 
@@ skipping 29 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 {
+.responsive-design-section-device .device-select {
     width: 185px;
 }
 
+.device-art .responsive-design-section-device .device-select {
+    width: 145px;
+}
+
+.responsive-design-section-device .mode-select {
+    display: none;
+    width: 120px;
+}
+
+.device-art .responsive-design-section-device .mode-select {
+    display: initial;
+}
+
+.responsive-design-section-device .mode-select.invisible {
+    visibility: hidden;
+}
+
 .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 117 matching lines @@
     pointer-events: none;
 }
 
 .media-inspector-label-right {
     right: 4px;
 }
 
 .media-inspector-label-left {
     left: 4px;
 }