Closed Bug 889057 Opened 10 years ago Closed 10 years ago

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


(DevTools :: Console, defect, P3)



(Not tracked)

Firefox 29


(Reporter: dbuchner, Assigned: underoot)



(Whiteboard: [good first bug][mentor=msucan][lang=css])


(2 files, 2 obsolete files)

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?
*** Correction: "Can we do something with the buttons the _LEFT_ (Net, CSS, JS, Security, Logging)"
Priority: -- → P3
Whiteboard: [mentor=msucan][lang=css]
I Would like to work on this bug, can you assign it to me
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:

2. Build firefox:

3. Make a patch:

4. Submit the 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.

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

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

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

Please let me know if you have any further questions.

Good luck!
Whiteboard: [mentor=msucan][lang=css] → [good first bug][mentor=msucan][lang=css]
Attached patch webconsole.patch (obsolete) — Splinter Review
Easy solution of the problem of resizing the Console log
Attachment #833240 - Flags: review+
Assignee: nobody → alexshoronov
Comment on attachment 833240 [details] [diff] [review]

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?

Attachment #833240 - Flags: review+ → feedback+
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
Ok. Yes, I can do it! =)
Attached patch webconsole2.patch (obsolete) — Splinter Review
Improved my previous patch
Attachment #8337199 - Flags: review?(mihai.sucan)
Comment on attachment 8337199 [details] [diff] [review]

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 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/
@@ +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
Attachment #8337199 - Flags: review?(mihai.sucan)
Alex, do you have any updates on this patch? Thank you!
Flags: needinfo?(alexshoronov)
Attachment #833240 - Attachment is obsolete: true
Attachment #8337199 - Attachment is obsolete: true
Attachment #8357184 - Flags: review?(mihai.sucan)
Flags: needinfo?(alexshoronov)
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
> +
> +@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 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-clear-console-button {
   margin-top: 5px;
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 I remember you told me that the styles you were working on were replaced by the rules from To make your rules apply, make sure you increase the specificity of the selectors you use.

For example, change:

.webconsole-filter-button { ... }


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

Please do this only for those rules you need. Thank you!
Attachment #8357184 - Flags: review?(mihai.sucan)
Comment on attachment 8358605 [details] [diff] [review]
Moved all last changes into

Thank you for the patch! r+
Attachment #8358605 - Flags: review+
Whiteboard: [good first bug][mentor=msucan][lang=css] → [good first bug][mentor=msucan][lang=css][fixed-in-fx-team]
This was merged to m-c, but the bug was never marked.
Closed: 10 years ago
Flags: needinfo?(kwierso)
Resolution: --- → FIXED
Whiteboard: [good first bug][mentor=msucan][lang=css][fixed-in-fx-team] → [good first bug][mentor=msucan][lang=css]
Target Milestone: --- → Firefox 29
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.