Bug 1389541 - Wrap speech bubble of onboarding icon correctly. r=pike, gasolin
MozReview-Commit-ID: 7u3JApw5Qmy
--- 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.