Treestyletab: Tab is not detached when dragged outside of the sidebar

[gonhidi]

Short description

When using mouse drag and drop on a tab from the sidebar to a non-sidebar area, the tab is supposed to get detached and open in a new browsed window, but it doesn't

Steps to reproduce

1. Start Firefox for macOS (for this report, unbranded version 66.0.3) with clean profile.
2. Install TST (for this report, 3.0.10.9081 development version dated at 2019-05-03 01:58).
3. With the mouse, click and hold on a tab, move the cursor outside of the sidebar area and release.

Expected result

The tab should be detached from the sidebar and open in a new window.

Actual result

The tab remains on the window. The debugging console's output of such an instance with sidebar/drag-and-drop and sidebar/mouse-event-listenerdetailed logging options selected is the following:

tst<Sidebar-3>: 08:31:32.998 sidebar/mouse-event-listener:      onMouseDown: found target tab:  
Object { id: 16, index: 14, windowId: 3, highlighted: true, active: true, attention: false, pinned: false, status: "complete", hidden: false, discarded: false, … }
common.js:352:5
tst<Sidebar-3>: 08:31:32.999 sidebar/mouse-event-listener:      onMouseDown  
Object { targetType: "tab", tab: 16, twisty: false, soundButton: false, closebox: false, button: 0, ctrlKey: false, shiftKey: false, altKey: false, metaKey: false, … }
common.js:352:5
tst<BG>: 08:31:33.002 sidebar/mouse-event-listener:      Constants.kNOTIFY_TAB_MOUSEDOWN common.js:352:5
tst<BG>: 08:31:33.004 sidebar/mouse-event-listener:     Sending message to listeners common.js:352:5
tst<BG>: 08:31:33.005 sidebar/mouse-event-listener:     Ready to handle click action on the tab common.js:352:5
tst<BG>: 08:31:33.006 sidebar/mouse-event-listener:      =>  
Object { onRegularArea: true, wasMultiselectionAction: false }
common.js:352:5
tst<Sidebar-3>: 08:31:33.600 sidebar/drag-and-drop:      onDragStart: start  
dragstart { target: li#tab-16.tab.complete.contextual-identity-firefox-default.throbber-unsynchronized.animation-ready.active.highlighted
, buttons: 1, clientX: 126, clientY: 350, layerX: 89, layerY: 8 }

Object {  }
common.js:352:5
tst<Sidebar-3>: 08:31:33.606 sidebar/drag-and-drop:      onDragStart: started common.js:352:5
tst<Sidebar-3>: 08:31:33.623 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.624 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.626 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.627 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.629 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.680 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.682 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.685 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.731 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.732 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.734 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.782 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.783 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.786 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.833 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.833 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.836 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.883 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.885 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.887 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.939 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.940 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.943 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:33.954 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.956 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.959 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.960 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.967 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.969 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.975 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.977 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.990 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:33.991 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:33.993 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:31:34.018 sidebar/drag-and-drop:       drop position = on  16 common.js:352:5
tst<Sidebar-3>: 08:31:34.018 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:31:35.103 sidebar/drag-and-drop:      onDragEnd,  
Object { mDraggingOnSelfWindow: true, mDraggingOnDraggedTabs: false }
common.js:352:5
tst<Sidebar-3>: 08:31:35.105 sidebar/drag-and-drop:      dragged items are processed by someone:  move common.js:352:5
tst<Sidebar-3>: 08:31:35.108 sidebar/drag-and-drop:     finishDrag common.js:352:5

Environment

• Platform (OS): macOS 10.14.4
• Version of Firefox: 66.0.3 (unbranded build)
• Version (or revision) of Tree Style Tab: 3.0.10.9081 development build dated at 2019-05-03 01:58

Observations

Dragging to a sidebar in a different browser windows does work, so it serves as a kind of workaround.

Sometimes the tab does get detached (when this happens, sometimes it is greyed out when dragging outside, sometimes it is not), but I don't know if it might be related to the situation I described in a recent comment to issue 2078. A log of such a seemingly successful action follows:

tst<Sidebar-3>: 08:44:38.460 sidebar/mouse-event-listener:      onMouseDown: found target tab:  
Object { id: 22, index: 13, windowId: 3, highlighted: true, active: true, attention: false, pinned: false, status: "complete", hidden: false, discarded: false, … }
common.js:352:5
tst<Sidebar-3>: 08:44:38.461 sidebar/mouse-event-listener:      onMouseDown  
Object { targetType: "tab", tab: 22, twisty: false, soundButton: false, closebox: false, button: 0, ctrlKey: false, shiftKey: false, altKey: false, metaKey: false, … }
common.js:352:5
tst<BG>: 08:44:38.471 sidebar/mouse-event-listener:      Constants.kNOTIFY_TAB_MOUSEDOWN common.js:352:5
tst<BG>: 08:44:38.473 sidebar/mouse-event-listener:     Sending message to listeners common.js:352:5
tst<BG>: 08:44:38.475 sidebar/mouse-event-listener:     Ready to handle click action on the tab common.js:352:5
tst<BG>: 08:44:38.476 sidebar/mouse-event-listener:      =>  
Object { onRegularArea: true, wasMultiselectionAction: false }
common.js:352:5
tst<Sidebar-3>: 08:44:38.482 sidebar/drag-and-drop:      onDragStart: start  
dragstart { target: li#tab-22.tab.complete.contextual-identity-firefox-default.throbber-unsynchronized.animation-ready.active.highlighted
, buttons: 1, clientX: 408, clientY: 283, layerX: 371, layerY: 14 }

