From 66bdd9abc3e6891f0004a013e9bffc7dac7b6f99 Mon Sep 17 00:00:00 2001 From: Sebastian Hengst Date: Wed, 13 Jul 2016 11:23:34 +0200 Subject: [PATCH] Backed out changeset 0845f945173f (bug 1266414) for still failing browser_device_modal_exit.js. r=backout --- .../components/device-modal.js | 117 +++++++----------- devtools/client/responsive.html/index.css | 62 ++-------- .../test/browser/browser_device_modal_exit.js | 2 +- .../browser/browser_device_modal_submit.js | 2 +- 4 files changed, 55 insertions(+), 128 deletions(-) diff --git a/devtools/client/responsive.html/components/device-modal.js b/devtools/client/responsive.html/components/device-modal.js index d28b97472570..123b8f2291cc 100644 --- a/devtools/client/responsive.html/components/device-modal.js +++ b/devtools/client/responsive.html/components/device-modal.js @@ -2,8 +2,6 @@ * 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 } = @@ -27,10 +25,6 @@ module.exports = createClass({ return {}; }, - componentDidMount() { - window.addEventListener("keydown", this.onKeyDown, true); - }, - componentWillReceiveProps(nextProps) { let { devices, @@ -45,10 +39,6 @@ module.exports = createClass({ } }, - componentWillUnmount() { - window.removeEventListener("keydown", this.onKeyDown, true); - }, - onDeviceCheckboxClick({ target }) { this.setState({ [target.value]: !this.state[target.value] @@ -88,25 +78,18 @@ module.exports = createClass({ 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]) @@ -115,66 +98,54 @@ module.exports = createClass({ 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") ) ); }, diff --git a/devtools/client/responsive.html/index.css b/devtools/client/responsive.html/index.css index 0e7cd3b9f0f7..7275ac648e8d 100644 --- a/devtools/client/responsive.html/index.css +++ b/devtools/client/responsive.html/index.css @@ -39,7 +39,6 @@ #root, html, body { - height: 100%; margin: 0; } @@ -48,10 +47,12 @@ html, body { 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; } /** @@ -85,7 +86,7 @@ html, body { 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; @@ -335,33 +336,9 @@ html, body { * 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; @@ -370,31 +347,10 @@ html, body { 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 { diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js b/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js index 68cf6f61f9aa..de90e522f966 100644 --- a/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js +++ b/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js @@ -28,7 +28,7 @@ addRDMTask(TEST_URL, function* ({ ui }) { 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."); diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js index 184822f03fa0..4078340cae04 100644 --- a/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js +++ b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js @@ -61,7 +61,7 @@ addRDMTask(TEST_URL, function* ({ ui }) { 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.");