[DevTools] Responsive design UI rework.

Source/devtools/front_end/overrides.css

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 81 matching lines @@
 }
 
 .overrides-view fieldset p label {
     display: inline-block;
 }
 
 .overrides-view .field-error-message {
     display: none;
 }
 
-.overrides-user-agent fieldset {
-    padding-top: 5px;
-}
+/* Network tab */
 
 .overrides-network fieldset {
     padding-top: 5px;
 }
 
 .overrides-network fieldset p {
     width: 100%;
     margin-left: 2px;
 }
 
 .overrides-network fieldset select {
     margin-bottom: 5px;
 }
 
 .overrides-network fieldset p label {
     cursor: default;
     margin-right: 5px;
 }
 
 .overrides-network fieldset input[type='text'] {
     width: 100%;
     max-width: 400px;
     min-width: 120px;
+    margin-left: 2px;
+}
+
+/* Device tab */
+
+.overrides-device {
+    width: 100%;
 }
 
 .overrides-device > select {
     margin-bottom: 10px;
     width: 400px;
     max-width: 90%;
 }
 
-.overrides-device button {
-    margin-right: 10px;
+.overrides-device input {
+    text-align: right;
+}
+
+.overrides-device input[type=range] {
+    width: 100%;
 }
 
 .overrides-device > label {
     display: block;
     margin-bottom: 7px;
     white-space: nowrap;
 }
 
 .overrides-device-value {
     padding-left: 10px;
     color: gray;
 }
 
 .overrides-device-value-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin-top: 10px;
 }
 
-.overrides-viewport {
-    width: 100%;
-}
-
-.overrides-viewport input {
-    text-align: right;
-}
-
-.overrides-viewport input[type=range] {
-    width: 100%;
-}
-
 button.overrides-swap {
     height: 20px;
 }
 
+.overrides-device label {
+    margin-bottom: 10px;
+}
+
+.overrides-device table {
+    margin-bottom: 5px;
+}
+
+.overrides-device > label {
+    margin-bottom: 4px;
+}
+
+.overrides-device .help-footnote {
+    border-top: 1px solid #EEEEEE;
+    margin: 0;
+    padding: 12px;
+}
+
 .overrides-view label {
     display: flex;
     height: auto;
 }
 
-.overrides-viewport label {
-    margin-bottom: 10px;
+/* Screen tab */
+
+.overrides-viewport > label {
+    margin-bottom: 4px;
 }
 
-.overrides-viewport table {
-    margin-bottom: 5px;
-}
-
-.overrides-viewport > label {
-    margin-bottom: 8px;
-}
-
-.overrides-viewport .help-footnote {
-    border-top: 1px solid #EEEEEE;
-    margin: 0;
-    padding: 12px;
-}
-
-.overrides-user-agent input[type=text] {
-    width: 400px;
-    max-width: 90%;
-}
-
-.overrides-user-agent select {
-    margin: 7px 0;
-}
+/* Sensors tab */
 
 .overrides-sensors > label {
     margin-bottom: 10px;
 }
 
-.overrides-device, .overrides-viewport, .overrides-user-agent, .overrides-network, .overrides-sensors {
+.overrides-device, .overrides-viewport, .overrides-network, .overrides-sensors {
     flex: none !important;
 }
 
 .overrides-sensors input {
     text-align: right;
 }
 
 .overrides-activate-device #tab-device,
 .overrides-activate-viewport #tab-viewport,
-.overrides-activate-user-agent #tab-user-agent,
 .overrides-activate-network #tab-network,
 .overrides-activate-sensors #tab-sensors {
     color: rgb(25, 100, 228);
     opacity: 0.8;
 }
 
 .overrides-activate-device #tab-device.selected,
 .overrides-activate-viewport #tab-viewport.selected,
-.overrides-activate-user-agent #tab-user-agent.selected,
 .overrides-activate-network #tab-network.selected,
 .overrides-activate-sensors #tab-sensors.selected {
     opacity: 1;
 }
 
 .overrides-view input[type=text]:enabled:focus,
 .overrides-view select:enabled:focus {
     -webkit-transition: border-color 200ms;
     border-color: rgb(77, 144, 254);
     outline: none;
@@ skipping 41 matching lines @@
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .overrides-view .overrides-footer::before {
     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 .overrides-view .overrides-footer .warning-icon-small {
     margin-right: 3px;
 }