forked from brave/browser-laptop
-
Notifications
You must be signed in to change notification settings - Fork 0
Tab dragging, sorting, detaching and attaching
Pete Miller edited this page Dec 2, 2017
·
13 revisions
Note: this is based on a work-in-progress branch that is not yet merged to master / nightly.
2017-12-01: https://www.dropbox.com/s/06mf0wvo0kkhg8o/Brave-preview-tab-dragging-20171201.app.zip?dl=1
- User-happiness with tab sorting
- More immediate visual feedback
- More intuitive operations
- No accidental tab detachments
- Drag distance threshold before detaching allowed
i.e. not reducing functionality compred with current version
A tab should be able to:
- change position
- change tab-page
- detached from a window
- attached to any other window
- Realtime tab position changes, during drag, with movement transition to new positions
- Vertical buffer during tab drag (i.e. mouse doesn't have to be over another tab)
- Drag past a threshold away from tabs to detach
- Detach is immediate, without releasing mouse during drag
- Dragging a window with a single-tab moves the window
- Dragging the tab of a single-tab window to a tab in another window attaches the tab to that window immediately, without releasing mouse, and to the tab position where the mouse is
- Tabs change page when dragging past the beginning or end of the tab strip, with a pause and visual feedback that the tab page will change (and has changed, after the pause)
- Start with window with 1 tab
- Drag tab
- Tests
- Does window track tab?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Can you move the mouse faster than the window, and not 'lose' the window?
- Mac: Yes
- Windows: Yes
- Linux: No - when outside original window (requires event forwarding from browser process)
- Can you move to a multi-tab window?
- Mac: Yes
- Windows: Yes
- Linux: Yes
-
Can you let go in a multi-tab window and the drag stops?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Does window track tab?
- Start in a window with less than a full page of tabs
- Drag a tab to sort
- Does the tab change index with no visual issues
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Does the tab change index with no visual issues
- Start in a window with 3 pages of tabs
- Drag a tab from the middle to the 'next page' button
- Does the page change after 1 second?
- Yes
- Does the tab position end up underneath the mouse cursor
- Yes
- Does the space created by the tab also end up in the last position in the next page (under the mouse cursor)?
- Yes
- Does the page change after 1 second?
- Start in a window with less than a full page of tabs
- Drag a tab out to detach
- Does the tab detach?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Does the window continue to track mouse?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Can you move the mouse faster than the window, and not 'lose' the window?
- Mac: Yes
- Windows: Yes
- Linux: No - when outside original window (requires event forwarding)
- Can the window be dragged back to the source?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Can the tab continue to track order changes back at the source?
- Mac: Yes
- Windows: Yes
- Linux: Yes
- Can the window be dragged to another window?
- Mac: Yes
- Window: Yes
- Linux: No - can't yet drag outside bounds of original window, solution pending
- Can the tab continue to track order changes in the other window?
- Mac: Yes
- Windows: Yes
- Linux: -
- Does the tab detach?
- Windows at 125% / 150% dpi
- Actual Windows and Linux with and without 3d hardware accelleration
- Linux: mouse not capturing outside window
- Will be resolved with listening to mouse movement in browser process
- UI movement jank when sorting tabs within a window
- Will be resolved with other incoming performance updates
- Delay when attaching or detaching
- Will be resolved with incoming single-webview performance update
- Tabs change width by a couple of pixels between being dragged and finishing dragging
- macOS: dragging a single-tab window over another covered window does not activate that window
- Resolved by listening to mouseenter and firing action
If it's working, it looks like this: