Bug 1374717 - show alternative message when firefox already the default browser;r=flod,mossop

the call-to-action button will disabled when user click the button, to prevent open settings panel several times
the call-to-action button will be replaced to alternative text when Firefox is already the default browser

MozReview-Commit-ID: LFeTuDnQEFA

--HG--
extra : rebase_source : 93090d1d5994534e370c31b279e23ec78b43cf8a

browser/extensions/onboarding/content/onboarding-tour-agent.js

@@ -15,8 +15,19 @@ document.getElementById("onboarding-overlay")
     case "onboarding-tour-customize-button":
       Mozilla.UITour.showHighlight("customize");
       break;
-   case "onboarding-tour-default-browser-button":
-      Mozilla.UITour.setConfiguration("defaultBrowser");
+    case "onboarding-tour-default-browser-button":
+      Mozilla.UITour.getConfiguration("appinfo", (config) => {
+        let isDefaultBrowser = config.defaultBrowser;
+        let btn = document.getElementById("onboarding-tour-default-browser-button");
+        let msg = document.getElementById("onboarding-tour-is-default-browser-msg");
+        if (isDefaultBrowser) {
+          btn.classList.add("onboarding-hidden");
+          msg.classList.remove("onboarding-hidden");
+        } else {
+          btn.disabled = true;
+          Mozilla.UITour.setConfiguration("defaultBrowser");
+        }
+      });
       break;
     case "onboarding-tour-private-browsing-button":
       Mozilla.UITour.showHighlight("privateWindow");
@@ -34,6 +45,7 @@ document.getElementById("onboarding-overlay")
     case "onboarding-overlay-close-btn":
       // Dismiss any highlights if a user tries to close the dialog.
       Mozilla.UITour.hideHighlight();
+      break;
   }
   // Dismiss any highlights if a user tries to change to other tours.
   if (evt.target.classList.contains("onboarding-tour-item")) {

browser/extensions/onboarding/content/onboarding.css

@@ -33,7 +33,8 @@
   background: url("img/overlay-icon.svg") no-repeat;
 }
 
-#onboarding-overlay-dialog {
+#onboarding-overlay-dialog,
+.onboarding-hidden {
   display: none;
 }
 
@@ -149,6 +150,16 @@
   color: #0A84FF;
 }
 
+/* Default browser tour */
+#onboarding-tour-is-default-browser-msg {
+  font-size: 16px;
+  line-height: 21px;
+  float: inline-end;
+  margin-inline-end: 26px;
+  margin-top: -32px;
+  text-align: center;
+}
+
 /* Sync tour */
 #onboarding-tour-sync-page form {
   text-align: center;
@@ -261,13 +272,13 @@
   margin-top: -32px;
 }
 
-.onboarding-tour-action-button:hover:not([disabled="true"]) ,
+.onboarding-tour-action-button:hover:not([disabled]) ,
 #onboarding-notification-action-btn:hover {
   background: #0060df;
   cursor: pointer;
 }
 
-.onboarding-tour-action-button:active:not([disabled="true"]),
+.onboarding-tour-action-button:active:not([disabled]),
 #onboarding-notification-action-btn:active  {
   background: #003EAA;
 }

browser/extensions/onboarding/content/onboarding.js

@@ -160,10 +160,12 @@ var onboardingTourset = {
         button: bundle.GetStringFromName("onboarding.button.learnMore"),
       };
     },
-    getPage(win) {
+    getPage(win, bundle) {
       let div = win.document.createElement("div");
       let defaultBrowserButtonId = win.matchMedia("(-moz-os-version: windows-win7)").matches ?
         "onboarding.tour-default-browser.win7.button" : "onboarding.tour-default-browser.button";
+      let isDefaultMessage = bundle.GetStringFromName("onboarding.tour-default-browser.is-default.message");
+      let isDefault2ndMessage = bundle.formatStringFromName("onboarding.tour-default-browser.is-default.2nd-message", [BRAND_SHORT_NAME], 1);
       // eslint-disable-next-line no-unsanitized/property
       div.innerHTML = `
         <section class="onboarding-tour-description">
@@ -175,6 +177,7 @@ var onboardingTourset = {
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-default-browser-button" class="onboarding-tour-action-button" data-l10n-id="${defaultBrowserButtonId}"></button>
+          <div id="onboarding-tour-is-default-browser-msg" class="onboarding-hidden">${isDefaultMessage}<br/>${isDefault2ndMessage}</div>
         </aside>
       `;
       return div;

browser/extensions/onboarding/locales/en-US/onboarding.properties

@@ -56,6 +56,10 @@ onboarding.tour-default-browser.description2=Love %1$S? Set it as your default b
 onboarding.tour-default-browser.button=Open Default Browser Settings
 # LOCALIZATION NOTE(onboarding.tour-default-browser.win7.button): Label for a button to directly set the default browser (Windows 7). %S is brandShortName
 onboarding.tour-default-browser.win7.button=Make %S Your Default Browser
+# LOCALIZATION NOTE(onboarding.tour-default-browser.is-default.message): Label displayed when Firefox is already set as default browser. followed on a new line by "tour-default-browser.is-default.2nd-message".
+onboarding.tour-default-browser.is-default.message=You’ve got this!
+# LOCALIZATION NOTE(onboarding.tour-default-browser.is-default.2nd-message): Label displayed when Firefox is already set as default browser. %S is brandShortName
+onboarding.tour-default-browser.is-default.2nd-message=%S is already your default browser.
 # LOCALIZATION NOTE(onboarding.notification.onboarding-tour-default-browser.title): This string will be used in the notification message for the default browser tour. %S is brandShortName.
 onboarding.notification.onboarding-tour-default-browser.title=Make %S your go-to browser.
 # LOCALIZATION NOTE(onboarding.notification.onboarding-tour-default-browser.message): %1$S is brandShortName