A Better Autocomplete Dropdown for the Looker IDE

The Problem

Overall, I find editing in the Looker IDE pretty great, but there is one thing that I constantly struggle with and that is the autocomplete dropdown. I am constantly faced with variable names being cut off due to the small width and lack of scrolling. I often left unable to find the correct variable name that I am looking for.


(sorry for the poor example, it’s the best I can show right now)

For me, the issue boils down to 2 parts: the window is two small and there’s no vertical scrolling like other IDEs. An ideal solution would include tab completion to not require the use of a mouse. I’d also add that the default highlight line, when keying through options with the down arrow is way to light and makes it hard for me to select the correct option.

The Solution

While I wasn’t able to completely fix my grips with the autocomplete, I’ve made a solid effort by changing the width of the dropdown preview and enabling a vertical scroll for instances when the width is not enough.

Small Caveats

  • All changes were made through CSS and written with an effort to preserve Looker’s default code.
  • You cannot scroll both horizontally and vertically (diagonally) in a single gesture. For example, scroll up-and-down, pause, then scroll left-to-right. This is a bi-product of how Looker fakes horizontal scroll using margins.
  • In order to scroll vertically (left & right), you must use a mouse; keyboard is not supported.
  • The grey selection line highlight still cuts off at the default width.
  • The box is set to 42% the vertical width of the viewport (width:42vw;), feel free to edit this to best fit your screen. For reference, I run at 2560x1440 resolution.
  • I am using [...] !important; because I am lazy and it’s the fastest way to do it.
  • While this was tested, it was only tested within the use cases I interact with on a daily basis.

How to Setup

I am using a browser extension called Stylus, which is available for Chrome, Firefox and Opera browsers. I chose Stylus over the more popular Stylish because I don’t like plugins that share usage and analytics data with the developer. I’m sure Stylish or any other CSS styler extension will work just fine, if you have a preference.

After you’ve setup a suitable plugin, you just need to create a new style with the following code:

body .ace_editor.ace_autocomplete {
	min-width:250px !important;
	width:42vw !important;
}
body .ace_editor.ace_autocomplete .ace_scroller {
	overflow-x: auto !important;
}
body .ace_editor.ace_autocomplete .ace_content {
	width: auto !important;
}
body .ace_editor.ace_autocomplete .ace_content .ace_layer.ace_text-layer {
	width: auto !important;
}

Then just choose the domain the CSS applies to (I just used looker.com but your specific domain might be wiser), name your style (e.g. A Better Autocomplete Dropdown for the Looker IDE) and hit save it!

For Example:

Final Notes

If you have any questions, changes, or improvements to or about the code, please post a reply.

16 Likes

That’s awesome! It’s been a gripe for me as well but I never took the time to look into a solution.

I think I might add these styles to the customizations I published earlier (and possibly rename the project).

1 Like