QuickOpen is a highly-useful UI affordance for the DevTools. However,
the actual implementation introduces some problems with reusability;
the QuickOpen tool is a global DevTools singleton that coalesces
multiple "Providers" across DevTools to handle activities like Go To
Line, Open document, or Invoke Command. Because it is a singleton, a
developer who wanted to leverage that input modality would need to drop
to the FilteredListWidget, which is tightly coupled to the QuickOpen
implementation and also has a non-obvious implementation pattern (one
would need to implement a Provider, and there is no straightforward way
to observe when the user cancels out of it).
This change borrows a simplified version of the VS Code QuickPick and
QuickInput APIs. With this, a DevTools developer can write a single
line, using an awaitable, so that the meaning and purpose of the input
collection is straightforward:
const text = await QuickInput.show({
prompt: 'Please enter some information.',
value: 'A default value',
valueSelection: [0, 15],
});
// text will contain the entered value, or undefined
QuickPick requires a few more lines to implement, but provides a
similarly easy-to-use interface:
const demoMenu1 = [
{
label: 'Item 1',
},
{
label: 'Item 2',
},
{
label: 'Item 3',
}
];
const choice = await QuickPick.show(demoMenu1, {
placeHolder: 'Choose from these options:'
});
// choice contains one of the objects from demoMenu1, or undefined
The explainer can be found here:
https://docs.google.com/document/d/1EibIlPCeH-672wncOScGoMbSs0EzNY4SSaqJng-5-S4/edit#
... and GIFs of these in action can be found here:
https://imgur.com/a/GCfpHQ3
Bug: 1103402
Change-Id: I1ca7c7c87243553ff45d00369ce8996c2914be93
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2288530
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
Johan Bay