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

RESOLVED FIXED in Firefox 16

Status

()

Firefox
Developer Tools: Console
P2
normal
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: jwalker, Assigned: jwalker)

Tracking

unspecified
Firefox 16
All
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 5 obsolete attachments)

Comment hidden (empty)
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.
Created attachment 632173 [details]
windows screenshot
Created attachment 632174 [details]
mac screenshot
Created attachment 632175 [details]
linux screenshot
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.
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.
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); }
Created attachment 632692 [details] [diff] [review]
Test patch

Patch containing hack to demonstrate the problem (mac only)
Created attachment 632693 [details]
Test screenshot

Example from 'Test patch' alongside dom inspector with the panel highlighted.
(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.
(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.
Created attachment 633091 [details] [diff] [review]
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.
Assignee: nobody → jwalker
Attachment #632692 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #633091 - Flags: review?(paul)

Updated

5 years ago
Attachment #633091 - Flags: review?(paul) → review+
Attachment #633091 - Flags: review+ → review?(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.
Attachment #633091 - Flags: review?(dao)
(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.
What -moz-appearance value does the iframe element have if you don't set 'none'?
(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.
(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.
Created attachment 637401 [details] [diff] [review]
Upload 2

Ok, it was a no-op. Patch updated.
Thanks.
Attachment #633091 - Attachment is obsolete: true
Attachment #637401 - Flags: review?(dao)
Created attachment 637404 [details] [diff] [review]
Upload 3

8 lines context
Attachment #637401 - Attachment is obsolete: true
Attachment #637401 - Flags: review?(dao)
Attachment #637404 - Flags: review?(dao)
https://tbpl.mozilla.org/?tree=Try&rev=c91b3f705e6d
Created attachment 637887 [details] [diff] [review]
Upload 4

Adds test fix
Attachment #637404 - Attachment is obsolete: true
Attachment #637404 - Flags: review?(dao)
Attachment #637887 - Flags: review?(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 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?
(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?
Why is that change needed for the GCLI popup to be transparent? In other words, what does it have to do with this bug?
(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.
Hi Dão - we've been in review on this bug for nearly 3 weeks now - do you have any other issues to fix?
I could finish this earlier if the patch had sufficient context, such that I could read it without researching the context myself...
Created attachment 639172 [details] [diff] [review]
Upload 5

The context was all there in previous patches btw.
Attachment #637887 - Attachment is obsolete: true
Attachment #637887 - Flags: review?(dao)
Attachment #639172 - Flags: review?(dao)

Updated

5 years ago
Attachment #639172 - Flags: review?(dao) → review+
https://tbpl.mozilla.org/?tree=Try&rev=d133b4e996e5
https://tbpl.mozilla.org/?tree=Fx-Team&rev=124c0182df1c
Whiteboard: [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/124c0182df1c
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
You need to log in before you can comment on or make changes to this bug.