commit 7706b044c9a013ae205168038ae8a734b2249741 Author: Kathy Brade brade@pearlcrescent.com Date: Tue Apr 9 14:38:35 2019 -0400
fixup! Bug 29768: Introduce new features to users --- .../extensions/onboarding/content/onboarding.css | 21 +++++++++---- .../extensions/onboarding/content/onboarding.js | 34 +++++++++++++--------- 2 files changed, 36 insertions(+), 19 deletions(-)
diff --git a/browser/extensions/onboarding/content/onboarding.css b/browser/extensions/onboarding/content/onboarding.css index 4804c4fbadc6..939721677c4f 100644 --- a/browser/extensions/onboarding/content/onboarding.css +++ b/browser/extensions/onboarding/content/onboarding.css @@ -341,14 +341,13 @@ grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end]; }
-.onboarding-tour-description-prefix { +.onboarding-tour-description-highlight { display: inline-block; - margin-bottom: -8px; /* reduce vertical space below */ - padding: 2px 10px; - vertical-align: center; + margin-inline-start: 8px; + padding: 6px 8px; + vertical-align: middle; background-color: #F1F1F3; border-radius: 4px; - min-height: 25px; font-size: 10px; font-weight: 600; text-transform: uppercase; @@ -373,6 +372,12 @@ color: #420c5d; }
+.onboarding-tour-description-suffix { + margin-top: 6px; + font-size: 13px; + line-height: 16px; +} + .onboarding-tour-content { grid-row: tour-page-start / tour-button-start; grid-column: tour-content-start / tour-page-end; @@ -391,6 +396,12 @@ transform: scaleX(-1); }
+/* The image contained in figure_tor-security-level.png contains English text; + * therefore it should not be flipped when the document direction is RTL. */ +#onboarding-tour-tor-security-update-8-5-page > .onboarding-tour-content > img:dir(rtl) { + transform: scaleX(1); +} + .onboarding-tour-content > iframe { width: 100%; height: 100%; diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js index acfcd93c5cef..1326aebc9bcf 100644 --- a/browser/extensions/onboarding/content/onboarding.js +++ b/browser/extensions/onboarding/content/onboarding.js @@ -51,17 +51,6 @@ function createOnboardingTourDescription(div, title, description) { }
/** - * Helper function to insert a prefix above the tour description. - */ -function addOnboardingTourPrefix(section, l10nId) { - let doc = section.ownerDocument; - let div = doc.createElement("div"); - div.className = "onboarding-tour-description-prefix"; - div.setAttribute("data-l10n-id", l10nId); - section.insertBefore(div, section.firstChild); // Insert as first child. -} - -/** * Helper function to create the tour content UI element. */ function createOnboardingTourContent(div, imageSrc) { @@ -189,11 +178,18 @@ var onboardingTourset = { "security": { id: "onboarding-tour-tor-security", tourNameId: "onboarding.tour-tor-security", + highlightId: "onboarding.tour-tor-update.prefix-new", getPage(win) { let div = win.document.createElement("div");
- createOnboardingTourDescription(div, + let desc = createOnboardingTourDescription(div, "onboarding.tour-tor-security.title", "onboarding.tour-tor-security.description"); + let additionalDesc = win.document.createElement("p"); + additionalDesc.className = "onboarding-tour-description-suffix"; + additionalDesc.setAttribute("data-l10n-id", + "onboarding.tour-tor-security.description-suffix"); + desc.appendChild(additionalDesc); + createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-security.png"); let btnContainer = createOnboardingTourButton(div, "onboarding-tour-tor-security-button", "onboarding.tour-tor-security-level.button"); @@ -244,13 +240,13 @@ var onboardingTourset = { "toolbar-update-8.5": { id: "onboarding-tour-tor-toolbar-update-8-5", tourNameId: "onboarding.tour-tor-toolbar", + highlightId: "onboarding.tour-tor-update.prefix-updated", instantComplete: true, getPage(win) { let div = win.document.createElement("div");
let desc = createOnboardingTourDescription(div, "onboarding.tour-tor-toolbar-update-8.5.title", "onboarding.tour-tor-toolbar-update-8.5.description"); - addOnboardingTourPrefix(desc, "onboarding.tour-tor-update.prefix-updated");
createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-toolbar-layout.png"); createOnboardingTourButton(div, @@ -262,12 +258,12 @@ var onboardingTourset = { "security-update-8.5": { id: "onboarding-tour-tor-security-update-8-5", tourNameId: "onboarding.tour-tor-security", + highlightId: "onboarding.tour-tor-update.prefix-new", getPage(win) { let div = win.document.createElement("div");
let desc = createOnboardingTourDescription(div, "onboarding.tour-tor-security-update-8.5.title", "onboarding.tour-tor-security-update-8.5.description"); - addOnboardingTourPrefix(desc, "onboarding.tour-tor-update.prefix-new");
createOnboardingTourContent(div, "resource://onboarding/img/figure_tor-security-level.png"); let btnContainer = createOnboardingTourButton(div, @@ -1777,7 +1773,17 @@ class Onboarding { let tourPanelId = `${tour.id}-page`; tab.setAttribute("aria-controls", tourPanelId);
+ if (tour.highlightId) { + // Add [New] or [Updated] text after this navigation item to draw + // attention to it. + let highlight = this._window.document.createElement("span"); + highlight.className = "onboarding-tour-description-highlight"; + highlight.textContent = this._bundle.GetStringFromName(tour.highlightId); + tab.appendChild(highlight); + } + li.appendChild(tab); + itemsFrag.appendChild(li); // Dynamically create tour pages let div = tour.getPage(this._window, this._bundle);