Inspector should have an angle tooltip for css values as appropriate

NEW
Unassigned

Status

P3
enhancement
7 years ago
7 months ago

People

(Reporter: miker, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 1 bug, {dev-doc-needed})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [computedview][ruleview])

Attachments

(2 attachments)

Web developer style tools should have an angle tooltip for css values as appropriate.
Please see meta bug 711947 for more info
Filter on PEGASUS.
Whiteboard: [computedview][ruleview]
Created attachment 712182 [details]
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.
Angle matching regex:
/[\d.]+(deg|g?rad|turn)/gi
Component: Developer Tools: Style Editor → Developer Tools: Inspector
Summary: Web developer style tools should have an angle tooltip for css values as appropriate → Inspector should have an angle tooltip for css values as appropriate
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector

Updated

3 years ago
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED

Updated

3 years ago
Assignee: ntim.bugs → nobody
Status: ASSIGNED → NEW

Comment 5

3 years ago
Hi, I'd like to work on this bug if it's possible. Can someone assign it to me please ?
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.
Assignee: nobody → chevobbe.nicolas
Status: NEW → ASSIGNED
Priority: -- → P3

Comment 7

3 years ago
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 ?
Flags: needinfo?(pbrosset)
(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.
Flags: needinfo?(pbrosset)

Comment 9

3 years ago
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

3 years ago
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.
Keywords: dev-doc-needed

Comment 11

3 years ago
Created attachment 8754441 [details]
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 ).
Not working on this at the moment, feel free to take this bug.
Assignee: nchevobbe → nobody
Status: ASSIGNED → NEW
Severity: normal → enhancement

Updated

7 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.