Show Pixels In Console When Resizing Window

[Stinky666]

Some context for everyone else, for anyone who may find it useful too.

Peter made a short gif for the PB Staff regarding some bugs, and I noticed in it, it showed him resizing his window, and it displayed the resolution size of the window in real time. Like a good Samaritan, I asked him how he did it.

Here is his reply, along with mine and another of his..

Mar 15, 2017 0:53:14 GMT -8 Stinky666 said:

Mar 14, 2017 14:20:12 GMT -8 Peter said:

Stinky666 ,



Just a little bit of JS I wrote in the console so the size was visible in the recording.



$("body").append("<div style='font-size: 11px; background-color: white; position: fixed; top: 40px; left: 10px; padding: 8px; border: 1px solid; width: 150px' id='winfo'>:)</div>");

$(window).on("resize", () => $("#winfo").html("Window Width: " + $(window).width() + "px"));

Holy crap on a cracker, that worked!

Is there anyway to save it so it will always work on any tab I use it on? Literally so it's always "there", so I don't have to keep inputting it? Or maybe save it to work on a few specific domains, at least?



Something as simple as this is so great, since I don't have access to certain screen resolution sizes, so it could be a nice alternative to test how stuff look.

<3 you btw





Edit:

Sorry guys, maybe PM me for this lol.

Mar 15, 2017 2:35:20 GMT -8 Peter said:

Stinky666 ,

Either a web extension (bit much just for this though, and would require me to do it for you ) or using something like Greasemonkey / Tampermonkey.

Maybe open a new topic (that way others can grab it as well) somewhere and I'll walk you through it. It's really simple.

...and here we are
Appreciate the help Peter

[Peter]

Got to cook dinner, once done, I'll create something for you.

I'll create a web extension. Haven't played with them in a while, so should be fun.

Is there anything else you would like for it to show? I was going to consider media rules, but there is an issue with security due to the location of that forum .

[Stinky666]

Mar 15, 2017 4:31:37 GMT -8 Peter said:

Got to cook dinner, once done, I'll create something for you.

I'll create a web extension. Haven't played with them in a while, so should be fun.

Is there anything else you would like for it to show? I was going to consider media rules, but there is an issue with security due to the location of that forum .

There is nothing that I can personally think of, but maybe others can?

[Peter]

So this was simple to do, but had issues with building the extensions.  I can't submit to the Chrome store, as it requires a fee now.  So what I done was create 2 gifs that show how to install the extension from file for Firefox and Chrome.



Download (Save as...): Chrome | Firefox

For Chrome, you will need to extract the zip to somewhere, then just load the unpacked extension.  Reason for this, is otherwise the extension will be disabled on restart.  Google want the store to be used instead.

GIF: Chrome | Firefox

Source

[Former Member]

What Peter done was the best way to do it, but as an alternative, you could have created a snippet under the sources panel that would have persisted

[Chris]

What are you using to create that GIF Peter ?

[Stinky666]

Mar 15, 2017 8:08:54 GMT -8 Peter said:

So this was simple to do, but had issues with building the extensions.  I can't submit to the Chrome store, as it requires a fee now.  So what I done was create 2 gifs that show how to install the extension from file for Firefox and Chrome.



Download (Save as...): Chrome | Firefox

For Chrome, you will need to extract the zip to somewhere, then just load the unpacked extension.  Reason for this, is otherwise the extension will be disabled on restart.  Google want the store to be used instead.

GIF: Chrome | Firefox

Source

Thanks a lot. I read your post/reply before and liked it but only just got round to installing.
Works perfectly.
I assume inner width and height are the actual website resolutions ? Where as Outer is full window (including bookmarks bar, address bar, scroll bar etc (lots of "bars" lol) ?

[Peter]

Mar 15, 2017 17:54:18 GMT -8 Chris said:

What are you using to create that GIF Peter ?

github.com/justinfrankel/licecap

[Peter]

Mar 16, 2017 2:49:27 GMT -8 Stinky666 said:

Thanks a lot. I read your post/reply before and liked it but only just got round to installing.
Works perfectly.
I assume inner width and height are the actual website resolutions ? Where as Outer is full window (including bookmarks bar, address bar, scroll bar etc (lots of "bars" lol) ?

developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth
developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight

[Stinky666]

Mar 16, 2017 3:26:02 GMT -8 Peter said:

Mar 16, 2017 2:49:27 GMT -8 Stinky666 said:

Thanks a lot. I read your post/reply before and liked it but only just got round to installing.
Works perfectly.
I assume inner width and height are the actual website resolutions ? Where as Outer is full window (including bookmarks bar, address bar, scroll bar etc (lots of "bars" lol) ?

developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth
developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight

Excellent, thanks

[Peter]

Chris,

I've been using ShareX for ages, and only just noticed it can capture as a GIF (it has a lot of options). Much better quality as well.

getsharex.com

Compare this...

i.imgur.com/Wje3x3O.gif (LICEcap)

to this...

i.imgur.com/QPCDgt3.gif (ShareX)

[Chris]

Thanks Peter, I was asking because this thread kept crashing my FireHD tablet (running Google Chrome) so I suspected the GIF, I haven't had time to rule it out or not just yet but if it is writing some peculiar header I could use one or two images created by that app to test against "normal" 89a.

The ShareX looks smoother probably with more frames but if file sizes are comparable then sharex appears to be the choice.

[Peter]

Chris ,

Ah, ok. Sorry if that is the case. Let me know if you figure it out. In the meantime, I'll stop embedding

Both are using 89a in the header. Not entirely sure what imgur does to them (I assume it does just basic compression).

Both were recorded at the same framerate. File size, ShareX was a lot smaller which was surprising due to the much better quality.

[Stinky666]

Peter, not sure if I keep doing something wrong somehow, but I can load the unpacked version fine, and it works perfect. As soon as I close my browser and load it back up, it has gone, and I have to reload it. It's, as you can imagine, very annoying. Anyway to make it so it stays installed?

[Peter]

Stinky666 ,

If you followed my instructions (unzip, enable dev plugins, load ext.), then it should not disable it. Make sure you watch the GIF I posted. The only thing it should do, is warn you about it when you next open Chrome.

If that still doesn't work, then I guess Chrome has changed something very recently.  If that is the case, then install Tampermonkey and I'll write a script for that instead.