1525039 - Redesign toggle-able buttons

Status: RESOLVED FIXED

(DevTools :: Shared Components, enhancement, P4)

Description

[Nicolas Chevobbe [:nchevobbe]]

In https://bugzilla.mozilla.org/show_bug.cgi?id=1523842#c2 , Victoria confirmed that we want the filter buttons from the Netmonitor and the Console to have a different look (no background when disabled, a grey one when enabled).

Here's a link to the mockup https://mozilla.invisionapp.com/share/2XEEY0RYA#/screens/263398480

So we should have some shared CSS rules for that.

We can't simply change .devtools-button as it's used in a lot of places, including in places we want them to stay the same.

One thing we could take advantage of is the aria-pressed attribute that we set on both console and netmonitor filter buttons to apply the wanted styles.

Comment 1

[PhoenixAbhishek]

I am currently working on this as discussed on Slack

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: image.png

Here's a screenshot of the mockup to be extra clear

Comment 3

[PhoenixAbhishek]

Attachment: Bug 1525039 - Redesign toggleable buttons. r=ladybenko

The toggle buttons have been redesigned as per the shared mockup

Comment 4

[PhoenixAbhishek]

Attachment: Bug 1525039 - Redesign toggle-able buttons for dark-mode. r=ladybenko

Redesigned toggle-able buttons for dark-mode

Comment 5

[Phabricator Automation]

Comment on attachment 9051045 [details]
Bug 1525039 - Redesign toggle-able buttons for dark-mode. r=ladybenko

Revision D23500 was moved to bug 1535324. Setting attachment 9051045 [details] to obsolete.

Comment 6

[Patrick Brosset <:pbro>]

Hi. I noticed that a lot of work has gone into this bug over the past few months, but work seems to have stalled.
Do you need more time to work on this? If so, that is totally fine. If you, however, do not plan on resuming work on this bug, please let me know so it can be made available to others.

Comment 7

[PhoenixAbhishek]

Hi Patrick,

Yes, I am still working on this. The work was stalled because of my exams, which are about to complete in a couple of days.
I, however, will be submitting an updated patch later today or tomorrow :)

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

Hello Phoenix, do you still want to work on this?

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/89b78a7a5359
Redesign toggleable buttons. r=ladybenko

Comment 11

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/89b78a7a5359

Comment 12

[PhoenixAbhishek]

Thank you Nicolas for the help :)