Modernize Tor Browser's new-tab page (about:tor)

Do know what would be needed for the base browser? Do we basically want what we have now with "about:tor" but with the tor branding and text removed, or is UX going to be designing mock ups for both browsers to follow?

Awesome! Yeah, there will be new mockups for each.

I haven't posted it in this ticket yet since it's not final – but I have a refreshed, stripped-back template for Tor Browser that Sponsor 131 are basing their designs on. You can preview it here: Figma link

(Please ignore the designs for Mullvad Browser in there – those are old and aren't going ahead)

ok cool. I can implement the mock ups once they are done

I haven't posted it in this ticket yet since it's not final – but I have a refreshed, stripped-back template for Tor Browser that Sponsor 131 are basing their designs on. You can preview it here: Figma link

@duncan Apart from image assets and CSS tweaks, is this basically what the design is going to be? If so, I could start implementing the HTML structure and javascript earlier so that it is ready for the final design.

marked this issue as related to #41423 (closed)

removed FF115-esr label

mentioned in issue #41529 (closed)

marked this issue as related to #32328 (closed)

We should make sure the new template features a more user-friendly offline state too. For reference, see the red screen of death here: #32328 (closed)

mentioned in issue #32328 (closed)

We may want to consider migrating some of the onboarding content into this template as a series of fun did you knows in future too, as per this comment in the onboarding ticket: #41335 (moved)

added Q1 label and removed Q4 label

added Backlog label and removed Next label

marked this issue as related to #41612 (closed)

marked this issue as related to #21218

Does anyone object if I rename this issue to make it exclusively about Tor Browser/about:tor, since a common template is no longer the plan?

WFM

removed Backlog label

added Doing label

changed title from Create a common start page template for both browsers to Modernize Tor Browser's new-tab page (about:tor)

Here's a mockup of the proposed design update:

Some notes:

I've removed the extra strings from the foot of the page to simplify the template.
The size, spacing and styling of each element has been updated to be more consistent with Firefox.
The background color has been updated too, however this might change again pending the outcome of tpo/web/styleguide#19 (closed).
The updated Tor Browser icon is pending #40417 (closed), so please use the existing application icon for now.
In addition to fixing #21218, I've been playing around with the idea of a toggle to switch between the clearnet and onion versions of DDG and Blockchair.
@henry mentioned the name About Tor being archaic, and I agree. We could also consider setting it as the default for new tabs too (especially if we fix the search bar), like Firefox.
We'll retain the link to the onboarding slideshow until it gets retired.

Here are some extra screens demonstrating the various states too:

Show the onionizer(tm) activated

Show new tab with update message

Show new tab with banner

Show pre-release channels

Show red screen of death:

Lastly, here's a link to Figma with notes (which makes for easier viewing): Figma link

I like these overall

I think the only thing that stands out to me is that the "Something went wrong" message is below the search input. If the message is correct then searching would not work, so the message should come first, and we should hide the search input.

Moreover, what do we expect "Report error" to do? I'm assuming it would have to work offline.

I think the only thing that stands out to me is that the "Something went wrong" message is below the search input. If the message is correct then searching would not work, so the message should come first, and we should hide the search input.

Fittingly, something went wrong in Figma 🤪 It should look like this, with the search bar disabled:

This is intended to be a temporary port of the existing red screen of death into the new template, pending actual UX improvements due to happen here: #32328 (closed)

To help inform those changes, I was hoping to add the button (linking to about:manual#support) to collect some extra feedback on the contexts it's appearing in.

Do you need the message to come before the disabled search bar for a11y?

Do you need the message to come before the disabled search bar for a11y?

Yeah, I think that would be better to get the correct reading order with the important information first.

removed Doing label

added Needs Review label

what is the purpose of the onion'ize toggle? (and I suspect nesting a checkbox in a textbox is an a11y no-no @henry )

In addition to fixing #21218, I've been playing around with the idea of a toggle to switch between the clearnet and onion versions of DDG and Blockchair.

^ See this bit. It's intended to boost the visibility of search engines that have onion site equivalents set up, and facilitate switching between them without needing to dig around in settings. Totally optional though, and added as a bit of fun on my part.

and I suspect nesting a checkbox in a textbox is an a11y no-no @henry

This element is currently a <form>, just styled as a single input, so the checkbox can just be another input in the form.

One thing I would point out is that the mockups are missing the current <input type="submit"> button (the current arrow button). So there is no explicit way to start the search, it seems the user can only submit by pressing Enter when focused on one of the inputs.

One thing I would point out is that the mockups are missing the current <input type="submit"> button (the current arrow button).

Right, I based the new search bar on Firefox's. I'm guessing it doesn't have a submit button due to its integration with the location bar.

So there is no explicit way to start the search, it seems the user can only submit by pressing Enter when focused on one of the inputs.

I can add a clickable target if this is prohibitive?

I can add a clickable target if this is prohibitive?

I'm not really sure about the user experience for this. I just noticed there is no clickable "submit" button like we used to have, so there's a chance some users might miss it. But the context here of a search bar might make this moot.

But the context here of a search bar might make this moot.

Yeah, plus the omnibox doesn't provide a submit button either – although you do get clickable targets in the form of search suggestions.

Something that has bothered me for quite a while is scrollbars appearing only to see the full onion pattern.

Since it's only decorative I'd prefer if we cut it when it doesn't completely fit, but maybe it's only me.

That's fine with me :)

@richard this isn't an urgent thing btw, just a "would be nice in time for 12.5" thing. We'll have refreshed application icons, wordmarks and some other bits and pieces to replace too.

Works for me, we'll tentatively plan on doing this in Q2

removed Q1 label

added Q2 label

removed Needs Review label

added Roadmap::Future label

added 12.5 stable label

removed Roadmap::Future label

added Next label

Updated mockups following the feedback above:

Show the onionizer(tm) activated

Show new tab with update message

Show new tab with banner

Show pre-release channels

Show red screen of death:

Please ignore the updated application icon as part of that task. When ready, we'll supply that separately.

The Figma file is ready for dev handoff here: Figma link

@donuts about:tor has a special functionality for updates, too (it shows "Tor Browser has been updated").

Have you considered how to handle this in the new version of the page?

Also, from a technical point of view, can we completely reimplement the page with the "modern" IPC communciation mechanisms?

@donuts about:tor has a special functionality for updates, too (it shows "Tor Browser has been updated”).

Have you considered how to handle this in the new version of the page?

Yep, see the collapsed mockup for updates!

I'm totally happy starting with the about:mullvad-browser/about:connection implementation and tossing the current legacy torbutton implementation re modern IPC etc

@donuts are these designs ready for implementation as far as you are concerned?

Working on a new iteration atm, will post the final version shortly :)

assigned to @richard and unassigned @donuts

removed 12.5 stable label

added 1 deleted label

removed 1 deleted label

added 13.0 stable label

removed Q2 label

mentioned in issue #41639 (closed)

mentioned in issue #41835 (closed)

marked this issue as related to #41852 (closed)

removed the relation with #41612 (closed)

assigned to @henry and unassigned @richard

marked this issue as related to #41893 (closed)

mentioned in issue #41893 (closed)

removed Task label

added Meta label

Hey @henry, the final version can be found in the same file as before: Figma link

The only thing that's not finished are the backgrounds, which we're still experimenting with, so please ignore these for now and leave them for last (if we decide to ship them at all).

Show the onionizer(tm) activated

Show new tab with update message

Show new tab with rotating messages

Show pre-release channels

As you can see, I've removed the permanent version/changelog link and banner in favor of using a rotating message space instead.

I've also removed the red screen of death/connection error entirely now too, as I think it's overwhelmingly showing false-positives and hasn't been useful historically at all. If we want to display some kind of interrupted connection state in future, I think the appropriate place to do it would be the new chrome connection status instead anyway.

@donuts what URL is the "Learn more" link meant to lead to for the alpha and nightly releases?

Also, do you want the heart/speaker/lightning emojis to be text (so using the page's font for the emoji) or a fixed image resource?

@donuts do you want the rotating messages to reset to the first one every time the browser starts? Or do you want the last position to be saved across sessions?

@donuts also, the search input should really have some focus styling. Just like that I would give it the usual outline around the white box, but I'm not sure it would look as intended, especially with the onionize glow. Can you give me a mockup of the styling when the focus is in the search text input?

@donuts also, the search input should really have some focus styling.

Similarly, for the purple links:

Firefox has changed its default styling to include underlines for links: bug 1821788. We should probably do the same to be consistent and for the same accessibility reasons as mentioned in the bug.
What should the outline color be when the link is :focus-visible?
What should the text color be when the link is :hover?
What should the text color be when the link is :hover:active?

And, just to confirm, we do not want a fullstop after the purple link?

marked this issue as related to #41956 (closed)

@henry: @donuts what URL is the "Learn more" link meant to lead to for the alpha and nightly releases?

What about this page?

https://community.torproject.org/user-research/become-tester/

looks good!

@henry: Also, do you want the heart/speaker/lightning emojis to be text (so using the page's font for the emoji) or a fixed image resource?

Will that be twemoji across each platform? If so then text, if not then an image please :)

From a similar conversation before macos has different emojis, so I'll use an image.

added Doing label

removed Next label

marked this issue as related to tpo/web/manual#150 (closed)

mentioned in issue tpo/web/manual#150 (closed)

@donuts do you want the rotating messages to reset to the first one every time the browser starts? Or do you want the last position to be saved across sessions?

I'd like the first message to always be the You're ready... string please, unless it's superseded by an update message. For the messages that come after that, I don't have a preference – so whatever you wish!

@donuts also, the search input should really have some focus styling. Just like that I would give it the usual outline around the white box, but I'm not sure it would look as intended, especially with the onionize glow. Can you give me a mockup of the styling when the focus is in the search text input?

Sure thing, will do!

Similarly, for the purple links:

Firefox has changed its default styling to include underlines for links: bug 1821788. We should probably do the same to be consistent and for the same accessibility reasons as mentioned in the bug.

Yes please, good catch!

What should the outline color be when the link is :focus-visible?

What should the text color be when the link is :hover?

What should the text color be when the link is :hover:active?

These links are using the dark-theme purple button colors, so purple-30, 40 and 50 please.

And, just to confirm, we do not want a fullstop after the purple link?

Fx seems to eschew the full stop for call to actions that are styled as links (e.g. Learn mores), so I went without.

Thanks!

What should the outline color be when the link is :focus-visible?

And this? Right now it is a darker blue outline that doesn't contrast with the background that well.

What blue does it use atm?

Usually the blue is --color-blue-50, so #0060df.

These links are using the dark-theme purple button colors, so purple-30, 40 and 50 please.

Since this is on a dark background, we might want the brightness to increase with :hover and :active. Is there a different scale I can use?

Usually the blue is --color-blue-50, so #0060df.

Thanks, let's use purple-30 for the focus ring then please.

Since this is on a dark background, we might want the brightness to increase with :hover and :active. Is there a different scale I can use?

Yeah, ideally that's how it would work – although purple-30's already the lightest Fx purple that we have :/

However Firefox Acorn seems to use the same purples as Mozilla Protocol, so we could switch to those instead. The downside is they're very pink at the lighter end of the scale.

However Firefox Acorn seems to use the same purples as Mozilla Protocol, so we could switch to those instead. The downside is they're very pink at the lighter end of the scale.

I'm going to follow this up in a separate issue, since ideally all purple elements should do the same – and updating the purple color tokens will be a universal change.

However Firefox Acorn seems to use the same purples as Mozilla Protocol, so we could switch to those instead. The downside is they're very pink at the lighter end of the scale.

Unfortunately, the Mozilla Protocol colors do not match up with our current --purple- colors. So I'm not sure what to do right now.

Right, those are old Photon colors. I've created a new ticket here explaining the overall issue: #42025

In the meantime, can you use 30/40/50 for the link interaction states and we'll fix this later in the issue above?

In the meantime, can you use 30/40/50 for the link interaction states and we'll fix this later in the issue above?

ok, I'll add a note in the code as well

So back to your original question about the search bar's focus state – Fx seems to add a solid 1px border and a larger 30% opacity boxshadow on focus in place of the default boxshadow:

--newtab-textbox-focus-color: var(--newtab-primary-action-background);
--newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);

(the boxshadow says 4px, but looks like 2px to me)

I've had to tweak that a little to make it visible against about:tor's background though:

This is using purple-60 for the border, and purple-30 (at full opacity) for the boxshadow. We can use the same approach for both onionizer states, but will need to hide the default boxshadows for each when focused.