711942 - Inspector should have an angle tooltip for css values as appropriate

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Web developer style tools should have an angle tooltip for css values as appropriate.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Please see meta bug 711947 for more info

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Filter on PEGASUS.

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Angle Tooltip

It should look something like this (screenshot courtesy of Lea Verou).

The code she users for her previews is at https://github.com/LeaVerou/dabblet/blob/master/code/previewers.js

She says that if we use her code (with changes) we should credit her in the file header.

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Angle matching regex:
/[\d.]+(deg|g?rad|turn)/gi

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Hi, I'd like to work on this bug if it's possible. Can someone assign it to me please ?

Comment 6

[Patrick Brosset <:pbro>]

Before starting to work on this, we need to define what we expect the tooltip to do:

- is this just a read-only popup that appears when hovering over angles to display the value visually on a circle? If so, then we could reuse parts of what has been done for previewing background images. But changes will also need to be made to output-parser.js to detect angles (in many units).

- Or is this also a visual way to change the angle (kind of like Photoshop let's you change an angle on a dial (e.g. https://s3.amazonaws.com/satisfaction-production/s3_images/625923/uncheckUseGlobalLight_inline.jpg ). If so, then we need a "swatch" just like we do for colors, or timing-functions, or filters. Clicking the swatch would open the angle editor tooltip and not only let you see visually what the current angle is, but also change it.
This option has further implications though:
  - how do we deal with angles that are more than 360degrees (or more than 1turn, etc.)? These values are valid, and sometimes wanted, but displaying angles on a circle makes it harder to deal with. There are solutions though.
  - how do we deal with negative angles?
  - how do we deal with units? Angles can be expressed in deg, turn, grad, rad. Ideally, we'd need this thing to offer users the possibility to choose a unit (and auto-convert).
    - This last point reminds me of something (which might be better as a separate bug): today, if you shift-click a color in the rule-view, its format changes (hex, rgb, hsl). It would be awesome to do the same for angles too.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

I think it'll be better to go with the visual editor ( and not only a tooltip ). It seems to me that it's kind of what the Devtools are heading to : simplify rule/property editing in a more friendy, visual way. I'll work on some mockups/poc to see how it can be done, and make a little research on how graphic software deals with those edge case, if they do.

> This last point reminds me of something (which might be better as a separate bug): today, if you shift-click a color in the rule-view, its format changes (hex, rgb, hsl). It would be awesome to do the same for angles too

Maybe I could start with this first in order to get familiar with the rules panel ?

Comment 8

[Patrick Brosset <:pbro>]

(In reply to Nicolas Chevobbe from comment #7)
> I think it'll be better to go with the visual editor ( and not only a
> tooltip ). It seems to me that it's kind of what the Devtools are heading to
> : simplify rule/property editing in a more friendy, visual way. I'll work on
> some mockups/poc to see how it can be done, and make a little research on
> how graphic software deals with those edge case, if they do.
Sounds good, thanks. And yes, we're very much headed toward a more visual way to edit CSS, so this fits in nicely.
> > This last point reminds me of something (which might be better as a separate bug): today, if you shift-click a color in the rule-view, its format changes (hex, rgb, hsl). It would be awesome to do the same for angles too
> Maybe I could start with this first in order to get familiar with the rules
> panel ?
Cool, filed bug 1250835 and assigned to you.

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

We should think a bit on how to display image-rotation ( https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation ) values on this bug ( and if we should ).

From MDN :

«This property is not intended to perform arbitrary rotation on an image, but to correct erroneous orientation. *That's why it is rounded to the nearest quarter of a turn*.»

So, should we show how the value is rounded, and if yes, how ?

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

There is an ongoing effort towards inline-editors in Bug 1258390 . We should refer to it to be consistent in how we implement the angle editor here.

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

Attachment: angle_editor.png

So, I thought about it a little and built a rough prototype on CodePen (http://codepen.io/nchevobbe/full/EKYEdz/ - there seems to be a bug for svg stroke-dashoffset on circle in OSX Firefox, it looks fine on Linux or Chrome OSX). 

The main idea is to show when the angle value is greater than 1 turn, by applying an opacity on the base circle color, depending of how many turns have been made).
The other idea is to display negative angle by reversing the "side" of the angle. 
This is by no mean a definitive proposal, but more a ground work Helen can iterate on (or not :)).

I think it would be nice to have it behave differently when holding Shift key : we could do like Photoshop rotate tool do, as it only "stick" to important values ( e.g. 45deg multiples ).

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

Not working on this at the moment, feel free to take this bug.