morgan pushed to branch tor-browser-128.8.0esr-14.5-1 at The Tor Project / Applications / Tor Browser

Commits: dce8efc3 by Henry Wilkes at 2025-03-10T13:03:54+00:00 fixup! TB 7494: Create local home page for TBB.

TB 43489: Add a survey banner in about:tor.

- - - - -

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 ===================================== @@ -524,6 +524,7 @@ let JSWINDOWACTORS = { DOMContentLoaded: {}, L10nMutationsFinished: {}, SubmitSearchOnionize: { wantUntrusted: true }, + SurveyDismissed: { wantUntrusted: true }, }, },

===================================== browser/components/abouttor/AboutTorChild.sys.mjs ===================================== @@ -16,6 +16,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; case "L10nMutationsFinished": // Pass on chrome-only event for completed localization to content. this.contentWindow.dispatchEvent(

===================================== browser/components/abouttor/AboutTorParent.sys.mjs ===================================== @@ -13,6 +13,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({ @@ -20,10 +22,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 ===================================== @@ -13,6 +13,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 @@ -58,20 +59,24 @@ body:not(.is-testing) #tor-browser-home-heading-testing {

#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: 23px; padding-block: 11px; - border: 1px solid var(--in-content-box-border-color); border-radius: 8px; - background-color: var(--in-content-box-info-background); 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; } @@ -92,8 +97,7 @@ body:not(.show-tor-check) #tor-check { grid-area: message; font-weight: 400; text-align: center; - margin-block-start: 1.6em; - margin-block-end: 1em; + margin-block: 1.6em; }

.message-emoji { @@ -173,6 +177,68 @@ body:not(.show-tor-check) #tor-check { margin-inline-start: 0.5em; }

+#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; +} + @media not ((prefers-contrast) or (forced-colors)) { /* Force the page to follow the same Tor theme, regardless of * prefers-color-scheme. */ @@ -196,6 +262,13 @@ body:not(.show-tor-check) #tor-check { body > :not(#search-form) { /* Same as --in-content-page-color when "prefers-color-scheme: dark" */ color: var(--color-gray-05); + --button-text-color: currentColor; + --in-content-button-text-color: var(--button-text-color); + --in-content-button-text-color-hover: var(--button-text-color); + --in-content-button-text-color-active: var(--button-text-color); + --button-text-color-ghost: var(--button-text-color); + --button-text-color-ghost-hover: var(--button-text-color); + --button-text-color-ghost-active: var(--button-text-color); --link-color: var(--tor-link-color-dark); --link-color-hover: var(--tor-link-color-hover-dark); --link-color-active: var(--tor-link-color-active-dark); @@ -234,4 +307,20 @@ body:not(.show-tor-check) #tor-check { #search-form.onionized-search #onionize-toggle { color: var(--tor-link-color-light); } + + #survey { + background-color: #3d1559; + border-color: transparent; + } + + #survey-icon { + background-color: #00000040; + } + + #survey-launch { + color: var(--color-gray-100); + --in-content-primary-button-background: var(--tor-button-background-color-dark); + --in-content-primary-button-background-hover: var(--tor-button-background-color-hover-dark); + --in-content-primary-button-background-active: var(--tor-button-background-color-active-dark); + } }

===================================== browser/components/abouttor/content/aboutTor.html ===================================== @@ -22,6 +22,10 @@ <link rel="localization" href="browser/newtab/newtab.ftl" /> <link rel="localization" href="toolkit/global/tor-browser.ftl" />

+ <script + type="module" + src="chrome://global/content/elements/moz-button.mjs" + ></script> <script type="module" src="chrome://global/content/elements/moz-toggle.mjs" @@ -44,7 +48,7 @@ data-l10n-id="tor-browser-home-heading-testing" ></span> </h1> - <p id="tor-check"> + <p id="tor-check" class="tor-home-box"> <img id="tor-check-icon" alt="" @@ -132,5 +136,26 @@ ></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> + <moz-button + id="survey-close" + type="icon ghost" + class="close" + size="16" + iconSrc="chrome://global/skin/icons/close.svg" + ></moz-button> + </article> </body> </html>

===================================== browser/components/abouttor/content/aboutTor.js ===================================== @@ -167,14 +167,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/dce8efc3...