Bug 1428869 - Use html:progress in front-end code. r=bgrins,Gijs
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Thu, 18 Oct 2018 15:41:21 +0100
changeset 441967 6d6b5c10bba56bc286ae66cf9d72948a6a03d200
parent 441966 87a982cbe3319558d1c54d1b448316bd300411d5
child 441968 edaa4f0b9da959b7a0158e35fbb972eb24cbe708
push id34881
push usercsabou@mozilla.com
push dateThu, 18 Oct 2018 21:55:32 +0000
treeherdermozilla-central@c0c288dc283e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, Gijs
bugs1428869
milestone64.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 1428869 - Use html:progress in front-end code. r=bgrins,Gijs Differential Revision: https://phabricator.services.mozilla.com/D9009
browser/base/content/popup-notifications.inc
browser/base/content/urlbarBindings.xml
browser/themes/shared/browser.inc.css
devtools/client/webide/content/webide.js
devtools/client/webide/content/webide.xul
security/manager/pki/resources/content/changepassword.xul
security/manager/pki/resources/content/setp12password.xul
testing/firefox-ui/tests/puppeteer/test_update_wizard.py
toolkit/content/resetProfileProgress.xul
toolkit/mozapps/preferences/changemp.xul
toolkit/mozapps/update/content/updates.css
toolkit/mozapps/update/content/updates.js
toolkit/mozapps/update/content/updates.xul
--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -58,17 +58,17 @@
         <textbox id="password-notification-password" type="password" show-content=""/>
         <checkbox id="password-notification-visibilityToggle" hidden="true"/>
       </popupnotificationcontent>
     </popupnotification>
 
 
     <popupnotification id="addon-progress-notification" hidden="true">
       <popupnotificationcontent orient="vertical">
-        <progressmeter id="addon-progress-notification-progressmeter"/>
+        <html:progress id="addon-progress-notification-progressmeter" max="100"/>
         <label id="addon-progress-notification-progresstext" crop="end"/>
       </popupnotificationcontent>
     </popupnotification>
 
     <popupnotification id="addon-install-confirmation-notification" hidden="true">
       <popupnotificationcontent id="addon-install-confirmation-content" orient="vertical"/>
     </popupnotification>
 
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -2756,19 +2756,18 @@ file, You can obtain one at http://mozil
         ]]></body>
       </method>
 
       <method name="setProgress">
         <parameter name="aProgress"/>
         <parameter name="aMaxProgress"/>
         <body><![CDATA[
           if (aMaxProgress == -1) {
-            this.progressmeter.setAttribute("mode", "undetermined");
+            this.progressmeter.removeAttribute("value");
           } else {
-            this.progressmeter.setAttribute("mode", "determined");
             this.progressmeter.setAttribute("value", (aProgress * 100) / aMaxProgress);
           }
 
           let now = Date.now();
 
           if (!this.notification.lastUpdate) {
             this.notification.lastUpdate = now;
             this.notification.lastProgress = aProgress;
@@ -2828,17 +2827,17 @@ file, You can obtain one at http://mozil
             if (maxProgress >= 0)
               maxProgress += aInstall.maxProgress;
             if (aInstall.state < AddonManager.STATE_DOWNLOADED)
               downloadingCount++;
           });
 
           if (downloadingCount == 0) {
             this.destroy();
-            this.progressmeter.setAttribute("mode", "undetermined");
+            this.progressmeter.removeAttribute("value");
             let status = gNavigatorBundle.getString("addonDownloadVerifying");
             this.progresstext.setAttribute("value", status);
             this.progresstext.setAttribute("tooltiptext", status);
           } else {
             this.setProgress(progress, maxProgress);
           }
         ]]></body>
       </method>
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -167,16 +167,20 @@
   margin-left: 0;
   margin-right: 0;
 }
 
 #widget-overflow .webextension-popup-browser {
   background: #fff;
 }
 
