[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-modes .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 112 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-modes .responsive-design-section-device .device-select {
+    width: 145px;
+}
+
+.responsive-design-section-device .mode-container {
+    display: none;
+    width: 90px;
+}
+
+.device-modes .responsive-design-section-device .mode-container {
+    display: inline-block;
+}
+
+.responsive-design-section-device .mode-select {
+    width: 80px;
+}
+
+.responsive-design-section-device button.change-orientation-button {
+    -webkit-appearance: none;
+    background: none;
+    outline: none;
+    border: none;
+    border-radius: 3px;
+    color: rgb(255, 156, 0);
+    width: 80px;
+    margin-left: 10px;
+}
+
+.responsive-design-section-device button.change-orientation-button:hover {
+    background-color: rgba(255, 156, 0, 0.1);
+}
+
 .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;
 }