885083 - Need a more obvious styling for drag areas

Status: NEW

(Firefox :: Toolbars and Customization, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Need a more obvious styling for drag areas

Comment 1

[Justin Dolske [:Dolske]]

Details?

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

When a user starts dragging an item, we show dashed outlines around the potential drop targets. The outlines are too subtle and aren't easy for users to find if they don't know what to look for.

Comment 3

[Jesse Ruderman]

How about dimming everything except for possible drag targets?

Comment 4

[Jesse Ruderman]

How obvious do we want to make it that you can place things BEFORE the address field and tabs?  (In ltr locales, that's the LEFT).

Comment 5

[Mike Conley (:mconley) (:⚙️)]

Did you have a position on this, Stephen? Or Blake?

Comment 6

[Blake Winton (:bwinton) (:☕️)]

It does seem a little hard to see where you can place things…
In the mockup we made the droppable areas have a similar blue glow to the item you're dragging, and even then the people we user-tested with didn't really seem to realize that they could put things in the toolbar and the menu panel.

In particular, the current toolbar outline totally blends in to the edges of the toolbar.  If there was some extra padding between the outline and the edge of the toolbar, or if we had small dotted squares in between the toolbar items, that might help.

But I should really leave the visual design to the visual designer.  ;)

Comment 7

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Would this be addressed by bug 963576. It, amongst other things, aims to match the styling in shorlanders current mockups (see http://cl.ly/image/1Q0W1v2B0A0M, https://people.mozilla.org/~shorlander/mockups-interactive/australis-interactive-mockups/osx.html)?

Comment 8

[Madhava Enros [:madhava]]

One thing in Stephen's live mockup that isn't addressed in bug 963576 is the lighter background / glow within the dotted line area. That might make this a little more visible.

Comment 9

[Blake Winton (:bwinton) (:☕️)]

Attachment: The first version of the patch…

Okay, here's a first cut at a patch.  Lemme know what we need to fix, and what we'ld like to fix…

Comment 10

[Stephen Horlander [:shorlander]]

Comment on attachment 8387827 [details] [diff] [review]
The first version of the patch…

Review of attachment 8387827 [details] [diff] [review]:
-----------------------------------------------------------------

From our IRC conversation last week:

The backgrounds helps visibility but the way this is constructed with outline-offset creates a less than ideal background bleed. Is there a way to fix that?

Comment 11

[Blake Winton (:bwinton) (:☕️)]

(I'm not actually working on this, and suspect it could be resolved WFM…)