+#addon-progress-notification-progressmeter {
+  margin: 2px 4px;
+}
+
 /* Contextual Feature Recommendation popup-notification */
 
 :root {
   --cfr-notification-header-image: url(resource://activity-stream/data/content/assets/glyph-help-24.svg);
   --cfr-notification-footer-star: url(resource://activity-stream/data/content/assets/glyph-star-17.svg);
 }
 
 #cfr-notification-header {
--- a/devtools/client/webide/content/webide.js
+++ b/devtools/client/webide/content/webide.js
@@ -227,18 +227,16 @@ var UI = {
 
   cancelBusyTimeout: function() {
     clearTimeout(this._busyTimeout);
   },
 
   busyWithProgressUntil: function(promise, operationDescription) {
     const busy = this.busyUntil(promise, operationDescription);
     const win = document.querySelector("window");
-    const progress = document.querySelector("#action-busy-determined");
-    progress.mode = "undetermined";
     win.classList.add("busy-determined");
     win.classList.remove("busy-undetermined");
     return busy;
   },
 
   busyUntil: function(promise, operationDescription) {
     // Freeze the UI until the promise is resolved. A timeout will unfreeze the
     // UI, just in case the promise never gets resolved.
--- a/devtools/client/webide/content/webide.xul
+++ b/devtools/client/webide/content/webide.xul
@@ -119,17 +119,17 @@
 
     <vbox flex="1">
       <hbox id="action-buttons-container" class="busy">
         <toolbarbutton id="action-button-play"  class="action-button" command="cmd_play" tooltiptext="&projectMenu_play_label;"/>
         <toolbarbutton id="action-button-stop"  class="action-button" command="cmd_stop" tooltiptext="&projectMenu_stop_label;"/>
         <toolbarbutton id="action-button-debug" class="action-button" command="cmd_toggleToolbox" tooltiptext="&projectMenu_debug_label;"/>
         <hbox id="action-busy" align="center">
           <html:img id="action-busy-undetermined" src="chrome://webide/skin/throbber.svg"/>
-          <progressmeter id="action-busy-determined"/>
+          <html:progress id="action-busy-determined"/>
         </hbox>
       </hbox>
 
       <hbox id="panel-buttons-container">
         <spacer flex="1"/>
         <toolbarbutton id="runtime-panel-button" class="panel-button">
           <image class="panel-button-image"/>
           <label class="panel-button-label" value="&runtimeButton_label;"/>
--- a/security/manager/pki/resources/content/changepassword.xul
+++ b/security/manager/pki/resources/content/changepassword.xul
@@ -3,17 +3,18 @@
    - 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/. -->
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://pippki/locale/pippki.dtd">
 
 <dialog id="set_password" title="&setPassword.title;"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"      
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
   buttons="accept,cancel"
   ondialogaccept="return setPassword();"
   onload="onLoad();">
 
 <stringbundle id="pippki_bundle" src="chrome://pippki/locale/pippki.properties"/>
 
 <script type="application/javascript"
         src="chrome://pippki/content/changepassword.js"/>
@@ -50,12 +51,14 @@
    </row>
    <row>
      <label value="&setPassword.reenterPassword.label;"/> 
      <textbox id="pw2" type="password" oninput="checkPasswords();"/>  
    </row>
  </rows>
 </grid>
 
-<label control="pwmeter" value="&setPassword.meter.label;"/>
-<progressmeter id="pwmeter" mode="determined" value="0"/>
+<vbox style="margin: 6px;">
+  <html:label for="pwmeter" style="display: -moz-box;">&setPassword.meter.label;</html:label>
+  <html:progress id="pwmeter" value="0" max="100"/>
+</vbox>
 
 </dialog>
--- a/security/manager/pki/resources/content/setp12password.xul
+++ b/security/manager/pki/resources/content/setp12password.xul
@@ -5,16 +5,17 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://pippki/locale/pippki.dtd">
 
 <dialog id="setp12password"
         title="&pkcs12.setpassword.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         style="width: 48em;"
         buttons="accept,cancel"
         ondialogaccept="return onDialogAccept();"
         ondialogcancel="return onDialogCancel();"
         onload="onLoad();">
 
   <script type="application/javascript"
           src="chrome://pippki/content/setp12password.js"/>
@@ -32,20 +33,14 @@
         <label value="&pkcs12.setpassword.label2;"/>
         <textbox id="pw2" type="password" oninput="onPasswordInput(false);"/>
       </row>
     </rows>
   </grid>
   <separator/>
   <description>&pkcs12.setpassword.reminder;</description>
   <separator/>
-  <label value="&setPassword.meter.label;"/>
-  <grid style="margin: 4px;">
-    <rows> <row/> </rows>
-    <columns>
-      <column style="margin: 5px;">
-        <progressmeter flex="1" id="pwmeter" mode="determined" value="0"
-                       orient="horizontal"
-                       style="width: 20em; foreground-color: red"/>
-      </column>
-    </columns>
-  </grid>
+
+  <vbox style="margin: 6px;">
+    <html:label for="pwmeter" style="display: -moz-box;">&setPassword.meter.label;</html:label>
+    <html:progress id="pwmeter" value="0" max="100"/>
+  </vbox>
 </dialog>
--- a/testing/firefox-ui/tests/puppeteer/test_update_wizard.py
+++ b/testing/firefox-ui/tests/puppeteer/test_update_wizard.py
@@ -51,17 +51,17 @@ class TestUpdateWizard(PuppeteerMixin, M
                   'manual_update', 'no_updates_found', 'updates_found_basic',
                   )
         for panel in panels:
             self.assertEqual(getattr(self.wizard, panel).element.get_property('localName'),
                              'wizardpage')
 
         # elements of the checking panel
         self.assertEqual(self.wizard.checking.progress.get_property('localName'),
-                         'progressmeter')
+                         'progress')
 
         # elements of the downloading panel
         self.assertEqual(self.wizard.downloading.progress.get_property('localName'),
-                         'progressmeter')
+                         'progress')
 
         # check wizard attributes
         self.assertIsInstance(self.wizard.selected_index, int)
         self.assertIsInstance(self.wizard.selected_panel, Panel)
--- a/toolkit/content/resetProfileProgress.xul
+++ b/toolkit/content/resetProfileProgress.xul
@@ -11,15 +11,16 @@
 %resetProfileDTD;
 ]>
 
 <?xml-stylesheet href="chrome://global/content/resetProfile.css"?>
 <?xml-stylesheet href="chrome://global/skin/"?>
 
 <window id="resetProfileProgressDialog"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         title="&refreshProfile.dialog.title;"
         style="min-width: 300px;">
   <vbox>
     <description>&refreshProfile.cleaning.description;</description>
-    <progressmeter mode="undetermined"/>
+    <html:progress/>
   </vbox>
 </window>
--- a/toolkit/mozapps/preferences/changemp.xul
+++ b/toolkit/mozapps/preferences/changemp.xul
@@ -10,16 +10,17 @@
 <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
 <!ENTITY % changempDTD SYSTEM "chrome://mozapps/locale/preferences/changemp.dtd" >
 %brandDTD;
 %changempDTD;
 ]>
 
 <dialog id="changemp" title="&setPassword.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         style="width: 40em;" 
         ondialogaccept="setPassword();"
         onload="init()">
 
   <script type="application/javascript" src="chrome://mozapps/content/preferences/changemp.js"/>
 
   <stringbundle id="bundlePreferences" src="chrome://mozapps/locale/preferences/preferences.properties"/>
 
