Skip to content

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.

Preview Builds

2017-12-01: https://www.dropbox.com/s/06mf0wvo0kkhg8o/Brave-preview-tab-dragging-20171201.app.zip?dl=1

Goals

  • User-happiness with tab sorting
    • More immediate visual feedback
    • More intuitive operations
    • No accidental tab detachments
      • Drag distance threshold before detaching allowed

Minimum required functionality

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

Aims

  • 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)

Testing the implementation

Single Tab moves window

  • 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

 

Tab sort

Single tab page

  • 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

Multiple tab pages

  • 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

Tab detach

  • 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: -

Additional tests

  • Windows at 125% / 150% dpi
  • Actual Windows and Linux with and without 3d hardware accelleration

Known issues

  • 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

Implementation detail

If it's working, it looks like this:

Tab sorting within a single tab-page

sort-single-page

Tab sorting between tab-pages

sort-between-pages

Detach a tab to its own window

detach-simple

Attach a single-tab window to another window

attach-single-page

Attach and detach and attach!

attach-and-detach-and-attach