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

Status: RESOLVED FIXED

(DevTools Graveyard :: WebIDE, defect)

Description

[Paul Rouget [:paul]]

Attachment: 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).

Comment 1

[Paul Rouget [:paul]]

Also - if the title is very very large, it resizes the whole window.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

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?

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Attachment: Temporary width fix for project button

Paul and I agreed over email to land this temporary fix, so the project button at least doesn't cover the action buttons.

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

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

Comment 5

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/a64e5e949e84

Comment 6

[Alfred Kayser]

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.

Comment 7

[Paul Rouget [:paul]]

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

Comment 8

[Paul Rouget [:paul]]

Attachment: actual fix

Comment 9

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8485786 [details] [diff] [review]
actual fix

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

Looks good here!

Comment 10

[Carsten Book [:Tomcat]]

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

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/c01aa0e3737e