mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 12:33:47 +08:00
Rob Paveza
9e33bc96e1
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>
21 lines
1.2 KiB
XML
21 lines
1.2 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<grit-part>
|
|
<message name="IDS_DEVTOOLS_06f884351ae9dbaaca31602b74d0ed4e" desc="Text in Quick Open of the Command Menu">
|
|
Type '?' to see available commands
|
|
</message>
|
|
<message name="IDS_DEVTOOLS_532ce4f18bb96f70d8ee338082ad7ed0" desc="Title of quick open dialog">
|
|
Quick open
|
|
</message>
|
|
<message name="IDS_DEVTOOLS_806c4f7f91556f25136ea360e1d4d15b" desc="Prompt for free-form input in the QuickInput dialog; Enter and Escape here are keyboard buttons and should be localized as appropriate.">
|
|
<ph name="THIS__OPTIONS_PROMPT">$1s<ex>Provide some information.</ex></ph> (Press 'Enter' to confirm or 'Escape' to cancel.)
|
|
</message>
|
|
<message name="IDS_DEVTOOLS_c986e2ac993abbee8febcc7e21ebb4d8" desc="Aria-placeholder text for quick open dialog prompt">
|
|
Type question mark to see available commands
|
|
</message>
|
|
<message name="IDS_DEVTOOLS_db1accfc3285ca06387a9b35f80523a7" desc="Aria label for quick open dialog prompt">
|
|
Quick open prompt
|
|
</message>
|
|
<message name="IDS_DEVTOOLS_8bb9829a676055080c3d4507e0b5f201" desc="Text in Command Menu of the Command Menu">
|
|
No commands found
|
|
</message>
|
|
</grit-part> |