completer draws slightly too small on Chrome

[minrk]

Scrollbars are added that shouldn't be, and they obscure the completions:

Doesn't appear to affect Safari or FF.

[Carreau]

Broken image ... That strange , i'm developping on chrome, and i've never seen any issues ...

[minrk]

Image is working fine on all my computers in all of my browsers, with Incognito sessions and everything. What happens if you try to visit the url?

It could be that I'm on Chrome 21, and I've seen a couple of CSS artifacts, so it might just be that.

[fperez]

Actually I wonder if we can't revisit the GUI for completions completely...

I don't like a drop list at all as a selection mechanism; drop lists are inherently one-dimensional and are better suited for rapid navigation with a scroll wheel than the keyboard. But tab completion is a keyboard-initiated action, so we should be optimizing the UI for the keyboard.

I would much rather prefer that we present the available completions in a 2-d popup text area that shows all available completions (as long as they fit), and that allows 2d cursor movement for selection. If the area isn't large enough to show all completions, then it should support page up/down to bring a new set of completions (as well as single-line arrow key scrolling), with a visual cue at the top/bottom indicating where there's more.

What do you think? @Carreau, do you think you want to take a stab at it?

[Carreau]

@minrk
21.0.1155.2 dev ?
For me, notebook dashboard that it totally ugly and tabs overlaps... but completer looks fine.
how does codemirror demo behaves ?
(image back, that might have been because of my smartphone)

@fperez
Right now, i would prefer to fix the scrollbar and take a look at it later.
I don't think that array completion 'à la zsh' is the right choice for the notebook.
Whereas it is for a terminal like frontend. At least that my feeling, but I have nothing
against trying to implement one.

If you look at the newcomp branch of my fork, I'm doing it for the qtconsole right now.
I don't think it will be that easy in notebook, I have to think of it.

[Carreau]

@minrk

could you try something like :

--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -260,7 +260,7 @@ div.text_cell_render {
 .completions {
     position: absolute;
     z-index: 10;
-    overflow: auto;
+    overflow: hidden;
     border: 1px solid grey;
 }

@@ -270,6 +270,7 @@ div.text_cell_render {
     border: none;
     padding: 0px;
     margin: 0px;
+    overflow: auto;
     font-family: monospace;
 }

or try to tweak padding-right of .completions select and .completions select options ?
if it works ?

[minrk]

@Carreau's two-line patch above addresses the issue I am seeing (and the recent Chrome update 21.0.1171.0 does not have the CSS issues of 21.0.1155.2, but does still draw this poorly).

I would consider that patch as closing this issue if you want to do a PR with just that, and we can consider a real GUI completion for 0.14.

[fperez]

@Carreau, go for it!

[Carreau]

ok, made #1940 as a PR with only 2 lines change....