[Suggestion] Single click to switch between Tabs

[caodangtinh]

Hi, can we switch between tabs with a single click instead of a double click? It has better user experience I think.

[sageacy]

I understand the intent of this request. But I'm curious, how would you then suggest handle normal single-click selection criteria in the tree which will select a node, but not open it.

[kalahari]

@sageacy I would handle that with a modifier key plus click, like a web select list

[PowerWeb5]

@sageacy +1 for single click to activate.

IMO, tedious double click to activate and lack of modifier key support are the primary blocker for adopting Link Map vs nearly any other tab manager extension or even built-in Vertical Tabs. I've never seen another extension that requires double click to activate a tab, and it makes it far too tedious to use vs any other alternative without it.

This usually can be implemented without even requiring use of modifier keys (though I suggest supporting those as well). As the primary use case for single click (without modifier keys) other than activation is dragging, you can handle that easily as described below.

Otherwise, clicking on buttons like +/- and hover buttons etc should work the same either way (not activating a tab, just ignoring as already handled by the clicked button).

That said, I would highly suggest you also support modifier keys and have the following as the default mode of operation, consistent with most tab managers and tree view controls in general.

1. Single click: switch to the clicked on tab. For groups, go to last activated tab in that group (or first if unknown), expanding the group if not expanded already.
2. Middle click to close a tab or tree (with option to delete entire tree always vs only if collapsed, and otherwise reparenting children to the first child, so don't end up with mess up many children have to manually delete).
3. Shift-click: (like in built-in Vertical Tabs in Edge, and most other places) start/finish multi-selecting a range of tabs (even if not with same parent ideally), which can then drag, right click, close, etc. together.
4. Ctrl-click: (like in Vertical Tabs) add/remove a tab node to a multi-selection (including children by default). For bult operations
5. Alt-click: Default to current single click behavior, for whatever other operation you might want or have intended single click to do ((which I'm not sure what it is for, unless Link Map was designed exclusively for touch screens, since usually its for multi selection which Link Map doesn't seem to support.
6. Double-click: edit/rename a note, group or tab. (Can optionally expand/collapse a parent tab, if/when is one instead, if don't allow renaming).
7. Shift-double-click: Expand/collapse a tree (can be faster than mousing over to a small +/- button).
8. Right-click: Show context menu

You can see as examples of typically expected and useful time saving functionality for interacting with tab sidebars:

1. Tabs Outline (classic, though unmaintained Chrome extension)
2. Tree Style Tab (Firefox extension only, unrelated to Chrome extension of same name)
3. Sidebery (Firefox only extension)
4. Vertical Tabs mode in Edge/Chrome/Vivaldi
5. ABookmark (Chrome extension - its Tab Nodes view (4th mode button), useful reference for advanced features, though not focused on tab management and overcomplicated in general)

If desired, you could have an option "Double click to switch tabs" mode (but not enabled by default IMO):

1. Single-click: single select (or perform same as Alt-click behavior, defined above)
2. Double-click: Activate tab
3. Alt-click: Rename/Edit
4. Everything else the same as described above for Single-click to switch tabs mode...

Differentiating between single click to activate vs drag is usually handled simply by a drag flag set if mousemove occurs after mousedown and before mouseup. Sometimes can be limited to movement threshold for unintentional slight movements.

let drag = false;
document.addEventListener('mousedown', () => drag = false);
document.addEventListener('mousemove', () => drag = true);
document.addEventListener('mouseup', () => drag ? ondrag() : onclick()));

Alternatively, you can use document.onclick vs document.ondrag events with elements that have draggable=true, which essentially does the above automatically.

You can see examples of both techniques here: https://www.geeksforgeeks.org/how-to-differentiate-mouse-click-and-drag-event-using-javascript/

The library you use should probably already differentiate between click vs double click events (eg. as used at https://github.com/GarinZ/link-map/blob/c275525f66b31ddd91b3530588d4e277100671df/src/tree/features/tab-master-tree/fancy-tab-master-tree.ts#L111 ) but if not you can trigger a delayed click event with timeout like 300ms (ideally configurable, possiblye after mouseup) and cancel single click event if a double click event gets triggered instead.

If desired, you can detect touch (vs click) events and have touch perform same as click but with single click activation disabled, as if was in "Double click to switch tabs" mode, done like shown at: https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/

But even then, I suggest that only be the case when detecting actual touch event (as shown in example), not just because a touch screen capability exists, as often goes unused with mouse or touchpad (as even supported on iPad Pro etc) (unless you add options for explicitly enabled and persisted Touch Mode with easy toggle in sidebar toolbar.)

If touch screen is detected, however, you might want to also show in context menu the following:

1. Show in context menu: Start/End Multi-Select and Start/End Range Select in context menu.
2. Show multi-select checkboxes based on a setting (and/or when Touch Mode is detected), and/or
3. Have hovering over the favicon show a multi-selection checkbox (like ABookmark does).

Checkbox selection (via option 2 or 3) is useful in general even with Ctrl and Shift multi-selection, but lower priority as long as at least those basic expected Ctrl/Shift multi-select modes are supported.

[XiaoLinXiaoZhu]

This was exactly what I wanted, and it bothered me to have to double-click to switch. I have an alternative solution to how to differentiate between switching and expanding tab pages, just change the treemap to a style like below - just enlarge the expand and zoom out buttons to make them easy to click. This way, it's easy to switch between tabs and open collapsed content