873056 - Drag-over and drop effects when customizing

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

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

UX has asked us to make it more obvious where customizable items are being dropped on a toolbar or the panel. This means showing a box where the item will go, and sliding the rest of the items out of the way.

Comment 1

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

Attachment: Patch

See http://screencast.com/t/JTzVgEzCt for a screencast of the attached patch. Notice that the original element is hidden if it originated in the toolbar.

We don't currently have effects for the panel.

Comment 2

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 754954 [details] [diff] [review]
Patch

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

As mentioned on IRC, we need to figure out a way (followup is fine) to adjust the size of the item being dragged. It's especially noticeable dragging from the palette (big image, lots of padding) to the toolbar.

::: browser/components/customizableui/src/CustomizeMode.jsm
@@ +548,5 @@
>      let documentId = aEvent.target.ownerDocument.documentElement.id;
> +    let draggedItem = item.firstChild;
> +    let draggedItemWidth = draggedItem.getBoundingClientRect().width + "px";
> +
> +    dt.setData("draggedItemWidth", draggedItemWidth);

This is kinda hacky - this data isn't a datatype, its metadata on the real datatype. setDataAt() lets us use objects instead of just strings - should use that, and pass in an object like {id, width}.

While you're at it, make "text/toolbarwrapper-id/" a const at the top of the file?

::: toolkit/themes/linux/global/toolbar.css
@@ -102,5 @@
>    border-right: 2px solid transparent;
>  }
> -
> -toolbarpaletteitem[dragover="left"] {
> -  border-left-color: #000000;

We can't touch toolkit stuff, as it will affect other apps too. Need to override it in /browser/ CSS instead.

Comment 3

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

Attachment: Patch v1.1

I noticed that the positioning of the border wasn't correct when the target of the dragover was the toolbar or customization-target. This version fixes that along with the other issues mentioned in the previous review pass.

Comment 4

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

Comment on attachment 755466 [details] [diff] [review]
Patch v1.1

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

Just a note that you're going to get bitrotted by Gijs via bug 870014.

I also noticed that at one point while testing, I got into the state where I was in customization mode, and all of the items in the palette had double-labels. I see that sometimes when unwrapping fails. I wasn't able to reproduce it more than once though. :/ Might be unrelated to this bug.

Otherwise, I think this makes sense to me. Great job! Please file a follow-up bug to take care of drag and drop effects in the panel.

::: browser/components/customizableui/src/CustomizeMode.jsm
@@ +549,5 @@
>  
>      let dt = aEvent.dataTransfer;
>      let documentId = aEvent.target.ownerDocument.documentElement.id;
> +    let draggedItem = item.firstChild;
> +    let draggedItemWidth = draggedItem.getBoundingClientRect().width + "px";

For elements that will change their width depending on where they land, this could be a bit misleading. Example - the "Cut/Copy/Paste" widget from the panel will be quite wide, but considerably smaller when in the toolbar.

I guess there's really no good way of dealing with that just yet - at least not off the top of my head. Just something to think about.

@@ +637,5 @@
>      let draggedWrapper = document.getElementById("wrapper-" + draggedItemId);
>  
> +    let draggedItem = document.getElementById(draggedItemId);
> +    if (getPlaceForItem(draggedItem) == "toolbar") {
> +        draggedItem.hidden = false;

Nit - 2 spaces

Comment 5

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

https://hg.mozilla.org/projects/ux/rev/3d19d2db3a3b

(In reply to Mike Conley (:mconley) from comment #4)
> Otherwise, I think this makes sense to me. Great job! Please file a
> follow-up bug to take care of drag and drop effects in the panel.

Filed bug 877370.

> For elements that will change their width depending on where they land, this
> could be a bit misleading. Example - the "Cut/Copy/Paste" widget from the
> panel will be quite wide, but considerably smaller when in the toolbar.
> 
> I guess there's really no good way of dealing with that just yet - at least
> not off the top of my head. Just something to think about.

Now that I think about it, we may be able to this by using a panel as the drag image. https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images

Comment 6

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/3d19d2db3a3b