Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK. Here's the solution we're going with. </p> <p>But first, here's what we're <em>not</em> using. I looked into <a href="http://www.appcelerator.com/products/titanium-desktop-application-development/" rel="nofollow noreferrer">Appcelerator Titanium</a>, which promises to allow cross-platform desktop applications built with HTML5+CSS, using the WebKit rendering engine. They have a desktop edition, but it's pretty much neglected in favor of their mobile edition. Crucially, the Windows version of their desktop edition doesn't support video, which we need. Kind of a weird limitation, but I'm not going to knock them for focusing on the rapidly-expanding mobile market.</p> <p>So, here's what we are going with: <a href="http://portableapps.com/apps/internet/firefox_portable" rel="nofollow noreferrer">Mozilla Firefox, Portable Edition</a>. Works great for this purpose with a few tweaks.</p> <p>In this example we'll pretend we're making a marketing presentation for Acme Awesome Products. </p> <ol> <li><strong>Rename Files.</strong> In the Portable Firefox installation, rename <em>FirefoxPortable/App/Firefox/firefox.exe</em> to <em>FirefoxPortable/App/Firefox/Acme.exe</em>, rename the <em>FirefoxPortable/App/Firefox</em> directory to <em>FirefoxPortable/App/Acme</em>, and finally rename <em>FirefoxPortable/PortableFirefox.exe</em> to <em>FirefoxPortable/Acme.exe</em>. (see Explorer in screencap below)</li> <li><strong>INI Tweak.</strong> Copy <em>FirefoxPortable/App/DefaultData/Settings/FirefoxPortableSettings.ini</em> to <em>FirefoxPortable/FirefoxPortableSettings.ini</em>, and make the tweaks shown in the screenshot below. This will make the app launch with the desired window size, with no Firefox Portable splash screen, and with the start page of our choosing. You'll also need to change some of the paths in here to tell it where to find the files whose locations we changed in step #1. (See editor window in screencap below)</li> <li><strong>Hide Firefox App File Structure.</strong> For aesthetic reasons, you might want to right-click on all the files and folders in <em>FirefoxPortable/</em> and make them hidden, except for <strong>Acme.exe</strong>. </li> <li><strong>Change Titlebar.</strong> Launch Acme.exe. Install the <a href="https://addons.mozilla.org/en-US/firefox/addon/14576/" rel="nofollow noreferrer">"Customize Titlebar" extension</a> or something similar. Use that to change Portable Firefox's text to whatever you like. (Alternately, you can edit <em>/FirefoxPortable/App/Acme/chrome/en-US.jar</em>. Open the .jar and you'll see <em>locale/branding/brand.dtd</em>) Restart Acme.exe to see your titlebar changes.</li> <li><strong>Turn Off The Window Chrome.</strong> Go into Portable Firefox's View menu and turn off all of the chrome - the navbar, bookmark bar, status bar, etc. Keep in mind you can hit the "alt" key on your keyboard to get the menu bar back, and your end users can too. (Alternately, there are several "kiosk" style extensions for Firefox that will lock the app down farther. But for my purposes I didn't really care.)</li> <li><strong>Change The Application Icon.</strong> Use a program like <a href="http://icofx.ro/" rel="nofollow noreferrer">IcoFx</a> (excellent and free) to change the icon for <em>FirefoxPortable/App/Acme/Acme.exe</em>. Note: IANAL, but I believe you actually <em>must</em> remove official Mozilla branding, such as the Firefox logo, from Firefox before redistributing it.</li> </ol> <p><img src="https://i.stack.imgur.com/InD4g.jpg" alt="Screenshot of the final app"></p> <p>At this point you have something fairly indistinguishable from a native application. Obviously an inventive user can peak around in your app's directory structure and see that you're using Firefox, and all Firefox's keyboard shortcuts would still be active. If this is an issue for you, "kiosk"-style extensions for Firefox do exist, some of which are fairly bulletproof, though I haven't tested any of them so I won't link to them here. Again, for me this wasn't an issue. </p> <p>This approach has a lot of room for improvement. Future things I'd like to explore are</p> <ol> <li>Various configuration tweaks to speed loading time</li> <li>An autorun.inf to launch Acme.exe automatically</li> <li>Of course OSX and Linux versions. </li> <li>Way to disable Portable Firefox's keyboard shortcuts. (What's the best way? .ini/about:config tweaks? Extension? .ini/about:config tweaks should be faster)</li> <li>Figure out how to change the icon for <em>/FirefoxPortable/Acme.exe</em>. According to <a href="http://portableapps.com/node/13096" rel="nofollow noreferrer">this</a> a recompile might be needed, unlike most .exe files.</li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload