Bug 1518786 - Wait until Fluent strings have been applied before sizing the window to content. r=Gijs, a=RyanVM
authorJared Wein <jwein@mozilla.com>
Thu, 17 Jan 2019 11:46:54 -0500
changeset 509537 f0f24bd868b57c3ea1fad5e691b5196f590ec7f5
parent 509536 5e7a2d9c3127712f4d5191d9c800a94d123f2fab
child 509538 8f904ee0cae1a2252b79534dee93d814d297e231
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, RyanVM
bugs1518786
milestone65.0
Bug 1518786 - Wait until Fluent strings have been applied before sizing the window to content. r=Gijs, a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D16866
security/manager/pki/resources/content/exceptionDialog.js
security/manager/pki/resources/content/exceptionDialog.xul
--- a/security/manager/pki/resources/content/exceptionDialog.js
+++ b/security/manager/pki/resources/content/exceptionDialog.js
@@ -17,49 +17,68 @@ ChromeUtils.import("resource://gre/modul
 
 function initExceptionDialog() {
   gNeedReset = false;
   gDialog = document.documentElement;
   gSecHistogram = Services.telemetry.getHistogramById("SECURITY_UI");
   gNsISecTel = Ci.nsISecurityUITelemetry;
   let warningText = document.getElementById("warningText");
   document.l10n.setAttributes(warningText, "add-exception-branded-warning");
-  gDialog.getButton("extra1").disabled = true;
+  let confirmButton = gDialog.getButton("extra1");
+  let l10nUpdatedElements = [
+    confirmButton,
+    warningText,
+  ];
+  confirmButton.disabled = true;
 
   var args = window.arguments;
   if (args && args[0]) {
     if (args[0].location) {
       // We were pre-seeded with a location.
       document.getElementById("locationTextBox").value = args[0].location;
       document.getElementById("checkCertButton").disabled = false;
 
       if (args[0].securityInfo) {
         gSecInfo = args[0].securityInfo;
         gCert = gSecInfo.serverCert;
         gBroken = true;
-        updateCertStatus();
+        l10nUpdatedElements = l10nUpdatedElements.concat(updateCertStatus());
       } else if (args[0].prefetchCert) {
         // We can optionally pre-fetch the certificate too.  Don't do this
         // synchronously, since it would prevent the window from appearing
         // until the fetch is completed, which could be multiple seconds.
         // Instead, let's use a timer to spawn the actual fetch, but update
         // the dialog to "checking..." state right away, so that the UI
         // is appropriately responsive.  Bug 453855
         document.getElementById("checkCertButton").disabled = true;
         gChecking = true;
-        updateCertStatus();
+        l10nUpdatedElements = l10nUpdatedElements.concat(updateCertStatus());
 
         window.setTimeout(checkCert, 0);
       }
     }
 
     // Set out parameter to false by default
     args[0].exceptionAdded = false;
   }
-  window.sizeToContent();
+
+  for (let id of [
+    "warningSupplemental",
+    "certLocationLabel",
+    "checkCertButton",
+    "statusDescription",
+    "statusLongDescription",
+    "viewCertButton",
+    "permanent",
+  ]) {
+    let element = document.getElementById(id);
+    l10nUpdatedElements.push(element);
+  }
+
+  document.l10n.translateElements(l10nUpdatedElements).then(() => window.sizeToContent());
 }
 
 /**
  * Helper function for checkCert. Set as the onerror/onload callbacks for an
  * XMLHttpRequest. Sets gSecInfo, gCert, gBroken, and gChecking according to
  * the load information from the request. Probably should not be used directly.
  *
  * @param {XMLHttpRequest} req
@@ -70,41 +89,45 @@ function initExceptionDialog() {
 function grabCert(req, evt) {
   if (req.channel && req.channel.securityInfo) {
     gSecInfo = req.channel.securityInfo
                   .QueryInterface(Ci.nsITransportSecurityInfo);
     gCert = gSecInfo ? gSecInfo.serverCert : null;
   }
   gBroken = evt.type == "error";
   gChecking = false;
-  updateCertStatus();
+  document.l10n.translateElements(updateCertStatus()).then(() => window.sizeToContent());
 }
 
 /**
  * Attempt to download the certificate for the location specified, and populate
  * the Certificate Status section with the result.
  */
-function checkCert() {
+async function checkCert() {
   gCert = null;
   gSecInfo = null;
   gChecking = true;
   gBroken = false;
+  await document.l10n.translateElements(updateCertStatus());
+  window.sizeToContent();
+
   updateCertStatus();
 
   let uri = getURI();
 
   if (uri) {
     let req = new XMLHttpRequest();
     req.open("GET", uri.prePath);
     req.onerror = grabCert.bind(this, req);
     req.onload = grabCert.bind(this, req);
     req.send(null);
   } else {
     gChecking = false;
-    updateCertStatus();
+    await document.l10n.translateElements(updateCertStatus());
+    window.sizeToContent();
   }
 }
 
 /**
  * Build and return a URI, based on the information supplied in the
  * Certificate Location fields
  *
  * @returns {nsIURI}
@@ -163,16 +186,17 @@ function handleTextChange() {
 
 function updateCertStatus() {
   var shortDesc, longDesc;
   var shortDesc2, longDesc2;
   var shortDesc3, longDesc3;
   var use2 = false;
   var use3 = false;
   let bucketId = gNsISecTel.WARNING_BAD_CERT_TOP_ADD_EXCEPTION_BASE;
+  let l10nUpdatedElements = [];
   if (gCert) {
     if (gBroken) {
       var mms = "add-exception-domain-mismatch-short";
       var mml = "add-exception-domain-mismatch-long";
       var exs = "add-exception-expired-short";
       var exl = "add-exception-expired-long";
       var uts = "add-exception-unverified-or-bad-signature-short";
       var utl = "add-exception-unverified-or-bad-signature-long";
@@ -222,16 +246,17 @@ function updateCertStatus() {
       // private browsing mode was disabled.
       var inPrivateBrowsing = inPrivateBrowsingMode();
       var pe = document.getElementById("permanent");
       pe.disabled = inPrivateBrowsing;
       pe.checked = !inPrivateBrowsing;
 
       let headerDescription = document.getElementById("headerDescription");
       document.l10n.setAttributes(headerDescription, "add-exception-invalid-header");
+      l10nUpdatedElements.push(headerDescription);
     } else {
       shortDesc = "add-exception-valid-short";
       longDesc  = "add-exception-valid-long";
       gDialog.getButton("extra1").disabled = true;
       document.getElementById("permanent").disabled = true;
     }
 
     // We're done checking the certificate, so allow the user to check it again.
@@ -258,33 +283,39 @@ function updateCertStatus() {
     document.getElementById("viewCertButton").disabled = true;
     gDialog.getButton("extra1").disabled = true;
     document.getElementById("permanent").disabled = true;
   }
   let statusDescription = document.getElementById("statusDescription");
   let statusLongDescription = document.getElementById("statusLongDescription");
   document.l10n.setAttributes(statusDescription, shortDesc);
   document.l10n.setAttributes(statusLongDescription, longDesc);
+  l10nUpdatedElements.push(statusDescription);
+  l10nUpdatedElements.push(statusLongDescription);
 
   if (use2) {
     let status2Description = document.getElementById("status2Description");
     let status2LongDescription = document.getElementById("status2LongDescription");
     document.l10n.setAttributes(status2Description, shortDesc2);
     document.l10n.setAttributes(status2LongDescription, longDesc2);
+    l10nUpdatedElements.push(status2Description);
+    l10nUpdatedElements.push(status2LongDescription);
   }
 
   if (use3) {
     let status3Description = document.getElementById("status3Description");
     let status3LongDescription = document.getElementById("status3LongDescription");
     document.l10n.setAttributes(status3Description, shortDesc3);
     document.l10n.setAttributes(status3LongDescription, longDesc3);
+    l10nUpdatedElements.push(status3Description);
+    l10nUpdatedElements.push(status3LongDescription);
   }
 
-  window.sizeToContent();
   gNeedReset = true;
+  return l10nUpdatedElements;
 }
 
 /**
  * Handle user request to display certificate details
  */
 function viewCertButtonClick() {
   gSecHistogram.add(gNsISecTel.WARNING_BAD_CERT_TOP_CLICK_VIEW_CERT);
   if (gCert) {
--- a/security/manager/pki/resources/content/exceptionDialog.xul
+++ b/security/manager/pki/resources/content/exceptionDialog.xul
@@ -5,16 +5,17 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
 <!DOCTYPE dialog>
 
 <dialog id="exceptiondialog"
         windowtype="mozilla:exceptiondialog"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        style="max-width: 40em"
         data-l10n-id="exception-mgr"
         buttonidextra1="exception-mgr-extra-button"
         buttons="cancel,extra1,extra2"
         onload="initExceptionDialog();"
         ondialogextra1="addException();"
         ondialogextra2="checkCert();"
         defaultButton="extra2">
 
@@ -36,23 +37,23 @@
       <spacer flex="1"/>
     </vbox>
     <vbox flex="1">
       <!-- Note that because of the styling, there must be no whitespace within
       the description tags -->
       <description id="warningText"
                    style="white-space: pre-wrap"/>
       <description id="warningSupplemental"
-                   style="font-weight: bold; white-space: pre-wrap;"
+                   style="font-weight: bold; white-space: pre-wrap; width: calc(40em - 18px)"
                    data-l10n-id="exception-mgr-supplemental-warning"></description>
     </vbox>
   </hbox>
 
   <hbox align="center">
-    <label control="locationTextBox" data-l10n-id="exception-mgr-cert-location-url"/>
+    <label id="certLocationLabel" control="locationTextBox" data-l10n-id="exception-mgr-cert-location-url"/>
     <textbox id="locationTextBox" flex="1" oninput="handleTextChange();"
              value="https://" class="uri-element"/>
     <button id="checkCertButton" disabled="true" dlgtype="extra2"
             data-l10n-id="exception-mgr-cert-location-download"/>
   </hbox>
 
   <hbox align="center">
     <description id="headerDescription" style="white-space: pre-wrap;"