Fix your own smartphone OS

If you're an avid smartphone user there will be times when there is behavior on your phone that just doesn't make sense, and that annoys the crap out of you. Well, you're not alone! Same thing happens to me, and I'm even a full time developer on Firefox OS. One of the things that bugs me the most is the behavior of the address bar in the browser. When you scroll enough down, it will disappear, but the content jumps up under your finger. And content jumping is the @#*&*#@&#&$ annoying.

Time to fix it!

So Firefox OS is built on top of open standards, HTML, JavaScript, blah, blah, blah, but the only real important thing here is, is that every (system) app is built on top of web technology. And thus, it's not compiled. That's actually pretty cool, because what I could do is grab the source code of the whole frontend of the OS; make changes; and then push to my phone. Sure. But that takes long, and maybe you miss a build prerequisite, etc. Luckily, because the browser app is basically a website, we can just pull the app from the phone and edit it. Pulling the app
So first we'll need the source code of the application. To do that, we first enable remote debugging on the phone. You do this via:

Settings -> Device Information -> More Information -> Developer -> Remote Debugging

Now if you have the Android Developer Bridge (adb) installed, and plugged in your phone, running adb devices will show you your device:

$ adb devices
List of devices attached
ClovertrailB8FBEE0A    device

Time to pull the browser app. All system apps live in '/system/b2g/webapps/[name].gaiamobile.org' (you can |adb shell| into the phone if you like), and then are zipped up as 'application.zip'. So to pull the browser, run:

$ adb pull /system/b2g/webapps/browser.gaiamobile.org/application.zip browser-original.zip
4998 KB/s (847237 bytes in 0.165s)

Updating the app
Now it's time to update the application. First unzip the file, and then open the folder in your favourite editor. Don't delete the ZIP. In the /js folder there is a bunch of JavaScript files, just as in a normal website.

js
|- authentication_dialog.js
|- awesomescreen.js
|- browser.js
|- browser_db.js
|- init.json
|- modal_dialog.js
|- settings.js
|- toolbar.js
|- utilities.js

The code is not minified or zipped, so it's pretty easy to just start digging around (yeah, you can attach a debugger and inspect the code, but that's for another time). By looking in browser.js there are some scrolling thresholds defined on top of the file:

// ...
  UPPER_SCROLL_THRESHOLD: 50, // hide address bar
  LOWER_SCROLL_THRESHOLD: 5, // show address bar
// ...

Well, that seems pretty much what I need. Time to kill the address bar toggling! Searching for the variable brings us to:

  handleScroll: function browser_handleScroll(evt) {
    this.lastScrollOffset = evt.detail.top;
    if (evt.detail.top < this.LOWER_SCROLL_THRESHOLD) {
      this.showAddressBar();
    } else if (evt.detail.top > this.UPPER_SCROLL_THRESHOLD) {
      this.hideAddressBar();
    }
  },

So, let's just remove that code, and always show the address bar. Now the thing is that the code that gets executed on the device is minified and combined. And it lives in 'gaia_build_defer_index.js' in the root of the app. So let's open that file, throw it through a JS beautifier, and find the same code. Now we can also fix this piece of code and remove the toggling.

  handleScroll: function browser_handleScroll(evt) {
    this.lastScrollOffset = evt.detail.top;
    this.showAddressBar();
  },

You can minify the file again, but who actually cares.

Time to push this back to the phone
So, make sure you have the original ZIP, in case you made a fuck up. Now make a ZIP file from the app again (select all files -> Compress X items in OSX). Make sure you ZIP the content of the browser folder, not the actual folder itself! And time to push it back to the phone.

# First remount because we need root permissions for this

$ adb remount
# Push the new ZIP file

$ adb push browser-new.zip /system/b2g/webapps/browser.gaiamobile.org/application.zip
4986 KB/s (920309 bytes in 0.180s)
# And restart the OS

$ adb shell stop b2g && adb shell start b2g

Tah dah, no more annoying scroll behavior.

Don't want to hack your own phone?
It will be fixed in Firefox OS 1.4. But then again, there is probably something else that might annoy you :-)