Polish blocked resource styling

[digitarald]

blocked throws off the status icon grid, where all other boxes are the same size. Icons might be one idea to solve this, but I'd love to hear more thoughts:

Mockup:

Related:

• Landed in bug 1157817
• CSP test page

cc @darkwing @janodvarko

[violasong]

Yes, I like the icon idea — for extra clarity we could put the text "(blocked)" after the filename or somewhere where it makes sense.

I thought at some point we were going to use the content blocking icon for this?

[digitarald]

Yes, I like the icon idea

Great. Do you any preference on which icon specifically or nits on my mockup?

I thought at some point we were going to use the content blocking icon for this?

This is not about TP specifically. Blocked reasons can be manifold, tracking protection is just one of many: CORS, CSP, Tracking Protection, mixed content, extensions, etc.

Long form looks like

The CSP mention should probably be more sth like Blocked: CSP

[fvsch]

Re. @digitarald's mockup, if we follow https://design.firefox.com/photon/patterns/errors.html#style the text color should be Red 60 #D70022, which is a bit lighter/redder. In the Light theme, darker rows have a #F8F8F8 background, so Red 60 gives us 5.05:1 contrast.

An icon sounds alright. But I wouldn't use a X or "cross" icon because we already use those for actions:

• Close (devtools, RDM, split console)
• Clear input value

For errors, we have precedent in Console and Accessibility, where we use those icons: error.svg, error-small.svg.

Another option is to look at international road signs for "stop" or "forbidden":

• Forbidden: red circle with diagonal line, overlaid on top of another symbol
• Stop: more variation between countries: disc or octagonal background, and content can be an horizontal bar or the word "STOP"

A few tests as 16px icons (Figma source):

(We can use or make 12px icons too if we need something smaller. For reference, the status code badges are 14px tall, so I think a 16px icon would work in that context.)

[digitarald]

Re. @digitarald's mockup

To clarify, the text color is not mocked up but what we have shipping. I only mocked up the icons in the second shot.

Forbidden

Chrome uses forbidden for Clear across several panels, which is why I avoided it.

I like the exclamation mark combined with red, generic enough and the right level of severity thanks to the color.

@fvsch would you use just icons or icon + red badge as I mocked it up? Might be call based on visual rythm; but other status entries also don't have a visible badge pill (cache HTTP response codes) so diverging from it would be an easy option.

[fvsch]

Chrome uses forbidden for Clear across several panels, which is why I avoided it.

I thought about that, but since it's kind of a semantic mistake on their part (I've witnessed coworkers struggling to understand this icon in Chrome), I don't think we should rule it out.

would you use just icons or icon + red badge as I mocked it up

My gut feeling was just the icon. We can try both and see what works best.

I like the exclamation mark combined with red

My only concern is that it may not convey "blocked", but if we update the label in Transferred from "" to "Blocked: " that could work.

[digitarald]

I thought about that, but since it's kind of a semantic mistake on their part.

+1, 🚫 is the right icon here, confirmed by nounproject.

My gut feeling was just the icon.

WFM, also less severe as blocked resources are interesting but not always important.

[darkwing]

I like "blocked" text -- an "x" icon only doesn't convey much meeting -- I would probably see it as "canceled" or something. The shield icon would be good too.

[violasong]

I like the idea of "blocked" text in the transfer column (regardless of what the other UI ends up being).

I had been thinking we could overload the shield metaphor, but I guess we want to avoid muddling the tracking protection brand. 🚫 does seem good to me! The exclamation mark makes me think that something's wrong, e.g. the user should be warned. But this is more of a reassurance/notification that we stopped something bad from happening. I'm guessing it will look a bit nicer to have the icon replace the badge instead of being part of a badge, as the latter looks a little strange to me.

Red 60 seems good for the icon color, but I'd like to keep a darker shade for the text to match Console's --console-error-color. (For me, red 60 is a neon red that's uncomfortable to read due to the saturation. I can see why main Firefox can need this effect, but DevTools has a lot of errors so the errors need to chill out a bit :))

[digitarald]

I like the idea of "blocked" text in the transfer column (regardless of what the other UI ends up being).

A blocked label somewhere makes sense, as we also have a reason to show with that.

I'm guessing it will look a bit nicer to have the icon replace the badge instead of being part of a badge, as the latter looks a little strange to me.

That sounds good. Could you have a quick mock up? Also, I make my mockups intentionally strange to stir up discussions ;)

[violasong]

Could look something like this (icons lined up with the status text; would look better if we added a bit more side padding to the columns)

Also, I make my mockups intentionally strange to stir up discussions ;)

:D It was a good idea to explore!

[digitarald]

Could look better if we added a bit more side padding to the columns

Could you clarify? Space is the biggest constraint in Network resource table.

[fvsch]

Yeah space is in short supply in that table ^^ We currently use 4px of padding-left, and that's the whole separation between two columns' text. We could possibly go up to 6px (total cost = 16px) or 8px (total cost = 32px).

If the main issue is that the status badges are a bit too close to the left edge, we can perhaps shift them a bit:

.request-list-item .status-code {
    margin-inline-start: 2px;
}

Which looks like:

[digitarald]

Curious what people think: Sould the spacing discussion block the blocked-resource discussion, or could we carry the results over to a bug which @darkwing and I can then prioritize?

[darkwing]

I think spacing should be a separate bug from the icon itself, though both would likely be quick to implement.

[violasong]

I agree about separate bug - totally a classic designer tangent :D - but yes, I was thinking it would not cost more space overall, but rather be a redistribution like in Florens' great screenshot, which also has very nice widths for columns that I'm not seeing in my (more default) Network. (I'd love to continue to tweak the default Network column sizes, though I know there's already been a lot of improvement here.)

[violasong]

(Correction - I just looked at Network on a fresh profile and the column sizing does look like Floren's screenshot - it's just a smaller screen size than what I use and it looks nicer. It's looking great! Maybe I'd just suggest slightly more width for the Size and slightly less width for Transferred/Cause, but at this point it's getting very minor and we should perhaps be asking some chrome parity questions instead. They don't seem to have Method or Transferred columns.)

New bug filed: https://github.com/firefox-devtools/ux/issues/87

[digitarald]

Continued in implementation bug

[fvsch]

I know I defended using 🚫 despite Chrome using it for a different thing, but I didn't foresee that we would use that icon in the toolbar:

Now this gets me worried. I only use Chrome DevTools sporadically, but I still clicked our "Request Blocking" icon today when trying to clear the request list. Woops. And this could be worse for users who use Chrome more than me.

I feel like the octogonal stop sign in https://github.com/firefox-devtools/ux/issues/81#issuecomment-513293577 might work.

1. Should we revisit our icon choice?
2. Should we use the exact same icon in the request list and in the toolbar? I'd be okay with 🚫 in the request list and 🛑 in the toolbar, since the toolbar button is not "show what was blocked" (like a filter) but "show a UI for managing blocking".

[digitarald]

@fvsch thanks for re-opening this. I was hoping we positioned the icon far away from the danger zone, but it maks sense that it still triggers the icon muscle memory. Guess that icon is tainted now for anything interactive.

I'd be for a fully filled stop sign or a forbidden variation like https://thenounproject.com/search/?q=forbidden&i=2688625

[violasong]

The stop sign makes me think recording will be paused, so I have a preference for the forbidden variation linked above.

(The behavior of the Blocked or Search icons opening a sidebar that's far away feels a bit odd in general - maybe we can consider moving those to the left side at some point)