Backed out changeset 0845f945173f (bug 1266414) for still failing browser_device_modal_exit.js. r=backout
authorSebastian Hengst <archaeopteryx@coole-files.de>
Wed, 13 Jul 2016 11:23:34 +0200
changeset 304730 a76528042c032f558b3c2c55700de04e1c673745
parent 304729 bbbf2ec4d6a268d2e1154643dddc2ecc986c39a6
child 304731 b6edea2fa69057a42c7c24e76e583bb9bad86f98
push id19980
push userarchaeopteryx@coole-files.de
push dateWed, 13 Jul 2016 09:23:54 +0000
treeherderfx-team@a76528042c03 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1266414
milestone50.0a1
backs out0845f945173f613cabea846124a6bd443a048aa7
Backed out changeset 0845f945173f (bug 1266414) for still failing browser_device_modal_exit.js. r=backout
devtools/client/responsive.html/components/device-modal.js
devtools/client/responsive.html/index.css
devtools/client/responsive.html/test/browser/browser_device_modal_exit.js
devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
--- a/devtools/client/responsive.html/components/device-modal.js
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -1,14 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* eslint-env browser */
-
 "use strict";
 
 const { DOM: dom, createClass, PropTypes, addons } =
   require("devtools/client/shared/vendor/react");
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 module.exports = createClass({
@@ -22,38 +20,30 @@ module.exports = createClass({
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {
     return {};
   },
 
-  componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDown, true);
-  },
-
   componentWillReceiveProps(nextProps) {
     let {
       devices,
     } = nextProps;
 
     for (let type of devices.types) {
       for (let device of devices[type]) {
         this.setState({
           [device.name]: device.displayed,
         });
       }
     }
   },
 
-  componentWillUnmount() {
-    window.removeEventListener("keydown", this.onKeyDown, true);
-  },
-
   onDeviceCheckboxClick({ target }) {
     this.setState({
       [target.value]: !this.state[target.value]
     });
   },
 
   onDeviceModalSubmit() {
     let {
@@ -83,99 +73,80 @@ module.exports = createClass({
         }
       }
     }
 
     onDeviceListUpdate(preferredDevices);
     onUpdateDeviceModalOpen(false);
   },
 
-  onKeyDown(event) {
-    if (!this.props.devices.isModalOpen) {
-      return;
-    }
-    // Escape keycode
-    if (event.keyCode === 27) {
-      let {
-        onUpdateDeviceModalOpen
-      } = this.props;
-      onUpdateDeviceModalOpen(false);
-    }
-  },
-
   render() {
     let {
       devices,
       onUpdateDeviceModalOpen,
     } = this.props;
 
+    let modalClass = "device-modal container";
+
+    if (!devices.isModalOpen) {
+      modalClass += " hidden";
+    }
+
     const sortedDevices = {};
     for (let type of devices.types) {
       sortedDevices[type] = Object.assign([], devices[type])
         .sort((a, b) => a.name.localeCompare(b.name));
     }
 
     return dom.div(
       {
-        id: "device-modal-wrapper",
-        className: this.props.devices.isModalOpen ? "opened" : "closed",
+        className: modalClass,
       },
+      dom.button({
+        id: "device-close-button",
+        className: "toolbar-button devtools-button",
+        onClick: () => onUpdateDeviceModalOpen(false),
+      }),
       dom.div(
         {
-          className: "device-modal container",
+          className: "device-modal-content",
         },
-        dom.button({
-          id: "device-close-button",
-          className: "toolbar-button devtools-button",
-          onClick: () => onUpdateDeviceModalOpen(false),
-        }),
-        dom.div(
-          {
-            className: "device-modal-content",
-          },
-          devices.types.map(type => {
-            return dom.div(
+        devices.types.map(type => {
+          return dom.div(
+            {
+              className: "device-type",
+              key: type,
+            },
+            dom.header(
               {
-                className: "device-type",
-                key: type,
+                className: "device-header",
               },
-              dom.header(
+              type
+            ),
+            sortedDevices[type].map(device => {
+              return dom.label(
                 {
-                  className: "device-header",
+                  className: "device-label",
+                  key: device.name,
                 },
-                type
-              ),
-              sortedDevices[type].map(device => {
-                return dom.label(
-                  {
-                    className: "device-label",
-                    key: device.name,
-                  },
-                  dom.input({
-                    className: "device-input-checkbox",
-                    type: "checkbox",
-                    value: device.name,
-                    checked: this.state[device.name],
-                    onChange: this.onDeviceCheckboxClick,
-                  }),
-                  device.name
-                );
-              })
-            );
-          })
-        ),
-        dom.button(
-          {
-            id: "device-submit-button",
-            onClick: this.onDeviceModalSubmit,
-          },
-          getStr("responsive.done")
-        )
+                dom.input({
+                  className: "device-input-checkbox",
+                  type: "checkbox",
+                  value: device.name,
+                  checked: this.state[device.name],
+                  onChange: this.onDeviceCheckboxClick,
+                }),
+                device.name
+              );
+            })
+          );
+        })
       ),
-      dom.div(
+      dom.button(
         {
-          className: "modal-overlay",
-          onClick: () => onUpdateDeviceModalOpen(false),
-        }
+          id: "device-submit-button",
+          onClick: this.onDeviceModalSubmit,
+        },
+        getStr("responsive.done")
       )
     );
   },
 });
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -34,29 +34,30 @@
 }
 
 * {
   box-sizing: border-box;
 }
 
 #root,
 html, body {
-  height: 100%;
   margin: 0;
 }
 
 #app {
   /* Center the viewports container */
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding-top: 15px;
-  padding-bottom: 1%;
-  position: relative;
-  height: 100%;
+  height: 100vh;
+
+  /* Snap to the top of the app when there isn't enough vertical space anymore
+     to center the viewports (so we don't lose the global toolbar) */
+  position: sticky;
+  top: 0;
 }
 
 /**
  * Common style for containers and toolbar buttons
  */
 
 .container {
   background-color: var(--theme-toolbar-background);
@@ -80,17 +81,17 @@ html, body {
 /**
  * Global Toolbar
  */
 
 #global-toolbar {
   color: var(--theme-body-color-alt);
   border-radius: 2px;
   box-shadow: var(--rdm-box-shadow);
-  margin: 0 0 15px 0;
+  margin: 10% 0 30px 0;
   padding: 4px 5px;
   display: inline-flex;
   -moz-user-select: none;
 }
 
 #global-toolbar > .title {
   border-right: 1px solid var(--theme-splitter-color);
   padding: 1px 6px 0 2px;
@@ -330,76 +331,31 @@ html, body {
 .viewport-dimension-separator {
   -moz-user-select: none;
 }
 
 /**
  * Device Modal
  */
 
-@keyframes fade-in-and-up {
-  0% {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-@keyframes fade-down-and-out {
-  0% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(5px);
-    visibility: hidden;
-  }
-}
-
 .device-modal {
   border-radius: 2px;
   box-shadow: var(--rdm-box-shadow);
-  display: none;
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 642px;
   height: 612px;
-  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;
 }
 
-#device-modal-wrapper.closed .device-modal {
-  animation: fade-down-and-out 0.3s ease;
-  animation-fill-mode: forwards;
-  display: block;
-}
-
-#device-modal-wrapper.opened .modal-overlay {
-  background-color: var(--theme-splitter-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 0;
-  opacity: 0.5;
+.device-modal.hidden {
+  display: none;
 }
 
 .device-modal-content {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   overflow: auto;
   height: 550px;
--- a/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js
@@ -23,17 +23,17 @@ addRDMTask(TEST_URL, function* ({ ui }) 
 
   info("Check the first unchecked device and exit the modal.");
   let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
     .filter(cb => !cb.checked)[0];
   let value = uncheckedCb.value;
   uncheckedCb.click();
   closeButton.click();
 
-  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+  ok(modal.classList.contains("hidden"),
     "The device modal is hidden on exit.");
 
   info("Check that the device list remains unchanged after exitting.");
   let preferredDevicesAfter = _loadPreferredDevices();
 
   is(preferredDevicesBefore.added.size, preferredDevicesAfter.added.size,
     "Got expected number of added devices.");
 
--- a/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
@@ -56,17 +56,17 @@ addRDMTask(TEST_URL, function* ({ ui }) 
   // Tests where the user adds a non-featured device
   info("Check the first unchecked device and submit new device list.");
   let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
     .filter(cb => !cb.checked)[0];
   let value = uncheckedCb.value;
   uncheckedCb.click();
   submitButton.click();
 
-  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+  ok(modal.classList.contains("hidden"),
     "The device modal is hidden on submit.");
 
   info("Checking that the new device is added to the user preference list.");
   let preferredDevices = _loadPreferredDevices();
   ok(preferredDevices.added.has(value), value + " in user added list.");
 
   info("Checking new device is added to the device selector.");
   let options = [...select.options];