Backed out changeset 5ed5e8a6bbfb (bug 1583696) for modal prompt related failures CLOSED TREE

browser/base/content/browser.js

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

testing/marionette/browser.js

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

toolkit/components/prompts/content/tabprompts.css

@@ -3,28 +3,18 @@
  * 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 {
-  --tabmodalprompt-padding: 20px;
-  overflow: hidden;
-  text-shadow: none; /* remove lightweight theme text-shadow */
-}
-
-tabmodalprompt:not([hidden]) {
-  display: grid;
-  grid-template-rows: 1fr [dialog-start] auto [dialog-end] 2fr;
-  justify-items: center;
+.tabmodalprompt-mainContainer {
+  min-width: 20em;
+  min-height: 12em;
+  -moz-user-focus: normal;
 }
 
 /*
@@ -35,57 +25,16 @@ tabmodalprompt:not([hidden]) {
 tabmodalprompt.tab-prompt {
   overflow: visible;
   z-index: 1;
-  grid-template-rows: [dialog-start] auto [dialog-end] 1fr;
 }
 
-tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
+tabmodalprompt.tab-prompt .spacer-top {
+  display: none;
+}
+
+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;
-  max-width: 100%;
-  min-height: 0;
-  max-height: 60vh;
-  box-sizing: border-box;
-}
-
-.tabmodalprompt-topContainer > div:not(.tabmodalprompt-infoContainer):not([hidden]) {
-  display: contents;
-}
-
-.tabmodalprompt-infoContainer {
-  grid-column: span 2;
-
-  display: block;
-  margin-block: auto;
-  max-width: 100%;
-  height: 100%;
-  min-height: 3em;
-  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 {
   margin-bottom: 1em !important;
   font-weight: bold;
@@ -98,22 +47,10 @@ tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
   cursor: text !important;
   white-space: pre-wrap;
   unicode-bidi: plaintext;
-  overflow: auto;
-  max-width: 100%;
-  max-height: 100%;
 }
 
 tabmodalprompt label[value=""] {
-  display: none;
-}
-
-.tabmodalprompt-buttonContainer {
-  display: flex;
-  padding: 12px var(--tabmodalprompt-padding) 15px;
-}
-
-.tabmodalprompt-buttonSpacer {
-  flex-grow: 1;
+  visibility: collapse;
 }
 
 /* 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.createElement(
+    let newPrompt = (this.element = win.document.createXULElement(
       "tabmodalprompt"
     ));
     newPrompt.setAttribute("role", "dialog");
@@ -25,38 +25,50 @@ var TabModalPrompt = class {
     newPrompt.appendChild(
       win.MozXULElement.parseXULToFragment(
         `
-        <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}"/>
-            </div>
+      <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>
 
-            <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>
+              <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>
 
-            <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>
+                <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>
 
-            <div class="tabmodalprompt-checkboxContainer" hidden="hidden">
-              <div/>
-              <xul:checkbox class="tabmodalprompt-checkbox"/>
-            </div>
+                <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>
 
-            <!-- 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>`,
+                <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"/>
+    `,
         [
           "chrome://global/locale/commonDialog.dtd",
           "chrome://global/locale/dialogOverlay.dtd",
@@ -82,7 +94,7 @@ var TabModalPrompt = class {
       infoBody: newPrompt.querySelector(".tabmodalprompt-infoBody"),
       infoTitle: newPrompt.querySelector(".tabmodalprompt-infoTitle"),
       infoIcon: null,
-      rows: newPrompt.querySelector(".tabmodalprompt-topContainer"),
+      rows: newPrompt.querySelector(".tabmodalprompt-rows"),
       checkbox: newPrompt.querySelector(".tabmodalprompt-checkbox"),
       checkboxContainer: newPrompt.querySelector(
         ".tabmodalprompt-checkboxContainer"
@@ -241,6 +253,8 @@ 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() {
@@ -269,6 +283,9 @@ var TabModalPrompt = class {
 
   handleEvent(aEvent) {
     switch (aEvent.type) {
+      case "resize":
+        this.onResize();
+        break;
       case "unload":
       case "TabClose":
         this.abortPrompt();
@@ -276,6 +293,48 @@ var TabModalPrompt = class {
     }
   }
 
+  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

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

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

@@ -3,6 +3,8 @@
 
 "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/content/xul.css

@@ -586,6 +586,12 @@ findbar {
   overflow-x: hidden;
 }
 
+/*********** tabmodalprompt ************/
+tabmodalprompt {
+  overflow: hidden;
+  text-shadow: none;
+}
+
 /* Some elements that in HTML blocks should be inline-level by default */
 label, button, image {
   display: -moz-inline-box;

toolkit/themes/osx/global/tabprompts.css

@@ -22,7 +22,12 @@ 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,7 +20,12 @@ 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);
 }