1165988 - "screenshot"-tooltip-balloon has broken layout

Status: RESOLVED INCOMPLETE

(DevTools Graveyard :: Graphic Commandline and Toolbar, defect, P3)

Description

[Elbart]

Attachment: screenshot_tooltip.png

It has scrollbars and the background scrolls relatively to the scrollbars, leaving transparent areas covered with the tooltip-text.

m-c:
Last good revision: 0b202671c9e2 (2015-04-23)
First bad revision: 22a157f7feb7 (2015-04-24)
Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0b202671c9e2&tochange=22a157f7feb7

m-i:
Last good revision: 2f2888ca42c2
First bad revision: 2a1ddf08a4b4
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=2f2888ca42c2&tochange=2a1ddf08a4b4
 
fx-team:
Last good revision: bd0c6f6fbfe1 
First bad revision: 6ecd33215340
Pushlog:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=2ee8f0b9994d&t
ochange=6ecd33215340

6ecd33215340	Joe Walker — Bug 1128988 - runAt support for commands/converters; r=bgrins

Comment 1

[Elbart]

fx-team:
Last good revision: bd0c6f6fbfe1 
First bad revision: 6ecd33215340
Pushlog:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=2ee8f0b9994d&tochange=6ecd33215340

Comment 2

[Elbart]

Third time's the charm:
fx-team:
Last good revision: bd0c6f6fbfe1 
First bad revision: 6ecd33215340
Pushlog:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=bd0c6f6fbfe1&tochange=6ecd33215340

Comment 3

[Alice0775 White]

The glitch happesn with not only "screenshot" nut also the other command

Steps to reproduce:
1. Shift+F2
2. Type he and [enter], then tooltip pops up
3. Drag thumb


Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=5c38e0a84b54&tochange=b489ff052163

Via local build
last Good: 24c2f03786ac
First Bad: b2c96bbed41d

Triggered by:
b2c96bbed41d	Daniel Holbert — Bug 984711 part 6: Add back special handling for min-width:auto in nsHTMLReflowState & getComputedStyle. (no review; just an unbitrotted backout)

Comment 5

[johngraciliano]

The problem is that the pop-up width seems fixed to 300px.  (I think Nightly has a smaller value!)  This is compounded with the fact that the column for the descriptions in the menu are not allowed to shrink when needed. This can be fixed by adding a rule to commandline.css:

.gcli-menu-descs {
  overflow: hidden;
}

But the width of the menu is wrong (set to 290px). You should eliminate the rule that sets this or add to commandline.css (in the skin):

.gcli-menu-template {
  width: auto;
}

(I think in Nightly 45.0a1 this last issue is imperative because the width for the ancestors of .gcli-menu-template is smaller than 290px, possibly due to an attempt to fix this problem.)

Bonus:  Navigation with the arrow keys in the bubble is not visible with the light theme.  To fix this change in commandline.css the rule to:

.gcli-menu-highlight,
.gcli-menu-highlight:hover {
  background-color: hsla(0,0%,50%,.25);  /* 50% gray 25% opacity */
}

Note that hsla(0,0%,50%,20) may be closer to the highlight you had, but I preferred this other value.  As an alternative, you can set a variable for this background color as done with other colors that change according to the theme, so you can use semitransparent pure black or pure white.

Try my fix using Stylish with the css in:
https://userstyles.org/styles/120994/firefox-developer-toolbar-balloon-fix
The descriptions are cropped properly with ellipsis.  

P.S. I strongly recommend the pop-up width should be increased to 350px because some descriptions seem to show cropped keywords.  I think that would not create much of a visual impact when there is empty space.  Even increasing the width to 320px would be an improvement in my humble opinion.

Comment 6

[Firefox Bug Husbandry Bot]

Per bug 1491875, this component has been closed, and the affected code is being removed from Firefox. Closing this bug as incomplete.