Bug 1455151 - Support subdialog sizing of HTML documents from a stylesheet and use it for autofill edit dialogs. r=jaws draft
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 18 Apr 2018 16:12:15 -0700
changeset 784752 04424be53d5ed1dbc222194c5a39c77a65f3b37b
parent 784644 3b8a270f7d6664c700fc0d7b679e6cb1beb142fb
push id107013
push usermozilla@noorenberghe.ca
push dateWed, 18 Apr 2018 23:12:55 +0000
reviewersjaws
bugs1455151
milestone61.0a1
Bug 1455151 - Support subdialog sizing of HTML documents from a stylesheet and use it for autofill edit dialogs. r=jaws MozReview-Commit-ID: GeHPhFTnCIz
browser/components/preferences/in-content/subdialogs.js
browser/extensions/formautofill/content/editAddress.xhtml
browser/extensions/formautofill/content/editCreditCard.xhtml
browser/extensions/formautofill/skin/shared/editAddress.css
browser/extensions/formautofill/skin/shared/editCreditCard.css
--- a/browser/components/preferences/in-content/subdialogs.js
+++ b/browser/components/preferences/in-content/subdialogs.js
@@ -277,17 +277,26 @@ SubDialog.prototype = {
     let boxVerticalBorder = 2 * parseFloat(getComputedStyle(this._box).borderTopWidth);
 
     // The difference between the frame and box shouldn't change, either:
     let boxRect = this._box.getBoundingClientRect();
     let frameRect = this._frame.getBoundingClientRect();
     let frameSizeDifference = (frameRect.top - boxRect.top) + (boxRect.bottom - frameRect.bottom);
 
     // Then determine and set a bunch of width stuff:
-    let frameMinWidth = docEl.style.width || docEl.scrollWidth + "px";
+    let frameMinWidth = docEl.style.width;
+    if (!frameMinWidth) {
+      if (docEl.ownerDocument.body) {
+        // HTML documents have a body but XUL documents don't
+        frameMinWidth = docEl.ownerDocument.body.scrollWidth;
+      } else {
+        frameMinWidth = docEl.scrollWidth;
+      }
+      frameMinWidth += "px";
+    }
     let frameWidth = docEl.getAttribute("width") ? docEl.getAttribute("width") + "px" :
                      frameMinWidth;
     this._frame.style.width = frameWidth;
     this._box.style.minWidth = "calc(" +
                                (boxHorizontalBorder + boxHorizontalPadding) +
                                "px + " + frameMinWidth + ")";
 
     // Now do the same but for the height. We need to do this afterwards because otherwise
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 <!DOCTYPE html [
   <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
   %globalDTD;
 ]>
-<html xmlns="http://www.w3.org/1999/xhtml" width="620">
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title data-localization="addNewAddressTitle"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editDialog.css"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editAddress.css"/>
   <link rel="stylesheet" href="chrome://formautofill/skin/editDialog.css"/>
   <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
--- a/browser/extensions/formautofill/content/editCreditCard.xhtml
+++ b/browser/extensions/formautofill/content/editCreditCard.xhtml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 <!DOCTYPE html [
   <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
   %globalDTD;
 ]>
-<html xmlns="http://www.w3.org/1999/xhtml" width="500" style="width: 500px">
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title data-localization="addNewCreditCardTitle"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editDialog.css"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editCreditCard.css"/>
   <link rel="stylesheet" href="chrome://formautofill/skin/editDialog.css"/>
   <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -1,12 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
+html {
+  width: 620px;
+}
 
 label > span {
   flex: 0 0 9.5em;
 }
 
 input,
 select {
   flex: 1 0 auto;
--- a/browser/extensions/formautofill/skin/shared/editCreditCard.css
+++ b/browser/extensions/formautofill/skin/shared/editCreditCard.css
@@ -1,12 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
+html {
+  width: 500px;
+}
+
 form {
   justify-content: center;
 }
 
 form > label,
 form > div {
   flex: 1 0 100%;
   align-self: center;