Bug 1573593 - Show a link to account/device management next to the Lockwise "Syncing to X Devices" label r=johannh,fluent-reviewers,flod
authorMicah Tigley <mtigley@mozilla.com>
Thu, 15 Aug 2019 14:11:17 +0000
changeset 488237 e8700fab7cb87b760e78b469ff48d7c731092adb
parent 488236 31defc04f73a3e33c4b279fc317953614c953cbb
child 488238 893922ffdc3028ce282d8017503ebff4ce0bec7a
push id113904
push userncsoregi@mozilla.com
push dateThu, 15 Aug 2019 19:41:00 +0000
treeherdermozilla-inbound@b283a7ef186c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh, fluent-reviewers, flod
bugs1573593
milestone70.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 1573593 - Show a link to account/device management next to the Lockwise "Syncing to X Devices" label r=johannh,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D41951
browser/app/profile/firefox.js
browser/components/protections/content/lockwise-card.js
browser/components/protections/content/protections.html
browser/components/protections/test/browser/browser_protections_lockwise.js
browser/locales/en-US/browser/protections.ftl
toolkit/components/remotepagemanager/MessagePort.jsm
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1608,18 +1608,20 @@ pref("browser.contentblocking.customBloc
 
 pref("browser.contentblocking.reportBreakage.url", "https://tracking-protection-issues.herokuapp.com/new");
 
 // Enable Protections report's Lockwise card by default.
 pref("browser.contentblocking.report.lockwise.enabled", true);
 
 // Enable Protections report's Monitor card by default.
 pref("browser.contentblocking.report.monitor.enabled", true);
+
 pref("browser.contentblocking.report.monitor.url", "https://monitor.firefox.com");
 pref("browser.contentblocking.report.lockwise.url", "https://lockwise.firefox.com/");
+pref("browser.contentblocking.report.manage_devices.url", "https://accounts.firefox.com/settings/clients");
 
 // Protection Report's SUMO urls
 pref("browser.contentblocking.report.monitor.how_it_works.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/monitor-faq");
 pref("browser.contentblocking.report.lockwise.how_it_works.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/password-manager-report");
 pref("browser.contentblocking.report.social.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/social-media-tracking-report");
 pref("browser.contentblocking.report.cookie.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/cross-site-tracking-report");
 pref("browser.contentblocking.report.tracker.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/tracking-content-report");
 pref("browser.contentblocking.report.fingerprinter.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/fingerprinters-report");
--- a/browser/components/protections/content/lockwise-card.js
+++ b/browser/components/protections/content/lockwise-card.js
@@ -3,16 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env mozilla/frame-script */
 
 const LOCKWISE_URL = RPMGetStringPref(
   "browser.contentblocking.report.lockwise.url",
   ""
 );
+const MANAGE_DEVICES_URL = RPMGetStringPref(
+  "browser.contentblocking.report.manage_devices.url",
+  ""
+);
 const HOW_IT_WORKS_URL_PREF = RPMGetFormatURLPref(
   "browser.contentblocking.report.lockwise.how_it_works.url"
 );
 
 export default class LockwiseCard {
   constructor(document) {
     this.doc = document;
   }
@@ -144,11 +148,15 @@ export default class LockwiseCard {
       textEl.setAttribute("data-l10n-id", "lockwise-sync-status");
     } else {
       textEl.setAttribute("data-l10n-id", "lockwise-sync-not-syncing");
     }
     // Display the link for enabling sync if no synced devices are detected.
     if (syncedDevices === 0) {
       const syncLink = this.doc.getElementById("turn-on-sync");
       syncLink.classList.remove("hidden");
+    } else {
+      const manageDevicesLink = this.doc.getElementById("manage-devices");
+      manageDevicesLink.href = MANAGE_DEVICES_URL;
+      manageDevicesLink.classList.remove("hidden");
     }
   }
 }
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -187,16 +187,17 @@
               <span class="number-of-synced-devices block">
                 <!-- Display number of synced devices here. -->
               </span>
               <span class="inline-text-icon synced-devices-text">
                 <span>
                   <!-- Display message for status of synced devices here. -->
                 </span>
                 <a id="turn-on-sync" tabindex="0" class="hidden" href="" data-l10n-id="turn-on-sync"></a>
