Fixing the panel size based on viewport size

[Arunmozhi]

I have been working on a addon which uses a panel to show some
visualization. I was working on 1280*800 pixel most of my time until
recently and used a static size of 800*620. Recently I started to work
at a 1024*600 pixel size and found the panel to be large (obviously).

Hence I am trying to make the code a bit dynamic by constructing the
size in runtime. I tried to use

var panelHeight = window.innerHeight - 20;

but I get a error

Traceback (most recent call last):
File "resource://jid1-emjw0jfsoaoccg-at-jetpack-sitetracker-lib/
main.js", line 42, in
var panelHeight = window.innerHeight - 20;
ReferenceError: window is not defined
FAIL

I understand that the referencing from a webpage is not same as
referencing from the addon jetpack environment.

How can this be achieved ?

[Jeff Griffiths]

You need to request the current window size from a content script, which
is a little awkward in the SDK. The idea is that when you emit an event
into the content script that asks for the window size. The content
script then posts back the window data, and the panel is then sized
based on this.

I hacked a bit on this today and even came up with two slightly
different approaches:

1. implement the event passing and resize in the widget's onClick handler:

https://builder.addons.mozilla.org/addon/1023700/revision/8/

I noticed an odd behaviour with this option - the window is not placed
correctly the first time you click on the widget. I logged a bug for
that ( https://bugzilla.mozilla.org/show_bug.cgi?id=699710 ).

2. everything is handled after the panel is shown ( onShow() ):

https://builder.addons.mozilla.org/addon/1023723/revision/10/

The advantage to this second option is that the panel remains anchored
to the widget, but the first time it is shown you do see the resize happen.

HTH, Jeff

[Arunmozhi]

On Nov 4, 9:31 am, Jeff Griffiths <jgriffi...@mozilla.com> wrote:
> HTH, Jeff

Thanks Jeff. Its great :)