Notebook usability fixes #884

Merged
merged 16 commits into from Oct 17, 2011

2 participants

@fperez
IPython member

A number of small fixes for notebook usability, based on intensive 'in anger' use and feedback from @jdh2358 and others.

Note: it's NOT ready for merge, b/c I need help with one thing. I added a 'quick help' button that should at least be visible at the top and for the moment show the keybindings (later we can make a better quick help page). But right now that button:

  • doesn't get the right jquery styling
  • is too close to the left, it should be at the right, just left of the kernel status area
  • when clicked doesn't do anything.

I tried fixing all three of these and failed, a bit of JS help would be very welcome here. @ellisonbg and @minrk, if you guys can give me some pointers if you know, I'd be grateful and I can finish the job.

Once the quick help button thing is fixed, it's otherwise ready for review/discussion for merge. I'll be happy to take feedback on anything besides that button issue in the meantime.

Summary of changes that work (i.e., other than the broken quickhelp button):

  • add kernel restart dialog confirmation (it destroys the user session)
  • add missing keybindings
  • change language from 'terminal mode' to 'in-place execution' which is more descriptive
  • adjust spacing/padding and colors slightly for readability and better use of space in small screens.
  • add line numbering toggle to code cells. Triggered with C-m-l.
  • show keybindings in monospaced font.
@minrk
IPython member

One code note: You seem to have inserted a number of tabs, rather than soft-tabs into the js, so the diff on GH looks a bit funky.

@fperez
IPython member

Argh! Thanks for catching that... I guess emacs in javascript mode will insert tabs. I'll clean it up in a bit.

@fperez
IPython member

OK, fixed and pushed the tab cleanup (and obviously configured emacs so it wouldn't happen again!).

@fperez
IPython member

Note: GH seems to be updating slowly. I've pushed the changes but they're not appearing on the branch yet, so perhaps give it a few minutes. The last commit should be:

2b62313 Keep kernel-related bindings together in code.

@minrk minrk and 2 others commented on an outdated diff Oct 17, 2011
IPython/frontend/html/notebook/static/css/notebook.css
@@ -200,7 +206,7 @@ div.input_area {
color: black;
border: 1px solid #ddd;
border-radius: 3px;
- background: #fafafa;
+ background: #f4f4f4;
@minrk
IPython member
minrk added a note Oct 17, 2011

Can I ask why you darkened the code background? I actually like the lighter color better. The dark background doesn't feel editable to me.

@fperez
IPython member
fperez added a note Oct 17, 2011

I tested it on several systems, with various combinations of ffox, chrome, chromium and monitors. Onn some of them the previous gray was barely distinguishable from the background. Can you let me know which is the darkest gray that seems OK to you? Ultimately we may want to make this user-configurable...

I also tried by using yellows, with things like fafaea and similar (basically B<R=G), but wasn't quite happy with any of the results.

@ellisonbg
IPython member
@fperez
IPython member
fperez added a note Oct 17, 2011

@ellisonbg, can you try with the chrome debug console or firebug (or just by saving and reloading the css) intermediate grays between fa and f4? Perhaps we can move a few notches darker so on linux/chrome it's readable (it really isn't right now) without looking too dark on osx.

Another option would be to darken the outline around every cell a little. That currently is ddd but perhaps we could make it darker. It would higlight each cell a little more without messing with the editing area.

@minrk
IPython member
minrk added a note Oct 17, 2011

On my linux machines as well, I think it's much too dark, and I even find f9f9f9 to be darker than ideal. I think the outline is the more significant thing for delineating the code area.

If we darken the border, it can't be much darker, as it should definitely be lighter than the cell border which is only #a8, so #bbb is as dark as it could reasonably go, and I probably wouldn't go lower than #ccc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@minrk
IPython member

@fperez the reason the changes aren't showing up here is you pushed to ipython/nb-usablility instead of fperez/nb-usability

@fperez
IPython member

Argh, I'm an idiot! Don't know how I managed to do that, I was obvoiusly too tired yesterday sorting several branches at the same time. Fixing it now.

@fperez
IPython member

OK, done. I did a forced push b/c I'd rebased locally, so do a clean reset.

@fperez
IPython member

Deleting nb-usability branch from main repo, that was never meant to be there.

@fperez
IPython member

@ellisonbg, we split the difference on the gray after review with @minrk at f7. One thing to note is that to see the full effect, it's worth loading a notebook with very long cells, like the display_protocol one in our examples. We also adjusted the number color to be a subdued blue, that would stand out better against a non-white background.

We also played with the idea of using a yellow like #f8f4e8 for the bg. I kind of like it, but it may stand out too much for other's taste.

Ultimately, we'll probably want to allow people to load their custom CSS, because in the end there isn't really a 'right' answer to this: to a good extent this depends on variables beyond our control like people's monitor brightness, lighting environment, visual system and simple personal taste. We can only find a sensible rough solution, not the ultimate perfect one for everybody.

Let us know if this looks reasonable to you. With @minrk's help, I'm fixing up the help button too...

minrk and others added some commits Oct 17, 2011
@minrk minrk fix quickhelp widget
Move header.js -> quickhelp.js, as it not longer acts on whole header.
feffa59
@minrk minrk show_keyboard_shortcuts -> toggle_keyboard_shortcuts
Now multiple calls no longer show multiple instances of the shortcut dialog.  Rather, clicking the quick help, or invoking `C-m h` will hide
the dialog if shown.
d8d1752
@fperez fperez Underline quick help button key accelerator (h). b80a26b
@fperez fperez Adjust title area sizes to improve alignment. 89110cb
@fperez fperez merged commit 4cc4dc8 into ipython:master Oct 17, 2011
@fperez
IPython member

OK, I've merged this one after the feedback and @minrk's help. We'll keep fine-tuning UI things for a long time, but I think this gets us close to something fairly solid for new users. Thanks for all the help/review!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment