morgan pushed to branch tor-browser-115.21.0esr-13.5-1 at The Tor Project / Applications / Tor Browser Commits: 2b5edd06 by Henry Wilkes at 2025-03-11T17:31:56+00:00 fixup! Bug 7494: Create local home page for TBB. TB 43489: Add a survey banner in about:tor. Backport to 13.5. - - - - - 8 changed files: - browser/components/BrowserGlue.sys.mjs - browser/components/abouttor/AboutTorChild.sys.mjs - browser/components/abouttor/AboutTorParent.sys.mjs - + browser/components/abouttor/content/1f44b-waving-hand.svg - browser/components/abouttor/content/aboutTor.css - browser/components/abouttor/content/aboutTor.html - browser/components/abouttor/content/aboutTor.js - browser/components/abouttor/jar.mn Changes: ===================================== browser/components/BrowserGlue.sys.mjs ===================================== @@ -502,6 +502,7 @@ let JSWINDOWACTORS = { events: { DOMContentLoaded: {}, SubmitSearchOnionize: { wantUntrusted: true }, + SurveyDismissed: { wantUntrusted: true }, }, }, ===================================== browser/components/abouttor/AboutTorChild.sys.mjs ===================================== @@ -26,6 +26,10 @@ export class AboutTorChild extends JSWindowActorChild { case "SubmitSearchOnionize": this.sendAsyncMessage("AboutTor:SetSearchOnionize", !!event.detail); break; + case "SurveyDismissed": + // event.detail is the survey version. + this.sendAsyncMessage("AboutTor:SurveyDismissed", event.detail); + break; } } } ===================================== browser/components/abouttor/AboutTorParent.sys.mjs ===================================== @@ -10,6 +10,8 @@ ChromeUtils.defineESModuleGetters(lazy, { export class AboutTorParent extends JSWindowActorParent { receiveMessage(message) { const onionizePref = "torbrowser.homepage.search.onionize"; + const surveyDismissVersionPref = + "torbrowser.homepage.survey.dismiss_version"; switch (message.name) { case "AboutTor:GetInitialData": return Promise.resolve({ @@ -17,10 +19,26 @@ export class AboutTorParent extends JSWindowActorParent { messageData: lazy.AboutTorMessage.getNext(), isStable: AppConstants.MOZ_UPDATE_CHANNEL === "release", searchOnionize: Services.prefs.getBoolPref(onionizePref, false), + surveyDismissVersion: Services.prefs.getIntPref( + surveyDismissVersionPref, + 0 + ), }); case "AboutTor:SetSearchOnionize": Services.prefs.setBoolPref(onionizePref, message.data); break; + case "AboutTor:SurveyDismissed": + // The message.data contains the version of the current survey. + // Rather than introduce a new preference for each survey campaign we + // reuse the same integer preference and increase its value every time + // a new version of the survey is shown and dismissed by the user. + // I.e. if the preference value is 2, we will not show survey version 2 + // but will show survey version 3 or higher when they are introduced. + // It should be safe to overwrite the value since we do not expect more + // than one active survey campaign at any given time, nor do we expect + // the version value to decrease. + Services.prefs.setIntPref(surveyDismissVersionPref, message.data); + break; } return undefined; } ===================================== browser/components/abouttor/content/1f44b-waving-hand.svg ===================================== @@ -0,0 +1,3 @@ +<!-- FROM https://github.com/twitter/twemoji + - licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/ --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#EF9645" d="M4.861 9.147c.94-.657 2.357-.531 3.201.166l-.968-1.407c-.779-1.111-.5-2.313.612-3.093 1.112-.777 4.263 1.312 4.263 1.312-.786-1.122-.639-2.544.483-3.331 1.122-.784 2.67-.513 3.456.611l10.42 14.72L25 31l-11.083-4.042L4.25 12.625c-.793-1.129-.519-2.686.611-3.478z"/><path fill="#FFDC5D" d="M2.695 17.336s-1.132-1.65.519-2.781c1.649-1.131 2.78.518 2.78.518l5.251 7.658c.181-.302.379-.6.6-.894L4.557 11.21s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l6.855 9.997c.255-.208.516-.417.785-.622L7.549 6.732s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l7.947 11.589c.292-.179.581-.334.871-.498L12.238 4.729s-1.131-1.649.518-2.78c1.649-1.131 2.78.518 2.78.518l7.854 11.454 1.194 1.742c-4.948 3.394-5.419 9.779-2.592 13.902.565.825 1.39.26 1.39.26-3.393-4.949-2.357-10.51 2.592-13.903L24.515 8.62s-.545-1.924 1.378-2.47c1.924-.545 2.47 1.379 2.47 1.379l1.685 5.004c.668 1.984 1.379 3.961 2.32 5.831 2.657 5.28 1.07 11.842-3.94 15.279-5.465 3.747-12.936 2.354-16.684-3.11L2.695 17.336z"/><g fill="#5DADEC"><path d="M12 32.042C8 32.042 3.958 28 3.958 24c0-.553-.405-1-.958-1s-1.042.447-1.042 1C1.958 30 6 34.042 12 34.042c.553 0 1-.489 1-1.042s-.447-.958-1-.958z"/><path d="M7 34c-3 0-5-2-5-5 0-.553-.447-1-1-1s-1 .447-1 1c0 4 3 7 7 7 .553 0 1-.447 1-1s-.447-1-1-1zM24 2c-.552 0-1 .448-1 1s.448 1 1 1c4 0 8 3.589 8 8 0 .552.448 1 1 1s1-.448 1-1c0-5.514-4-10-10-10z"/><path d="M29 .042c-.552 0-1 .406-1 .958s.448 1.042 1 1.042c3 0 4.958 2.225 4.958 4.958 0 .552.489 1 1.042 1s.958-.448.958-1C35.958 3.163 33 .042 29 .042z"/></g></svg> ===================================== browser/components/abouttor/content/aboutTor.css ===================================== @@ -12,6 +12,7 @@ body { "tor-check tor-check tor-check" auto ". form ." min-content "message message message" auto + "survey survey survey" auto /* End space: unfilled. * Reserve 150px for background image. * NOTE: Since the body has "auto" height, the other "1fr" flex row will @@ -48,18 +49,24 @@ h1 { #tor-check { grid-area: tor-check; - max-width: var(--form-max-width); - box-sizing: border-box; display: flex; gap: 10px; align-items: center; - padding-inline: 24px; - padding-block: 12px; + padding-inline: 23px; + padding-block: 11px; border-radius: 8px; margin-block-start: 0; margin-block-end: 30px; } +.tor-home-box { + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-info-background); + max-width: var(--form-max-width); + width: -moz-available; + box-sizing: border-box; +} + body:not(.show-tor-check) #tor-check { display: none; } @@ -82,8 +89,7 @@ body:not(.show-tor-check) #tor-check { /* line-height and text-align are used when wrapping. */ line-height: 1.5; text-align: center; - margin-block-start: 1.6em; - margin-block-end: 1em; + margin-block: 1.6em; } .message-emoji { @@ -165,14 +171,101 @@ body:not(.show-tor-check) #tor-check { } +#survey { + grid-area: survey; + display: grid; + grid-template: + "icon heading close" min-content + "icon body close" auto + ". buttons buttons" min-content + / min-content 1fr min-content; + border-radius: 4px; + /* Remove 1px from padding for border. */ + padding-block: 3px 11px; + padding-inline: 15px 3px; + gap: 8px; + margin-block-end: 1.6em; +} + +body:not(.show-survey) #survey { + display: none; +} + +#survey > * { + margin: 0; +} + +#survey-icon { + grid-area: icon; + width: 24px; + height: 24px; + padding: 8px; + border-radius: 20px; +} + +#survey-heading { + grid-area: heading; + font-size: inherit; +} + +#survey-icon, +#survey-heading { + margin-block-start: 8px; +} + +#survey-body { + grid-area: body; + margin-block-end: 8px; +} + +#survey-buttons { + grid-area: buttons; + display: flex; + gap: 8px; +} + +#survey-buttons > * { + flex: 0 0 auto; + margin: 0; +} + +#survey-close { + grid-area: close; + /* Look like moz-button with "icon ghost" type. */ + color: inherit; + border: transparent; + background: transparent; + display: grid; + width: fit-content; + height: fit-content; + min-width: fit-content; + min-height: fit-content; + padding: 8px; +} + +#survey-close:enabled:hover { + color: inherit; + border: transparent; + background: var(--in-content-button-background-hover); +} + +#survey-close:enabled:hover:active { + color: inherit; + border: transparent; + background: var(--in-content-button-background-active); +} + +#survey-close img { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; +} + @media (prefers-contrast) { #search-form { border-color: var(--in-content-box-border-color); } - - #tor-check { - background-color: var(--in-content-box-info-background); - } } @media not (prefers-contrast) { @@ -187,6 +280,7 @@ body:not(.show-tor-check) #tor-check { #tor-check { background-color: #1f0333; + border-color: transparent; } body > :not(#search-form) { @@ -202,6 +296,10 @@ body:not(.show-tor-check) #tor-check { * See tor-browser#42025 */ --in-content-link-color-hover: var(--purple-40); --in-content-link-color-active: var(--purple-50); + + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-text-color-active: var(--in-content-text-color); } #search-form { @@ -231,4 +329,20 @@ body:not(.show-tor-check) #tor-check { #search-form.onionized-search #onionize-toggle { color: var(--purple-60); } + + #survey { + background-color: #3d1559; + border-color: transparent; + } + + #survey-icon { + background-color: #00000040; + } + + #survey-launch { + color: #15141a; /* --color-gray-100 */ + --in-content-primary-button-background: var(--purple-30); + --in-content-primary-button-background-hover: var(--purple-40); + --in-content-primary-button-background-active: var(--purple-50); + } } ===================================== browser/components/abouttor/content/aboutTor.html ===================================== @@ -37,7 +37,7 @@ /> <span id="tor-browser-home-heading-text"></span> </h1> - <p id="tor-check"> + <p id="tor-check" class="tor-home-box"> <img id="tor-check-icon" alt="" @@ -125,5 +125,22 @@ ></a> </span> </p> + <!-- Survey element, initially used for tor-browser#43504. --> + <article id="survey" class="tor-home-box" aria-labelledby="survey-heading"> + <img + id="survey-icon" + alt="" + src="chrome://browser/content/abouttor/1f44b-waving-hand.svg" + /> + <h2 id="survey-heading"></h2> + <p id="survey-body"></p> + <div id="survey-buttons"> + <button id="survey-launch" class="primary"></button> + <button id="survey-dismiss"></button> + </div> + <button id="survey-close"> + <img alt="" src="chrome://global/skin/icons/close.svg" /> + </button> + </article> </body> </html> ===================================== browser/components/abouttor/content/aboutTor.js ===================================== @@ -170,14 +170,241 @@ const MessageArea = { }, }; +/** + * A reusable area for surveys. + * + * Initially used for tor-browser#43504. + */ +const SurveyArea = { + /** + * The current version of the survey. + * + * Should be increased every time we start a new survey campaign. + * + * @type {integer} + */ + _version: 1, + + /** + * The date to start showing the survey. + * + * @type {integer} + */ + _startDate: Date.UTC(2025, 3, 14, 12), // 2025 April 14th, 12:00. + + /** + * The date to stop showing the current survey. + * + * @type {integer} + */ + _endDate: Date.UTC(2025, 3, 28), // 2025 April 28th, 00:00. + + /** + * The survey URL. + * + * @type {string} + */ + _urlBase: "https://survey.torproject.org/index.php/923269", + + /** + * @typedef {object} SurveyLocaleData + * + * Locale-specific data for the survey. + * + * @property {string[]} browserLocales - The browser locales this should match + * with. The first locale should match the locale of the strings. + * @property {string} urlCode - The language code to pass to the survey URL. + * @property {string} dir - The direction of the locale. + * @property {object} strings - The strings to use for the survey banner. + */ + + /** + * The data for the selected locale. + * + * @type {SurveyLocaleData} + */ + _localeData: null, + + /** + * The data for each locale that is supported. + * + * The first entry is the default. + * + * @type {SurveyLocaleData[]} + */ + _localeDataSet: [ + { + browserLocales: ["en-US"], + dir: "ltr", + urlCode: "en", + strings: { + heading: "We’d love your feedback", + body: "Help us improve Tor Browser by completing this 10-minute survey.", + launch: "Launch the survey", + dismiss: "Not now", + close: "Close", + }, + }, + { + browserLocales: ["es-ES"], + dir: "ltr", + urlCode: "es", + strings: { + heading: "Danos tu opinión", + body: "Ayúdanos a mejorar el Navegador Tor completando esta encuesta de 10 minutos.", + launch: "Iniciar la encuesta", + dismiss: "Más adelante", + close: "Cerrar", + }, + }, + { + browserLocales: ["ru"], + dir: "ltr", + urlCode: "ru", + strings: { + heading: "Мы будем рады вашим отзывам", + body: "Помогите нам улучшить браузер Tor, пройдя 10-минутный опрос.", + launch: "Начать опрос", + dismiss: "Не сейчас", + close: "Закрыть", + }, + }, + { + browserLocales: ["fr"], + dir: "ltr", + urlCode: "fr", + strings: { + heading: "Nous serions ravis d’avoir votre avis !", + body: "Aidez-nous à améliorer le navigateur Tor en répondant à cette enquête de 10 minutes.", + launch: "Lancer l'enquête", + dismiss: "Pas maintenant", + close: "Fermer", + }, + }, + { + // Also show this pt-BR banner for the pt-PT browser locale. + browserLocales: ["pt-BR", "pt-PT"], + dir: "ltr", + urlCode: "pt-BR", + strings: { + heading: "Adoraríamos ouvir sua opinião", + body: "Ajude-nos a melhorar o Navegador Tor respondendo a esta pesquisa de 10 minutos.", + launch: "Iniciar a pesquisa", + dismiss: "Mais tarde", + close: "Fechar", + }, + }, + ], + + /** + * Initialize the survey area. + */ + init() { + document.getElementById("survey-launch").addEventListener("click", () => { + if (!this._localeData) { + return; + } + const url = new URL(this._urlBase); + url.searchParams.append("lang", this._localeData.urlCode); + open(url.href); + }); + document.getElementById("survey-close").addEventListener("click", () => { + this._hide(); + }); + document.getElementById("survey-dismiss").addEventListener("click", () => { + this._hide(); + }); + }, + + /** + * Permanently hide this survey. + */ + _hide() { + document.body.classList.remove("show-survey"); + // Move focus to the search input. + document.getElementById("search-input").focus(); + + dispatchEvent( + new CustomEvent("SurveyDismissed", { + // We pass in the current survey version to record the *latest* + // version that the user has dismissed. This will overwrite any + // previous versions. + detail: this._version, + bubbles: true, + }) + ); + }, + + /** + * Decide whether to show the survey. + * + * @param {integer} dismissVersion - The latest version of survey that the + * user has already dismissed. + * @param {boolean} isStable - Whether this is the stable release of Tor + * Browser. + */ + potentiallyShow(dismissVersion, isStable) { + const now = Date.now(); + if ( + now < this._startDate || + now >= this._endDate || + // The user has already dismissed this version of the survey before: + dismissVersion >= this._version || + !isStable + ) { + // Don't show the survey. + return; + } + + // Determine the survey locale based on the about:tor locale. + // NOTE: We do not user document.l10n to translate the survey banner. + // Instead we only translate the banner into a limited set of locales that + // match the languages that the survey itself supports. This should match + // the language of the survey when it is opened by the user. + const pageLocale = document.documentElement.getAttribute("lang"); + for (const localeData of this._localeDataSet) { + if (localeData.browserLocales.includes(pageLocale)) { + this._localeData = localeData; + break; + } + } + if (!this._localeData) { + // Show the default en-US banner. + this._localeData = this._localeDataSet[0]; + } + + // Make sure the survey's lang and dir attributes match the chosen locale. + const surveyEl = document.getElementById("survey"); + surveyEl.setAttribute("lang", this._localeData.browserLocales[0]); + surveyEl.setAttribute("dir", this._localeData.dir); + + const { heading, body, launch, dismiss, close } = this._localeData.strings; + + document.getElementById("survey-heading").textContent = heading; + document.getElementById("survey-body").textContent = body; + document.getElementById("survey-launch").textContent = launch; + document.getElementById("survey-dismiss").textContent = dismiss; + document.getElementById("survey-close").setAttribute("title", close); + + document.body.classList.add("show-survey"); + }, +}; + window.addEventListener("DOMContentLoaded", () => { SearchWidget.init(); MessageArea.init(); + SurveyArea.init(); }); window.addEventListener("InitialData", event => { - const { torConnectEnabled, isStable, searchOnionize, messageData } = - event.detail; + const { + torConnectEnabled, + isStable, + searchOnionize, + messageData, + surveyDismissVersion, + } = event.detail; SearchWidget.setOnionizeState(!!searchOnionize); MessageArea.setMessageData(messageData, !!isStable, !!torConnectEnabled); + SurveyArea.potentiallyShow(surveyDismissVersion, isStable); }); ===================================== browser/components/abouttor/jar.mn ===================================== @@ -3,6 +3,7 @@ browser.jar: content/browser/abouttor/aboutTor.js (content/aboutTor.js) content/browser/abouttor/aboutTor.html (content/aboutTor.html) content/browser/abouttor/dax-logo.svg (content/dax-logo.svg) + content/browser/abouttor/1f44b-waving-hand.svg (content/1f44b-waving-hand.svg) content/browser/abouttor/1f4e3-megaphone.svg (content/1f4e3-megaphone.svg) content/browser/abouttor/26a1-high-voltage.svg (content/26a1-high-voltage.svg) content/browser/abouttor/2728-sparkles.svg (content/2728-sparkles.svg) View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/2b5edd06... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/2b5edd06... You're receiving this email because of your account on gitlab.torproject.org.
participants (1)
-
morgan (＠morgan)