Bug 41303: Implement 2022 Year End Campaign look in about:tor

tor-browser#41303 (closed)

requested review from @richard

assigned to @henry

@richard This is in draft right now because it is not near complete. However, I just wanted to check before I do all the styling and localization, if this is close to what you have in mind.

Specifically:

1. Hiding the feature behind the "isYEC" class that gets added to the body if Date.now() is within the campaign dates.
2. Should I be using UTC for the start and end times, like in the patch, or a local time using new Date? If we're using UTC, what hour should I set?
3. Do we want to hide the campaign banner if there is an update using hideIfHasBeenUpdated?
4. The original page generally lacks structural semantics, which we probably want to add at some point. But for now, should I hold off on using semantic HTML (header and h1) to keep it in line with the current approach?

added 3 commits

• 99014349...d8db5443 - 2 commits from branch tpo/applications:maint-11.5
• 417c4f4a - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

added 1 commit

• 695663d3 - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

@richard This is what I have so far.

I'll come back to this on monday to tweak stuff, to address my TODOs and to add the fonts, but let me know if this is still the correct approach.

I'm attaching an image to show what this currently looks like with different text lengths (for other locales). I think this works quite well, but let me know if there should be some different alignments.

mentioned in issue tor-browser#41302 (closed)

changed the description

added 1 commit

• 73e0a01a - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

Changes

• Updated the structure and CSS to be simpler.
• Added some CSS comments.
• Added fonts. I compressed the files into a woff2 format and then used base64. Using woff2 saved about 250kB. The base64 format vs the files cost ~40kB so it seems fine to use this to get around the security policy that blocks the font "resource:".

Screenshots with the current patch

The screenshot doesn't align up pixel-for-pixel with the mock up. But the mock ups had scaled some of the images. Recommendations for pixel tweaks are welcome :)

NOTE: the non-en-US ones are just mock ups by replacing the text in the DOM inspector.

@duncan @nicob We may want to just use the fallback font-face by default rather than mixing the supported monospace glyphs with the unsupported utf8 glyphs (see the arabic and cyrillic 'Your donation wlil be matched...' message).

@henry it looks like the vertical spacing is slightly off (for English at least) in comparison to @nicob's mockups tor-browser#41303 (comment 2836454)

added 1 commit

• 492d1948 - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

Added the license for the fonts, changed the focus outline as per tor-browser#41303 (comment 2837695), tweaked the spacing by 5px values and reduced the letter spacing in the headings.

This is a screenshot of what it now produces, overlayed with the screenshot from figma on top. Note that the figma meagphone image is scaled down. To accommodate the larger size I gave the megaphone image more space in the bottom left corner since I figured we want the magaphone part to align with the text. The donate text has to be slightly moved down as well.

mentioned in issue tpo/web/tpo#324 (closed)

added 1 commit

• 4364a8ae - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

Added monospace and sans-serif fallback fonts.

Also raised the sub-headings up so it looks better in locales with less-tall scripts.

Again, mocking other locales by just replacing the text content:

approved this merge request

added 1 commit

• e7b5fe6f - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

Just need the final URL and dates, then I'll mark this as ready.

mentioned in issue tpo/web/lego#52 (closed)

added 1 commit

• d0ad5655 - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

added 1 commit

• 2e235c1a - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

added 1 commit

• 176a6680 - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

added 1 commit

• 316da7e0 - Bug 41303: Implement 2022 Year End Campaign look in about:tor

Compare with previous version

Lgtm! The only problem, not dependent on this change, but probably an old thing, is that we might reverse the arrow of the search (with a transform: scale(-1, 1); on the button).

I'm waiting for a feedback.

resolved all threads

marked this merge request as ready

resolved all threads

merged

mentioned in issue tor-browser#41303 (closed)