889057 - Make the Console log sources toolbar respond better to skinny horizontal tool widths

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[Daniel Buchner [:dbuc]]

When you shrink the horizontal size of the Console pane past 400-500px, the clear button and search are pushed out of the viewable/clickable area of the tools. Can we do something with the buttons the right (Net, CSS, JS, Security, Logging) to shrink them when the user resizes the tool area to this width? Idea: at a certain break point, we could sub in 16px icons instead of using text, this would save space - better yet, just get rid of the text leaving just the colored indicator orbs that exist on the left of the text. Either of these two ideas would give back over 100px of flexible view space for that toolbar. Thoughts?

Comment 1

[Daniel Buchner [:dbuc]]

*** Correction: "Can we do something with the buttons the _LEFT_ (Net, CSS, JS, Security, Logging)"

Comment 3

[taj]

I Would like to work on this bug, can you assign it to me

Comment 4

[Mihai Sucan [:msucan]]

Thank you for your interest to fix this bug! In the interest of keeping this bug available to all contributors, I will assign the bug to you only once you submit a working patch.

Overview of the workflow:

1. Get the firefox source:

https://developer.mozilla.org/en-US/docs/Developer_Guide/Source_Code/Mercurial

2. Build firefox:

https://developer.mozilla.org/en-US/docs/Simple_Firefox_build

3. Make a patch:

https://developer.mozilla.org/en-US/docs/Creating_a_patch

4. Submit the patch:

https://developer.mozilla.org/en-US/docs/Developer_Guide/How_to_Submit_a_Patch

If you read through the source code about something you do not know about, you may find documentation here:

1. Mozilla Developer Network - has a ton of info about XUL elements, HTML, JS, DOM, Gecko-specific APIs and more.

http://developer.mozilla.org/

2. MXR (Mozilla Cross-Reference) is a source code search engine - search for symbols you want to learn about, eg. nsIDocument.

http://mxr.mozilla.org/mozilla-central/

3. DXR is a smart source code search tool, similar to MXR but sometimes better.

http://dxr.mozilla.org


Here's an overview of how you can fix this bug:

The web console UI implementation is found in the browser/devtools/webconsole source folder. You need to work with webconsol.xul and the webconsole.inc.css file from browser/themes/shared/devtools.

To fix this bug you will need to use CSS media queries to adjust the styling of the web console UI based on the window size.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries


Please let me know if you have any further questions.


Good luck!

Comment 5

[Aleksandr Shoronov [:underoot]]

Attachment: webconsole.patch

Easy solution of the problem of resizing the Console log

Comment 6

[Mihai Sucan [:msucan]]

Comment on attachment 833240 [details] [diff] [review]
webconsole.patch

Alex, thank you for the patch you submitted. This is a good start!

Can you please make the icons bigger for the category buttons? Also, please reduce the paddings and spacing between the icon and the drop-down menu icon.

Could we also make the Clear button smaller somehow? We could switch it to an icon, instead of the text.

For the output, can you hide the timestamps when space is *very* limited? See how .hideTimestamps works. We could hide them when max-width is less than 300px or so.

The message location, should also jump on a new line, instead of being aligned to the right. Can you do this?

Thanks!

Comment 7

[Mihai Sucan [:msucan]]

Alex: you should not flag your own patches as review+. You need to ask module owners/peers to review patches you submit.

For details, please read https://developer.mozilla.org/en-US/docs/Developer_Guide/How_to_Submit_a_Patch

Comment 8

[Aleksandr Shoronov [:underoot]]

Ok. Yes, I can do it! =)

Comment 9

[Aleksandr Shoronov [:underoot]]

Attachment: webconsole2.patch

Improved my previous patch

Comment 10

[Mihai Sucan [:msucan]]

Comment on attachment 8337199 [details] [diff] [review]
webconsole2.patch

Review of attachment 8337199 [details] [diff] [review]:
-----------------------------------------------------------------

This is looking good, however:

- when I resize the web console the category buttons become only icons - which is very nice. However, when I make the window even smaller the texts show again. Why?
- in webconsole.inc.css you have inconsistent code indentation. Please use two spaces for indentation.
- please remove all trailing whitespace.

Thank you!

::: browser/devtools/webconsole/hudservice.js
@@ +687,5 @@
> +          self.ui.outputNode.classList.remove("hideTimestamps");
> +        }
> +      }
> +    }
> +    window.addEventListener("resize", onResize);

Hiding the timestamps can be done without js. Please use a media query that does .message > .timestamp { display: none }.

::: browser/devtools/webconsole/webconsole.xul
@@ +83,5 @@
>  
>    <box class="hud-outer-wrapper devtools-responsive-container theme-body" flex="1">
>      <vbox class="hud-console-wrapper" flex="1">
>        <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
> +      <toolbar class="hud-console-buttons">

Why do you need to wrap this toolbar into another toolbar?

::: browser/themes/shared/devtools/webconsole.inc.css
@@ +395,5 @@
> +    padding: 0px;
> +  }
> +}
> +
> +@media (max-width: 510px) {

Why do you have two @media queries? One is at max-width 500px and this one is very close, at 510px

Comment 11

[Mihai Sucan [:msucan]]

Alex, do you have any updates on this patch? Thank you!

Comment 12

[Aleksandr Shoronov [:underoot]]

Attachment: New try of creating good response to the Web Console resize

Comment 13

[Brian Grinstead [:bgrins]]

Comment on attachment 8357184 [details] [diff] [review]
New try of creating good response to the Web Console resize

Review of attachment 8357184 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/devtools/light-theme.css
@@ +303,5 @@
>  
>  %include toolbars.inc.css
> +
> +@media (max-width: 500px) {
> +  .webconsole-filter-button {

These changes in dark and light theme will affect every tool - this could cause some unintended side effects.  These should be moved into webconsole.inc.css unless if they are intended to apply on all panels.

@@ +315,5 @@
> +@media (max-width: 300px) {
> +  .hud-filter-box {
> +    margin-top: 7px;
> +  }
> +  .devtools-toolbarbutton {

You may want to specify exactly which devtools-toolbarbutton elements this should apply to. For instance, if the only elements you want it to apply to are the filter buttons and clear buttons, use a rule like this instead:

.webconsole-filter-button,
.webconsole-clear-console-button {
   margin-top: 5px;
}

Comment 14

[Mihai Sucan [:msucan]]

Comment on attachment 8357184 [details] [diff] [review]
New try of creating good response to the Web Console resize

Review of attachment 8357184 [details] [diff] [review]:
-----------------------------------------------------------------

Alex, thanks for the updated patch! This is looking good.

Please address Brian's comments.

You should be able to move the styling rules from dark/light-theme.css into webconsole.inc.css. I remember you told me that the styles you were working on were replaced by the rules from toolbars.inc.css. To make your rules apply, make sure you increase the specificity of the selectors you use.

For example, change:

.webconsole-filter-button { ... }

to:

.hud-console-filter-toolbar .webconsole-filter-button { ... }

Please do this only for those rules you need. Thank you!

Comment 15

[Aleksandr Shoronov [:underoot]]

Attachment: Moved all last changes into webconsole.inc.css

Comment 16

[Mihai Sucan [:msucan]]

Comment on attachment 8358605 [details] [diff] [review]
Moved all last changes into webconsole.inc.css

Thank you for the patch! r+

https://hg.mozilla.org/integration/fx-team/rev/3ef081629ca4

Comment 17

[Ryan VanderMeulen [:RyanVM]]

This was merged to m-c, but the bug was never marked.

https://hg.mozilla.org/mozilla-central/rev/3ef081629ca4