Unit dropdown and unit horizontal dragging

[jathek]

A unit dropdown and unit horizontal dragging on lengths in the Styles tab under Elements would be cool. This is a Chrome feature that would be nice to have in Edge. Dropdown in Chrome: Hovering over a length value for padding give a horizontal cursor that allows dragging left and right to increase/decrease the value.

AB#38958004

[captainbrosset]

Thanks a lot for reaching out. Because Edge is based on Chromium, this feature initially also existed in Edge. It got turned off a little while ago given a high number of negative feedback about this feature. My understanding is that it made it harder for a lot of people to edit CSS property values (it would often be in the way of just focusing the field and typing in).

So your feedback is super interesting! If you can, would you be ok sharing more details about when you use this feature? Do you often need to switch units? Is the left/right dragging a useful way to experiment? Is it fine-grained enough?

Thanks in advance! Also, let me cc @hxlnt who will be interested in this.

[jathek]

I'm using Chrome and Edge in a coding boot camp, and I switch units and length values a lot to experiment and learn. The unit dropdown even showed me some values I wasn't even aware of before class. The unit dropdown and length dragging was something specifically pointed out by our instructor as a tool to help us play with our css in the inspector quickly.

Also just checked my Firefox dev edition and it also has length dragging, although no unit dropdown.

[captainbrosset]

Thank you for getting back to me. The drop-down being used as a way to learn about new units is a great point. We'll keep this issue open for consideration.

[hxlnt]

We are eager to make sure DevTools is a great learning tool, so thank you, @nearcatch, for taking the time to share this feedback.

You might also be interested in these features for playing with text in DevTools:

• Change CSS number values with the keyboard: https://devtoolstips.org/tips/en/increment-css-number-values/
• Font editor (experimental feature): https://devtoolstips.org/tips/en/convert-font-units/

The DevTools Font Editor offers sliders and various options to help you experiment with typographic properties such as line height, font families, and more. In Edge DevTools, you just need to check a box in DevTools experiment settings to enable it.

Good luck in coding camp!

[WebMechanic]

that click-and drag (scrub) feature in Chrome is actually utterly annoying as you can't safely click into the value field to simply select and copy the value as you can with other properties. you can accidently change the value by "dragging" the pointer by a single pixel. hateworthy.

It resembles a badly implemented feature stolen from Photoshop CS4 where you can scrub any numeric field to increase/decrease the value, but it's available only if you hold down the Alt/Opt key. Adding Shift or Ctrl changes step size by 0.1, 10 or 100 (varies per value type context).

This way a regular click would act as expected and activate the input field, select the value and you can hit Ctrl+C to copy.

Should this also come to DevTools, please use Photoshop's methology!

[WebMechanic]

The DevTools Font Editor offers sliders and various options

it would be nice if it shows the actual computed style values of the selected element. It starts out empty, so you have no valid starting point to experiment with values. Makes no difference if the current selecto has these properties set, if they are inherited or based on a CSS variable property.

for variable fonts it should list the named width and style instances coded into these font like "Semi Bold", "Black" or "Condensed"; they translate to sth. like font-weight: 350 or font-stretch: 75%

However, it does the proper calculations if you switch units, unlike the tool in FF so 👍🏻 for that!