Closed Bug 1808787 Opened 1 year ago Closed 1 year ago

Optimize drag-and-drop into tabbar with lots of tabs

Categories

(Firefox :: Tabbed Browser, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
112 Branch
Tracking Status
firefox112 --- fixed

People

(Reporter: Oriol, Assigned: Oriol)

References

(Blocks 1 open bug, Regressed 1 open bug)

Details

(Keywords: perf:frontend)

Attachments

(2 files)

You can test this by opening some thousand tabs (better do it in a new window):

gBrowser.addMultipleTabs(true, 0, new Array(6666).fill({}));

Then, make sure the tabbar is scrolled to the end (e.g. open a new tab, or right-click the selected tab and move it to the end).

Now load http://example.com, double click the word "Example", and drag it into the tabbar. Don't release the mouse, move it along the tabs.

The indicator for the drop location between tabs will feel very sluggish.

From the profiler, the problem is in _getDropIndex. Well, of course:

        for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
          if (
            !tabs[i].hidden &&
            event.screenX >
              tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
          ) {
            return i;
          }
        }

Before you release the mouse, tab seems to always be null, so if the drop zone is around the end of the tabbar, all tabs will be iterated.

This could clearly benefit from a binary search.

Attached video Screen recording

_getDropIndex was iterating all tabs sequentially until it would find
the right index, with an expensive getBoundingClientRect() for each tab.

This causes performance issues when dragging something into a position
around the end of a tabbar containing with lots of tabs.

This patch takes advantage of the fact that the bounding rects of the
non-hidden tabs follow the same order as the tab indices, so the search
can be optimized with a binary approach.

Assignee: nobody → oriol-bugzilla
Status: NEW → ASSIGNED
Attachment #9310949 - Attachment description: Bug 1808787 - Optimize drag-and-drop into tabbar with lots of tabs. r?Dao → Bug 1808787 - Optimize drag-and-drop into tabbar with lots of tabs. r?Gijs
Pushed by oriol-bugzilla@hotmail.com:
https://hg.mozilla.org/integration/autoland/rev/e31daa0e91c5
Optimize drag-and-drop into tabbar with lots of tabs. r=dao,Gijs
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 112 Branch
Blocks: 1791393
Regressions: 1820912
Flags: qe-verify+

Hello,
Whilst verifying the fix on latest Nightly I noticed that gBrowser.addMultipleTabs(true, 0, new Array(6666).fill({})); will give the following error in the Browser Console(and will not open any tabs whatsoever):

Uncaught TypeError: gBrowser.addMultipleTabs is not a function
<anonymous> debugger eval code:1
getEvalResult resource://devtools/server/actors/webconsole/eval-with-debugger.js:251
evalWithDebugger resource://devtools/server/actors/webconsole/eval-with-debugger.js:172
evaluateJS resource://devtools/server/actors/webconsole.js:960
evaluateJSAsync resource://devtools/server/actors/webconsole.js:851
makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103

This works as expected on Firefox 102.0b6. Is this change in Nightly intented?

Flags: needinfo?(oriol-bugzilla)

addMultipleTabs has been renamed in bug 1823706, use createTabsForSessionRestore. Or well, that's basically a hack to open lots of tabs faster, the slower standard way is more reliable:

for (let i=0; i<6666; ++i) tabs.push(gBrowser.addTrustedTab("about:blank", {createLazyBrowser: true}));
Flags: needinfo?(oriol-bugzilla)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: