Bug 1581428 - Show tooltips for links in Protection Report. r=fluent-reviewers,johannh,flod
☠☠ backed out by db0c0587dd6e ☠ ☠
authorErica Wright <ewright@mozilla.com>
Wed, 18 Sep 2019 12:33:08 +0000
changeset 493836 8c4399f3a332a4366462ecd5584309b36b6d7381
parent 493835 3d51b196866645d7e6f84f1deaed734db3020237
child 493837 cd0d966885555845fb41ce9e9baf8cc9763a4075
push id95707
push userewright@mozilla.com
push dateWed, 18 Sep 2019 14:44:11 +0000
treeherderautoland@8c4399f3a332 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfluent-reviewers, johannh, flod
bugs1581428
milestone71.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 1581428 - Show tooltips for links in Protection Report. r=fluent-reviewers,johannh,flod Differential Revision: https://phabricator.services.mozilla.com/D46215
browser/components/protections/content/protections.html
browser/components/protections/content/protections.js
browser/locales/en-US/browser/protections.ftl
python/l10n/fluent_migrations/bug_1581428_title_attributes_protection_report.py
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -28,17 +28,17 @@
       <h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
       <div class="card card-no-hover etp-card">
         <div class="card-header">
           <img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/>
           <img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/>
           <div>
             <h2 class="card-title" data-l10n-id="etp-card-title"></h2>
             <p class="content" data-l10n-id="etp-card-content"></p>
-            <p id="protection-details" role="link" tabindex="0" data-l10n-title="go-to-privacy-settings"></p>
+            <p id="protection-details" role="link" tabindex="0"></p>
           </div>
         </div>
         <div class="card-body">
           <div class="body-wrapper">
             <p id="graph-week-summary"></p>
             <div id="graph-wrapper">
               <div id="graph" role="table" aria-labelledby="graphLegendDescription"></div>
               <div id="legend">
@@ -166,17 +166,17 @@
                 <div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
                   <a target="_blank" id="monitor-inline-link" data-l10n-name="monitor-inline-link" href=""></a>
                 </div>
                 <div class="monitor-breached-passwords hidden">
                   <span data-type="breached-lockwise-passwords" class="number-of-breaches block">
                     <!-- Display number of exposed stored passwords here. -->
                   </span>
                   <span id="password-warning">
-                    <a target="_blank" href="about:logins" id="lockwise-link" data-l10n-name="lockwise-link" data-l10n-title="go-to-saved-logins"></a>
+                    <a target="_blank" href="about:logins" id="lockwise-link" data-l10n-name="lockwise-link"></a>
                   </span>
                 </div>
               </div>
             </div>
           </div>
       </section>
       <!-- Markup for Lockwise card. -->
       <section class="card card-no-hover lockwise-card hidden">
@@ -186,17 +186,17 @@
             <div>
               <h2 id="lockwise-title" class="card-title">
                 <!-- Insert Lockwise card title here. -->
               </h2>
               <p id="lockwise-header-content" class="content">
                 <!-- Insert Lockwise header content here. -->
               </p>
             </div>
