Add horizontal resizability to autocomplete popup

[sakurai-youhei]

Summary

This PR adds horizontal resizability to the autocomplete popup. The resized width does not persist, so it returns to the default on every load.

^^^ Demonstrated on Chrome Version 124.0.6367.91 (Official Build) (64-bit).

Appearance on Edge Version Version 124.0.2478.51 (Official build) (64-bit)

Appearance on Firefox 125.0.2 (64-bit)

Appearance on Safari 17.2.1 (19617.1.17.11.12)

Show scroll bars=Automatically

Show scroll bars=Always

Appearance on iOS Safari 17.4.1 - popup does not looks good same as before

vvvThis branch:

vvv8.13.0:

Appearances at 232897c

^^^ Demonstrated on Chrome Version 123.0.6312.123 (Official Build) (64-bit).

Appearance on Edge Version 123.0.2420.81 (Official build) (64-bit)

Appearance on Firefox 124.0.2 (64-bit)

Appearance on Safari 17.2.1 (19617.1.17.11.12)

Appearances at 98864be

^^^ Demonstrated on Chrome Version 123.0.6312.106 (Official Build) (64-bit).

Appearance on Edge Version 123.0.2420.81 (Official build) (64-bit)

Appearance on Firefox 124.0.2 (64-bit)

Appearance on Safari 17.2.1 (19617.1.17.11.12)

Closes #171268
Closes #125186

Justification

The autocomplete popup width has been fixed to 280px HERE for a long time. Extending it would also be appreciated as ace 1.32.9 defaults it to 300px, and other projects using the ace make it even wider. However, this PR doesn't scope the extension because it's not easy to determine the best width. Furthermore, automatic fitting to suggestions' width is also excluded from the scope to avoid generating new corner cases.

A horizontal scrollbar is an alternative solution, but it's less cost-effective because it requires writing code to sync two separate DOM elements, .ace_scrollbar.ace_scrollbar-h and .ace_scroller.

For keyboard accessibility, it's definitely best to add two shortcuts, making the autocomplete popup wider and narrower. However, the questions are what key combinations are natural for them and what delta is appropriate per expansion/shrink. This could be addressed as another enhancement if key combinations were suggested at least.

CSS resizer on Safari

The CSS resizer behaves uniquely on Safari. You can't resize an element if another element overlaps the resizer like this.

data:text/html,<div%20style="position:fixed;width:280px;height:128px;resize:both;border:solid%201px;overflow:hidden;"><div%20style="position:absolute;right:0px;bottom:0px;">FOO<div></div>

Safari.17.2.1.2024-04-18.23.20.05.mov

The workaround is to set a negative z-index to the overlapping element like this.

data:text/html,<div%20style="position:fixed;width:280px;height:128px;resize:both;border:solid%201px;overflow:hidden;"><div%20style="position:absolute;right:0px;bottom:0px;z-index:-1;">FOO<div></div>

Checklist

• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

Release note

Adds horizontal resizability to the autocomplete popup on the Dev Tools Console

[ElenaStoeva]

Thanks for working on this @sakurai-youhei. I tested locally and the resizability works well overall. However, I noticed a small visual regression - now the side bar covers the last letter of each word specifying the type of the suggestion:

You can uncover them by extending the autocomplete popup to the right, but they are covered in the initial state when the popup appears and I don't think this looks good visually. Would there be any fix for this?

Also, please keep in mind that we are in the process of migrating Console to Monaco editor (see #180207) so we might need to implement this there as well once we complete the migration.

[sakurai-youhei]

@ElenaStoeva Thank you for finding the regression. I didn't notice it because it didn't impact Chrome on my laptop. I've fixed it in the latest commit.

Regarding the new Console, noted and will try to implement it somehow through another PR Monaco Editor has built-in horizontal and vertical resizers that will be activated by one or more suggestions even in the new Console. The rest is definitely off-topic, but the following is a quick implementation of the suggestionProvider and how it looks.

Resize in new Console

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx at 672bb5a

/*
 * https://github.com/elastic/kibana/blob/main/packages/shared-ux/code_editor/impl/code_editor.tsx#L65-L70
 * https://microsoft.github.io/monaco-editor/docs.html#interfaces/languages.CompletionItemProvider.html
 * https://microsoft.github.io/monaco-editor/playground.html?source=v0.44.0#example-extending-language-services-completion-provider-example
 */
suggestionProvider={
  new (class implements monaco.languages.CompletionItemProvider {
    provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
      const word = model.getWordUntilPosition(position);
      const range = {
        startLineNumber: position.lineNumber,
        endLineNumber: position.lineNumber,
        startColumn: word.startColumn,
        endColumn: word.endColumn,
      };
      return {
        suggestions: Array(20).fill({
          label: '"test-label"',
          kind: monaco.languages.CompletionItemKind.Function,
          documentation: 'test documentation',
          insertText: '"test": "*"',
          range,
        }),
      };
    }
  })()
}

[ElenaStoeva]

Thanks for addressing my feedback @sakurai-youhei! Tested again and now it looks good to me.

Regarding the new Console, Monaco Editor has built-in horizontal and vertical resizers that will be activated by one or more suggestions even in the new Console. The rest is definitely off-topic, but the following is a quick implementation of the suggestionProvider and how it looks.

Noted, thanks! We'll keep this in mind when we implement the autocomplete functionality in the Console Monaco editor. cc: @yuliacech

[MichaelMarcialis]

Thanks @sakurai-youhei! I've added some comments below for my initial review.

[MichaelMarcialis]

Thanks for the change and comments @sakurai-youhei. I've responded to your comments below. Assuming you're able to address those responses, I'll go ahead and approve this now to unblock you for feature freeze.

[sakurai-youhei]

@MichaelMarcialis I changed how to expose the resizer on Safari and updated the PR description accordingly.

I believe the negative z-index doesn't create a new incompatibility because #151386 has already introduced it. But I know it doesn't mean zero concerns around this negative z-index trick. Although I've gone through browsers again, I appreciate your review & checks again. If you find this way is not preferable, please let me know, and I will try to find another.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 3882e30

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
console	32.6KB	32.9KB	+322.0B

History

• 💔 Build #203882 failed bd3b48f
• 💔 Build #203436 failed 232897c
• 💔 Build #201643 failed 09a808a
• 💔 Build #201637 failed 1b8af03

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[MichaelMarcialis]

LGTM. Thanks!