+                <a id="manage-devices" target="_blank" class="hidden" href="" data-l10n-id="manage-devices"></a>
               </span>
             </div>
           </div>
         </div>
       </section>
     </div>
   </body>
 </html>
--- a/browser/components/protections/test/browser/browser_protections_lockwise.js
+++ b/browser/components/protections/test/browser/browser_protections_lockwise.js
@@ -99,16 +99,17 @@ add_task(async function() {
       ".number-of-logins.block"
     );
     const numberOfSyncedDevices = hasLoginsContent.querySelector(
       ".number-of-synced-devices.block"
     );
     const syncedDevicesStatusText = content.document.querySelector(
       ".synced-devices-text span"
     );
+    const syncLink = content.document.getElementById("turn-on-sync");
 
     ok(
       ContentTaskUtils.is_hidden(noLoginsContent),
       "Content for user with no logins is hidden."
     );
     ok(
       ContentTaskUtils.is_visible(hasLoginsContent),
       "Content for user with logins is shown."
@@ -121,16 +122,19 @@ add_task(async function() {
       0,
       "Zero synced devices are displayed."
     );
     is(
       syncedDevicesStatusText.getAttribute("data-l10n-id"),
       "lockwise-sync-not-syncing",
       "Not syncing to other devices."
     );
+
+    info("Check that the link to turn on sync is visible.");
+    ok(ContentTaskUtils.is_visible(syncLink), "Sync link is visible.");
   });
 
   info(
     "Add another login and check the number of stored logins is updated after reload."
   );
   Services.logins.addLogin(TEST_LOGIN2);
   await reloadTab(tab);
 
@@ -159,22 +163,28 @@ add_task(async function() {
         "#lockwise-body-content .has-logins"
       );
       return ContentTaskUtils.is_visible(hasLogins);
     }, "Lockwise card for user with logins is shown.");
 
     const numberOfSyncedDevices = content.document.querySelector(
       ".number-of-synced-devices.block"
     );
+    const manageDevicesLink = content.document.getElementById("manage-devices");
 
     is(
       numberOfSyncedDevices.textContent,
       5,
       "Five synced devices should be displayed"
     );
+    info("Check that the link to manage devices is visible.");
+    ok(
+      ContentTaskUtils.is_visible(manageDevicesLink),
+      "Manage devices link is visible."
+    );
   });
 
   info("Disable showing the Lockwise card.");
   Services.prefs.setBoolPref(
     "browser.contentblocking.report.lockwise.enabled",
     false
   );
   await reloadTab(tab);
--- a/browser/locales/en-US/browser/protections.ftl
+++ b/browser/locales/en-US/browser/protections.ftl
@@ -68,16 +68,18 @@ lockwise-passwords-stored =
   { $count ->
      [one] Password stored securely <a data-l10n-name="lockwise-how-it-works">How it works</a>
     *[other] Passwords stored securely <a data-l10n-name="lockwise-how-it-works">How it works</a>
   }
 
 turn-on-sync = Turn on { -sync-brand-short-name }…
   .title = Go to sync preferences
 
+manage-devices = Manage devices
+
 # Variables:
 #   $count (Number) - Number of devices connected with sync.
 lockwise-sync-status =
   { $count ->
      [one] Syncing to { $count } other device
     *[other] Syncing to { $count } other devices
   }
 lockwise-sync-not-syncing = Not syncing to other devices.
--- a/toolkit/components/remotepagemanager/MessagePort.jsm
+++ b/toolkit/components/remotepagemanager/MessagePort.jsm
@@ -62,16 +62,17 @@ let RPMAccessManager = {
         "browser.contentblocking.report.lockwise.enabled",
         "browser.contentblocking.report.monitor.enabled",
         "privacy.socialtracking.block_cookies.enabled",
       ],
       getStringPref: [
         "browser.contentblocking.category",
         "browser.contentblocking.report.lockwise.url",
         "browser.contentblocking.report.monitor.url",
+        "browser.contentblocking.report.manage_devices.url",
       ],
       getFormatURLPref: [
         "browser.contentblocking.report.monitor.how_it_works.url",
         "browser.contentblocking.report.lockwise.how_it_works.url",
         "browser.contentblocking.report.social.url",
         "browser.contentblocking.report.cookie.url",
         "browser.contentblocking.report.tracker.url",
         "browser.contentblocking.report.fingerprinter.url",