Bug 30227 - Adding drag/drop support to TreeOutline
Summary: Adding drag/drop support to TreeOutline
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
Depends on:
Reported: 2009-10-08 11:42 PDT by Patrick Mueller
Modified: 2014-12-09 10:46 PST (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Patrick Mueller 2009-10-08 11:42:49 PDT
I'm adding some drag/drop capability for Bug 30079, which ends up needing to be able to drag TreeOutline elements.  Ideally, you could add drag listeners on a tree container, and then the listener applies to the children as well.  More efficient than having to add drag listeners to each child.  This doesn't seem to be easy to do (adding a listener to the parent), for various reasons, in the current code path.  It would be much easier if TreeOutline had built-in support for this.

Additionally, because so much of the Web Inspector UI is built with TreeOutline, enabling some of the drag/drop behavior in TreeOutline itself seems like it should make it easier to make a LOT of stuff more easily drag- and drop-able.

What I'd like to do first is collect some use cases for things we want to drag/drop support for, that exist today in a TreeOutline.  We can then figure out what kind of shape we want the API to be.
Comment 1 Joseph Pecoraro 2009-10-08 12:08:18 PDT
I'm not 100% if these are all tree outlines.

Elements Tree Hierarchy:
- Reordering / Moving Nodes
- Holding down the option (⌥) and dragging could clone a Node.

Elements Sidebar Panes:
- Reorder Panels and Store in a Preference to Customize the UI a little

EventListeners Sidebar Pane:
- Reorder Listeners in the Event Flow
- Drag a Listener onto an Element in the Tree Hierarchy to copy the listener to that node.
Comment 2 Patrick Mueller 2009-10-08 14:05:38 PDT
Elements Tree Hierarchy (addition to items above)
- gesture to delete a node by dragging it offscreen - actually not sure we can do that, maybe we need a valid drop target?  hmmm ... a trashcan?

- Breakpoints - move, delete, copy

- formatted 'text' like Elements Tree Hierarchy, JavaScript Source, Console; should be able to drag out to a text editor - supporting formatted (html) and plain text

- number-y things like resource graphs, profiler tables - drag out as plain text, html, and csv.

- drag Call Stack as plain text or html <ol>, probably want to also include Scope Variables there as well.

- various tables in Storage pane - export as plain text, html, csv

The previous note on using option (⌥) dragging seems to imply we should have some app-wide modifier keys / extended action definitions.  ctrl- means copy, shirt- means something else, etc.
Comment 3 Joseph Pecoraro 2009-10-20 22:15:11 PDT
- Drag a CSS Selector of a classname onto a node to apply that class to that node:
Comment 4 Brian Burg 2014-12-09 10:46:42 PST
TreeOutline (at least for the DOM tree) is draggable. We need to file smaller separate bugs for specific DND interactions.