Object {  }
common.js:352:5
tst<Sidebar-3>: 08:44:38.495 sidebar/drag-and-drop:      onDragStart: started common.js:352:5
tst<Sidebar-3>: 08:44:38.513 sidebar/drag-and-drop:       drop position = on  22 common.js:352:5
tst<Sidebar-3>: 08:44:38.514 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:44:38.518 sidebar/drag-and-drop:       drop position = on  22 common.js:352:5
tst<Sidebar-3>: 08:44:38.519 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:44:38.521 sidebar/drag-and-drop:      onDragOver: not droppable common.js:352:5
tst<Sidebar-3>: 08:44:38.526 sidebar/drag-and-drop:       drop position = on  22 common.js:352:5
tst<Sidebar-3>: 08:44:38.527 sidebar/drag-and-drop:        calculated info:  
Object { dragOverTab: {…}, targetTab: {…}, dropPosition: "self", action: 1024, parent: {…}, insertBefore: {…}, insertAfter: {…}, defineGetter: defineGetter(), draggedTabs: Getter, draggedTabIds: Getter, … }
common.js:352:5
tst<Sidebar-3>: 08:44:40.100 sidebar/drag-and-drop:      onDragEnd,  
Object { mDraggingOnSelfWindow: true, mDraggingOnDraggedTabs: false }
common.js:352:5
tst<Sidebar-3>: 08:44:40.103 sidebar/drag-and-drop:      dragend at:  
Object { windowX: 970, windowY: 284, windowW: 432, windowH: 694, eventScreenX: 927, eventScreenY: 426, eventClientX: 0, eventClientY: 0, offset: 24.199996948242188 }
common.js:352:5
tst<Sidebar-3>: 08:44:40.105 sidebar/drag-and-drop:      trying to detach tab from window common.js:352:5
tst<Sidebar-3>: 08:44:40.109 sidebar/drag-and-drop:     finishDrag common.js:352:5

[piroor]

I think this is a bug of Firefox itself. Here is a small example for testing: sidebar-example.xpi.zip. Steps to test:

1. Download the file and rename to sidebar-example.xpi.
2. Go to about:debugging.
3. Load sidebar-example.xpi as a temporary addon. Then you'll see a sidebar with tab items.
4. Open debugger for the addon sidebar example, via the about:debugging.
5. Drag any item in the sidebar.
6. Drop it to outside of the sidebar area.
7. Repeat 5 and 6 multiple times, with various drop locations.

On the step 5, the addon registers a dummy drag data with a content type application/x-unknown-sidebar-item. It is completely specific for the addon, so there should be no program can handle it. On such cases the addon prints a log message DRAG END none when you release the mouse button on any undroppable location. TST uses just same method, and TST is designed to detach dragged tabs only on such cases.

However, sometimes you may see a log message DRAG END move. It means that something application accepts the drop action and it processed the action as a "moving of any item". And TST won't detach the tab on such cases.

Please note that this is the point: both on the example addon and TST, dropping outside of the sidebar area must be treated as DRAG END none. No addon can control the result, because the drop result is decided by the application on the drop location and it is detected by Firefox side.

[piroor]

Bug 1548949 - dataTransfer.dropEffect of dragend event randomly become non-"none" values when the dragged item is dropped on undroppable location

I've reported this problem to the bugzilla.mozilla.org.

[uli42]

I see problems with d'n'd too: When I have TreeStyleTabs in the sidebar and the normal at the top, too, I can drang and drop the top bar tab to top bar of another firefox window, but I cannot drag and drop to/from the sidebar tabs.

[kristofferR]

I think the scrolling text on the bottom of the sidebar should be changed until this bug is fixed. Right now it's just confusing.

The text could be changed to something like "Right click on tab to open in new window".

[piroor]

I agree that "Move to New Window" context menu command is stably effective and recommended, instead of drag-and-drop to outside of the sidebar.

On the other hand the scrolling message was introduced as a workaround for a restriction that the current addon system (based on WebExtensions API and Web APIs) disallows addon to provide drag-and-drop experience compatible to Firefox's native one (dropping onto bookmarks toolbar creates bookmarks, dropping outside window tears off the tab from the window). From this original motivation, "Dropping to outside of sidebar will possibly detach the tab from window" looks a better version of it.

And, more better solution is: deactivate the feature itself until it become certainly available. Mozilla does it - Mozilla deactivates a new feature on released versions if the feature is unstable yet.

[piroor]

I've decided to introduce a new workaround for this problem with the commit 59b44b5. As I wrote at the comment, this change introduced a new "regression" on a edge case: when tabs are dragged and dropped between multiple Firefox instances, they are duplicated - imported to the receiver Firefox and detached from the window on the sender. I've decided to accept this "regression" because it looks a rare case and generally people don't use mutiple Firefox instances.