Bug 1549940 - Close about:debugging messages when clicking anywhere on the close button r=Ola
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 09 May 2019 12:59:00 +0000
changeset 535092 c7395b64e19e763c7d1612f4d898e53a2a1f9a7c
parent 535091 51a7edbe0a9e8f63e45d59d6a9a18bc0e700a199
child 535093 7214702e12d20f2848fc186f752904310d6b276b
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersOla
bugs1549940
milestone68.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 1549940 - Close about:debugging messages when clicking anywhere on the close button r=Ola Simply moved the callback from the icon to the button and updated the test. Differential Revision: https://phabricator.services.mozilla.com/D30339
devtools/client/aboutdebugging-new/src/components/shared/Message.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
--- a/devtools/client/aboutdebugging-new/src/components/shared/Message.js
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.js
@@ -43,35 +43,37 @@ class Message extends PureComponent {
     };
   }
 
   closeMessage() {
     this.setState({ isClosed: true });
   }
 
   renderButton(level) {
-    return dom.button({
-            className: `ghost-button message__button message__button--${level}`,
-    },
-        Localized(
-          {
-            id: "about-debugging-message-close-icon",
-            attrs: {
-              alt: true,
-            },
+    return dom.button(
+      {
+        className: `ghost-button message__button message__button--${level} ` +
+          `qa-message-button-close-button`,
+        onClick: () => this.closeMessage(),
+      },
+      Localized(
+        {
+          id: "about-debugging-message-close-icon",
+          attrs: {
+            alt: true,
           },
-          dom.img(
-            {
-              className: "qa-message-button-close",
-              src: CLOSE_ICON_SRC,
-              onClick: () => this.closeMessage(),
-            },
-          ),
+        },
+        dom.img(
+          {
+            className: "qa-message-button-close-icon",
+            src: CLOSE_ICON_SRC,
+          },
         ),
-      );
+      ),
+    );
   }
 
   render() {
     const { children, className, level, isCloseable } = this.props;
     const { isClosed } = this.state;
 
     if (isClosed) {
       return null;
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
@@ -1,44 +1,70 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 /* import-globals-from helper-addons.js */
 Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
 
+const EXTENSION_NAME = "Temporary web extension";
+const EXTENSION_ID = "test-devtools@mozilla.org";
+
 // Test that Message component can be closed with the X button
 add_task(async function() {
-  const EXTENSION_NAME = "Temporary web extension";
-  const EXTENSION_ID = "test-devtools@mozilla.org";
-
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
+  info("Check that the message can be closed with icon");
+  let warningMessage = await installExtensionWithWarning(document);
+  await testCloseMessageWithIcon(warningMessage, document);
+  await removeTemporaryExtension(EXTENSION_NAME, document);
+
+  info("Check that the message can be closed with the button around the icon");
+  warningMessage = await installExtensionWithWarning(document);
+  await testCloseMessageWithButton(warningMessage, document);
+  await removeTemporaryExtension(EXTENSION_NAME, document);
+
+  await removeTab(tab);
+});
+
+async function testCloseMessageWithIcon(warningMessage, doc) {
+  const closeIcon = warningMessage.querySelector(".qa-message-button-close-icon");
+  ok(!!closeIcon, "The warning message has a close icon");
+
+  info("Closing the message and waiting for it to disappear");
+  closeIcon.click();
+
+  const target = findDebugTargetByText(EXTENSION_NAME, doc);
+  await waitUntil(() => target.querySelector(".qa-message") === null);
+}
+
+async function testCloseMessageWithButton(warningMessage, doc) {
+  const closeButton = warningMessage.querySelector(".qa-message-button-close-button");
+  ok(!!closeButton, "The warning message has a close button");
+
+  info("Click on the button and wait for the message to disappear");
+  EventUtils.synthesizeMouse(closeButton, 1, 1, {}, doc.defaultView);
+
+  const target = findDebugTargetByText(EXTENSION_NAME, doc);
+  await waitUntil(() => target.querySelector(".qa-message") === null);
+}
+
+async function installExtensionWithWarning(doc) {
   await installTemporaryExtensionFromXPI({
     id: EXTENSION_ID,
     name: EXTENSION_NAME,
     extraProperties: {
       // This property is not expected in the manifest and should trigger a warning!
       "wrongProperty": {},
     },
-  }, document);
+  }, doc);
 
   info("Wait until a debug target item appears");
-  await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
-  const target = findDebugTargetByText(EXTENSION_NAME, document);
+  await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, doc));
 
+  const target = findDebugTargetByText(EXTENSION_NAME, doc);
   const warningMessage = target.querySelector(".qa-message");
   ok(!!warningMessage, "A warning message is displayed for the installed addon");
 
-  const button = warningMessage.querySelector(".qa-message-button-close");
-  ok(!!button, "The warning message has a close button");
-
-  info("Closing the message and waiting for it to disappear");
-  button.click();
-  await waitUntil(() => {
-    return target.querySelector(".qa-message") === null;
-  });
-
-  await removeTemporaryExtension(EXTENSION_NAME, document);
-  await removeTab(tab);
-});
+  return warningMessage;
+}