1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-env browser */
"use strict";
// A command in a menu.
const {
createFactory,
createRef,
PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const { button, li, span } = dom;
loader.lazyGetter(this, "Localized", () =>
createFactory(
require("resource://devtools/client/shared/vendor/fluent-react.js")
.Localized
)
);
class MenuItem extends PureComponent {
static get propTypes() {
return {
// An optional keyboard shortcut to display next to the item.
// (This does not actually register the event listener for the key.)
accelerator: PropTypes.string,
// A tri-state value that may be true/false if item should be checkable,
// and undefined otherwise.
checked: PropTypes.bool,
// Any additional classes to assign to the button specified as
// a space-separated string.
className: PropTypes.string,
// A disabled state of the menu item.
disabled: PropTypes.bool,
// URL of the icon to associate with the MenuItem. (Optional)
//
// e.g. chrome://devtools/skim/image/foo.svg
//
// This may also be set in CSS using the --menuitem-icon-image variable.
// Note that in this case, the variable should specify the CSS <image> to
// use, not simply the URL (e.g.
// "url(chrome://devtools/skim/image/foo.svg)").
icon: PropTypes.string,
// An optional ID to be assigned to the item.
id: PropTypes.string,
// The item label for use with legacy localization systems.
label: PropTypes.string,
// The Fluent ID for localizing the label.
l10nID: PropTypes.string,
// An optional callback to be invoked when the item is selected.
onClick: PropTypes.func,
// Optional menu item role override. Use this property with a value
// "menuitemradio" if the menu item is a radio.
role: PropTypes.string,
// An optional text for the item tooltip.
tooltip: PropTypes.string,
};
}
/**
* Use this as a fallback `icon` prop if your MenuList contains MenuItems
* with or without icon in order to keep all MenuItems aligned.
*/
static get DUMMY_ICON() {
return `data:image/svg+xml,${encodeURIComponent(
'<svg height="16" width="16"></svg>'
)}`;
}
constructor(props) {
super(props);
this.labelRef = createRef();
}
componentDidMount() {
if (!this.labelRef.current) {
return;
}
// Pre-fetch any backgrounds specified for the item.
const win = this.labelRef.current.ownerDocument.defaultView;
this.preloadCallback = win.requestIdleCallback(() => {
this.preloadCallback = null;
if (!this.labelRef.current) {
return;
}
const backgrounds = win
.getComputedStyle(this.labelRef.current, ":before")
.getCSSImageURLs("background-image");
for (const background of backgrounds) {
const image = new Image();
image.src = background;
}
});
}
componentWillUnmount() {
if (!this.labelRef.current || !this.preloadCallback) {
return;
}
const win = this.labelRef.current.ownerDocument.defaultView;
if (win) {
win.cancelIdleCallback(this.preloadCallback);
}
this.preloadCallback = null;
}
render() {
const attr = {
className: "command",
};
if (this.props.id) {
attr.id = this.props.id;
}
if (this.props.className) {
attr.className += " " + this.props.className;
}
if (this.props.icon) {
attr.className += " iconic";
attr.style = { "--menuitem-icon-image": "url(" + this.props.icon + ")" };
}
if (this.props.onClick) {
attr.onClick = this.props.onClick;
}
if (this.props.tooltip) {
attr.title = this.props.tooltip;
}
if (this.props.disabled) {
attr.disabled = this.props.disabled;
}
if (this.props.role) {
attr.role = this.props.role;
} else if (typeof this.props.checked !== "undefined") {
attr.role = "menuitemcheckbox";
} else {
attr.role = "menuitem";
}
if (this.props.checked) {
attr["aria-checked"] = true;
}
const children = [];
const className = "label";
// Add the text label.
if (this.props.l10nID) {
// Fluent localized label.
children.push(
Localized(
{ id: this.props.l10nID, key: "label" },
span({ className, ref: this.labelRef })
)
);
} else {
children.push(
span({ key: "label", className, ref: this.labelRef }, this.props.label)
);
}
if (this.props.l10nID && this.props.label) {
console.warn(
"<MenuItem> should only take either an l10nID or a label, not both"
);
}
if (!this.props.l10nID && !this.props.label) {
console.warn("<MenuItem> requires either an l10nID, or a label prop.");
}
if (typeof this.props.accelerator !== "undefined") {
const acceleratorLabel = span(
{ key: "accelerator", className: "accelerator" },
this.props.accelerator
);
children.push(acceleratorLabel);
}
return li(
{
className: "menuitem",
role: "presentation",
},
button(attr, children)
);
}
}
module.exports = MenuItem;
|
