mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 08:15:31 +00:00
Bug 1472938 - Preload images used on MenuItem labels; r=jdescottes
This is to avoid rendering for a frame or two without the menu item icons being visible which causes flicker, particularly on lower-end machines. MozReview-Commit-ID: Aq7AOkPwu9V --HG-- extra : rebase_source : ee371cf848dcf39ec9f3cd9689268c3e9ef41c54
This commit is contained in:
parent
18d91510d9
commit
c1308d9e27
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
// A command in a menu.
|
// A command in a menu.
|
||||||
|
|
||||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
const { createRef, PureComponent } = require("devtools/client/shared/vendor/react");
|
||||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||||
const { button, li, span } = dom;
|
const { button, li, span } = dom;
|
||||||
@ -48,6 +48,27 @@ class MenuItem extends PureComponent {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.labelRef = createRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.labelRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-fetch any backgrounds specified for the button.
|
||||||
|
const win = this.labelRef.current.ownerDocument.defaultView;
|
||||||
|
const backgrounds = win
|
||||||
|
.getComputedStyle(this.labelRef.current, ":before")
|
||||||
|
.getCSSImageURLs("background-image");
|
||||||
|
for (const background of backgrounds) {
|
||||||
|
const image = new Image();
|
||||||
|
image.src = background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const attr = {
|
const attr = {
|
||||||
className: "command",
|
className: "command",
|
||||||
@ -80,7 +101,7 @@ class MenuItem extends PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const textLabel = span(
|
const textLabel = span(
|
||||||
{ className: "label" },
|
{ className: "label", ref: this.labelRef },
|
||||||
this.props.label
|
this.props.label
|
||||||
);
|
);
|
||||||
const children = [textLabel];
|
const children = [textLabel];
|
||||||
|
Loading…
Reference in New Issue
Block a user