Bug 1389541 - Wrap speech bubble of onboarding icon correctly. r=pike, gasolin draft
authorRex Lee <rexboy@mozilla.com>
Mon, 14 Aug 2017 14:40:25 +0800
changeset 646395 20d46993b576588863c45396fb1e555e55a47e1b
parent 643612 a4a448ba7f187069fce916ee234a06cbb0d06f80
child 726219 8fe6398f0c0278c164b43d53283392d80f39d2db
push id74096
push userbmo:rexboy@mozilla.com
push dateTue, 15 Aug 2017 06:19:13 +0000
reviewerspike, gasolin
bugs1389541
milestone57.0a1
Bug 1389541 - Wrap speech bubble of onboarding icon correctly. r=pike, gasolin MozReview-Commit-ID: 7u3JApw5Qmy
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -57,18 +57,20 @@
   box-sizing: content-box;
 }
 
 #onboarding-overlay-button::after {
   content: attr(aria-label);
   display: inline-block;
   offset-inline-start: 39px;
   border-radius: 22px;
-  padding: 5px 8px;
-  width: 110px;
+  padding: 5px 12px;
+  min-width: 100px;
+  max-width: 140px;
+  white-space: pre-line;
   margin-inline-start: 3px;
   margin-top: -5px;
 }
 
 #onboarding-overlay-dialog,
 .onboarding-hidden,
 #onboarding-tour-sync-page[data-login-state=logged-in] .show-on-logged-out,
 #onboarding-tour-sync-page[data-login-state=logged-out] .show-on-logged-in {
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -819,17 +819,17 @@ class Onboarding {
     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";
+      "onboarding.overlay-icon-tooltip2" : "onboarding.overlay-icon-tooltip-updated2";
     let tooltip = this._bundle.formatStringFromName(tooltipStringId, [BRAND_SHORT_NAME], 1);
     button.setAttribute("aria-label", tooltip);
     button.id = "onboarding-overlay-button";
     button.setAttribute("aria-haspopup", true);
     button.setAttribute("aria-controls", "onboarding-overlay-dialog");
     let img = this._window.document.createElement("img");
     img.id = "onboarding-overlay-button-icon";
     img.setAttribute("role", "presentation");
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -3,20 +3,25 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 # LOCALIZATION NOTE(onboarding.overlay-title2): This string will be used in the overlay title.
 onboarding.overlay-title2=Let’s get started
 onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
 #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-icon-tooltip2): This string will be used
+# to show the tooltip alongside the notification icon in the overlay tour. %S is
+# brandShortName. The tooltip is designed to show in two lines. Please use \n to
+# do appropriate line breaking.
+onboarding.overlay-icon-tooltip2=New to %S?\nLet’s get started.
+# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated2): %S is
+# brandShortName. The tooltip is designed to show in two lines. Please use \n to
+# do appropriate line breaking.
+onboarding.overlay-icon-tooltip-updated2=%S is all new.\nSee 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.