@@ -54,14 +55,14 @@
           <textbox id="pw2" type="password" oninput="checkPasswords();"/>
         </row>
       </rows>
     </grid>
   </groupbox>
 
   <groupbox>
     <caption label="&setPassword.meter.label;"/>
-    <progressmeter id="pwmeter" mode="determined" value="0"/>
+    <html:progress id="pwmeter" value="0" max="100"/>
   </groupbox>
 
   <description control="pw2" class="header">&masterPasswordWarning.label;</description>
 
 </dialog>
--- a/toolkit/mozapps/update/content/updates.css
+++ b/toolkit/mozapps/update/content/updates.css
@@ -1,14 +1,8 @@
-/* Stop animations on pages that aren't on the current page (bug 341749). */
-#updates:not([currentpageid="checking"]) #checkingProgress,
-#updates:not([currentpageid="downloading"]) #downloadProgress {
-  display: none;
-}
-
 /* Hide the wizard's header so the size of the billboard can size the window
    on creation. A custom header will be used in its place when a header is
    needed. */
 .wizard-header {
   display: none;
 }
 
 /* Display the custom header */
@@ -20,14 +14,18 @@
    size of the billboard's remotecontent to size the window since it does not
    have an updateheader on the billboard page. */
 updateheader {
   -moz-binding: url("chrome://mozapps/content/update/updates.xml#updateheader");
   display: -moz-box;
   -moz-box-orient: horizontal;
 }
 
