Extend UI options for the console

[Ben-Owen-3183]

Hide console:
When working on the frontend with the browser console you need to keep closing the rails console every time you refresh the page after you make some changes. I don't want to do this or have to keep commenting it out. Could we have a button that minimises it and remembers the choice, perhaps using browser cookies.

Text size controls:
Buttons to increase and decrease font size. Console appears to large in small screens and to small on big screens.

[dubaaron]

Hi,

I'm not sure what you mean by needing to close the console every time you refresh the page after you make some changes? Or commenting it out?

As far as the font size issue, I agree. What I did was add some custom CSS to my application.css to:

• increase the font size to a reasonable size
• increase the size of the close button (on linux, in gnome-shell, it would be hard to click because the way the scrollbars are rendered made it get in the way)

Here is what I added:

// making the web console easier to read and work with
.console .console-inner {
  font-size: 1rem!important;
}

// some browsers make it really hard to hit the "X" button to close the console; it helps a lot to make it bigger and give it some margin from the right (scrollbar often obscures the hit box)
.console .close-button {
  font-size: 3rem !important;
  margin-right: 1.5rem;
}

I also added the following in my app/views/layouts/application.html.haml to pad the bottom of my page in order to make it so that I didn't have to close it because it was in the way of seeing the bottom of the page of my app (maybe that is what you meant by having to keep closing it?)

This is the last thing inside the body tag

    - if Rails.env.development?
      - console
      -# Now pad the bottom of the page so the console does not get in the way of the content ...
      %div{style: 'margin-top: 20rem'}

(the erb equivalent of this would be:)

<% if Rails.env.development? %>
  <% console %>
  <% # Now pad the bottom of the page so the console does not get in the way of the content ... %>
  <div style="margin-top: 20rem"></div>
<% end %>

I agree with you that it would be nicer to be able to more easily control the font size, or have it zoom up/down with the page; this workaround at least makes it better for now.

(PS -- this workaround also makes the text size zoom up/down with the page, since it is defined in rems (instead of px), so that could easily be ported into the actual gem with a PR ... considering doing that myself.

[dubaaron]

I agree, though, that being able to minimize it and have that be persistent (e.g., with a cookie or something) would also be nice; I have wished for this too. When minimized, perhaps just a small button in bottom-right corner that can be clicked to bring it back up again. That would eliminate the need for my padding the bottom of my page.

[gsamokovarov]

Any frontend love towards Web Console would be great!

[dubaaron]

Thank you very much.

I made a PR to incorporate things to address much of the above: #327

It doesn't address the minimization feature, which I would like to do, but that would be a little more fancy. I did the easier stuff here and it does make it more usable, IMHO.