Notebook usability fixes #884

Merged
merged 16 commits into from Oct 17, 2011

Conversation

Projects
None yet
3 participants
@fperez
Member

fperez commented Oct 16, 2011

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

This comment has been minimized.

Show comment
Hide comment
@minrk

minrk Oct 17, 2011

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.

Member

minrk commented Oct 17, 2011

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

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

Member

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

Member

fperez commented Oct 17, 2011

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

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

Member

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

Member

fperez commented Oct 17, 2011

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

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

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.

Member

fperez commented Oct 17, 2011

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

View changes

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;

This comment has been minimized.

@minrk

minrk Oct 17, 2011

Member

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.

@minrk

minrk Oct 17, 2011

Member

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.

This comment has been minimized.

@fperez

fperez Oct 17, 2011

Member

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.

@fperez

fperez Oct 17, 2011

Member

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.

This comment has been minimized.

@ellisonbg

ellisonbg Oct 17, 2011

Member

Yes, I like to fafafa as well.

On Mon, Oct 17, 2011 at 12:01 PM, Fernando Perez
reply@reply.github.com
wrote:

@@ -200,7 +206,7 @@ div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;

  •    background: #fafafa;
  •    background: #f4f4f4;

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.

Reply to this email directly or view it on GitHub:
https://github.com/ipython/ipython/pull/884/files#r174401

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

@ellisonbg

ellisonbg Oct 17, 2011

Member

Yes, I like to fafafa as well.

On Mon, Oct 17, 2011 at 12:01 PM, Fernando Perez
reply@reply.github.com
wrote:

@@ -200,7 +206,7 @@ div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;

  •    background: #fafafa;
  •    background: #f4f4f4;

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.

Reply to this email directly or view it on GitHub:
https://github.com/ipython/ipython/pull/884/files#r174401

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

This comment has been minimized.

@fperez

fperez Oct 17, 2011

Member

@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.

@fperez

fperez Oct 17, 2011

Member

@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.

This comment has been minimized.

@minrk

minrk Oct 17, 2011

Member

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.

@minrk

minrk Oct 17, 2011

Member

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.

@minrk

This comment has been minimized.

Show comment
Hide comment
@minrk

minrk Oct 17, 2011

Member

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

Member

minrk commented Oct 17, 2011

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

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

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.

Member

fperez commented Oct 17, 2011

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

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

Member

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

Member

fperez commented Oct 17, 2011

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

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

Member

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

Member

fperez commented Oct 17, 2011

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

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

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...

Member

fperez commented Oct 17, 2011

@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

fix quickhelp widget
Move header.js -> quickhelp.js, as it not longer acts on whole header.
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.

fperez added a commit that referenced this pull request Oct 17, 2011

Merge pull request #884 from fperez/nb-usability
Various Notebook usability fixes:

- 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.
- add QuickHelp button that is always visible and at the top.
- add missing keybindings for kernel interrupt/restart from the kbd.

@fperez fperez merged commit 4cc4dc8 into ipython:master Oct 17, 2011

@fperez

This comment has been minimized.

Show comment
Hide comment
@fperez

fperez Oct 17, 2011

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!

Member

fperez commented Oct 17, 2011

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!

mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

Merge pull request #884 from fperez/nb-usability
Various Notebook usability fixes:

- 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.
- add QuickHelp button that is always visible and at the top.
- add missing keybindings for kernel interrupt/restart from the kbd.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment