Komodo 7a5: Styling of the new code completion widget?

Posted by ron.stewart on 2011-09-27 06:22

Is there any way to control the styling/visual appearance of the new code completion widget that landed in a5? At least on Mac OS X Snow Leopard, the font is monstrously large in general but particularly in comparison to the rest of the UI in Komodo.

screenie.png65.98 KB

ActiveState Staff
Tue, 2011-09-27 09:33

Sorry about the ugly!

It should be possible to adjust things via userChrome.css; I suggest getting DOM Inspector to examine the structure to find out what to tweak.

If you find good rules, please don't hesitate to share them so we can fix them before the next release :)

(That reminds me... I think there is something I can do at our end. It should be using pixels for font height in the autocomplete instead of points, although for some reason it works fine in Windows and Linux...)

ron.stewart | Tue, 2011-09-27 20:13

@mook_as: thanks for the quick follow-up on this. I've poked about a bit with the DOM Inspector but haven't had much luck to this point. Some of that may be my lack of familiarity with the DOM Inspector plugin, and some may be the focus-based nature of the code completion widget... but I haven't found a way to actually use it to inspect the stuff associated with the widget itself. I did some searching for things like id's containing "autocomplet" and found a couple of things that seemed like they might be relevant but haven't really been able to get more specific than that... there were a couple of items there that might be it, but they were specified with font-family and font-size properties of -moz-use-system-font (or something like that) and had calculated CSS properties of 12px. And that certainly seems bigger than a 12px font-size.

I'm willing to poke a little more but without some definitive way to use the DOM Inspector to actually get at the new widget, I'm not sure what I should be looking for...

ActiveState Staff
Wed, 2011-09-28 09:40

Sorry, I should have mentioned this - DOM Inspector has a click-to-find-element mode; it should be able to get you to the <embed> element that is the actual editor, which should have a sibling of <panel>; if you set noautohide on that, it makes the popup not go away after the next time it's triggered, which can be useful for poking about.

But I'll try to get something for the upcoming build - will take a while though, so hacking it up locally will get you results faster :)

valerio.maggio | Sun, 2011-10-02 00:44

I think to have found a working solution:
following the useful hints of mook_as, I succeded in identifying the css rules necessary to customize the appearance of the autocomplete widget.
In particular, the css file is: chrome://komodo/skin/codeintel/autocomplete-popup.css

You could find the CSS code here: http://pastebin.com/6ssW4YPu

Even if my customization was related only to the font-family of each item, I guess that you could find there what you need to solve your problem.

As a rule of thumb, when you replicate css rules in your userChrome.css file, please remember to append !important directive, in order to be sure that your rule will be preferred in case of multiple definitions.

Hope that this helps! ;)

ron.stewart | Tue, 2011-10-04 06:44

@Valerio: Thanks! That got me there. Simply including this in my userChrome.css got me precisely what I was expecting:

scintilla > panel[anonid="autocompletepopup"] .ko-autocomplete-item {
font-size: 100% !important;

And the !important appears to in fact be required in this case.

I appreciate the leg-work to track that down.


valerio.maggio | Tue, 2011-10-04 07:29

@ron: Nice to know that it solved your problem! That's great! ;)

ActiveState Staff
Tue, 2011-10-04 10:59

The OSX fix (and a GTK fonts one) has been checked in; see r8868 for details. That should hopefully make things less ugly all around, though it looks like there may still be problems with zooming (i.e. adjusting the font size globally via keyboard shortcuts).

davestewart | Tue, 2011-09-27 17:12

Also, view.scimoz.autoCMaxHeight = value has stopped working. Is that connected?

ActiveState Staff
Tue, 2011-09-27 17:28

Yes, it is. The pref codeintel_autocomplete_max_rows should work, but I guess you want to customize it per-view? Sounds like more stuff to do on my end... Will probably need to expose it on view.scintilla.autocomplete.

Thanks for trying to do things during the alpha, so that we can iron out the API coverage!

davestewart | Tue, 2011-09-27 17:48

Oh, my pleasure!

FYI: this code was working in Alpha 4:

window.addEventListener('current_view_changed', resizeAutocomplete, false);

 * Sets the size of the code completion items box to 20

        var view = event.originalTarget;
        if (view && view.scimoz)
                view.scimoz.autoCMaxHeight = 20;


ActiveState Staff
Wed, 2011-10-26 16:15

Try the latest release, 7.0.0b1:

as it should have this styling/font issues worked out.


valerio.maggio | Wed, 2011-10-26 23:55

Thanks mate! ;)

davestewart | Wed, 2012-04-18 04:04

I'm just about to do an update for AutoCode and I wanted to check the situation with the Code Intelligence popup.

I remember reading that it wasn't going to be updated for the 7 release, but mook did show a screenshot with the prefs in.

Either way, I thought I'd pick this up again, but I can't get that demo code to update the height of the popup. I also found it using the DOM inspector, and it's clear that there's only 5 items in there, so CSS alone is not going to do it either!

Should I keep looking into this, or just chill for the 7.1 update?


ActiveState Staff
Wed, 2012-04-18 09:36

Here's the code required:

          .prefs.setLongPref("codeintel_autocomplete_max_rows", 20);


davestewart | Wed, 2012-04-18 11:53

Epic win, thanks Todd :)