+#downloadProgress {
+  -moz-box-flex: 1;
+}
+
 /* Update History Window */
 richlistitem.update {
   -moz-binding: url("chrome://mozapps/content/update/updates.xml#update");
   display: -moz-box;
   -moz-box-orient: vertical;
 }
--- a/toolkit/mozapps/update/content/updates.js
+++ b/toolkit/mozapps/update/content/updates.js
@@ -811,42 +811,41 @@ var gDownloadingPage = {
   /**
    * Adjust UI to suit a certain state of paused-ness
    * @param   paused
    *          Whether or not the download is paused
    */
   _setUIState(paused) {
     var u = gUpdates.update;
     if (paused) {
-      if (this._downloadProgress.mode != "normal")
-        this._downloadProgress.mode = "normal";
+      if (!this._downloadProgress.hasAttribute("value"))
+        this._downloadProgress.setAttribute("value", "0");
       this._pauseButton.setAttribute("tooltiptext",
                                      gUpdates.getAUSString("pauseButtonResume"));
       this._pauseButton.setAttribute("paused", "true");
       var p = u.selectedPatch.QueryInterface(Ci.nsIPropertyBag);
       var status = p.getProperty("status");
       if (status) {
         let pausedStatus = gUpdates.getAUSString("downloadPausedStatus", [status]);
         this._setStatus(pausedStatus);
       }
     } else {
-      if (this._downloadProgress.mode != "undetermined")
-        this._downloadProgress.mode = "undetermined";
+      this._downloadProgress.removeAttribute("value");
       this._pauseButton.setAttribute("paused", "false");
       this._pauseButton.setAttribute("tooltiptext",
                                      gUpdates.getAUSString("pauseButtonPause"));
       this._setStatus(this._label_downloadStatus);
     }
   },
 
   /**
    * Wait for an update being staged in the background.
    */
   _setUpdateApplying() {
-    this._downloadProgress.mode = "undetermined";
+    this._downloadProgress.removeAttribute("value");
     this._pauseButton.hidden = true;
     let applyingStatus = gUpdates.getAUSString("applyingUpdate");
     this._setStatus(applyingStatus);
 
     Services.obs.addObserver(this, "update-staged");
     this._updateApplyingObserver = true;
   },
 
@@ -950,18 +949,17 @@ var gDownloadingPage = {
    *          Additional data
    */
   onStartRequest(request, context) {
     // This !paused test is necessary because onStartRequest may fire after
     // the download was paused (for those speedy clickers...)
     if (this._paused)
       return;
 
-    if (this._downloadProgress.mode != "undetermined")
-      this._downloadProgress.mode = "undetermined";
+    this._downloadProgress.removeAttribute("value");
     this._setStatus(this._label_downloadStatus);
   },
 
   /**
    * When new data has been downloaded
    * @param   request
    *          The nsIRequest object for the transfer
    * @param   context
@@ -980,20 +978,17 @@ var gDownloadingPage = {
     p.setProperty("progress", currentProgress);
     p.setProperty("status", status);
 
     // This !paused test is necessary because onProgress may fire after
     // the download was paused (for those speedy clickers...)
     if (this._paused)
       return;
 
-    if (this._downloadProgress.mode != "normal")
-      this._downloadProgress.mode = "normal";
-    if (this._downloadProgress.value != currentProgress)
-      this._downloadProgress.value = currentProgress;
+    this._downloadProgress.setAttribute("value", currentProgress);
     if (this._pauseButton.disabled)
       this._pauseButton.disabled = false;
 
     // If the update has completed downloading and the download status contains
     // the original text return early to avoid an assertion in debug builds.
     // Since the page will advance immmediately due to the update completing the
     // download updating the status is not important.
     // nsTextFrame::GetTrimmedOffsets 'Can only call this on frames that have
@@ -1025,18 +1020,17 @@ var gDownloadingPage = {
    * @param   request
    *          The nsIRequest object for the transfer
    * @param   context
    *          Additional data
    * @param   status
    *          Status code containing the reason for the cessation.
    */
   onStopRequest(request, context, status) {
-    if (this._downloadProgress.mode != "normal")
-      this._downloadProgress.mode = "normal";
+    this._downloadProgress.setAttribute("value", "100");
 
     var u = gUpdates.update;
     switch (status) {
       case Cr.NS_ERROR_CORRUPTED_CONTENT:
       case Cr.NS_ERROR_UNEXPECTED:
         if (u.selectedPatch.state == STATE_DOWNLOAD_FAILED &&
             (u.isCompleteUpdate || u.patchCount != 2)) {
           // Verification error of complete patch, informational text is held in
@@ -1045,17 +1039,17 @@ var gDownloadingPage = {
           gUpdates.wiz.goTo("errors");
           break;
         }
         // Verification failed for a partial patch, complete patch is now
         // downloading so return early and do NOT remove the download listener!
 
         // Reset the progress meter to "undertermined" mode so that we don't
         // show old progress for the new download of the "complete" patch.
-        this._downloadProgress.mode = "undetermined";
+        this._downloadProgress.removeAttribute("value");
         document.getElementById("verificationFailed").hidden = false;
         break;
       case Cr.NS_BINDING_ABORTED:
         LOG("gDownloadingPage", "onStopRequest - pausing download");
         // Do not remove UI listener since the user may resume downloading again.
         break;
       case Cr.NS_OK:
         LOG("gDownloadingPage", "onStopRequest - patch verification succeeded");
--- a/toolkit/mozapps/update/content/updates.xul
+++ b/toolkit/mozapps/update/content/updates.xul
@@ -15,16 +15,17 @@
 %brandDTD;
 #if defined(XP_MACOSX) && MOZ_BUILD_APP == browser
 #include ../../../../browser/base/content/browser-doctype.inc
 #endif
 ]>
 
 <wizard id="updates"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         title="&updateWizard.title;"
         windowtype="Update:Wizard"
         style="width: auto; height: auto"
         onwizardfinish="gUpdates.onWizardFinish();"
         onwizardcancel="gUpdates.onWizardCancel();"
         onwizardnext="gUpdates.onWizardNext();"
         onload="gUpdates.onLoad();"
         onunload="gUpdates.onUnload();">
@@ -44,17 +45,17 @@
   <wizardpage id="dummy" pageid="dummy" firstpage="true"/>
 
   <wizardpage id="checking" pageid="checking" next="noupdatesfound"
               object="gCheckingPage" onpageshow="gCheckingPage.onPageShow();">
     <updateheader label="&checking.title;"/>
     <vbox class="update-content" flex="1">
       <label>&updateCheck.label;</label>
       <separator class="thin"/>
-      <progressmeter id="checkingProgress" mode="undetermined"/>
+      <html:progress id="checkingProgress"/>
     </vbox>
   </wizardpage>
 
   <wizardpage id="noupdatesfound" pageid="noupdatesfound"
               object="gNoUpdatesPage" onpageshow="gNoUpdatesPage.onPageShow();">
     <updateheader label="&noupdatesfound.title;"/>
     <vbox class="update-content" flex="1">
       <label id="noUpdatesAutoEnabled" hidden="true">&noupdatesautoenabled.intro;</label>
@@ -114,17 +115,17 @@
   </wizardpage>
 
   <wizardpage id="downloading" pageid="downloading"
               object="gDownloadingPage" onextra1="gDownloadingPage.onHide();"
               onpageshow="gDownloadingPage.onPageShow();">
     <updateheader label="&downloadPage.title;"/>
     <vbox class="update-content" flex="1">
       <hbox id="downloadStatusProgress">
-        <progressmeter id="downloadProgress" mode="undetermined" flex="1"/>
+        <html:progress id="downloadProgress" max="100"/>
         <button id="pauseButton" oncommand="gDownloadingPage.onPause();"
                 paused="false"/>
       </hbox>
       <separator class="thin"/>
       <hbox id="downloadStatusLine">
         <label id="downloadStatus" flex="1">&connecting.label;</label>
       </hbox>
       <separator/>