Closed Bug 1062745 Opened 6 years ago Closed 6 years ago

WebIDE's project button doesn't overflow properly, makes clicking debug impossible

Categories

(DevTools Graveyard :: WebIDE, defect)

x86_64
All
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 35

People

(Reporter: paul, Assigned: paul)

References

Details

Attachments

(3 files)

Attached image screenshot
Since we introduced a max-width for the panel button label (bug 1009604), the button overflows in a weird way (see attached screenshot: blue outline: toolbarbutton, red outline: label).

Basically, the size of the parent node of the label is computed like if the label didn't get cropped.

That forces the toolbar button to overlap with the controls, making clicking these controls difficult.

I didn't manage to fix that in a simple way (just adding a max-width doesn't work). What works is to set the "width" of the label to 150px, but then, it doesn't shrink (but it's better than having an overlap).
Also - if the title is very very large, it resizes the whole window.
Yeah, I see what you mean.  I fiddle with this for a while, but didn't really get very far.  XUL never does what I want... :(

Should we do width, or do you think you can invent a fix here?
Paul and I agreed over email to land this temporary fix, so the project button at least doesn't cover the action buttons.
Attachment #8484994 - Flags: review+
A more simple solution is to set a max-width on the button and -moz-box-flex:1 on the label.

Like so:

#project-panel-button {
  max-width: calc(50vw - 100px);
}
#project-panel-button > .panel-button-label {
  -moz-box-flex: 1;
}

Using a calc to make a max-width that will allow space for the control buttons.
(In reply to Alfred Kayser from comment #6)
> A more simple solution is to set a max-width on the button and
> -moz-box-flex:1 on the label.
> 
> Like so:
> 
> #project-panel-button {
>   max-width: calc(50vw - 100px);
> }
> #project-panel-button > .panel-button-label {
>   -moz-box-flex: 1;
> }
> 
> Using a calc to make a max-width that will allow space for the control
> buttons.

I like that! Thanks a lot.
Flags: needinfo?(paul)
Attached patch actual fixSplinter Review
Assignee: nobody → paul
Status: NEW → ASSIGNED
Attachment #8485786 - Flags: review?(jryans)
Comment on attachment 8485786 [details] [diff] [review]
actual fix

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

Looks good here!
Attachment #8485786 - Flags: review?(jryans) → review+
https://hg.mozilla.org/mozilla-central/rev/c01aa0e3737e
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 35
Product: Firefox → DevTools
Product: DevTools → DevTools Graveyard
You need to log in before you can comment on or make changes to this bug.