Last Comment Bug 760450 - Work out why GCLI popup panels are not transparent on mac/linux
: Work out why GCLI popup panels are not transparent on mac/linux
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Developer Tools: Console (show other bugs)
: unspecified
: All Mac OS X
P2 normal (vote)
: Firefox 16
Assigned To: Joe Walker [:jwalker] (needinfo me or ping on irc)
:
: (Unavailable until Apr 3) [:bgrins]
Mentors:
Depends on:
Blocks: 745773
  Show dependency treegraph
 
Reported: 2012-06-01 07:48 PDT by Joe Walker [:jwalker] (needinfo me or ping on irc)
Modified: 2012-07-05 06:29 PDT (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
windows screenshot (7.01 KB, image/png)
2012-06-12 02:20 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details
mac screenshot (59.29 KB, image/png)
2012-06-12 02:21 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details
linux screenshot (16.77 KB, image/png)
2012-06-12 02:22 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details
Test patch (1.98 KB, patch)
2012-06-13 07:43 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details | Diff | Splinter Review
Test screenshot (115.62 KB, image/png)
2012-06-13 07:45 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details
Upload 1 (3.04 KB, patch)
2012-06-14 03:41 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details | Diff | Splinter Review
Upload 2 (2.69 KB, patch)
2012-06-28 01:20 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details | Diff | Splinter Review
Upload 3 (3.88 KB, patch)
2012-06-28 01:28 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details | Diff | Splinter Review
Upload 4 (3.19 KB, patch)
2012-06-29 06:31 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
no flags Details | Diff | Splinter Review
Upload 5 (4.60 KB, patch)
2012-07-04 13:52 PDT, Joe Walker [:jwalker] (needinfo me or ping on irc)
dao+bmo: review+
Details | Diff | Splinter Review

Description User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-01 07:48:10 PDT

    
Comment 1 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-12 02:19:51 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-12 02:20:21 PDT
Created attachment 632173 [details]
windows screenshot
Comment 3 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-12 02:21:08 PDT
Created attachment 632174 [details]
mac screenshot
Comment 4 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-12 02:22:07 PDT
Created attachment 632175 [details]
linux screenshot
Comment 5 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-12 02:31:23 PDT
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 User image Neil Deakin 2012-06-12 06:18:00 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-13 07:40:56 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-13 07:43:51 PDT
Created attachment 632692 [details] [diff] [review]
Test patch

Patch containing hack to demonstrate the problem (mac only)
Comment 9 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-13 07:45:13 PDT
Created attachment 632693 [details]
Test screenshot

Example from 'Test patch' alongside dom inspector with the panel highlighted.
Comment 10 User image Neil Deakin 2012-06-13 07:47:14 PDT
(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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-14 03:36:27 PDT
(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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-14 03:41:52 PDT
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.
Comment 13 User image Dão Gottwald [:dao] 2012-06-27 06:39:21 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-27 06:42:03 PDT
(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 User image Dão Gottwald [:dao] 2012-06-27 06:50:20 PDT
What -moz-appearance value does the iframe element have if you don't set 'none'?
Comment 16 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-27 07:11:45 PDT
(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 User image Dão Gottwald [:dao] 2012-06-27 07:17:15 PDT
(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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-28 01:20:17 PDT
Created attachment 637401 [details] [diff] [review]
Upload 2

Ok, it was a no-op. Patch updated.
Thanks.
Comment 19 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-28 01:28:05 PDT
Created attachment 637404 [details] [diff] [review]
Upload 3

8 lines context
Comment 20 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-29 06:30:37 PDT
https://tbpl.mozilla.org/?tree=Try&rev=c91b3f705e6d
Comment 21 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-06-29 06:31:46 PDT
Created attachment 637887 [details] [diff] [review]
Upload 4

Adds test fix
Comment 22 User image Dão Gottwald [:dao] 2012-07-03 04:22:53 PDT
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 User image Dão Gottwald [:dao] 2012-07-03 04:25:28 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-03 09:33:11 PDT
(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 User image Dão Gottwald [:dao] 2012-07-03 09:56:40 PDT
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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-03 10:20:50 PDT
(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 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-04 08:35:51 PDT
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 User image Dão Gottwald [:dao] 2012-07-04 10:50:03 PDT
I could finish this earlier if the patch had sufficient context, such that I could read it without researching the context myself...
Comment 29 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-04 13:52:26 PDT
Created attachment 639172 [details] [diff] [review]
Upload 5

The context was all there in previous patches btw.
Comment 30 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-04 23:40:58 PDT
https://tbpl.mozilla.org/?tree=Try&rev=d133b4e996e5
Comment 31 User image Joe Walker [:jwalker] (needinfo me or ping on irc) 2012-07-05 00:25:27 PDT
https://tbpl.mozilla.org/?tree=Fx-Team&rev=124c0182df1c
Comment 32 User image Tim Taubert [:ttaubert] 2012-07-05 06:29:31 PDT
https://hg.mozilla.org/mozilla-central/rev/124c0182df1c

Note You need to log in before you can comment on or make changes to this bug.