880388 - Show an accurate preview of the size of a widget when dragging a widget over a target in customization mode

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

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

In the toolbar (and soon in the panel after bug 879863), we give the user feedback when they're dragging an item into an area while in customization mode.

We slide the adjacent items over by the width of the dragged object to show where the new node would be placed.

This doesn't, however, take into account the possibility that widgets might be different sizes in different areas. The Zoom controls, for example, are quite wide in the panel, but significantly smaller in the toolbar.

When dragging an item into an area, the feedback we give should accurately depict the size of the item if it were to exist in the target area.

Comment 1

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

If possible, the transparent dragged image should also simulate the appearance of the item if dropped into the target area.

Comment 2

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

These bugs didn't make it into the UR Build that went out in bug 879846. Clearing the [User Research Build+] flag.

Comment 3

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

Removing the items from M7 that do not block landing on m-c.

Comment 4

[Mike de Boer [:mikedeboer]]

Attachment: Patch v1: correct size of a widget when dragging a widget over a target

Jared, I took a shot at this and ended up with the following patch. It works, isn't really ugly, but has one thing I can't figure out directly: when I drag the zoom controls to the toolbar from the palette of menu panel, it is always sized to 115px, which is the size of a palette button. So somehow the styling when the buttons are in the navbar are not applied completely. Do you have an idea for this?

Thanks!

Comment 5

[Mike de Boer [:mikedeboer]]

Attachment: Patch v2: correct size of a widget when dragging a widget over a target

I figured out that it was the customizableui-areatype attribute that was holding the styling back.
It works and looks OK to me now. I hope you like it!

Comment 6

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

Comment on attachment 794019 [details] [diff] [review]
Patch v2: correct size of a widget when dragging a widget over a target

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

I've noticed that the animation is a little janky, but it also appeared a bit janky without this patch so I don't think you introduced the jank.

::: browser/components/customizableui/src/CustomizeMode.jsm
@@ +935,5 @@
>  
>      if (aValue) {
>        if (!node.hasAttribute("dragover")) {
>          node.setAttribute("dragover", value);
> +        

nit, whitespace

Comment 7

[Mike de Boer [:mikedeboer]]

Thanks! https://hg.mozilla.org/projects/ux/rev/33cd07a5f9a2

Comment 8

[Matthew N. [:MattN]]

This caused a mochitest browser-chrome perma-failure: https://tbpl.mozilla.org/?tree=UX&rev=33cd07a5f9a2
Since I doubt anyone will push before you wake up, I'll leave it until then so you can investigate. If someone wants to land something else sooner, they may back it out then.

Comment 9

[:Gijs (he/him)]

(In reply to Matthew N. [:MattN] from comment #8)
> This caused a mochitest browser-chrome perma-failure:
> https://tbpl.mozilla.org/?tree=UX&rev=33cd07a5f9a2
> Since I doubt anyone will push before you wake up, I'll leave it until then
> so you can investigate. If someone wants to land something else sooner, they
> may back it out then.

Fixed this (trivial enough, verified locally): https://hg.mozilla.org/projects/ux/rev/d7ac6fe877d2

Comment 10

[Mike de Boer [:mikedeboer]]

Yay Gijs!

Comment 12

[Chenxia Liu [:liuche]]

Should this be fixed in the latest UX Nightly (2013-10-23)? I am still seeing the following: dragging an icon from "More Tools to Add to the Menu and Toolbar" to the urlbar still displays a huge icon.

Perhaps I'm not understanding this bug though - is the icon that is being dragged around supposed to dynamically resize to fit whatever bar it is hovered over?

Comment 13

[:Gijs (he/him)]

(In reply to Chenxia Liu [:liuche] from comment #12)
> Should this be fixed in the latest UX Nightly (2013-10-23)? I am still
> seeing the following: dragging an icon from "More Tools to Add to the Menu
> and Toolbar" to the urlbar still displays a huge icon.
> 
> Perhaps I'm not understanding this bug though - is the icon that is being
> dragged around supposed to dynamically resize to fit whatever bar it is
> hovered over?

This bug was meant to have the empty area that's created for an item to adjust to the item's size, not the thing you're dragging. I'm not sure if we can do that, in fact... Jared, do you know?

Comment 14

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

Gijs' interpretation of the fix for this bug is correct.

We could do some tricks to adjust the drag image by using a panel as the drag image and then adjusting the look of the panel while dragging. It will probably require a good amount of work but should be possible. We should handle this in a different bug though.

Comment 15

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

(In reply to Jared Wein [:jaws] from comment #14)
> We could do some tricks to adjust the drag image by using a panel as the
> drag image and then adjusting the look of the panel while dragging. It will
> probably require a good amount of work but should be possible. We should
> handle this in a different bug though.

Bug 930161 was filed for this.

Comment 16

[Chenxia Liu [:liuche]]

(In reply to Jared Wein [:jaws] from comment #15)
> (In reply to Jared Wein [:jaws] from comment #14)
> > We could do some tricks to adjust the drag image by using a panel as the
> > drag image and then adjusting the look of the panel while dragging. It will
> > probably require a good amount of work but should be possible. We should
> > handle this in a different bug though.
> 
> Bug 930161 was filed for this.

Actually, I just filed bug 930172 for this issue. Bug 930161 is specifically for cursor placement.

Comment 17

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/33cd07a5f9a2
https://hg.mozilla.org/mozilla-central/rev/d7ac6fe877d2