Firefox Resolution Tester feature?


Fedora 20 updated to the recently released Firefox 30. Are you using it yet? I am.

I just accidentally discovered a feature I didn't even know existed. What feature? I'll call it the Firefox Resolution Tester feature although I'm sure that is NOT the real name of it. I don't know how long it has been a feature of Firefox... maybe for a long time... but like I said... I just found it in Firefox 30. How do you access it? Hit CONTROL-SHIFT-m. That's it.

I accidentally discovered it when I wasn't paying attention to which application window I was using had the focus. I thought it was konsole (KDE GUI terminal). CONTROL-SHIFT-m in konsole toggles the menu on and off. In Firefox it takes the current web page you are viewing and puts a black border around that has a control menu at the top left of that black border. The control menu allows you to pick from several pre-defined resolutions or even add additional presets if desired. Picking a different resolution resizes the view of the page (and increases the black border around it accordingly) to the desired resolution. It also has a screenshot feature (saves to your default download directory and auto-names images something like "Screen Shot 2014-06-01 at 07.42.29.png"). You can also rotate the resolution to simulate a mobile device. It has a "Simulate Touch Event" button but I'm not sure what that does. Anyone?

What good is that feature? Well if you do any web development it should be fairly obvious. While this site doesn't display well at all on smaller screens the current trend is that more and more web traffic is from mobile devices... and there is a push for "responsive design". Haven't heard of "responsive design" yet? It is a combination of CSS and probably some javascript... to make pages resize like magic. Menus move around jumping from horizontal layout to vertical. Images magically resize themselves to fit. It is smooth like butter when it works. Why doesn't this site have a responsive design? Well I'm still using Drupal 4 which was EOLed (end of life) several years ago. I have been testing the Drupal 8 development version and its default and admin themes are responsive. As a result I've been looking around at various websites and responsive themes and wow, they are awesome. Yet again I'll make the claim that I'm going to switch this site over to next Drupal release when it comes out... so I can have all of the new features including responsiveness. Knock on wood.

At work they recently licensed a commercial web content management system that primarily targets larger educational institutions -- OmniUpdate Campus. The web developers (which I am not one) at work have created a nice responsive theme that everyone can use for their departmental websites and it works great. Don't have a responsive site handy? You can try this temporary testing one I made in OmniUpdate. That's just a shell but it'll show you responsiveness.

Anyway, I kind of got off track. Yeah, Firefox. Try CONTROL-SHIFT-m and enjoy. Can anyone tell me what version of Firefox first included this feature?