Bug 1381366 - The onboarding tour notifications and tour dialog close buttons should have a tooltip, r=mossop draft
authorFischer.json <fischer.json@gmail.com>
Thu, 27 Jul 2017 13:52:17 +0800
changeset 616571 6758021852e1fd9e110cc5e985de8ccc8267e927
parent 614808 dcfb58fcb6dd8f6474eed6520ba6272dedded393
child 639510 24cb536450341c353d1e1ea3444eb0c921c08367
push id70724
push userbmo:fliu@mozilla.com
push dateThu, 27 Jul 2017 05:56:09 +0000
reviewersmossop
bugs1381366
milestone56.0a1
Bug 1381366 - The onboarding tour notifications and tour dialog close buttons should have a tooltip, r=mossop MozReview-Commit-ID: 9sEMs6gUsNu
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -743,16 +743,20 @@ class Onboarding {
       </section>
       <button id="onboarding-notification-close-btn" class="onboarding-close-btn"></button>
     `;
     let toolTip = this._bundle.formatStringFromName(
       this._tourType === "new" ? "onboarding.notification-icon-tool-tip" :
                                  "onboarding.notification-icon-tooltip-updated",
       [BRAND_SHORT_NAME], 1);
     div.querySelector("#onboarding-notification-icon").setAttribute("data-tooltip", toolTip);
+
+    let closeBtn = div.querySelector("#onboarding-notification-close-btn");
+    closeBtn.setAttribute("title",
+      this._bundle.GetStringFromName("onboarding.notification-close-button-tooltip"));
     return div;
   }
 
   hide() {
     this.setToursCompleted(this._tours.map(tour => tour.id));
     this.sendMessageToChrome("set-prefs", [
       {
         name: "browser.onboarding.hidden",
@@ -779,19 +783,22 @@ class Onboarding {
         </nav>
         <footer id="onboarding-footer">
           <input type="checkbox" id="onboarding-tour-hidden-checkbox" /><label for="onboarding-tour-hidden-checkbox"></label>
         </footer>
       </div>
     `;
 
     div.querySelector("label[for='onboarding-tour-hidden-checkbox']").textContent =
-       this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
+      this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
     div.querySelector("#onboarding-header").textContent =
-       this._bundle.GetStringFromName("onboarding.overlay-title2");
+      this._bundle.GetStringFromName("onboarding.overlay-title2");
+    let closeBtn = div.querySelector("#onboarding-overlay-close-btn");
+    closeBtn.setAttribute("title",
+      this._bundle.GetStringFromName("onboarding.overlay-close-button-tooltip"));
     return div;
   }
 
   _renderOverlayButton() {
     let button = this._window.document.createElement("button");
     let tooltipStringId = this._tourType === "new" ?
       "onboarding.overlay-icon-tooltip" : "onboarding.overlay-icon-tooltip-updated";
     let tooltip = this._bundle.formatStringFromName(tooltipStringId, [BRAND_SHORT_NAME], 1);
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -7,17 +7,21 @@ onboarding.hidden-checkbox-label-text=Ma
 #LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
 onboarding.button.learnMore=Learn More
 # LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon in the notification bar. %S is brandShortName.
 onboarding.notification-icon-tool-tip=New to %S?
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip): This string will be used to show the tooltip alongside the notification icon in the overlay tour. %S is brandShortName.
 onboarding.overlay-icon-tooltip=New to %S? Let’s get started.
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated): %S is brandShortName.
 onboarding.overlay-icon-tooltip-updated=%S is all new. See what you can do!
+# LOCALIZATION NOTE(onboarding.overlay-close-button-tooltip): The overlay close button is an icon button. This tooltip would be shown when mousing hovering on the button.
+onboarding.overlay-close-button-tooltip=Close
 onboarding.notification-icon-tooltip-updated=See what’s new!
+# LOCALIZATION NOTE(onboarding.notification-close-button-tooltip): The notification close button is an icon button. This tooltip would be shown when mousing hovering on the button.
+onboarding.notification-close-button-tooltip=Dismiss
 
 onboarding.tour-search2=Search
 onboarding.tour-search.title2=Find it faster.
 # LOCALIZATION NOTE (onboarding.tour-search.description2): If Amazon is not part
 # of the default searchplugins for your locale, you can replace it with another
 # ecommerce website (if you're shipping one), but not with a general purpose
 # search engine (Google, Bing, Yandex, etc.). Alternatively, only reference
 # Wikipedia and drop Amazon from the text.