Add more buttons to cell minitoolbar: code collapse, run, and clear

[yebrahim]

Added more buttons to the minitoolbar and converted it to a dropdown menu with a hamburger button. The new options added are: code collapse, run, and clear cell. Hiding is done mostly in CSS, except for parts where JS code is needed (hiding ipywidgets).

[nikhilk]

Could you shorten the labels to "Run", "Clear", "Expand" (or "Collapse", depending on state) and "Hide Code" (or "Show Code" depending on state)

[nikhilk]

Also, I think there are some states where all these collapsing options don't apply.

First, hiding input should only be applicable when there is visible output.

Second, collapsing the cell should only be applicable when there is output, and/or the input is multiple lines of code.

[yebrahim]

Sure, shortening and changing labels according to states makes sense.

However, I don't think disabling hiding code/collapsing cell in certain situations improves user experience, it rather complicates it in my opinion. It's not immediately obvious to the user why collapsing works in some scenarios and not in others, unless we have a richer UI that can give some feedback to indicate that e.g. cells without output cannot be collapsed.

[VelizarVESSELINOV]

Is it possible to display the content of the first row of the cell, if it is something like this:
"""Description of the cell content."""

It is very difficult to understand the content of cells, if you have long list of this:

[yebrahim]

If you're using the Collapse option, you first line of the cell does appear in the collapsed div. The Hide Code option is meant to hide the entire input area of the cell. You use that when you, for example, want to show output only, or hide the code from the user in a tutorial or something similar.

You could also add another prior cell that explains what this cell is about.