Widget display bug after upgrading to SDK 1.7
17 views
Skip to first unread message
Paul Morris
May 31, 2012, 1:38:59 AM5/31/12
to mozilla-la...@googlegroups.com
Hello,
I've received two reports about my add-on's widget not displaying correctly with the new version that uses SDK 1.7 (Mind the Time 0.4.9). Part of the widget appears (the dot that indicates the timer mode), but the numbers are missing. Here are two screenshots I've received:
http://img339.imageshack.us/img339/1169/image004ca.jpg
I have not yet heard back about which OS and FF version this happens with. I have not seen this before, and I have not been able to reproduce the bug.
The only change I made to my widget's CSS (or HTML) was making the font size bigger (because the numbers became much smaller after I upgraded from SDK 1.5 to 1.7). I don't think I changed anything in my code that might affect the display of the widget.
Any thoughts on what might be going on, or how to troubleshoot this?
My add-on's code is on Builder here:
https://builder.addons.mozilla.org/addon/1023949/
Here is the HTML & CSS for the widget.
<html>
<head>
<script src="ticker.js"></script>
<style>
#tickerDiv {
color:#999;
font-family: Arial, sans-serif;
font-size: 1.25em;
cursor: pointer;
}
#modeDot {
border-radius:5px;
height:5px;
width:5px;
background:black;
margin:6px;
float:left;
}
#tickerNumbers{
float:left;
}
</style>
</head>
<body onload="init()">
<div id="tickerDiv">
<div id="modeDot"></div>
<div id="tickerNumbers">0:00 / 0:00</div>
</div>
</body>
</html>
Thanks,
-Paul
I've received two reports about my add-on's widget not displaying correctly with the new version that uses SDK 1.7 (Mind the Time 0.4.9). Part of the widget appears (the dot that indicates the timer mode), but the numbers are missing. Here are two screenshots I've received:
http://img339.imageshack.us/img339/1169/image004ca.jpg
I have not yet heard back about which OS and FF version this happens with. I have not seen this before, and I have not been able to reproduce the bug.
The only change I made to my widget's CSS (or HTML) was making the font size bigger (because the numbers became much smaller after I upgraded from SDK 1.5 to 1.7). I don't think I changed anything in my code that might affect the display of the widget.
Any thoughts on what might be going on, or how to troubleshoot this?
My add-on's code is on Builder here:
https://builder.addons.mozilla.org/addon/1023949/
Here is the HTML & CSS for the widget.
<html>
<head>
<script src="ticker.js"></script>
<style>
#tickerDiv {
color:#999;
font-family: Arial, sans-serif;
font-size: 1.25em;
cursor: pointer;
}
#modeDot {
border-radius:5px;
height:5px;
width:5px;
background:black;
margin:6px;
float:left;
}
#tickerNumbers{
float:left;
}
</style>
</head>
<body onload="init()">
<div id="tickerDiv">
<div id="modeDot"></div>
<div id="tickerNumbers">0:00 / 0:00</div>
</div>
</body>
</html>
Thanks,
-Paul
Wes Kocher
May 31, 2012, 2:23:46 AM5/31/12
to mozilla-la...@googlegroups.com
So you say you repacked from 1.5 to 1.7? If you can get back in touch with the people reporting this (or if they give you steps to reproduce yourself), could you see what happens if you repack with 1.6.1? That way we can tell which release is causing the regression.
--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.
Paul Morris
Jun 1, 2012, 12:17:07 AM6/1/12
to mozilla-la...@googlegroups.com
I sent out a version based
on SDK 1.6.1 out and just heard back that it works fine. So 1.7 seems
like the place to look for regressions. Thanks, -Paul
KWierso
Jun 1, 2012, 1:08:36 AM6/1/12
to mozilla-la...@googlegroups.com
Do we have steps to reproduce this yet? Just installing it?
Paul Morris
Jun 1, 2012, 1:21:02 AM6/1/12
to mozilla-la...@googlegroups.com
KWierso wrote:
Do we have steps to reproduce this yet? Just installing it?
For the two people reporting this issue, it does not work after
installation with no other steps needed to reproduce it. I haven't
been able to reproduce it on my mac. I forgot to mention that the
reports were from windows 7 and Vista, both with Firefox 12.
-Paul
-Paul
On Thursday, May 31, 2012 11:17:07 PM UTC-5, Paul Morris wrote:I sent out a version based on SDK 1.6.1 out and just heard back that it works fine. So 1.7 seems like the place to look for regressions. Thanks, -Paul
--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To view this discussion on the web visit https://groups.google.com/d/msg/mozilla-labs-jetpack/-/3GJNYXbZWN4J.
Wes Kocher
Jun 1, 2012, 2:04:32 AM6/1/12
to mozilla-la...@googlegroups.com
So, I tried installing your addon from the Builder website, when it installed in Firefox 14, I only saw the modeDot.
I then forked your addon on Builder and repacked it with 1.6.1 and tried installing that. Still only the dot.
I repacked it with 1.5 and installed that. Only the dot.
So then I packed it back with 1.7 and started fiddling around with the code.
I first switched the <div>s in your widget's HTML file with <span>s and got rid of both of the float attributes in the CSS. When I installed that, I saw the counter, but not the dot.
Then I switched the <span>s back to <div>s and messed with the CSS some more. When I changed it to the following, I saw both the dot and the counter:
<style>
#tickerDiv {
color:#999;
font-family: Arial, sans-serif;
font-size: 1.25em;
cursor: pointer;
}
#modeDot {
border-radius:5px;
height:5px;
width:5px;
background:black;
margin-top:6px;
margin-right:6px;
float:left;
}
#tickerNumbers{
float:left;
}
</style>
I changed it from "margin:6px;" to "margin-top:6px; margin-right:6px;".
The counter doesn't quite seem to fit in the addon bar completely, so I would change the font-size down a little bit and that should be fine.
If you want to let people try it, my fork is here: https://builder.addons.mozilla.org/addon/1054888/latest/
I then forked your addon on Builder and repacked it with 1.6.1 and tried installing that. Still only the dot.
I repacked it with 1.5 and installed that. Only the dot.
So then I packed it back with 1.7 and started fiddling around with the code.
I first switched the <div>s in your widget's HTML file with <span>s and got rid of both of the float attributes in the CSS. When I installed that, I saw the counter, but not the dot.
Then I switched the <span>s back to <div>s and messed with the CSS some more. When I changed it to the following, I saw both the dot and the counter:
<style>
#tickerDiv {
color:#999;
font-family: Arial, sans-serif;
font-size: 1.25em;
cursor: pointer;
}
#modeDot {
border-radius:5px;
height:5px;
width:5px;
background:black;
margin-right:6px;
float:left;
}
#tickerNumbers{
float:left;
}
</style>
The counter doesn't quite seem to fit in the addon bar completely, so I would change the font-size down a little bit and that should be fine.
If you want to let people try it, my fork is here: https://builder.addons.mozilla.org/addon/1054888/latest/
Paul Morris
Jun 1, 2012, 10:01:49 AM6/1/12
to mozilla-la...@googlegroups.com
Wow, thanks Wes! I should
have realized that the font size changes I made just meant the content
no longer fit in the widget, hence it wasn't appearing.
I guess because fonts are slightly different on different platforms it was working on my mac but not windows?
So I'll give my +1 for letting the widget resize to fit its content (or maybe throw an error). :-)
Again, many thanks,
-Paul
I guess because fonts are slightly different on different platforms it was working on my mac but not windows?
So I'll give my +1 for letting the widget resize to fit its content (or maybe throw an error). :-)
Again, many thanks,
-Paul
Paul Morris
Jun 2, 2012, 8:51:15 AM6/2/12
to mozilla-la...@googlegroups.com
Ok, so I made a version
that fixed the horizontal spacing issue so that the text fit in the
widget, but the font size is still vertically too large on windows,
while it looks perfectly fine on my mac. Here's the windows screenshot:
I've been using 'em' to specify the font size of the text. I've now changed it to use 'px' instead. This should be more consistent across platforms. Here's the new version on windows using px, which now matches what it is on the mac:
Maybe the documentation should recommend using 'px' as the font-size unit for widgets, to avoid these cross-platform differences in appearance?
(Is it just me or did the font size rendering in widgets change (it got smaller, at least on the mac) between SDK 1.5 and 1.6?)
Cheers,
-Paul
I've been using 'em' to specify the font size of the text. I've now changed it to use 'px' instead. This should be more consistent across platforms. Here's the new version on windows using px, which now matches what it is on the mac:
Maybe the documentation should recommend using 'px' as the font-size unit for widgets, to avoid these cross-platform differences in appearance?
(Is it just me or did the font size rendering in widgets change (it got smaller, at least on the mac) between SDK 1.5 and 1.6?)
Cheers,
-Paul
Reply all
Reply to author
Forward
0 new messages