1405514 - Change cursor for Box Model values to `text`

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[:Harald Kirschner :digitarald]

Right now it is hard to discover that the fields can be edited. Cursor can help, but maybe the hover should use a more visible border effect.

Comment 1

[:Harald Kirschner :digitarald]

Correcting myself, pointer should be the right value, to mark elements with weak affordance interactive.

Comment 2

[danielleleb12]

I'd like to work on this if it's still available!

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to danielleleb12 from comment #2)

I'd like to work on this if it's still available!

Yep, I just marked it as available and a good-first-bug. I think the relevant changes should be in this CSS class https://searchfox.org/mozilla-central/source/devtools/client/themes/boxmodel.css#335.

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

As an additional bonus item, we should also remove the text cursor around the box model legends. This is the margin, border, and padding text that you see in the box model diagram. https://searchfox.org/mozilla-central/source/devtools/client/themes/boxmodel.css#291

Comment 5

[danielleleb12]

Ok great, I've styled the cursor for the editable fields as 'pointer', and for the legend as 'default'. Should I also adjust the border effect, as mentioned in the description?

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to danielleleb12 from comment #5)

Ok great, I've styled the cursor for the editable fields as 'pointer', and for the legend as 'default'. Should I also adjust the border effect, as mentioned in the description?

Yea, that's a great idea too. There's a couple of example of this, which makes this a bit difficult to decide which one to go with. I believe if we were to follow the latest photon design we would reuse the border effect seen in the web console. https://searchfox.org/mozilla-central/source/devtools/client/themes/webconsole.css#598.

However, if we were to be consistent with the current border effects in the other inputs in the inspector. You would go with the following styles. https://searchfox.org/mozilla-central/source/devtools/client/themes/common.css#549

Give the 2 of them a try, maybe attach some screenshots and we can ping Victoria who is our UI/UX designer about it.

Thank you for working on this!

Comment 7

[danielleleb12]

Will do! What's the best way to go about attaching images here?

No problem - and thank you for answering my questions so quickly!

Comment 8

[danielleleb12]

Also, the effects in the links you shared are for focus, and the one mentioned in the description (and in boxmodel.css currently), are for hover. Should those effects you shared be added on focus or hover?

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

I think we can add them for both :focus and :hover. You can attach screenshots if you look for the "Attach File" link above the first comment.

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

I think we can add it for both since the :focus will be useful for keyboard focus and :hover for the mouseover.

Comment 11

[danielleleb12]

Attachment: hover-devtools.png

Hover effect from common.css (inspector input style).

Comment 12

[danielleleb12]

Attachment: hover-photon.png

Hover style from webconsole.css (Photon style).

Comment 13

[Gabriel Luong [:gl] (ΦωΦ)]

Pinging Victoria for some UX feedback

Comment 14

[Victoria Wang [:victoria]]

Hi Danielleleb12! I'm sorry for the late response to this. The cursor changes sound great. Regarding the border styles in the screenshots, I think the "Hover style from webconsole.css" version looks the best, and I'd suggest we also make the background color of the field white to make it look more like an input field.

Comment 15

[Victoria Wang [:victoria]]

Ah, I have a few more details after chatting with gl about this:

Since the box model values already have a brightened background effect from Micah's work, we don't need a blue outline on hover anymore. The blue outline + white background can be only on active (+ keyboard navigation)

And the cursor work is still good to land :)

Comment 16

[danielleleb12]

Attachment: Bug 1405514 - Changes box model values' cursor and active/focus stylings.

Comment 17

[Patrick Brosset <:pbro>]

Hi Gabriel, I see a patch was posted a month ago, and you were added as the reviewer.
Can you please take a look at it?

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/bfb8f26e725b
Changes box model values' cursor and active/focus stylings. r=gl

Comment 19

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/bfb8f26e725b

Comment 20

[Gabriel Luong [:gl] (ΦωΦ)]

Clearing needinfo since this is landed.