Skip to content

Commit 90135b8

Browse files
Kateryna ProkopenkoDevtools-frontend LUCI CQ
Kateryna Prokopenko
authored and
Devtools-frontend LUCI CQ
committed
[DevToolsUIKit] Add select menu examples
Screenshot: https://imgur.com/a/G20hkje Bug: 414335836, 413414983 Change-Id: I30e93af26032a2411aae87696cedf4f315f5b739 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6578543 Commit-Queue: Alex Rudenko <[email protected]> Auto-Submit: Kateryna Prokopenko <[email protected]> Reviewed-by: Alex Rudenko <[email protected]>
1 parent 9da17a4 commit 90135b8

File tree

3 files changed

+90
-221
lines changed

3 files changed

+90
-221
lines changed

‎front_end/ui/components/docs/select_menu/basic.html‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,10 @@
1010
<meta charset="UTF-8" />
1111
<meta name="viewport" content="width=device-width" />
1212
<title>Select menu example</title>
13-
<style>
14-
#root {
15-
height: 100%;
16-
display: flex;
17-
justify-content: center;
18-
align-items: center;
19-
}
20-
.place-holder {
21-
display: flex;
22-
align-items: center;
23-
margin: 20px;
24-
justify-content: center;
25-
flex-direction: column;
26-
width: 130px;
27-
height: 290px;
28-
}
29-
#place-holder-4 {
30-
height: 400px;
31-
}
32-
devtools-select-menu {
33-
display: block;
34-
height: 25px;
35-
width: 100px;
36-
}
37-
</style>
3813
</head>
3914

4015
<body>
41-
<div id="root"></div>
4216
<script src="./basic.js" type="module"></script>
4317
</body>
4418

45-
</html>
19+
</html>

‎front_end/ui/components/docs/select_menu/basic.ts‎

Lines changed: 86 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -2,202 +2,94 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
6-
import * as Menus from '../../../../ui/components/menus/menus.js';
5+
import * as UI from '../../../../ui/legacy/legacy.js';
6+
import * as Lit from '../../../lit/lit.js';
7+
import * as VisualLogging from '../../../visual_logging/visual_logging.js';
78

