nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1630681 - Avoid a sync layout flush in the main thread of the parent process when rendering the Password Manager autocomplete popup r=MattN

Browse source 
Instead of forcing a sync layout flush every time the autocomplete popup is opened, this forces a less expensive sync style flush instead (see [diff profile](https://perfht.ml/2VKZF77)). This results in a 29% performance improvement in the time it takes to show the autocomplete popup on my machine (Bug 1619498; average time across 5 measurements for the _first time_ the popup is shown went from 45 ms down to 32 ms).

Other approaches that were considered to avoid any flushing:
* `windowUtils.getBoundsWithoutFlushing`: Unfortunately, `getBoundingClientRect` couldn't be replaced with `windowUtils.getBoundsWithoutFlushing`, because the previously computed width of the popup is `0` when it is first shown, due to it starting out hidden (i.e. `display: none`).
* `promiseDocumentFlushed`: This method is async while all of the surrounding autocomplete UI code is sync, so while it's not impossible, it would be difficult to implement a simple fix.

Differential Revision: https://phabricator.services.mozilla.com/D71254
This commit is contained in:
Bianca Danforth 2020-04-20 23:54:03 +00:00
parent 02f2325796
commit 1256767ba1
1 changed files with 5 additions and 3 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

8
toolkit/content/widgets/autocomplete-richlistitem.js
View file

@ -653,11 +653,13 @@
} }
_adjustAcItem() { _adjustAcItem() {
let outerBoxRect = this.parentNode.getBoundingClientRect(); const popup = this.parentNode.parentNode;
const minWidth = getComputedStyle(popup).minWidth.replace("px", "");
// Make item fit in popup as XUL box could not constrain // Make item fit in popup as XUL box could not constrain
// item's width // item's width
this.firstElementChild.style.width = outerBoxRect.width + "px"; // popup.width is equal to the input field's width from the content process
this.firstElementChild.style.width =
Math.max(minWidth, popup.width) + "px";
} }
_onOverflow() {} _onOverflow() {}