Closed Bug 1543216 Opened 3 years ago Closed 3 years ago

Improved colors for the markup view's Inactive elements

Categories

(DevTools :: Inspector, enhancement)

enhancement
Not set
normal

Tracking

(firefox69 verified)

VERIFIED FIXED
Firefox 69
Tracking Status
firefox69 --- verified

People

(Reporter: victoria, Assigned: miker)

References

(Blocks 1 open bug)

Details

(Whiteboard: [lang=css])

Attachments

(3 files, 1 obsolete file)

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
Attached image new-colors-light.png

Light theme after. changes.

Attached 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: 3 years 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.