8-
const menus = [
9-
{
10-
items: [
11-
{
12-
name: 'Opt 1',
13-
value: '1',
14-
},
15-
{
16-
name: 'Opt 2',
17-
value: '2',
18-
selected: false,
19-
},
20-
{
21-
name: 'Opt 3',
22-
value: '3',
23-
group: '',
24-
},
25-
{
26-
name: 'Opt 4',
27-
value: '4',
28-
},
29-
],
30-
buttonTitle: 'Show dialog',
31-
},
32-
{
33-
items: [
34-
{
35-
name: 'Opt 1',
36-
value: '1',
37-
},
38-
{
39-
name: 'Opt 2',
40-
value: '2',
41-
selected: false,
42-
},
43-
{
44-
name: 'Opt 3',
45-
value: '3',
46-
},
47-
{
48-
name: 'Opt 4',
49-
value: '4',
50-
},
51-
],
52-
buttonTitle: 'Show dialog',
53-
position: Dialogs.Dialog.DialogVerticalPosition.TOP,
54-
showArrow: true,
55-
},
56-
{
57-
items: [
58-
{
59-
name: 'Opt 1',
60-
value: '1',
61-
selected: false,
62-
},
63-
{
64-
name: 'Opt 2',
65-
value: '2',
66-
},
67-
{
68-
name: 'Opt 3',
69-
value: '3',
70-
},
71-
{
72-
name: 'Opt 4',
73-
value: '4',
74-
},
75-
],
76-
buttonTitle: 'Show dialog',
77-
position: Dialogs.Dialog.DialogVerticalPosition.BOTTOM,
78-
showArrow: true,
79-
},
80-
{
81-
items: [
82-
{
83-
name: 'Opt 1',
84-
value: '1',
85-
group: 'Group 1',
86-
selected: false,
87-
},
88-
{
89-
name: 'Opt 2',
90-
value: '2',
91-
group: 'Group 1',
92-
},
93-
{
94-
name: 'Opt 3',
95-
value: '3',
96-
group: 'Group 2',
97-
},
98-
{
99-
name: 'Opt 4',
100-
value: '4',
101-
group: 'Group 2',
102-
},
103-
],
104-
buttonTitle: 'Show dialog',
105-
position: Dialogs.Dialog.DialogVerticalPosition.TOP,
106-
showArrow: true,
107-
hasGroups: true,
108-
},
109-
{
110-
items: [
111-
{
112-
name: 'Option 1',
113-
value: '1',
114-
selected: true,
115-
},
116-
{
117-
name: 'Option 2',
118-
value: '2',
119-
},
120-
{
121-
name: 'Option 3',
122-
value: '3',
123-
},
124-
{
125-
name: 'Option 4',
126-
value: '4',
127-
},
128-
],
129-
showArrow: true,
130-
},
131-
{
132-
items: [
133-
{
134-
name: 'Option 1',
135-
value: '1',
136-
selected: true,
137-
},
138-
],
139-
buttonTitle: 'Disabled',
140-
disabled: true,
141-
},
142-
];
143-
const root = document.getElementById('root');
144-
menus.forEach((menu, i) => {
145-
const allItems: Menus.Menu.MenuItem[] = [];
146-
const selectMenu = new Menus.SelectMenu.SelectMenu();
147-
if (menu.buttonTitle) {
148-
selectMenu.buttonTitle = menu.buttonTitle;
149-
}
150-
selectMenu.position = menu.position || Dialogs.Dialog.DialogVerticalPosition.BOTTOM;
151-
const firstMenuGroup = new Menus.SelectMenu.SelectMenuGroup();
152-
firstMenuGroup.name = 'Group 1';
153-
const secondMenuGroup = new Menus.SelectMenu.SelectMenuGroup();
154-
secondMenuGroup.name = 'Group 2';
155-
selectMenu.showArrow = Boolean(menu.showArrow);
156-
selectMenu.disabled = Boolean(menu.disabled);
157-
menu.items.forEach((item, j) => {
158-
const selectMenuItem = new Menus.Menu.MenuItem();
159-
selectMenuItem.value = item.value;
160-
selectMenuItem.selected = Boolean(item.selected);
161-
const itemContent = document.createElement('div');
162-
itemContent.textContent = item.name;
163-
selectMenuItem.appendChild(itemContent);
164-
if (menu.hasGroups && j < 2) {
165-
firstMenuGroup.appendChild(selectMenuItem);
166-
} else if (menu.hasGroups) {
167-
secondMenuGroup.appendChild(selectMenuItem);
168-
} else {
169-
selectMenu.appendChild(selectMenuItem);
170-
}
171-
allItems.push(selectMenuItem);
172-
});
9+
const {html} = Lit;
17310

174-
if (menu.hasGroups) {
175-
selectMenu.appendChild(firstMenuGroup);
176-
selectMenu.appendChild(secondMenuGroup);
177-
}
11+
function createDivWithP(text: string): HTMLDivElement {
12+
const div = document.createElement('div');
13+
div.style.paddingLeft = '25px';
14+
const p = document.createElement('p');
15+
p.style.marginLeft = '-25px';
16+
p.textContent = text;
17+
div.appendChild(p);
18+
document.body.appendChild(div);
19+
return div;
20+
}
21+
22+
{
23+
const simpleMenuHTML = createDivWithP('Simple item select with lit-html');
24+
Lit.render(
25+
html`<select id="menu" aria-label="Select an option"
26+
@change=${onChange}>
27+
<option hidden>Select an option</option>
28+
<option id="option-1" jslog=${VisualLogging.item('option-1').track({
29+
click: true
30+
})}
31+
value="Option1">Option 1</option>
32+
<option jslog=${VisualLogging.item('option-2').track({
33+
click: true
34+
})}
35+
value="Option2">Option 2</option>
36+
<option disabled jslog=${VisualLogging.item('option-3').track({
37+
click: true
38+
})}
39+
value="Option3">Option 3</option>
40+
</select>`,
41+
simpleMenuHTML);
42+
}
43+
44+
{
45+
const groupMenuHTML = createDivWithP('Select with groups with lit-html');
46+
Lit.render(
47+
html`<select aria-label="Select an option"
48+
@change=${onChange}>
49+
<optgroup label="Group 1">
50+
<option jslog=${VisualLogging.item('option-1').track({
51+
click: true
52+
})}
53+
value="Option1">Option 1</option>
54+
</optgroup>
55+
<optgroup label="Group 2">
56+
<option jslog=${VisualLogging.item('option-2').track({
57+
click: true
58+
})}
59+
value="Option2">Option 2</option>
60+
<option jslog=${VisualLogging.item('option-3').track({
61+
click: true
62+
})}
63+
value="Option3">Option 3</option>
64+
</optgroup>
65+
</select>`,
66+
groupMenuHTML);
67+
}
68+
69+
{
70+
const simpleMenuImperative = createDivWithP('Simple item select with imperative API');
71+
const simpleSelect = UI.UIUtils.createSelect('Select an option', [
72+
'Option 1',
73+
'Option 2',
74+
'Option 3',
75+
]);
76+
simpleSelect.addEventListener('change', event => onChange(event));
77+
simpleMenuImperative.appendChild(simpleSelect);
78+
}
17879

179-
if (root) {
180-
const ph = document.createElement('div');
181-
ph.classList.add('place-holder');
182-
ph.setAttribute('id', `place-holder-${i + 1}`);
183-
root.appendChild(ph);
184-
const result = document.createElement('div');
185-
ph.appendChild(result);
186-
selectMenu.addEventListener('selectmenuselected', (_evt: Event) => {
187-
const evt = _evt as Menus.SelectMenu.SelectMenuItemSelectedEvent;
188-
let item = null;
189-
for (let i = 0; i < allItems.length; i++) {
190-
allItems[i].selected = allItems[i].value === evt.itemValue;
191-
if (allItems[i].selected) {
192-
item = allItems[i];
193-
}
194-
}
195-
if (!item) {
196-
return;
197-
}
198-
result.innerText = `Selected option: ${item.innerText.trim()}`;
199-
});
80+
{
81+
const groupMenuImperative = createDivWithP('Select with groups with imperative API');
82+
const group1 = new Map<string, string[]>([['Group 1', ['Option 1']]]);
83+
const group2 = new Map<string, string[]>([['Group 2', ['Option 2', 'Option 3']]]);
84+
const groupSelect = UI.UIUtils.createSelect('Select an option', [group1, group2]);
85+
groupSelect.addEventListener('change', event => onChange(event));
86+
groupMenuImperative.appendChild(groupSelect);
87+
}
20088

201-
ph.appendChild(selectMenu);
89+
function onChange(event: Event): void {
90+
const menu = event.target;
91+
if (menu instanceof HTMLSelectElement) {
92+
// eslint-disable-next-line no-console
93+
console.log('Option selected: ', menu.value);
20294
}
203-
});
95+
}

‎front_end/ui/visual_logging/KnownContextValues.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2677,6 +2677,9 @@ export const knownContextValues = new Set([
26772677
'opera-presto-windows',
26782678
'opera-windows',
26792679
'operator',
2680+
'option-1',
2681+
'option-2',
2682+
'option-3',
26802683
'optional',
26812684
'options',
26822685
'or',

0 commit comments

Comments
 (0)