760450 - Work out why GCLI popup panels are not transparent on mac/linux

Status: RESOLVED FIXED

(DevTools :: Console, defect, P2)

Comment 1

[Joe Walker [:jwalker]]

STR:

1. Enable the developer toolbar (devtools.toolbar.enabled=true)
2. Open the developer toolbar (menu->Web Developer->Developer Toolbar)
3. Press F1 (As a result of Bug 761481, you may need to press Escape / F1
   to close and re-open the popup)
4. You may be able to see a white bar to the right of the tooltip
5. To exadurate the problem, type 'help k'

On windows the panel is transparent, not so on Mac/Linux.

Comment 2

[Joe Walker [:jwalker]]

Attachment: windows screenshot

Comment 3

[Joe Walker [:jwalker]]

Attachment: mac screenshot

Comment 4

[Joe Walker [:jwalker]]

Attachment: linux screenshot

Comment 5

[Joe Walker [:jwalker]]

Neil - I wonder if you could help with this problem.

The styles that are being ignored are browser/themes/pinstripe/browser.css line 3139 and 3145 (or 2398/2404 in gnomestripe)

There is an additional 'riser' on windows (see the screenshots) which I removed on mac/linux because it makes the problem much worse. The riser has height:0 set at browser/themes/pinstripe/devtools/gcli.css:35.

Thanks.

Comment 6

[Neil Deakin]

The panel is first resized to one size, then some left margin is being added to it, then the panel is resized to accomodate this margin.

<panel xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="gcli-tooltip" class="gcli-panel" noautofocus="true" noautohide="true"><iframe xmlns="http://www.w3.org/1999/xhtml" height="0" id="gcli-tooltip-frame" src="chrome://browser/content/devtools/gclitooltip.xhtml" flex="1" style="margin-left: 10px;"></iframe></panel>

Maybe you mean to add the margin on the panel itself, or in the iframe's content?

Is the margin or its size dependent on the size of the panel? If not, it should be applied before opening the panel.

Comment 7

[Joe Walker [:jwalker]]

Adding a margin to the panel helps with the margin on the right, but it doesn't solve the problem totally because we have bottom margin inside the iframe to contend with too.

I'll add a patch, and screenshot.

The effect that I'm seeing is that the panel ignores backgrounds on mac/linux.
The attached patch includes effectively this, and the value shows up in the computed style, but the effect is blatently white.

  #gcli-tooltip { background-color: rgba(0,0,255,0.5); }

Comment 8

[Joe Walker [:jwalker]]

Attachment: Test patch

Patch containing hack to demonstrate the problem (mac only)

Comment 9

[Joe Walker [:jwalker]]

Attachment: Test screenshot

Example from 'Test patch' alongside dom inspector with the panel highlighted.

Comment 10

[Neil Deakin]

