Improved colors for the markup view's Inactive elements

VERIFIED FIXED in Firefox 69

Status

enhancement
VERIFIED FIXED
3 months ago
9 days ago

People

(Reporter: victoria, Assigned: miker)

Tracking

(Blocks 1 bug)

unspecified
Firefox 69
Dependency tree / graph

Firefox Tracking Flags

(firefox69 verified)

Details

(Whiteboard: [lang=css])

Attachments

(3 attachments, 1 obsolete attachment)

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.

Blocks: 1306054

(Todo for me: Dark mode colors)

Flags: needinfo?(victoria)
Whiteboard: [lang=css]

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

Flags: needinfo?(victoria)
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
Posted image new-colors-light.png

Light theme after. changes.

Posted image new-colors-dark.png (obsolete) —

Dark theme after. changes.

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

Flags: needinfo?(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;
}

Flags: needinfo?(victoria)

Colors changed as requested.

Attachment #9065059 - Attachment is obsolete: true

Changes:

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

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

Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/62ffe3570de4
Improved colors for the markup view's inactive elements r=pbro
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

Verified with 69.0b3.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.