Closed Bug 873056 Opened 8 years ago Closed 7 years ago

Drag-over and drop effects when customizing

Categories

(Firefox :: Toolbars and Customization, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
Firefox 28

People

(Reporter: mconley, Assigned: jaws)

References

(Blocks 1 open bug)

Details

(Whiteboard: [Australis:M6])

Attachments

(1 file, 1 obsolete file)

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.
Assignee: customization-ui → nobody
Hardware: x86_64 → All
Assignee: nobody → jaws
Status: NEW → ASSIGNED
Attached patch Patch (obsolete) — Splinter Review
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.
Attachment #754954 - Flags: review?(mconley)
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.
Attachment #754954 - Flags: review?(mconley) → review-
Attached patch Patch v1.1Splinter Review
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.
Attachment #754954 - Attachment is obsolete: true
Attachment #755466 - Flags: review?(mconley)
Attachment #755466 - Flags: review?(bmcbride)
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
Attachment #755466 - Flags: review?(mconley) → review+
Attachment #755466 - Flags: review?(bmcbride)
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
Depends on: 877370
Whiteboard: [Australis:M6] → [Australis:M6][fixed-in-ux]
Depends on: 908910
https://hg.mozilla.org/mozilla-central/rev/3d19d2db3a3b
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [Australis:M6][fixed-in-ux] → [Australis:M6]
Target Milestone: --- → Firefox 28
You need to log in before you can comment on or make changes to this bug.