Bug 1542367 - Remove the 'Done' button at the bottom of the device modal. r=gl

Differential Revision: https://phabricator.services.mozilla.com/D26637

--HG--
extra : moz-landing-system : lando

devtools/client/responsive.html/components/DeviceModal.js

@@ -55,6 +55,7 @@ class DeviceModal extends PureComponent {
   }
 
   componentWillUnmount() {
+    this.onDeviceModalSubmit();
     window.removeEventListener("keydown", this.onKeyDown, true);
   }
 
@@ -250,13 +251,6 @@ class DeviceModal extends PureComponent {
           },
           this.renderDevices()
           ),
-          dom.button(
-            {
-              id: "device-submit-button",
-              onClick: this.onDeviceModalSubmit,
-            },
-            getStr("responsive.done")
-          )
         ),
         dom.div(
           {

devtools/client/responsive.html/index.css

@@ -7,8 +7,6 @@
 
 :root {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
-  --submit-button-active-background-color: rgba(0,0,0,0.12);
-  --submit-button-active-color: var(--theme-body-color);
   --viewport-active-color: #3b3b3b;
   --input-invalid-border-color: var(--red-60);
   --custom-device-button-hover: var(--grey-30);
@@ -16,8 +14,6 @@
 
 :root.theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
-  --submit-button-active-background-color: var(--theme-toolbar-hover-active);
-  --submit-button-active-color: var(--theme-selection-color);
   --viewport-active-color: #fcfcfc;
   --input-invalid-border-color: var(--red-50);
   --custom-device-button-hover: var(--grey-10-a20)
@@ -399,7 +395,7 @@ body,
 
 .device-modal {
   display: grid;
-  grid-template-rows: minmax(80px, auto) auto 20px;
+  grid-template-rows: minmax(80px, auto) auto;
   background-color: var(--theme-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
@@ -613,28 +609,6 @@ body,
   background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
-#device-submit-button {
-  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(--theme-toolbar-hover);
-}
-
-#device-submit-button:hover:active {
-  background-color: var(--submit-button-active-background-color);
-  color: var(--submit-button-active-color);
-}
-
 /**
  * Device Form
  */

devtools/client/responsive.html/test/browser/browser_device_custom.js

@@ -55,10 +55,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   const deviceCb = [...document.querySelectorAll(".device-input-checkbox")].find(cb => {
     return cb.value == device.name;
   });
-  const submitButton = document.getElementById("device-submit-button");
   ok(deviceCb, "Custom device checkbox added to modal");
   ok(deviceCb.checked, "Custom device enabled");
-  submitButton.click();
+  document.getElementById("device-close-button").click();
 
   info("Look for custom device in device selector");
   const deviceSelector = document.getElementById("device-selector");
@@ -90,14 +89,16 @@ addRDMTask(TEST_URL, async function({ ui }) {
 
   info("Remove previously added custom device");
   const deviceRemoveButton = document.querySelector(".device-remove-button");
-  const submitButton = document.getElementById("device-submit-button");
   const removed = Promise.all([
     waitUntilState(store, state => state.devices.custom.length == 0),
     once(ui, "device-association-removed"),
   ]);
   deviceRemoveButton.click();
   await removed;
-  submitButton.click();
+
+  info("Close the form before submitting.");
+  document.getElementById("device-form-save").click();
+  document.getElementById("device-close-button").click();
 
   info("Ensure custom device was removed from device selector");
   await waitUntilState(store, state => state.viewports[0].device == "");
@@ -136,10 +137,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
   const deviceCb = [...document.querySelectorAll(".device-input-checkbox")].find(cb => {
     return cb.value == unicodeDevice.name;
   });
-  const submitButton = document.getElementById("device-submit-button");
   ok(deviceCb, "Custom unicode device checkbox added to modal");
   ok(deviceCb.checked, "Custom unicode device enabled");
-  submitButton.click();
+  document.getElementById("device-close-button").click();
 
   info("Look for custom unicode device in device selector");
   const deviceSelector = document.getElementById("device-selector");

devtools/client/responsive.html/test/browser/browser_device_custom_remove.js

@@ -53,14 +53,13 @@ addRDMTask(TEST_URL, async function({ ui }) {
   await addDeviceInModal(ui, device2);
 
   info("Verify all custom devices default to enabled in modal");
-  const submitButton = document.getElementById("device-submit-button");
   const deviceCbs =
     [...document.querySelectorAll(".device-type-custom .device-input-checkbox")];
   is(deviceCbs.length, 2, "Both devices have a checkbox in modal");
   for (const cb of deviceCbs) {
     ok(cb.checked, "Custom device enabled");
   }
-  submitButton.click();
+  document.getElementById("device-close-button").click();
 
   info("Look for device 1 and 2 in device selector");
 
@@ -79,7 +78,7 @@ addRDMTask(TEST_URL, async function({ ui }) {
   const removed = waitUntilState(store, state => state.devices.custom.length == 1);
   deviceRemoveButtons[1].click();
   await removed;
-  submitButton.click();
+  document.getElementById("device-close-button").click();
 
   info("Ensure device 2 is no longer in device selector");
   await testMenuItems(toolWindow, deviceSelector, menuItems => {

devtools/client/responsive.html/test/browser/browser_device_modal_exit.js

@@ -31,7 +31,7 @@ addRDMTask(TEST_URL, async function({ ui }) {
   info("Check that the device list remains unchanged after exitting.");
   const preferredDevicesAfter = _loadPreferredDevices();
 
-  is(preferredDevicesBefore.added.size, preferredDevicesAfter.added.size,
+  is(preferredDevicesAfter.added.size - preferredDevicesBefore.added.size, 1,
     "Got expected number of added devices.");
   is(preferredDevicesBefore.removed.size, preferredDevicesAfter.removed.size,
     "Got expected number of removed devices.");

devtools/client/responsive.html/test/browser/browser_device_modal_submit.js

@@ -58,7 +58,7 @@ addRDMTask(TEST_URL, async function({ ui }) {
     .filter(cb => !cb.checked)[0];
   const value = uncheckedCb.value;
   uncheckedCb.click();
-  document.getElementById("device-submit-button").click();
+  document.getElementById("device-close-button").click();
 
   ok(!store.getState().devices.isModalOpen, "The device modal is closed on submit.");
 
@@ -88,7 +88,7 @@ addRDMTask(TEST_URL, async function({ ui }) {
     .filter(cb => cb.checked && cb.value != value)[0];
   const checkedVal = checkedCb.value;
   checkedCb.click();
-  document.getElementById("device-submit-button").click();
+  document.getElementById("device-close-button").click();
 
   info("Checking that the device is removed from the user preference list.");
   preferredDevices = _loadPreferredDevices();