Bug 1442542 - Make checkboxes in the clear site data dialog use a label attribute. r=dao,flod

MozReview-Commit-ID: 9yj90NirV9y

--HG--
extra : rebase_source : 56e63dd90852ff9ee95c828a51d04e2fa88820c0

browser/components/preferences/clearSiteData.css

@@ -11,9 +11,10 @@
 }
 
 .option {
-  padding-bottom: 16px;
+  padding-bottom: 8px;
 }
 
 .option-description {
   color: #737373;
+  margin-top: -0.5em !important;
 }

browser/components/preferences/clearSiteData.js

@@ -13,27 +13,22 @@ var gClearSiteDataDialog = {
   _clearButton: null,
 
   init() {
-    this._bundle = Services.strings
-      .createBundle("chrome://browser/locale/preferences/clearSiteData.properties");
-
-    SiteDataManager.getTotalUsage().then(bytes => {
-      // Size is an array of amount and unit, e.g. [20, "MB"].
-      let size = DownloadUtils.convertByteUnits(bytes);
-      document.getElementById("clearSiteDataLabel").value =
-        this._bundle.formatStringFromName("clearSiteDataWithEstimates.label", size, 2);
-    });
-    SiteDataManager.getCacheSize().then(bytes => {
-      // Size is an array of amount and unit, e.g. [20, "MB"].
-      let size = DownloadUtils.convertByteUnits(bytes);
-      document.getElementById("clearCacheLabel").value =
-        this._bundle.formatStringFromName("clearCacheWithEstimates.label", size, 2);
-    });
-
     this._clearButton = document.getElementById("clearButton");
     this._cancelButton = document.getElementById("cancelButton");
     this._clearSiteDataCheckbox = document.getElementById("clearSiteData");
     this._clearCacheCheckbox = document.getElementById("clearCache");
 
+    SiteDataManager.getTotalUsage().then(bytes => {
+      let [amount, unit] = DownloadUtils.convertByteUnits(bytes);
+      document.l10n.setAttributes(this._clearSiteDataCheckbox,
+        "clear-site-data-cookies-with-data", { amount, unit });
+    });
+    SiteDataManager.getCacheSize().then(bytes => {
+      let [amount, unit] = DownloadUtils.convertByteUnits(bytes);
+      document.l10n.setAttributes(this._clearCacheCheckbox,
+        "clear-site-data-cache-with-data", { amount, unit });
+    });
+
     window.addEventListener("keypress", this.onWindowKeyPress);
 
     this._cancelButton.addEventListener("command", window.close);

browser/components/preferences/clearSiteData.xul

@@ -18,12 +18,8 @@
   <link rel="localization" href="branding/brand.ftl"/>
   <link rel="localization" href="browser/preferences/clearSiteData.ftl"/>
   <script type="application/javascript" src="chrome://global/content/l10n.js"></script>
-
   <script src="chrome://browser/content/preferences/clearSiteData.js"/>
 
-  <stringbundle id="bundlePreferences"
-                src="chrome://browser/locale/preferences/preferences.properties"/>
-
   <keyset>
     <key data-l10n-id="clear-site-data-close-key" modifiers="accel" oncommand="window.close();"/>
   </keyset>
@@ -32,34 +28,22 @@
     <description control="url" data-l10n-id="clear-site-data-description"/>
     <separator class="thin"/>
     <vbox class="options-container">
-      <hbox class="option">
-        <checkbox id="clearSiteData" checked="true" />
-        <vbox>
-          <label for="clearSiteData"
-                 id="clearSiteDataLabel"
-                 control="clearSiteData"
-                 data-l10n-id="clear-site-data-cookies" />
-          <description class="option-description" data-l10n-id="clear-site-data-cookies-info" />
+      <vbox class="option">
+        <checkbox data-l10n-id="clear-site-data-cookies-empty" id="clearSiteData" checked="true"/>
+        <description class="option-description indent" data-l10n-id="clear-site-data-cookies-info"/>
       </vbox>
-      </hbox>
-      <hbox class="option">
-        <checkbox id="clearCache" checked="true" />
-        <vbox>
-          <label for="clearCache"
-                 id="clearCacheLabel"
-                 control="clearCache"
-                 data-l10n-id="clear-site-data-cache" />
-          <description class="option-description" data-l10n-id="clear-site-data-cache-info"/>
+      <vbox class="option">
+        <checkbox data-l10n-id="clear-site-data-cache-empty" id="clearCache" checked="true"/>
+        <description class="option-description indent" data-l10n-id="clear-site-data-cache-info"/>
       </vbox>
-      </hbox>
     </vbox>
   </vbox>
   <vbox>
     <hbox class="actionButtons" align="right" flex="1">
       <button id="cancelButton" icon="close"
-              data-l10n-id="clear-site-data-cancel" />
+              data-l10n-id="clear-site-data-cancel"/>
       <button id="clearButton" icon="save"
-              data-l10n-id="clear-site-data-clear" />
+              data-l10n-id="clear-site-data-clear"/>
     </hbox>
   </vbox>
 </window>

browser/components/preferences/in-content/tests/siteData/browser_clearSiteData.js

@@ -55,20 +55,18 @@ async function testClearData(clearSiteData, clearCache) {
   // since we've had cache intermittently changing under our feet.
   let [, convertedCacheUnit] = DownloadUtils.convertByteUnits(cacheUsage);
 
-  let clearSiteDataLabel = dialogWin.document.getElementById("clearSiteDataLabel");
-  let clearCacheLabel = dialogWin.document.getElementById("clearCacheLabel");
+  let clearSiteDataCheckbox = dialogWin.document.getElementById("clearSiteData");
+  let clearCacheCheckbox = dialogWin.document.getElementById("clearCache");
   // The usage details are filled asynchronously, so we assert that they're present by
   // waiting for them to be filled in.
   await Promise.all([
     TestUtils.waitForCondition(
-      () => clearSiteDataLabel.value && clearSiteDataLabel.value.includes(convertedTotalUsage), "Should show the quota usage"),
+      () => clearSiteDataCheckbox.label && clearSiteDataCheckbox.label.includes(convertedTotalUsage), "Should show the quota usage"),
     TestUtils.waitForCondition(
-      () => clearCacheLabel.value && clearCacheLabel.value.includes(convertedCacheUnit), "Should show the cache usage")
+      () => clearCacheCheckbox.label && clearCacheCheckbox.label.includes(convertedCacheUnit), "Should show the cache usage")
   ]);
 
   // Check the boxes according to our test input.
-  let clearSiteDataCheckbox = dialogWin.document.getElementById("clearSiteData");
-  let clearCacheCheckbox = dialogWin.document.getElementById("clearCache");
   clearSiteDataCheckbox.checked = clearSiteData;
   clearCacheCheckbox.checked = clearCache;
 

browser/locales/en-US/browser/preferences/clearSiteData.ftl

@@ -11,12 +11,42 @@ clear-site-data-description = Clearing all cookies and site data stored by { -br
 clear-site-data-close-key =
     .key = w
 
-clear-site-data-cookies = Cookies and Site Data
+# The parameters in parentheses in this string describe disk usage
+# in the format ($amount $unit), e.g. "Cookies and Site Data (24 KB)"
+# Variables:
+#   $amount (Number) - Amount of site data currently stored on disk
+#   $unit (String) - Abbreviation of the unit that $amount is in, e.g. "MB"
+clear-site-data-cookies-with-data =
+    .label = Cookies and Site Data ({ $amount } { $unit })
+    .accesskey = S
+
+# This string is a placeholder for while the data used to fill
+# clear-site-data-cookies-with-data is loading. This placeholder is usually
+# only shown for a very short time (< 1s), so it should be very similar
+# or the same as clear-site-data-cookies-with-data (except the amount and unit),
+# to avoid flickering.
+clear-site-data-cookies-empty =
+    .label = Cookies and Site Data
     .accesskey = S
 
 clear-site-data-cookies-info = You may get signed out of websites if cleared
 
-clear-site-data-cache = Cached Web Content
+# The parameters in parentheses in this string describe disk usage
+# in the format ($amount $unit), e.g. "Cached Web Content (24 KB)"
+# Variables:
+#   $amount (Number) - Amount of cache currently stored on disk
+#   $unit (String) - Abbreviation of the unit that $amount is in, e.g. "MB"
+clear-site-data-cache-with-data =
+    .label = Cached Web Content ({ $amount } { $unit })
+    .accesskey = W
+
+# This string is a placeholder for while the data used to fill
+# clear-site-data-cache-with-data is loading. This placeholder is usually
+# only shown for a very short time (< 1s), so it should be very similar
+# or the same as clear-site-data-cache-with-data (except the amount and unit),
+# to avoid flickering.
+clear-site-data-cache-empty =
+    .label = Cached Web Content
     .accesskey = W
 
 clear-site-data-cache-info = Will require websites to reload images and data

browser/locales/en-US/chrome/browser/preferences/clearSiteData.properties

@@ -1,12 +0,0 @@
-# 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/.
-
-# LOCALIZATION NOTE (clearSiteDataWithEstimates.label, clearCacheWithEstimates.label):
-#   The parameters in parentheses in these strings describe disk usage
-#   in the format (size unit), e.g. "Cookies and Site Data (24 KB)"
-#   %1$S = size
-#   %2$S = unit (MB, KB, etc.)
-clearSiteDataWithEstimates.label = Cookies and Site Data (%1$S %2$S)
-clearCacheWithEstimates.label = Cached Web Content (%1$S %2$S)
-

browser/locales/jar.mn

@@ -55,7 +55,6 @@
     locale/browser/feeds/subscribe.properties       (%chrome/browser/feeds/subscribe.properties)
     locale/browser/migration/migration.dtd         (%chrome/browser/migration/migration.dtd)
     locale/browser/migration/migration.properties  (%chrome/browser/migration/migration.properties)
-    locale/browser/preferences/clearSiteData.properties     (%chrome/browser/preferences/clearSiteData.properties)
     locale/browser/preferences/preferences.properties     (%chrome/browser/preferences/preferences.properties)
     locale/browser/preferences/security.dtd           (%chrome/browser/preferences/security.dtd)
     locale/browser/syncBrand.dtd                (%chrome/browser/syncBrand.dtd)

python/l10n/fluent_migrations/bug_1442542_preferences_clearSiteData_js.py

@@ -0,0 +1,111 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+import fluent.syntax.ast as FTL
+from fluent.migrate.helpers import EXTERNAL_ARGUMENT
+from fluent.migrate import COPY, REPLACE
+
+def migrate(ctx):
+    """Bug 1442542 - Migrate Preferences::Subdialogs::ClearSiteData properties strings to Fluent, part {index}."""
+
+    ctx.add_transforms(
+        'browser/browser/preferences/clearSiteData.ftl',
+        'browser/browser/preferences/clearSiteData.ftl',
+        [
+            FTL.Message(
+                id=FTL.Identifier('clear-site-data-cookies-with-data'),
+                attributes=[
+                    FTL.Attribute(
+                        FTL.Identifier('label'),
+                        REPLACE(
+                            'browser/chrome/browser/preferences/clearSiteData.properties',
+                            'clearSiteDataWithEstimates.label',
+                            {
+                                '%1$S': EXTERNAL_ARGUMENT(
+                                    'amount'
+                                ),
+                                '%2$S': EXTERNAL_ARGUMENT(
+                                    'unit'
+                                )
+                            }
+                        )
+                    ),
+                    FTL.Attribute(
+                        FTL.Identifier('accesskey'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearSiteData.accesskey'
+                        )
+                    )
+                ]
+            ),
+            FTL.Message(
+                id=FTL.Identifier('clear-site-data-cookies-empty'),
+                attributes=[
+                    FTL.Attribute(
+                        FTL.Identifier('label'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearSiteData.label'
+                        )
+                    ),
+                    FTL.Attribute(
+                        FTL.Identifier('accesskey'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearSiteData.accesskey'
+                        )
+                    )
+                ]
+            ),
+            FTL.Message(
+                id=FTL.Identifier('clear-site-data-cache-with-data'),
+                attributes=[
+                    FTL.Attribute(
+                        FTL.Identifier('label'),
+                        REPLACE(
+                            'browser/chrome/browser/preferences/clearSiteData.properties',
+                            'clearCacheWithEstimates.label',
+                            {
+                                '%1$S': EXTERNAL_ARGUMENT(
+                                    'amount'
+                                ),
+                                '%2$S': EXTERNAL_ARGUMENT(
+                                    'unit'
+                                )
+                            }
+                        )
+                    ),
+                    FTL.Attribute(
+                        FTL.Identifier('accesskey'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearCache.accesskey'
+                        )
+                    )
+                ]
+            ),
+            FTL.Message(
+                id=FTL.Identifier('clear-site-data-cache-empty'),
+                attributes=[
+                    FTL.Attribute(
+                        FTL.Identifier('label'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearCache.label'
+                        )
+                    ),
+                    FTL.Attribute(
+                        FTL.Identifier('accesskey'),
+                        COPY(
+                            'browser/chrome/browser/preferences/clearSiteData.dtd',
+                            'clearCache.accesskey'
+                        )
+                    )
+                ]
+            )
+        ]
+    )