1731734 - Add the ability to modify any size value by dragging the mouse horizontally

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Chrome_DevTools_change_size_dragging

Chrome DevTools are implementing a new way to change the value of sizes in their rule view (see attachment):

• hovering a value will show a ↔ icon
• clicking and holding the mouse down on it, moving right will increase the size, moving left will decrease it
• while dragging, holding <kbd>Maj</kbd> will change the size in bigger increment, holding <kbd>Alt</kbd> will change the size in smaller increment (kind of what we already have with Up/Down arrow keys)

This is something that exists in some graphic software (e.g. AfterEffect) and that people may already be familiar with. It may also feels more intuitive and discoverable than changing the values with the Up/Down arrow keys.

At the moment, it looks like Chrome is only making this available for some properties/units, but I feel like we could have this for more than just tweaking pixel sizes:

• sizes (in all units, including percentages)
• degrees
• rgb[a]/hsl[a] values
• more?

I guess we could try enabling it for all the properties where we allow Up/Down arrows interaction at the moment, although I don't know if we can reuse the same checks.

At first we can focus only on one of those to lay out the basic architecture for this

---

This might not be trivial, but we'll happily mentor anyone wanting to give this a try :)

Comment 1

[colin.cazabet]

Hello Nicolas,

Even if it feels a bit complicated, this enhancement looks like a good opportunity to dive deep in the codebase, i'm willing to give a try to this one :)
(I may need some guidance just to get started)

Thank you

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello Colin, thanks for offering help!

If this is the first bug you're going to work on, you can read https://firefox-source-docs.mozilla.org/devtools/getting-started/README.html
You can use the Browser Toolbox (https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) to debug the DevTools toolbox.

Now for the actual implementation.

The element that displays the property value is created here https://searchfox.org/mozilla-central/rev/1df999af9999ccb436512cfece57a68d94d36e08/devtools/client/inspector/rules/views/text-property-editor.js#194-200

So here, we would need to check if the property is a "size" and put a specific class on the attribute so we would show the horizontal arrow icon on hover, and add a mousedown event listener to actually implement the dragging (so once we got the mousedown, track mousemove to increase/decrease the value, and mouseup to end the editing).
While implementing this, make sure to have a look at https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture so there's no issue if the user brings is cursor outside of devtools/firefox while dragging.

---

I hope this will help you getting started.
We'll definitely have follow up bugs so we can handle a property value with multiple "size parts" (to handle things like box-shadow for example), but this should be acceptable as a first step :)

Don't hesitate to ask any question, either here or on https://chat.mozilla.org/#/room/#devtools:mozilla.org (all the team members are in Europe) :)

Comment 3

[colin.cazabet]

Hello Nicolas,

Thank you very much for this clear answer, it seems easier now !
I will keep you updated of my advancement and come back here if I have questions.

Comment 4

[colin.cazabet]

Attachment: Bug 1731734 - [devtools] Add basic dragging to update dimensions value in rule view. r=nchevobbe

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/77efddeb96e5
[devtools] Add basic dragging to update dimensions value in rule view. r=nchevobbe

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/77efddeb96e5

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Thanks a lot for landing this Colin 🎉 (and bearing with the delays and multiple reviews :) )

Comment 8

[colin.cazabet]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #7)

Thanks a lot for landing this Colin 🎉 (and bearing with the delays and multiple reviews :) )

Your welcome ! Thanks for the tips and your patience :) I might do other tasks like this on devtools as this was interesting