-            <button id="open-about-logins-button" class="primary" data-l10n-id="about-logins-view-logins-button" data-l10n-title="go-to-saved-logins"></button>
+            <button id="open-about-logins-button" class="primary" data-l10n-id="protection-report-view-logins-button"></button>
           </div>
         </div>
         <div class="card-body hidden">
           <div id="lockwise-body-content" class="body-wrapper">
             <div class="no-logins hidden">
                 <img class="lockwise-mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile-app.svg"/>
                 <span data-l10n-id="lockwise-no-logins-content">
                   <a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@@ -36,27 +36,27 @@ document.addEventListener("DOMContentLoa
   };
   protectionDetails.addEventListener("click", protectionDetailsEvtHandler);
   protectionDetails.addEventListener("keypress", protectionDetailsEvtHandler);
 
   let cbCategory = RPMGetStringPref("browser.contentblocking.category");
   if (cbCategory == "custom") {
     protectionDetails.setAttribute(
       "data-l10n-id",
-      "protection-header-details-custom"
+      "protection-report-header-details-custom"
     );
   } else if (cbCategory == "strict") {
     protectionDetails.setAttribute(
       "data-l10n-id",
-      "protection-header-details-strict"
+      "protection-report-header-details-strict"
     );
   } else {
     protectionDetails.setAttribute(
       "data-l10n-id",
-      "protection-header-details-standard"
+      "protection-report-header-details-standard"
     );
   }
 
   let legend = document.getElementById("legend");
   legend.style.gridTemplateAreas =
     "'social cookie tracker fingerprinter cryptominer'";
 
   document.sendTelemetryEvent = (action, object, value = "") => {
--- a/browser/locales/en-US/browser/protections.ftl
+++ b/browser/locales/en-US/browser/protections.ftl
@@ -18,19 +18,22 @@ graph-total-tracker-summary =
   { $count ->
      [one] <b>{ $count }</b> tracker blocked since { DATETIME($earliestDate, day: "numeric", month: "long", year: "numeric") }
     *[other] <b>{ $count }</b> trackers blocked since { DATETIME($earliestDate, day: "numeric", month: "long", year: "numeric") }
   }
 
 # The terminology used to refer to categories of Content Blocking is also used in chrome/browser/browser.properties and should be translated consistently.
 # "Standard" in this case is an adjective, meaning "default" or "normal".
 # The category name in the <b> tag will be bold.
-protection-header-details-standard = Protection Level is set to <b>Standard</b>
-protection-header-details-strict = Protection Level is set to <b>Strict</b>
-protection-header-details-custom = Protection Level is set to <b>Custom</b>
+protection-report-header-details-standard = Protection Level is set to <b>Standard</b>
+  .title = Go to Privacy Settings
+protection-report-header-details-strict = Protection Level is set to <b>Strict</b>
+  .title = Go to Privacy Settings
+protection-report-header-details-custom = Protection Level is set to <b>Custom</b>
+  .title = Go to Privacy Settings
 protection-report-page-title = Privacy Protections
 protection-report-content-title = Privacy Protections
 
 etp-card-title = Enhanced Tracking Protection
 etp-card-content = Trackers follow you around online to collect information about your browsing habits and interests. { -brand-short-name } blocks many of these trackers and other malicious scripts.
 
 # This string is used to label the X axis of a graph. Other days of the week are generated via Intl.DateTimeFormat,
 # capitalization for this string should match the output for your locale.
@@ -53,17 +56,18 @@ fingerprinter-tab-content = Fingerprinte
 
 cryptominer-tab-title = Cryptominers
 cryptominer-tab-content = Cryptominers use your system’s computing power to mine digital money. Cryptomining scripts drain your battery, slow down your computer, and can increase your energy bill. <a data-l10n-name="learn-more-link">Learn more</a>
 
 lockwise-title = Never forget a password again
 lockwise-title-logged-in = { -lockwise-brand-name }
 lockwise-header-content = { -lockwise-brand-name } securely stores your passwords in your browser.
 lockwise-header-content-logged-in = Securely store and sync your passwords to all your devices.
-about-logins-view-logins-button = View Logins
+protection-report-view-logins-button = View Logins
+  .title = Go to Saved Logins
 lockwise-no-logins-content = Get the <a data-l10n-name="lockwise-inline-link">{ -lockwise-brand-name }</a> app to take your passwords everywhere.
 
 # This string is displayed after a large numeral that indicates the total number
 # of email addresses being monitored. Don’t add $count to
 # your localization, because it would result in the number showing twice.
 lockwise-passwords-stored =
   { $count ->
      [one] Password stored securely <a data-l10n-name="lockwise-how-it-works">How it works</a>
@@ -124,22 +128,16 @@ full-report-link = View full report on <
 # of saved logins which may have been exposed. Don’t add $count to
 # your localization, because it would result in the number showing twice.
 password-warning =
   { $count ->
      [one] Saved login may have been exposed in a data breach. Change this password for better online security. <a data-l10n-name="lockwise-link">View Saved Logins</a>
     *[other] Saved logins may have been exposed in a data breach. Change these passwords for better online security. <a data-l10n-name="lockwise-link">View Saved Logins</a>
   }
 
-# This is the title attribute describing the graph report's link to about:settings#privacy
-go-to-privacy-settings = Go to Privacy Settings
-
-# This is the title attribute describing the Lockwise card's link to about:logins
-go-to-saved-logins = Go to Saved Logins
-
 ## The title attribute is used to display the type of protection.
 ## The aria-label is spoken by screen readers to make the visual graph accessible to blind users.
 ##
 ## Variables:
 ##   $count (Number) - Number of specific trackers
 ##   $percentage (Number) - Percentage this type of tracker contributes to the whole graph
 
 bar-tooltip-social =
new file mode 100644
--- /dev/null
+++ b/python/l10n/fluent_migrations/bug_1581428_title_attributes_protection_report.py
@@ -0,0 +1,32 @@
+# 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 transforms_from
+from fluent.migrate import COPY_PATTERN
+
+TARGET_FILE = "browser/browser/protections.ftl"
+SOURCE_FILE = TARGET_FILE
+
+def migrate(ctx):
+    """Bug 1581428 - Show tooltips for links in Protection Report, part {index}."""
+
+    ctx.add_transforms(
+        TARGET_FILE,
+        SOURCE_FILE,
+        transforms_from(
+            """
+protection-report-header-details-standard = {COPY_PATTERN(from_path, "protection-header-details-standard")}
+    .title = {COPY_PATTERN(from_path, "go-to-privacy-settings")}
+protection-report-header-details-strict = {COPY_PATTERN(from_path, "protection-header-details-strict")}
+    .title = {COPY_PATTERN(from_path, "go-to-privacy-settings")}
+protection-report-header-details-custom = {COPY_PATTERN(from_path, "protection-header-details-custom")}
+    .title = {COPY_PATTERN(from_path, "go-to-privacy-settings")}
+protection-report-view-logins-button = {COPY_PATTERN(from_path, "about-logins-view-logins-button")}
+    .title = {COPY_PATTERN(from_path, "go-to-saved-logins")}
+""",
+            from_path=SOURCE_FILE),
+    )