1543216 - Improved colors for the markup view's Inactive elements

Status: VERIFIED FIXED

(DevTools :: Inspector, enhancement)

Description

[Victoria Wang [:victoria]]

As part of work for Inactive CSS, I revisited the inactive styling which will be used in both Markup and Rules.

Going full monochrome provides more contrast between inactive and active elements. It also improves the visual look of the Markup pane by making the color differences less vague (clashing).

Mockup is the same as the Inactive CSS link:
https://mozilla.invisionapp.com/share/UQRBDJ8WCTH#/screens

This introduces a new color, #a4a4a4, but the other colors are already existing variables.

Comment 1

[Victoria Wang [:victoria]]

(Todo for me: Dark mode colors)

Comment 2

[Victoria Wang [:victoria]]

Added dark mode colors to above mockup link, so this is ready to go!

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: new-colors-light.png

Light theme after. changes.

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: new-colors-dark.png

Dark theme after. changes.

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

@victoria I have upped you a .dmg on Slack for you to check if you are happy with the changes.

Comment 6

[Victoria Wang [:victoria]]

Awesome, thanks Mike!

Light mode looks great. For dark mode, I realized a few changes could be made - swapping the attr and val colors and making the punctuation darker:

/* markup.css | chrome://devtools/skin/markup.css */

.not-displayed .attr-value {
color: #a4a4a4;
}

.not-displayed .attr-name {
color: #787878;
}

.not-displayed {
color: #787878;
}

Comment 7

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Dark Mode II - The Sequel.png

Colors changed as requested.

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1543216 - Improved colors for the markup view's inactive elements r?pbro!

Changes:

• Applied colors from Victorias mockups.
• Removed margin-inline-start from the icon to move it closer to the property value.

Comment 9

[Victoria Wang [:victoria]]

Thanks Mike! Looking at the screenshot, it looks like the color of .not-displayed .tag has changed? That should still be Gray-45.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/62ffe3570de4
Improved colors for the markup view's inactive elements r=pbro

Comment 11

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/62ffe3570de4

Comment 12

[Cristian Fogel [:cfogel]]

Verified with 69.0b3.