Bug 1321675 - Move device adder below devices. r=gl
authorJ. Ryan Stinnett <jryans@gmail.com>
Tue, 07 Feb 2017 16:57:03 -0600
changeset 341441 c648ae80e1df9ae9789a647fd19194b7925a0b36
parent 341440 14d0c91bab4e6d6ade3902b94fb22851474c59e5
child 341442 ce506ee62e4d1bf2353ac9c0f388f76dcecb037d
push id31331
push userkwierso@gmail.com
push dateWed, 08 Feb 2017 23:48:12 +0000
treeherdermozilla-central@438b18daff7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1321675
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1321675 - Move device adder below devices. r=gl This gets closer to Helen's mockup. The spacing is a bit tight. When adjusting the modal size, I used the most popular DevTools screen resolution (1366 x 768) as a reference. MozReview-Commit-ID: 4EjJKKhuxpA
devtools/client/responsive.html/components/device-adder.js
devtools/client/responsive.html/components/device-modal.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/device-adder.js
+++ b/devtools/client/responsive.html/components/device-adder.js
@@ -130,105 +130,120 @@ module.exports = createClass({
         touch: false,
       });
     }
 
     return dom.div(
       {
         id: "device-adder"
       },
-      dom.label(
+      dom.div(
         {
-          id: "device-adder-name",
-        },
-        dom.span(
-          {
-            className: "device-adder-label",
-          },
-          getStr("responsive.deviceAdderName")
-        ),
-        dom.input({
-          defaultValue: deviceName,
-          ref: input => {
-            this.nameInput = input;
-          },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-size",
+          id: "device-adder-content",
         },
-        dom.span(
+        dom.div(
           {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderSize")
-        ),
-        ViewportDimension({
-          viewport: {
-            width,
-            height,
-          },
-          onChangeSize: this.onChangeSize,
-          onRemoveDeviceAssociation: () => {},
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-pixel-ratio",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
+            id: "device-adder-column-1",
           },
-          getStr("responsive.deviceAdderPixelRatio")
-        ),
-        dom.input({
-          type: "number",
-          step: "any",
-          defaultValue: normalizedViewport.pixelRatio,
-          ref: input => {
-            this.pixelRatioInput = input;
-          },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-user-agent",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderUserAgent")
+          dom.label(
+            {
+              id: "device-adder-name",
+            },
+            dom.span(
+              {
+                className: "device-adder-label",
+              },
+              getStr("responsive.deviceAdderName")
+            ),
+            dom.input({
+              defaultValue: deviceName,
+              ref: input => {
+                this.nameInput = input;
+              },
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-size",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderSize")
+            ),
+            ViewportDimension({
+              viewport: {
+                width,
+                height,
+              },
+              onChangeSize: this.onChangeSize,
+              onRemoveDeviceAssociation: () => {},
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-pixel-ratio",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderPixelRatio")
+            ),
+            dom.input({
+              type: "number",
+              step: "any",
+              defaultValue: normalizedViewport.pixelRatio,
+              ref: input => {
+                this.pixelRatioInput = input;
+              },
+            })
+          )
         ),
-        dom.input({
-          defaultValue: normalizedViewport.userAgent,
-          ref: input => {
-            this.userAgentInput = input;
+        dom.div(
+          {
+            id: "device-adder-column-2",
           },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-touch",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderTouch")
+          dom.label(
+            {
+              id: "device-adder-user-agent",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderUserAgent")
+            ),
+            dom.input({
+              defaultValue: normalizedViewport.userAgent,
+              ref: input => {
+                this.userAgentInput = input;
+              },
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-touch",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderTouch")
+            ),
+            dom.input({
+              defaultChecked: normalizedViewport.touch,
+              type: "checkbox",
+              ref: input => {
+                this.touchInput = input;
+              },
+            })
+          )
         ),
-        dom.input({
-          defaultChecked: normalizedViewport.touch,
-          type: "checkbox",
-          ref: input => {
-            this.touchInput = input;
-          },
-        })
       ),
       dom.button(
         {
           id: "device-adder-save",
           onClick: this.onDeviceAdderSave,
         },
         getStr("responsive.deviceAdderSave")
       )
--- a/devtools/client/responsive.html/components/device-modal.js
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -186,23 +186,23 @@ module.exports = createClass({
                       className: "device-name",
                     },
                     device.name
                   ),
                   removeDeviceButton
                 );
               })
             );
-          }),
-          DeviceAdder({
-            devices,
-            viewportTemplate: deviceAdderViewportTemplate,
-            onAddCustomDevice,
           })
         ),
+        DeviceAdder({
+          devices,
+          viewportTemplate: deviceAdderViewportTemplate,
+          onAddCustomDevice,
+        }),
         dom.button(
           {
             id: "device-submit-button",
             onClick: this.onDeviceModalSubmit,
           },
           getStr("responsive.done")
         )
       ),
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -421,17 +421,17 @@ select > option.divider {
   display: none;
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 642px;
-  height: 612px;
+  height: 650px;
   z-index: 1;
 }
 
 /* Handles the opening/closing of the modal */
 #device-modal-wrapper.opened .device-modal {
   animation: fade-in-and-up 0.3s ease;
   animation-fill-mode: forwards;
   display: block;
@@ -454,19 +454,19 @@ select > option.divider {
   opacity: 0.5;
 }
 
 .device-modal-content {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   overflow: auto;
-  height: 550px;
+  height: 515px;
   width: 600px;
-  margin: 20px;
+  margin: 20px 20px 0;
 }
 
 #device-close-button,
 #device-close-button::before {
   position: absolute;
   top: 5px;
   right: 2px;
   width: 12px;
@@ -523,16 +523,18 @@ select > option.divider {
   background-color: var(--theme-tab-toolbar-background);
   border-width: 1px 0 0 0;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: var(--theme-splitter-color);
   color: var(--theme-body-color);
   width: 100%;
   height: 20px;
+  position: absolute;
+  bottom: 0;
 }
 
 #device-submit-button:hover {
   background-color: var(--toolbar-tab-hover);
 }
 
 #device-submit-button:hover:active {
   background-color: var(--submit-button-active-background-color);
@@ -541,16 +543,30 @@ select > option.divider {
 
 /**
  * Device Adder
  */
 
 #device-adder {
   display: flex;
   flex-direction: column;
+  margin: 0 20px;
+}
+
+#device-adder-content {
+  display: flex;
+}
+
+#device-adder-column-1 {
+  flex: 1;
+  margin-right: 10px;
+}
+
+#device-adder-column-2 {
+  flex: 2;
 }
 
 #device-adder button {
   background-color: var(--theme-tab-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   color: var(--theme-body-color);
   margin: 0 auto;
@@ -559,23 +575,23 @@ select > option.divider {
 #device-adder label {
   display: flex;
   margin-bottom: 5px;
   align-items: center;
 }
 
 #device-adder label > input,
 #device-adder label > .viewport-dimension {
-  width: 130px;
+  flex: 1;
   margin: 0;
 }
 
 #device-adder input {
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   text-align: center;
   color: var(--theme-body-color-inactive);
   transition: all 0.25s ease;
 }
 
 #device-adder input:focus {
   color: var(--viewport-active-color);
 }
@@ -584,14 +600,14 @@ select > option.divider {
 #device-adder label > .viewport-dimension:focus  {
   border-bottom: 1px solid var(--theme-selection-background);
   outline: none;
 }
 
 .device-adder-label {
   display: inline-block;
   margin-right: 5px;
-  width: 35px;
+  min-width: 35px;
 }
 
 #device-adder #device-adder-save {
   margin-top: 5px;
 }