Bug 1321675 - Move device adder below devices. r=gl
authorJ. Ryan Stinnett <jryans@gmail.com>
Tue, 07 Feb 2017 16:57:03 -0600
changeset 341516 c648ae80e1df9ae9789a647fd19194b7925a0b36
parent 341515 14d0c91bab4e6d6ade3902b94fb22851474c59e5
child 341517 ce506ee62e4d1bf2353ac9c0f388f76dcecb037d
push id86727
push userkwierso@gmail.com
push dateThu, 09 Feb 2017 00:21:26 +0000
treeherdermozilla-inbound@55a4f5189115 [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;
 }