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
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:
| ... | ... | @@ -524,6 +524,7 @@ let JSWINDOWACTORS = { |
| 524 | 524 | DOMContentLoaded: {},
|
| 525 | 525 | L10nMutationsFinished: {},
|
| 526 | 526 | SubmitSearchOnionize: { wantUntrusted: true },
|
| 527 | + SurveyDismissed: { wantUntrusted: true },
|
|
| 527 | 528 | },
|
| 528 | 529 | },
|
| 529 | 530 |
| ... | ... | @@ -16,6 +16,10 @@ export class AboutTorChild extends JSWindowActorChild { |
| 16 | 16 | case "SubmitSearchOnionize":
|
| 17 | 17 | this.sendAsyncMessage("AboutTor:SetSearchOnionize", !!event.detail);
|
| 18 | 18 | break;
|
| 19 | + case "SurveyDismissed":
|
|
| 20 | + // event.detail is the survey version.
|
|
| 21 | + this.sendAsyncMessage("AboutTor:SurveyDismissed", event.detail);
|
|
| 22 | + break;
|
|
| 19 | 23 | case "L10nMutationsFinished":
|
| 20 | 24 | // Pass on chrome-only event for completed localization to content.
|
| 21 | 25 | this.contentWindow.dispatchEvent(
|
| ... | ... | @@ -13,6 +13,8 @@ ChromeUtils.defineESModuleGetters(lazy, { |
| 13 | 13 | export class AboutTorParent extends JSWindowActorParent {
|
| 14 | 14 | receiveMessage(message) {
|
| 15 | 15 | const onionizePref = "torbrowser.homepage.search.onionize";
|
| 16 | + const surveyDismissVersionPref =
|
|
| 17 | + "torbrowser.homepage.survey.dismiss_version";
|
|
| 16 | 18 | switch (message.name) {
|
| 17 | 19 | case "AboutTor:GetInitialData":
|
| 18 | 20 | return Promise.resolve({
|
| ... | ... | @@ -20,10 +22,26 @@ export class AboutTorParent extends JSWindowActorParent { |
| 20 | 22 | messageData: lazy.AboutTorMessage.getNext(),
|
| 21 | 23 | isStable: AppConstants.MOZ_UPDATE_CHANNEL === "release",
|
| 22 | 24 | searchOnionize: Services.prefs.getBoolPref(onionizePref, false),
|
| 25 | + surveyDismissVersion: Services.prefs.getIntPref(
|
|
| 26 | + surveyDismissVersionPref,
|
|
| 27 | + 0
|
|
| 28 | + ),
|
|
| 23 | 29 | });
|
| 24 | 30 | case "AboutTor:SetSearchOnionize":
|
| 25 | 31 | Services.prefs.setBoolPref(onionizePref, message.data);
|
| 26 | 32 | break;
|
| 33 | + case "AboutTor:SurveyDismissed":
|
|
| 34 | + // The message.data contains the version of the current survey.
|
|
| 35 | + // Rather than introduce a new preference for each survey campaign we
|
|
| 36 | + // reuse the same integer preference and increase its value every time
|
|
| 37 | + // a new version of the survey is shown and dismissed by the user.
|
|
| 38 | + // I.e. if the preference value is 2, we will not show survey version 2
|
|
| 39 | + // but will show survey version 3 or higher when they are introduced.
|
|
| 40 | + // It should be safe to overwrite the value since we do not expect more
|
|
| 41 | + // than one active survey campaign at any given time, nor do we expect
|
|
| 42 | + // the version value to decrease.
|
|
| 43 | + Services.prefs.setIntPref(surveyDismissVersionPref, message.data);
|
|
| 44 | + break;
|
|
| 27 | 45 | }
|
| 28 | 46 | return undefined;
|
| 29 | 47 | }
|
| 1 | +<!-- FROM https://github.com/twitter/twemoji
|
|
| 2 | + - licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/ -->
|
|
| 3 | +<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> |
| ... | ... | @@ -13,6 +13,7 @@ body { |
| 13 | 13 | "tor-check tor-check tor-check" auto
|
| 14 | 14 | ". form ." min-content
|
| 15 | 15 | "message message message" auto
|
| 16 | + "survey survey survey" auto
|
|
| 16 | 17 | /* End space: unfilled.
|
| 17 | 18 | * Reserve 150px for background image.
|
| 18 | 19 | * 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 { |
| 58 | 59 | |
| 59 | 60 | #tor-check {
|
| 60 | 61 | grid-area: tor-check;
|
| 61 | - max-width: var(--form-max-width);
|
|
| 62 | - box-sizing: border-box;
|
|
| 63 | 62 | display: flex;
|
| 64 | 63 | gap: 10px;
|
| 65 | 64 | align-items: center;
|
| 66 | 65 | padding-inline: 23px;
|
| 67 | 66 | padding-block: 11px;
|
| 68 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 69 | 67 | border-radius: 8px;
|
| 70 | - background-color: var(--in-content-box-info-background);
|
|
| 71 | 68 | margin-block-start: 0;
|
| 72 | 69 | margin-block-end: 30px;
|
| 73 | 70 | }
|
| 74 | 71 | |
| 72 | +.tor-home-box {
|
|
| 73 | + border: 1px solid var(--in-content-box-border-color);
|
|
| 74 | + background-color: var(--in-content-box-info-background);
|
|
| 75 | + max-width: var(--form-max-width);
|
|
| 76 | + width: -moz-available;
|
|
| 77 | + box-sizing: border-box;
|
|
| 78 | +}
|
|
| 79 | + |
|
| 75 | 80 | body:not(.show-tor-check) #tor-check {
|
| 76 | 81 | display: none;
|
| 77 | 82 | }
|
| ... | ... | @@ -92,8 +97,7 @@ body:not(.show-tor-check) #tor-check { |
| 92 | 97 | grid-area: message;
|
| 93 | 98 | font-weight: 400;
|
| 94 | 99 | text-align: center;
|
| 95 | - margin-block-start: 1.6em;
|
|
| 96 | - margin-block-end: 1em;
|
|
| 100 | + margin-block: 1.6em;
|
|
| 97 | 101 | }
|
| 98 | 102 | |
| 99 | 103 | .message-emoji {
|
| ... | ... | @@ -173,6 +177,68 @@ body:not(.show-tor-check) #tor-check { |
| 173 | 177 | margin-inline-start: 0.5em;
|
| 174 | 178 | }
|
| 175 | 179 | |
| 180 | +#survey {
|
|
| 181 | + grid-area: survey;
|
|
| 182 | + display: grid;
|
|
| 183 | + grid-template:
|
|
| 184 | + "icon heading close" min-content
|
|
| 185 | + "icon body close" auto
|
|
| 186 | + ". buttons buttons" min-content
|
|
| 187 | + / min-content 1fr min-content;
|
|
| 188 | + border-radius: 4px;
|
|
| 189 | + /* Remove 1px from padding for border. */
|
|
| 190 | + padding-block: 3px 11px;
|
|
| 191 | + padding-inline: 15px 3px;
|
|
| 192 | + gap: 8px;
|
|
| 193 | + margin-block-end: 1.6em;
|
|
| 194 | +}
|
|
| 195 | + |
|
| 196 | +body:not(.show-survey) #survey {
|
|
| 197 | + display: none;
|
|
| 198 | +}
|
|
| 199 | + |
|
| 200 | +#survey > * {
|
|
| 201 | + margin: 0;
|
|
| 202 | +}
|
|
| 203 | + |
|
| 204 | +#survey-icon {
|
|
| 205 | + grid-area: icon;
|
|
| 206 | + width: 24px;
|
|
| 207 | + height: 24px;
|
|
| 208 | + padding: 8px;
|
|
| 209 | + border-radius: 20px;
|
|
| 210 | +}
|
|
| 211 | + |
|
| 212 | +#survey-heading {
|
|
| 213 | + grid-area: heading;
|
|
| 214 | + font-size: inherit;
|
|
| 215 | +}
|
|
| 216 | + |
|
| 217 | +#survey-icon,
|
|
| 218 | +#survey-heading {
|
|
| 219 | + margin-block-start: 8px;
|
|
| 220 | +}
|
|
| 221 | + |
|
| 222 | +#survey-body {
|
|
| 223 | + grid-area: body;
|
|
| 224 | + margin-block-end: 8px;
|
|
| 225 | +}
|
|
| 226 | + |
|
| 227 | +#survey-buttons {
|
|
| 228 | + grid-area: buttons;
|
|
| 229 | + display: flex;
|
|
| 230 | + gap: 8px;
|
|
| 231 | +}
|
|
| 232 | + |
|
| 233 | +#survey-buttons > * {
|
|
| 234 | + flex: 0 0 auto;
|
|
| 235 | + margin: 0;
|
|
| 236 | +}
|
|
| 237 | + |
|
| 238 | +#survey-close {
|
|
| 239 | + grid-area: close;
|
|
| 240 | +}
|
|
| 241 | + |
|
| 176 | 242 | @media not ((prefers-contrast) or (forced-colors)) {
|
| 177 | 243 | /* Force the page to follow the same Tor theme, regardless of
|
| 178 | 244 | * prefers-color-scheme. */
|
| ... | ... | @@ -196,6 +262,13 @@ body:not(.show-tor-check) #tor-check { |
| 196 | 262 | body > :not(#search-form) {
|
| 197 | 263 | /* Same as --in-content-page-color when "prefers-color-scheme: dark" */
|
| 198 | 264 | color: var(--color-gray-05);
|
| 265 | + --button-text-color: currentColor;
|
|
| 266 | + --in-content-button-text-color: var(--button-text-color);
|
|
| 267 | + --in-content-button-text-color-hover: var(--button-text-color);
|
|
| 268 | + --in-content-button-text-color-active: var(--button-text-color);
|
|
| 269 | + --button-text-color-ghost: var(--button-text-color);
|
|
| 270 | + --button-text-color-ghost-hover: var(--button-text-color);
|
|
| 271 | + --button-text-color-ghost-active: var(--button-text-color);
|
|
| 199 | 272 | --link-color: var(--tor-link-color-dark);
|
| 200 | 273 | --link-color-hover: var(--tor-link-color-hover-dark);
|
| 201 | 274 | --link-color-active: var(--tor-link-color-active-dark);
|
| ... | ... | @@ -234,4 +307,20 @@ body:not(.show-tor-check) #tor-check { |
| 234 | 307 | #search-form.onionized-search #onionize-toggle {
|
| 235 | 308 | color: var(--tor-link-color-light);
|
| 236 | 309 | }
|
| 310 | + |
|
| 311 | + #survey {
|
|
| 312 | + background-color: #3d1559;
|
|
| 313 | + border-color: transparent;
|
|
| 314 | + }
|
|
| 315 | + |
|
| 316 | + #survey-icon {
|
|
| 317 | + background-color: #00000040;
|
|
| 318 | + }
|
|
| 319 | + |
|
| 320 | + #survey-launch {
|
|
| 321 | + color: var(--color-gray-100);
|
|
| 322 | + --in-content-primary-button-background: var(--tor-button-background-color-dark);
|
|
| 323 | + --in-content-primary-button-background-hover: var(--tor-button-background-color-hover-dark);
|
|
| 324 | + --in-content-primary-button-background-active: var(--tor-button-background-color-active-dark);
|
|
| 325 | + }
|
|
| 237 | 326 | } |
| ... | ... | @@ -22,6 +22,10 @@ |
| 22 | 22 | <link rel="localization" href="browser/newtab/newtab.ftl" />
|
| 23 | 23 | <link rel="localization" href="toolkit/global/tor-browser.ftl" />
|
| 24 | 24 | |
| 25 | + <script
|
|
| 26 | + type="module"
|
|
| 27 | + src="chrome://global/content/elements/moz-button.mjs"
|
|
| 28 | + ></script>
|
|
| 25 | 29 | <script
|
| 26 | 30 | type="module"
|
| 27 | 31 | src="chrome://global/content/elements/moz-toggle.mjs"
|
| ... | ... | @@ -44,7 +48,7 @@ |
| 44 | 48 | data-l10n-id="tor-browser-home-heading-testing"
|
| 45 | 49 | ></span>
|
| 46 | 50 | </h1>
|
| 47 | - <p id="tor-check">
|
|
| 51 | + <p id="tor-check" class="tor-home-box">
|
|
| 48 | 52 | <img
|
| 49 | 53 | id="tor-check-icon"
|
| 50 | 54 | alt=""
|
| ... | ... | @@ -132,5 +136,26 @@ |
| 132 | 136 | ></a>
|
| 133 | 137 | </span>
|
| 134 | 138 | </p>
|
| 139 | + <!-- Survey element, initially used for tor-browser#43504. -->
|
|
| 140 | + <article id="survey" class="tor-home-box" aria-labelledby="survey-heading">
|
|
| 141 | + <img
|
|
| 142 | + id="survey-icon"
|
|
| 143 | + alt=""
|
|
| 144 | + src="chrome://browser/content/abouttor/1f44b-waving-hand.svg"
|
|
| 145 | + />
|
|
| 146 | + <h2 id="survey-heading"></h2>
|
|
| 147 | + <p id="survey-body"></p>
|
|
| 148 | + <div id="survey-buttons">
|
|
| 149 | + <button id="survey-launch" class="primary"></button>
|
|
| 150 | + <button id="survey-dismiss"></button>
|
|
| 151 | + </div>
|
|
| 152 | + <moz-button
|
|
| 153 | + id="survey-close"
|
|
| 154 | + type="icon ghost"
|
|
| 155 | + class="close"
|
|
| 156 | + size="16"
|
|
| 157 | + iconSrc="chrome://global/skin/icons/close.svg"
|
|
| 158 | + ></moz-button>
|
|
| 159 | + </article>
|
|
| 135 | 160 | </body>
|
| 136 | 161 | </html> |
| ... | ... | @@ -167,14 +167,241 @@ const MessageArea = { |
| 167 | 167 | },
|
| 168 | 168 | };
|
| 169 | 169 | |
| 170 | +/**
|
|
| 171 | + * A reusable area for surveys.
|
|
| 172 | + *
|
|
| 173 | + * Initially used for tor-browser#43504.
|
|
| 174 | + */
|
|
| 175 | +const SurveyArea = {
|
|
| 176 | + /**
|
|
| 177 | + * The current version of the survey.
|
|
| 178 | + *
|
|
| 179 | + * Should be increased every time we start a new survey campaign.
|
|
| 180 | + *
|
|
| 181 | + * @type {integer}
|
|
| 182 | + */
|
|
| 183 | + _version: 1,
|
|
| 184 | + |
|
| 185 | + /**
|
|
| 186 | + * The date to start showing the survey.
|
|
| 187 | + *
|
|
| 188 | + * @type {integer}
|
|
| 189 | + */
|
|
| 190 | + _startDate: Date.UTC(2025, 3, 14, 12), // 2025 April 14th, 12:00.
|
|
| 191 | + |
|
| 192 | + /**
|
|
| 193 | + * The date to stop showing the current survey.
|
|
| 194 | + *
|
|
| 195 | + * @type {integer}
|
|
| 196 | + */
|
|
| 197 | + _endDate: Date.UTC(2025, 3, 28), // 2025 April 28th, 00:00.
|
|
| 198 | + |
|
| 199 | + /**
|
|
| 200 | + * The survey URL.
|
|
| 201 | + *
|
|
| 202 | + * @type {string}
|
|
| 203 | + */
|
|
| 204 | + _urlBase: "https://survey.torproject.org/index.php/923269",
|
|
| 205 | + |
|
| 206 | + /**
|
|
| 207 | + * @typedef {object} SurveyLocaleData
|
|
| 208 | + *
|
|
| 209 | + * Locale-specific data for the survey.
|
|
| 210 | + *
|
|
| 211 | + * @property {string[]} browserLocales - The browser locales this should match
|
|
| 212 | + * with. The first locale should match the locale of the strings.
|
|
| 213 | + * @property {string} urlCode - The language code to pass to the survey URL.
|
|
| 214 | + * @property {string} dir - The direction of the locale.
|
|
| 215 | + * @property {object} strings - The strings to use for the survey banner.
|
|
| 216 | + */
|
|
| 217 | + |
|
| 218 | + /**
|
|
| 219 | + * The data for the selected locale.
|
|
| 220 | + *
|
|
| 221 | + * @type {SurveyLocaleData}
|
|
| 222 | + */
|
|
| 223 | + _localeData: null,
|
|
| 224 | + |
|
| 225 | + /**
|
|
| 226 | + * The data for each locale that is supported.
|
|
| 227 | + *
|
|
| 228 | + * The first entry is the default.
|
|
| 229 | + *
|
|
| 230 | + * @type {SurveyLocaleData[]}
|
|
| 231 | + */
|
|
| 232 | + _localeDataSet: [
|
|
| 233 | + {
|
|
| 234 | + browserLocales: ["en-US"],
|
|
| 235 | + dir: "ltr",
|
|
| 236 | + urlCode: "en",
|
|
| 237 | + strings: {
|
|
| 238 | + heading: "We’d love your feedback",
|
|
| 239 | + body: "Help us improve Tor Browser by completing this 10-minute survey.",
|
|
| 240 | + launch: "Launch the survey",
|
|
| 241 | + dismiss: "Not now",
|
|
| 242 | + close: "Close",
|
|
| 243 | + },
|
|
| 244 | + },
|
|
| 245 | + {
|
|
| 246 | + browserLocales: ["es-ES"],
|
|
| 247 | + dir: "ltr",
|
|
| 248 | + urlCode: "es",
|
|
| 249 | + strings: {
|
|
| 250 | + heading: "Danos tu opinión",
|
|
| 251 | + body: "Ayúdanos a mejorar el Navegador Tor completando esta encuesta de 10 minutos.",
|
|
| 252 | + launch: "Iniciar la encuesta",
|
|
| 253 | + dismiss: "Más adelante",
|
|
| 254 | + close: "Cerrar",
|
|
| 255 | + },
|
|
| 256 | + },
|
|
| 257 | + {
|
|
| 258 | + browserLocales: ["ru"],
|
|
| 259 | + dir: "ltr",
|
|
| 260 | + urlCode: "ru",
|
|
| 261 | + strings: {
|
|
| 262 | + heading: "Мы будем рады вашим отзывам",
|
|
| 263 | + body: "Помогите нам улучшить браузер Tor, пройдя 10-минутный опрос.",
|
|
| 264 | + launch: "Начать опрос",
|
|
| 265 | + dismiss: "Не сейчас",
|
|
| 266 | + close: "Закрыть",
|
|
| 267 | + },
|
|
| 268 | + },
|
|
| 269 | + {
|
|
| 270 | + browserLocales: ["fr"],
|
|
| 271 | + dir: "ltr",
|
|
| 272 | + urlCode: "fr",
|
|
| 273 | + strings: {
|
|
| 274 | + heading: "Nous serions ravis d’avoir votre avis !",
|
|
| 275 | + body: "Aidez-nous à améliorer le navigateur Tor en répondant à cette enquête de 10 minutes.",
|
|
| 276 | + launch: "Lancer l'enquête",
|
|
| 277 | + dismiss: "Pas maintenant",
|
|
| 278 | + close: "Fermer",
|
|
| 279 | + },
|
|
| 280 | + },
|
|
| 281 | + {
|
|
| 282 | + // Also show this pt-BR banner for the pt-PT browser locale.
|
|
| 283 | + browserLocales: ["pt-BR", "pt-PT"],
|
|
| 284 | + dir: "ltr",
|
|
| 285 | + urlCode: "pt-BR",
|
|
| 286 | + strings: {
|
|
| 287 | + heading: "Adoraríamos ouvir sua opinião",
|
|
| 288 | + body: "Ajude-nos a melhorar o Navegador Tor respondendo a esta pesquisa de 10 minutos.",
|
|
| 289 | + launch: "Iniciar a pesquisa",
|
|
| 290 | + dismiss: "Mais tarde",
|
|
| 291 | + close: "Fechar",
|
|
| 292 | + },
|
|
| 293 | + },
|
|
| 294 | + ],
|
|
| 295 | + |
|
| 296 | + /**
|
|
| 297 | + * Initialize the survey area.
|
|
| 298 | + */
|
|
| 299 | + init() {
|
|
| 300 | + document.getElementById("survey-launch").addEventListener("click", () => {
|
|
| 301 | + if (!this._localeData) {
|
|
| 302 | + return;
|
|
| 303 | + }
|
|
| 304 | + const url = new URL(this._urlBase);
|
|
| 305 | + url.searchParams.append("lang", this._localeData.urlCode);
|
|
| 306 | + open(url.href);
|
|
| 307 | + });
|
|
| 308 | + document.getElementById("survey-close").addEventListener("click", () => {
|
|
| 309 | + this._hide();
|
|
| 310 | + });
|
|
| 311 | + document.getElementById("survey-dismiss").addEventListener("click", () => {
|
|
| 312 | + this._hide();
|
|
| 313 | + });
|
|
| 314 | + },
|
|
| 315 | + |
|
| 316 | + /**
|
|
| 317 | + * Permanently hide this survey.
|
|
| 318 | + */
|
|
| 319 | + _hide() {
|
|
| 320 | + document.body.classList.remove("show-survey");
|
|
| 321 | + // Move focus to the search input.
|
|
| 322 | + document.getElementById("search-input").focus();
|
|
| 323 | + |
|
| 324 | + dispatchEvent(
|
|
| 325 | + new CustomEvent("SurveyDismissed", {
|
|
| 326 | + // We pass in the current survey version to record the *latest*
|
|
| 327 | + // version that the user has dismissed. This will overwrite any
|
|
| 328 | + // previous versions.
|
|
| 329 | + detail: this._version,
|
|
| 330 | + bubbles: true,
|
|
| 331 | + })
|
|
| 332 | + );
|
|
| 333 | + },
|
|
| 334 | + |
|
| 335 | + /**
|
|
| 336 | + * Decide whether to show the survey.
|
|
| 337 | + *
|
|
| 338 | + * @param {integer} dismissVersion - The latest version of survey that the
|
|
| 339 | + * user has already dismissed.
|
|
| 340 | + * @param {boolean} isStable - Whether this is the stable release of Tor
|
|
| 341 | + * Browser.
|
|
| 342 | + */
|
|
| 343 | + potentiallyShow(dismissVersion, isStable) {
|
|
| 344 | + const now = Date.now();
|
|
| 345 | + if (
|
|
| 346 | + now < this._startDate ||
|
|
| 347 | + now >= this._endDate ||
|
|
| 348 | + // The user has already dismissed this version of the survey before:
|
|
| 349 | + dismissVersion >= this._version ||
|
|
| 350 | + !isStable
|
|
| 351 | + ) {
|
|
| 352 | + // Don't show the survey.
|
|
| 353 | + return;
|
|
| 354 | + }
|
|
| 355 | + |
|
| 356 | + // Determine the survey locale based on the about:tor locale.
|
|
| 357 | + // NOTE: We do not user document.l10n to translate the survey banner.
|
|
| 358 | + // Instead we only translate the banner into a limited set of locales that
|
|
| 359 | + // match the languages that the survey itself supports. This should match
|
|
| 360 | + // the language of the survey when it is opened by the user.
|
|
| 361 | + const pageLocale = document.documentElement.getAttribute("lang");
|
|
| 362 | + for (const localeData of this._localeDataSet) {
|
|
| 363 | + if (localeData.browserLocales.includes(pageLocale)) {
|
|
| 364 | + this._localeData = localeData;
|
|
| 365 | + break;
|
|
| 366 | + }
|
|
| 367 | + }
|
|
| 368 | + if (!this._localeData) {
|
|
| 369 | + // Show the default en-US banner.
|
|
| 370 | + this._localeData = this._localeDataSet[0];
|
|
| 371 | + }
|
|
| 372 | + |
|
| 373 | + // Make sure the survey's lang and dir attributes match the chosen locale.
|
|
| 374 | + const surveyEl = document.getElementById("survey");
|
|
| 375 | + surveyEl.setAttribute("lang", this._localeData.browserLocales[0]);
|
|
| 376 | + surveyEl.setAttribute("dir", this._localeData.dir);
|
|
| 377 | + |
|
| 378 | + const { heading, body, launch, dismiss, close } = this._localeData.strings;
|
|
| 379 | + |
|
| 380 | + document.getElementById("survey-heading").textContent = heading;
|
|
| 381 | + document.getElementById("survey-body").textContent = body;
|
|
| 382 | + document.getElementById("survey-launch").textContent = launch;
|
|
| 383 | + document.getElementById("survey-dismiss").textContent = dismiss;
|
|
| 384 | + document.getElementById("survey-close").setAttribute("title", close);
|
|
| 385 | + |
|
| 386 | + document.body.classList.add("show-survey");
|
|
| 387 | + },
|
|
| 388 | +};
|
|
| 389 | + |
|
| 170 | 390 | window.addEventListener("DOMContentLoaded", () => {
|
| 171 | 391 | SearchWidget.init();
|
| 172 | 392 | MessageArea.init();
|
| 393 | + SurveyArea.init();
|
|
| 173 | 394 | });
|
| 174 | 395 | |
| 175 | 396 | window.addEventListener("InitialData", event => {
|
| 176 | - const { torConnectEnabled, isStable, searchOnionize, messageData } =
|
|
| 177 | - event.detail;
|
|
| 397 | + const {
|
|
| 398 | + torConnectEnabled,
|
|
| 399 | + isStable,
|
|
| 400 | + searchOnionize,
|
|
| 401 | + messageData,
|
|
| 402 | + surveyDismissVersion,
|
|
| 403 | + } = event.detail;
|
|
| 178 | 404 | SearchWidget.setOnionizeState(!!searchOnionize);
|
| 179 | 405 | MessageArea.setMessageData(messageData, !!isStable, !!torConnectEnabled);
|
| 406 | + SurveyArea.potentiallyShow(surveyDismissVersion, isStable);
|
|
| 180 | 407 | }); |
| ... | ... | @@ -3,6 +3,7 @@ browser.jar: |
| 3 | 3 | content/browser/abouttor/aboutTor.js (content/aboutTor.js)
|
| 4 | 4 | content/browser/abouttor/aboutTor.html (content/aboutTor.html)
|
| 5 | 5 | content/browser/abouttor/dax-logo.svg (content/dax-logo.svg)
|
| 6 | + content/browser/abouttor/1f44b-waving-hand.svg (content/1f44b-waving-hand.svg)
|
|
| 6 | 7 | content/browser/abouttor/1f4e3-megaphone.svg (content/1f4e3-megaphone.svg)
|
| 7 | 8 | content/browser/abouttor/26a1-high-voltage.svg (content/26a1-high-voltage.svg)
|
| 8 | 9 | content/browser/abouttor/2728-sparkles.svg (content/2728-sparkles.svg)
|