[go: nahoru, domu]

Added a QuickPick and QuickInput UI modality.

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>
diff --git a/front_end/ui/Dialog.js b/front_end/ui/Dialog.js
index b816644..de61eb6 100644
--- a/front_end/ui/Dialog.js
+++ b/front_end/ui/Dialog.js
@@ -99,6 +99,7 @@
       this._targetDocument.removeEventListener('keydown', this._targetDocumentKeyDownHandler, true);
     }
     this._restoreTabIndexOnElements();
+    this.dispatchEventToListeners('hidden');
     delete Dialog._instance;
   }