Change cursor for Box Model values to `text`

RESOLVED FIXED in Firefox 68

Status

enhancement
P3
normal
RESOLVED FIXED
2 years ago
Last month

People

(Reporter: Harald, Assigned: danielleleb12, Mentored)

Tracking

({good-first-bug})

57 Branch
Firefox 68

Firefox Tracking Flags

(firefox68 fixed)

Details

Attachments

(3 attachments)

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.
Assignee: nobody → gl
Status: NEW → ASSIGNED
Priority: -- → P3
Correcting myself, pointer should be the right value, to mark elements with weak affordance interactive.

Updated

Last year
Product: Firefox → DevTools
Assignee: gl → nobody
Mentor: gl
Status: ASSIGNED → NEW
Keywords: good-first-bug
Assignee

Comment 2

4 months ago

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

(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.

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

Assignee

Comment 5

4 months ago

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?

(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!

Assignee

Comment 7

4 months ago

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

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

Assignee

Comment 8

4 months ago

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?

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.

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

Assignee

Comment 11

4 months ago
Posted image hover-devtools.png

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

Assignee

Comment 12

4 months ago
Posted image hover-photon.png

Hover style from webconsole.css (Photon style).

Assignee: nobody → danielleleb12
Status: NEW → ASSIGNED

Pinging Victoria for some UX feedback

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

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

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?

Flags: needinfo?(gl)

Comment 18

Last month
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/bfb8f26e725b
Changes box model values' cursor and active/focus stylings. r=gl

Comment 19

Last month
bugherder
Status: ASSIGNED → RESOLVED
Closed: Last month
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68

Clearing needinfo since this is landed.

Flags: needinfo?(gl)
You need to log in before you can comment on or make changes to this bug.