(In reply to Joe Walker from comment #7)
> The attached patch includes effectively this, and the value shows up in the
> computed style, but the effect is blatently white.
> 
>   #gcli-tooltip { background-color: rgba(0,0,255,0.5); }

You probably need to clear the -moz-appearance as well.

Comment 11

[Joe Walker [:jwalker]]

(In reply to Neil Deakin from comment #10)
> (In reply to Joe Walker from comment #7)
> > The attached patch includes effectively this, and the value shows up in the
> > computed style, but the effect is blatently white.
> > 
> >   #gcli-tooltip { background-color: rgba(0,0,255,0.5); }
> 
> You probably need to clear the -moz-appearance as well.

Thanks Neil - thanks done it.

Comment 12

[Joe Walker [:jwalker]]

Attachment: Upload 1

Paul, this brings the windows 'speech bubble' effect to Mac/Linux.

2 things that bug me:
- There is a shadow under the popup, (which makes the connector look like it has a bottom-border) but I'm not sure how to get rid of that
- The connector looks like it has slanted sides to my eyes (it's an optical illusion caused by the dark/light transition, I think)

I'd like to find a solution to the first of these issues, I'm raising the second to see if it bugs you.

Comment 13

[Dão Gottwald [:dao]]

Comment on attachment 633091 [details] [diff] [review]
Upload 1

>--- a/browser/themes/gnomestripe/browser.css
>+++ b/browser/themes/gnomestripe/browser.css
>@@ -2396,12 +2396,14 @@ html|*#gcli-output-frame {
>   padding: 0;
>   border-width: 0;
>   background-color: transparent;
>+  -moz-appearance: none;
> }

This is styling an HTML iframe element, if I read it correctly. Why would an iframe element need -moz-appearance: none?

Please make sure to create patches with 8 lines of context.

Comment 14

[Joe Walker [:jwalker]]

(In reply to Dão Gottwald [:dao] from comment #13)
> Comment on attachment 633091 [details] [diff] [review]
> Upload 1
> 
> >--- a/browser/themes/gnomestripe/browser.css
> >+++ b/browser/themes/gnomestripe/browser.css
> >@@ -2396,12 +2396,14 @@ html|*#gcli-output-frame {
> >   padding: 0;
> >   border-width: 0;
> >   background-color: transparent;
> >+  -moz-appearance: none;
> > }
> 
> This is styling an HTML iframe element, if I read it correctly. Why would an
> iframe element need -moz-appearance: none?

Otherwise it's not transparent.

Comment 15

[Dão Gottwald [:dao]]

What -moz-appearance value does the iframe element have if you don't set 'none'?

Comment 16

[Joe Walker [:jwalker]]

(In reply to Dão Gottwald [:dao] from comment #15)
> What -moz-appearance value does the iframe element have if you don't set
> 'none'?

I don't know, something that was preventing the transparency working though.

For reference even this isn't enough. See comments above about shadows.

Comment 17

[Dão Gottwald [:dao]]

(In reply to Joe Walker from comment #16)
> (In reply to Dão Gottwald [:dao] from comment #15)
> > What -moz-appearance value does the iframe element have if you don't set
> > 'none'?
> 
> I don't know, something that was preventing the transparency working though.

Please try to find out in detail using DOM Inspector. AFAIK the computed -moz-appearance should have been "none" already, which would mean that this part of your patch is a no-op.

Comment 18

[Joe Walker [:jwalker]]

Attachment: Upload 2

Ok, it was a no-op. Patch updated.
Thanks.

Comment 19

[Joe Walker [:jwalker]]

Attachment: Upload 3

8 lines context

Comment 20

[Joe Walker [:jwalker]]

https://tbpl.mozilla.org/?tree=Try&rev=c91b3f705e6d

Comment 21

[Joe Walker [:jwalker]]

Attachment: Upload 4

Adds test fix

Comment 22

[Dão Gottwald [:dao]]

Please follow the [diff] section in https://developer.mozilla.org/en/Mercurial_FAQ#How_can_I_generate_a_patch_for_somebody_else_to_check-in_for_me.3F for your patches to provide 8 lines context all the time.

Comment 23

[Dão Gottwald [:dao]]

Comment on attachment 637887 [details] [diff] [review]
Upload 4

>--- a/browser/themes/pinstripe/devtools/gcli.css
>+++ b/browser/themes/pinstripe/devtools/gcli.css
>@@ -32,10 +32,11 @@
>   margin-top: -1px;
>   margin-left: 8px;
>   width: 20px;
>-  height: 0;
>+  height: 10px;
>   border-left: 1px solid hsl(210,11%,10%);
>   border-right: 1px solid hsl(210,11%,10%);
>   background-color: hsl(210,11%,16%);
>+  background-image: url(background-noise-toolbar.png);
> }

Can you explain this part of the patch?

Comment 24

[Joe Walker [:jwalker]]

(In reply to Dão Gottwald [:dao] from comment #23)
> Comment on attachment 637887 [details] [diff] [review]
> Upload 4
> 
> >--- a/browser/themes/pinstripe/devtools/gcli.css
> >+++ b/browser/themes/pinstripe/devtools/gcli.css
> >@@ -32,10 +32,11 @@
> >   margin-top: -1px;
> >   margin-left: 8px;
> >   width: 20px;
> >-  height: 0;
> >+  height: 10px;
> >   border-left: 1px solid hsl(210,11%,10%);
> >   border-right: 1px solid hsl(210,11%,10%);
> >   background-color: hsl(210,11%,16%);
> >+  background-image: url(background-noise-toolbar.png);
> > }
> 
> Can you explain this part of the patch?

Yes and No.

Yes: Obviously it makes the that section taller, and with a background.
No: Can you tell me what you actually want to know?

Comment 25

[Dão Gottwald [:dao]]

Why is that change needed for the GCLI popup to be transparent? In other words, what does it have to do with this bug?

Comment 26

[Joe Walker [:jwalker]]

(In reply to Dão Gottwald [:dao] from comment #25)
> Why is that change needed for the GCLI popup to be transparent? In other
> words, what does it have to do with this bug?

When the popup wasn't transparent it looks stupid. Hence previously height:0, now height:10px. Now the connector is visible it needs background styling.

Comment 27

[Joe Walker [:jwalker]]

Hi Dão - we've been in review on this bug for nearly 3 weeks now - do you have any other issues to fix?

Comment 28

[Dão Gottwald [:dao]]

I could finish this earlier if the patch had sufficient context, such that I could read it without researching the context myself...

Comment 29

[Joe Walker [:jwalker]]

Attachment: Upload 5

The context was all there in previous patches btw.

Comment 30

[Joe Walker [:jwalker]]

https://tbpl.mozilla.org/?tree=Try&rev=d133b4e996e5

Comment 31

[Joe Walker [:jwalker]]

https://tbpl.mozilla.org/?tree=Fx-Team&rev=124c0182df1c

Comment 32

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/124c0182df1c