Looks great, thank you!

This revision requires a Testing Policy Project Tag to be set before landing. Please apply one of testing-approved, testing-exception-unchanged, testing-exception-ui, testing-exception-elsewhere, testing-exception-other. Tip: this Firefox add-on makes it easy!

I talked to the other UXers and we realized this icon was the wrong size. I've created a new version that's 16x16, with some of the whitespace removed, so it should look a little clearer than the scaled-down 20x20 icon. If it's possible for you to provide a high resolution screenshot (like "retina" level), that would be great, but no worries if not. Thank you! {F5826391}

I think the idea to change Popup Exceptions button to "Settings" and putting the radio buttons in there is the right move. I'm not necessarily the right person to review this right now, so I'd recommend discussing in Mozilla Slack: #firefox-design-systems. I'll post there to ask for review.

In D113528#3685796, @jdescottes wrote:

Light themes:

Dark themes:

cc @victoria : sorry to ping you here 👋 If you have any suggestion about the colors, it would be super helpful 🙏 .
The goal for this visual cue is to be visible enough so that users realize that their browser is under remote control (aka "something looks weird"), to avoid potential malicious exploits.
So it needs to be very visible, doesn't have to be beautiful, but it should still be usable (ie the url bar should still be readable). See below the current situation with the dark theme:

Awesome, thank you! Nice to see that this tones down some overly bright lines and reveals some almost hidden ones.

Hi! Would you mind including a pair of before and after screenshots so I can see the difference for one of these instances?

Looks good, thanks Honza!

Looking good! I made 4 suggestions but they are all pretty minor, so I'm going to go ahead and mark this as "Accepted." (Will not be available tomorrow)

Thank you, Janet!

In D81474#2643031, @Kriyszig wrote:

How do you think we should handle the case when a property is deprecated but is till supported on all platforms?
For example clip was deprecated in favor of clip-path but clip is supported on all platforms due to it's popularity. In this case the browser list is empty and ending the message with not supported in the following browsers: wouldn't be ideal in my opinion

In D81474#2640586, @Kriyszig wrote:

@victoria, thank you for the suggestion to improve the warning message.

Currently we have 4 forms of these message. There are 4 cases of incompatibility and these are the respective messages for each of the 4 cases a rule might be incompatible:

• Default - Property is not available on certain browsers and might lead to unintended visual difference on certain platforms
• Deprecated - .Property is a deprecated property, not covered by W3C standards and might not be available on certain platforms.
• Experimental - Property is an experimental property, not covered by W3C standards and might not have been implemented on certain platforms.
• Experimental (but now deprecated)- Property was an experimental property that is now deprecated. This property is not covered by W3C standards and might not be available on certain platforms.

Do you think these messages individually can be improved (or should be unified?) to have a better user experience?
Please let me know me know your thought and improvements we can make to these messages.

Thank you.

@Kriyszig - wow, this is looking great - so excited to see the progress!

Thanks @Itiel! Let's go with currentColor.

Hi Itiel! If you don't mind, could you post screenshots of how the icon looks using the different variables?

In D71370#2289677, @daisuke wrote:

Regarding UX:
We’d better change the color etc by user interaction such as mouseover as same as the reload button of our browser?
@victoria what do you think??

Looks good!

In D71036#2207559, @jdescottes wrote:

@victoria screenshot of the updated version:

In D71036#2204271, @Gijs wrote:

In D71036#2204112, @victoria wrote:

Looking good! Positioning of the doorhanger should be a bit higher to match the ETP message that this is based on.

Which message is this?

Looking good! Positioning of the doorhanger should be a bit higher to match the ETP message that this is based on.

In D71916#2192360, @Honza wrote:

The Block button should be adjusted to match the Resend (top and bottom padding/margin)
@victoria WDYT?

Also, would be great if we could remove the dotted-line focus border :)

In D71433#2179687, @davidwalsh wrote:

@victoria Thoughts on the screenshot I posted? EventListener.handle is part of the second jQuery group. Any thoughts on how to better signify the grouping?

since these are overflow settings; only showing it with the right sidebar seems an acceptable trade-off.

WDYT, @victoria?

That seems like the correct location to me!

That seems good - I'd remove the last part and put the version number in there to differentiate it from 'all' Firefox for Android versions.

Thanks Honza! I sent a new patch with an improved sentence about the errors. If this looks good, would you mind pushing the change for me?

Awesome, looks good!

Looking great! Just a few wording suggestions to for smoother sentences.

Looks good - thanks!

Awesome, thanks!

Hi Patrick, do you think this should be pushed? (I don't have commit access yet.) Some of this will change a bunch based on the new plans, but that may take a while, so it might be worth pushing this in the meantime unless there's a reason to reduce amount of commits to the tree.

Added wording fixes/suggestions

FYI, in case this is helpful: The Send Tab graphic I attached is also in Photon, and could be colored blue (hsl(204.5, 99.2%, 49.4%);) to match. https://design.firefox.com/icons/viewer/#open

The little DevEdition logo - not sure if this is already in product? But here's a tiny .png variant if you need one

Here's the Send Tab icon SVG

In case this helps, here are some diffs showing where I've changed the css/html from Harald's version:

There's more padding, plus other adjustments to styles and copy in my version: https://victoria-dtwn.glitch.me/panel.html

Perfect, thank you!

Here's a figma version of the mockup that you can inspect if logged in. https://www.figma.com/file/TZRITiau43LBslv4dKBseJ/dom-breakpoints?node-id=0%3A35
Let me know if anything's unclear, or if you see any problems with this!

Hi! I made some mockups for this (discussed in slack a while ago) - the last one in this link is the final one https://mozilla.invisionapp.com/share/UVSEC71MD5B#/screens/368724503

Ah, yes, if we could lighten the background color to match the example posted of Network's clear button, that would be great!

Could we also try 1px larger, 1 step darker font? Seems a tiny bit hard to read. Otherwise this is looking great :)

For hover state, I'd keep the hit target the same, but make the hover state a smaller, round-rect, as can be seen in this Network toolbar example

Hi! Exciting to see this coming to life.

We could do it like this to match the simulation menu:

Looks great! Thank you!

Looking good!

In D33814#1011000, @rcaliman wrote:

@victoria, @flod, is the text suitable to land now?