Bug 1583696 - Remove XUL grid from toolkit/components/prompts/content/tabprompts.jsm. r=MattN,marionette-reviewers,whimboo

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

Author: nt1m

browser/base/content/browser.js

@@ -8890,16 +8890,19 @@ TabModalPromptBox.prototype = {
       /* Ignore exceptions for host-less URIs */
     }
     if (hostForAllowFocusCheckbox) {
-      let allowFocusRow = document.createXULElement("row");
-      allowFocusCheckbox = document.createXULElement("checkbox");
-      let spacer = document.createXULElement("spacer");
+      let allowFocusRow = document.createElement("div");
+
+      let spacer = document.createElement("div");
       allowFocusRow.appendChild(spacer);
+
+      allowFocusCheckbox = document.createXULElement("checkbox");
       let label = gTabBrowserBundle.formatStringFromName(
         "tabs.allowTabFocusByPromptForSite",
         [hostForAllowFocusCheckbox]
       );
       allowFocusCheckbox.setAttribute("label", label);
       allowFocusRow.appendChild(allowFocusCheckbox);
+
       newPrompt.ui.rows.append(allowFocusRow);
     }
 

docshell/test/browser/browser_bug1415918_beforeunload_options.js

@@ -7,9 +7,6 @@ const TEST_PATH = getRootDirectory(gTestPath).replace(
 );
 
 add_task(async function test() {
-  const XUL_NS =
-    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-
   await SpecialPowers.pushPrefEnv({
     set: [["dom.require_user_interaction_for_beforeunload", false]],
   });
@@ -28,7 +25,7 @@ add_task(async function test() {
         mutation.type == "attributes" &&
         browser.hasAttribute("tabmodalPromptShowing")
       ) {
-        let prompt = stack.getElementsByTagNameNS(XUL_NS, "tabmodalprompt")[0];
+        let prompt = stack.getElementsByTagName("tabmodalprompt")[0];
         prompt.querySelector(`.tabmodalprompt-${buttonId}`).click();
         promptShown = true;
       }

testing/marionette/browser.js

@@ -33,8 +33,6 @@ this.EXPORTED_SYMBOLS = ["browser", "Context", "WindowState"];
 /** @namespace */
 this.browser = {};
 
-const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-
 /**
  * Variations of Marionette contexts.
  *
@@ -300,10 +298,7 @@ browser.Context = class {
 
     // The modal is a direct sibling of the browser element.
     // See tabbrowser.xml's getTabModalPromptBox.
-    let modalElements = br.parentNode.getElementsByTagNameNS(
-      XUL_NS,
-      "tabmodalprompt"
-    );
+    let modalElements = br.parentNode.getElementsByTagName("tabmodalprompt");
 
     return br.tabModalPromptBox.getPrompt(modalElements[0]);
   }

toolkit/components/prompts/content/tabprompts.css

@@ -3,18 +3,26 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Tab Modal Prompt boxes */
+
+.tabModalBackground {
+  -moz-box-pack: center;
+  -moz-box-orient: vertical;
+}
+
 .tabModalBackground,
 tabmodalprompt {
   width: 100%;
   height: 100%;
-  -moz-box-pack: center;
-  -moz-box-orient: vertical;
 }
 
-.tabmodalprompt-mainContainer {
-  min-width: 20em;
-  min-height: 12em;
-  -moz-user-focus: normal;
+tabmodalprompt {
+  --tabmodalprompt-padding: 20px;
+}
+
+tabmodalprompt:not([hidden]) {
+  display: grid;
+  grid-template-rows: 1fr [dialog-start] auto [dialog-end] 2fr;
+  justify-items: center;
 }
 
 /*
@@ -25,14 +33,48 @@ tabmodalprompt {
 tabmodalprompt.tab-prompt {
   overflow: visible;
   z-index: 1;
+  grid-template-rows: [dialog-start] auto [dialog-end] 1fr;
 }
 
-tabmodalprompt.tab-prompt .spacer-top {
-  display: none;
+tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
+  margin-top: -5px;
 }
 
-tabmodalprompt.tab-prompt *.tabmodalprompt-mainContainer {
-  margin-top: -5px;
+.tabmodalprompt-mainContainer {
+  min-width: 20em;
+  min-height: 12em;
+  max-width: calc(60% + calc(var(--tabmodalprompt-padding) * 2));
+  -moz-user-focus: normal;
+  grid-row: dialog;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.tabmodalprompt-topContainer {
+  flex-grow: 1;
+  padding: var(--tabmodalprompt-padding);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+}
+
+.tabmodalprompt-topContainer > div:not(.tabmodalprompt-infoContainer):not([hidden]) {
+  display: contents;
+}
+
+.tabmodalprompt-infoContainer {
+  grid-column: span 2;
+
+  display: block;
+  margin-block: auto;
+  text-align: center;
+}
+
+/* When all elements in the first column are hidden, prevent the second column
+   from becoming the first one because it won't have the right fraction */
+.tabmodalprompt-topContainer > div > *:nth-child(2) {
+  grid-column: 2;
 }
 
 .infoTitle {
@@ -47,10 +89,21 @@ tabmodalprompt.tab-prompt *.tabmodalprompt-mainContainer {
   cursor: text !important;
   white-space: pre-wrap;
   unicode-bidi: plaintext;
+  outline: none; /* remove focus outline */
+  overflow: auto;
 }
 
 tabmodalprompt label[value=""] {
-  visibility: collapse;
+  display: none;
+}
+
+.tabmodalprompt-buttonContainer {
+  display: flex;
+  padding: 12px var(--tabmodalprompt-padding) 15px;
+}
+
+.tabmodalprompt-buttonSpacer {
+  flex-grow: 1;
 }
 
 /* Tab-Modal Payment Request widget */

toolkit/components/prompts/content/tabprompts.jsm

@@ -14,7 +14,7 @@ const { AppConstants } = ChromeUtils.import(
 var TabModalPrompt = class {
   constructor(win) {
     this.win = win;
-    let newPrompt = (this.element = win.document.createXULElement(
+    let newPrompt = (this.element = win.document.createElement(
       "tabmodalprompt"
     ));
     newPrompt.setAttribute("role", "dialog");
@@ -25,50 +25,38 @@ var TabModalPrompt = class {
     newPrompt.appendChild(
       win.MozXULElement.parseXULToFragment(
         `
-      <spacer class="spacer-top" flex="1"/>
-        <hbox pack="center">
-          <vbox class="tabmodalprompt-mainContainer">
-            <grid class="tabmodalprompt-topContainer" flex="1">
-              <columns>
-                <column/>
-                <column flex="1"/>
-              </columns>
-
-              <rows class="tabmodalprompt-rows">
-                <vbox class="tabmodalprompt-infoContainer" align="center" pack="center" flex="1">
-                  <description class="tabmodalprompt-infoTitle infoTitle" hidden="true" />
-                  <description class="tabmodalprompt-infoBody infoBody" id="infoBody-${randomIdSuffix}"/>
-                </vbox>
-
-                <row class="tabmodalprompt-loginContainer" hidden="true" align="center">
-                  <label class="tabmodalprompt-loginLabel" value="&editfield0.label;" control="loginTextbox-${randomIdSuffix}"/>
-                  <html:input class="tabmodalprompt-loginTextbox" id="loginTextbox-${randomIdSuffix}"/>
-                </row>
-
-                <row class="tabmodalprompt-password1Container" hidden="true" align="center">
-                  <label class="tabmodalprompt-password1Label" value="&editfield1.label;" control="password1Textbox-${randomIdSuffix}"/>
-                  <html:input class="tabmodalprompt-password1Textbox" type="password" id="password1Textbox-${randomIdSuffix}"/>
-                </row>
-
-                <row class="tabmodalprompt-checkboxContainer" hidden="true">
-                  <spacer/>
-                  <checkbox class="tabmodalprompt-checkbox"/>
-                </row>
-
-                <!-- content goes here -->
-              </rows>
-            </grid>
-            <hbox class="tabmodalprompt-buttonContainer">
-              <button class="tabmodalprompt-button3" hidden="true"/>
-              <spacer class="tabmodalprompt-buttonSpacer" flex="1"/>
-              <button class="tabmodalprompt-button0" label="&okButton.label;"/>
-              <button class="tabmodalprompt-button2" hidden="true"/>
-              <button class="tabmodalprompt-button1" label="&cancelButton.label;"/>
-            </hbox>
-          </vbox>
-      </hbox>
-      <spacer flex="2"/>
-    `,
+        <div class="tabmodalprompt-mainContainer" xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+          <div class="tabmodalprompt-topContainer">
+            <div class="tabmodalprompt-infoContainer">
+              <div class="tabmodalprompt-infoTitle infoTitle" hidden="hidden"/>
+              <div class="tabmodalprompt-infoBody infoBody" id="infoBody-${randomIdSuffix}" tabindex="-1"/>
+            </div>
+
+            <div class="tabmodalprompt-loginContainer" hidden="hidden">
+              <xul:label class="tabmodalprompt-loginLabel" value="&editfield0.label;" control="loginTextbox-${randomIdSuffix}"/>
+              <input class="tabmodalprompt-loginTextbox" id="loginTextbox-${randomIdSuffix}"/>
+            </div>
+
+            <div class="tabmodalprompt-password1Container" hidden="hidden">
+              <xul:label class="tabmodalprompt-password1Label" value="&editfield1.label;" control="password1Textbox-${randomIdSuffix}"/>
+              <input class="tabmodalprompt-password1Textbox" type="password" id="password1Textbox-${randomIdSuffix}"/>
+            </div>
+
+            <div class="tabmodalprompt-checkboxContainer" hidden="hidden">
+              <div/>
+              <xul:checkbox class="tabmodalprompt-checkbox"/>
+            </div>
+
+            <!-- content goes here -->
+          </div>
+          <div class="tabmodalprompt-buttonContainer">
+            <xul:button class="tabmodalprompt-button3" hidden="true"/>
+            <div class="tabmodalprompt-buttonSpacer"/>
+            <xul:button class="tabmodalprompt-button0" label="&okButton.label;"/>
+            <xul:button class="tabmodalprompt-button2" hidden="true"/>
+            <xul:button class="tabmodalprompt-button1" label="&cancelButton.label;"/>
+          </div>
+        </div>`,
         [
           "chrome://global/locale/commonDialog.dtd",
           "chrome://global/locale/dialogOverlay.dtd",
@@ -94,7 +82,7 @@ var TabModalPrompt = class {
       infoBody: newPrompt.querySelector(".tabmodalprompt-infoBody"),
       infoTitle: newPrompt.querySelector(".tabmodalprompt-infoTitle"),
       infoIcon: null,
-      rows: newPrompt.querySelector(".tabmodalprompt-rows"),
+      rows: newPrompt.querySelector(".tabmodalprompt-topContainer"),
       checkbox: newPrompt.querySelector(".tabmodalprompt-checkbox"),
       checkboxContainer: newPrompt.querySelector(
         ".tabmodalprompt-checkboxContainer"
@@ -250,8 +238,6 @@ var TabModalPrompt = class {
 
     // TODO: should unhide buttonSpacer on Windows when there are 4 buttons.
     //       Better yet, just drop support for 4-button dialogs. (bug 609510)
-
-    this.onResize();
   }
 
   shutdownPrompt() {
@@ -280,58 +266,13 @@ var TabModalPrompt = class {
 
   handleEvent(aEvent) {
     switch (aEvent.type) {
-      case "resize":
-        this.onResize();
-        break;
       case "unload":
       case "TabClose":
         this.abortPrompt();
         break;
     }
   }
 
-  onResize() {
-    let availWidth = this.element.clientWidth;
-    let availHeight = this.element.clientHeight;
-    if (availWidth == this.availWidth && availHeight == this.availHeight) {
-      return;
-    }
-    this.availWidth = availWidth;
-    this.availHeight = availHeight;
-
-    let main = this.ui.mainContainer;
-    let info = this.ui.infoContainer;
-    let body = this.ui.infoBody;
-
-    // cap prompt dimensions at 60% width and 60% height of content area
-    if (!this.minWidth) {
-      this.minWidth = parseInt(this.win.getComputedStyle(main).minWidth);
-    }
-    if (!this.minHeight) {
-      this.minHeight = parseInt(this.win.getComputedStyle(main).minHeight);
-    }
-    let maxWidth =
-      Math.max(Math.floor(availWidth * 0.6), this.minWidth) +
-      info.clientWidth -
-      main.clientWidth;
-    let maxHeight =
-      Math.max(Math.floor(availHeight * 0.6), this.minHeight) +
-      info.clientHeight -
-      main.clientHeight;
-    body.style.maxWidth = maxWidth + "px";
-    info.style.overflow = info.style.width = info.style.height = "";
-
-    // when prompt text is too long, use scrollbars
-    if (info.clientWidth > maxWidth) {
-      info.style.overflow = "auto";
-      info.style.width = maxWidth + "px";
-    }
-    if (info.clientHeight > maxHeight) {
-      info.style.overflow = "auto";
-      info.style.height = maxHeight + "px";
-    }
-  }
-
   onButtonClick(buttonNum) {
     // We want to do all the work her asynchronously off a Gecko
     // runnable, because of situations like the one described in

toolkit/components/prompts/test/chromeScript.js

@@ -53,7 +53,7 @@ function checkTabModal(prompt, browser) {
     "Check clicks on the content area don't go to the browser"
   );
   is(
-    doc.elementFromPoint(x - 10, y + 50).parentNode,
+    doc.elementFromPoint(x - 10, y + 50),
     prompt.element,
     "Check clicks on the content area go to the prompt dialog background"
   );
@@ -131,7 +131,7 @@ function getSelectState(ui) {
 function getPromptState(ui) {
   let state = {};
   state.msg = ui.infoBody.textContent;
-  state.titleHidden = ui.infoTitle.getAttribute("hidden") == "true";
+  state.titleHidden = ui.infoTitle.hidden;
   state.textHidden = ui.loginContainer.hidden;
   state.passHidden = ui.password1Container.hidden;
   state.checkHidden = ui.checkboxContainer.hidden;

toolkit/components/startup/tests/browser/head.js

@@ -3,8 +3,6 @@
 
 "use strict";
 
-const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-
 function whenBrowserLoaded(browser, callback) {
   return BrowserTestUtils.browserLoaded(browser).then(callback);
 }

toolkit/themes/osx/global/tabprompts.css

@@ -22,12 +22,7 @@ tabmodalprompt {
   border: 1px solid hsla(0,0%,0%,.5);
 }
 
-.tabmodalprompt-topContainer {
-  padding: 20px;
-}
-
 .tabmodalprompt-buttonContainer {
-  padding: 12px 20px 15px;
   background-color: hsla(0,0%,0%,.05);
   border-top: 1px solid hsla(0,0%,0%,.05);
 }

toolkit/themes/windows/global/tabprompts.css

@@ -20,12 +20,7 @@ tabmodalprompt {
   border: 1px solid threeDDarkShadow;
 }
 
-.tabmodalprompt-topContainer {
-  padding: 20px;
-}
-
 .tabmodalprompt-buttonContainer {
-  padding: 12px 20px 15px;
   background-color: hsla(0,0%,0%,.05);
   border-top: 1px solid hsla(0,0%,0%,.05);
 }