1563291 - Use same icons as Console for errors in the request list

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Florens Verschelde :fvsch]

We're moving the Console's error, warning and info icons to more generic names and locations, so they can be reused by other panels easily. Work done in bug 1552067.

Once landed, we can probably remove a couple icons used by Netmonitor. For instance:

1. Open devtools on Network tab
2. Load https://wrong.host.badssl.com/

In the "Domain" column, you will see a 16px gray icon. We should replace it with the round Error icon at 12px size. Changes:

.security-state-broken {
-  background-image: url(chrome://devtools/skin/images/security-state-broken.svg);
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
}

.requests-security-state-icon {
-  width: 16px;
+  width: 12px;
-  height: 16px;
+  height: 12px;
-  vertical-align: text-bottom;
+  vertical-align: middle;
+  margin-inline-end: 2px;
}

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Yep, that make sense. Thanks for the report!

@Florens since you basically provided a patch already, do you want to take this bug :-)

Honza

Comment 2

[Florens Verschelde :fvsch]

Attachment: network-security-icons.svg

I tweaked all icons slightly in my patch, so let's include a SVG export here.

Figma document:
https://www.figma.com/file/FolCW5GWzsp94lK8gh4JqD/Network-security-state-icons

Comment 3

[Florens Verschelde :fvsch]

Attachment: network-security-icons-color-update-dark.png

Here's the result I'm getting in the dark theme.

Comment 4

[Florens Verschelde :fvsch]

Attachment: network-security-icons-color-update-light.png

Same for the light theme.

Comment 5

[Florens Verschelde :fvsch]

Attachment: Bug 1563291 - Use shared error icon and icon colors for Network security state icons; r=Honza

• Use the shared error.svg icon for security errors.
• Make the Netmonitor's padlock icons accept colors from CSS, and use the same colors as Console for errors and warnings.
• Turn all security state icons white in selected rows.
• Tweak some icons, e.g. make the shield icon's strokes a full 1px instead a slightly thinner strokes which made

Comment 6

[Florens Verschelde :fvsch]

Hi Victoria, want to do a tiny visual review?

See the two screenshots above. Note: each screenshot is a composite to show all visual permutations, not a real situation with 4 selected rows.

Comment 7

[Victoria Wang [:victoria]]

These icons look fantastic! Thanks Florens!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/577cd174fedb
Use shared error icon and icon colors for Network security state icons; r=Honza,Harald

Comment 10

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/577cd174fedb