Thursday, August 20, 2015

Firefox 40 and dev edition theme

I doubt many of you have heard about the developer edition version of firefox. Like the name suggests, it's intended for developers. It allows you to view a specific webpage in they eyes of different browsers for testing purposes and much more. I'm not here to talk to you about the ff dev edition. Ok, maybe just a little bit. Bundled with the dev edition are a couple of special themes, mainly dark and light themes.  Unlike the standard firefox theme, they feature squared tabs instead of rounded (ewww) ones.



So why should we care since most of us (me included) doesn't use the developer edition of firefox? With the release of firefox (stable) version 35, the themes were also available for use, albeit you had to tweak a few things to make use of them. In case you are running firefox 35 to 39, here are the steps you can use to enable the dev edition theme. Skip this part if you are only interested in how to enable dev theme in firefox 40.

  1. Go to about:config. Enter it in the url bar (alt + d or F6 are two shortcuts to select the url bar)
  2. If you get a warning sign, click on I'll be careful, I promise.
  3. Search for browser.devedition.theme.enabled. If you can find it, then double click on the value where it says false, to make it true. You'll notice that the option turned bold. That means that the default value of said option has changed.
  4. By default, the light theme is activated. If you want it to change to the dark theme, finnd devtools.theme, double click on light, and type in dark. Effects should be instantaneous. 
  5. If you want to disable the dev theme, go to step 3 and change it from true to false.
With the release of firefox 40, mozilla decided to remove the themes (because of some stupid excuse). Don't bother doing the steps from above. It wont work.There is no easy way to fix this. Luckily, there exists an extension which lets us modify the look of any webpage and firefox itself.

Here is how you can enable the dev theme on firefox 40.

  1. Install stylish. Reboot when asked to.
  2. Install developer theme light or developer theme dark. Reboot when asked to.
  3. If when you hover over a tab's close icon (the X), you see a strange image, use the following fix.
    1. Go to about:addons.
    2. On the left side click on User Styles.
    3. Click on edit on the corresponding theme (usually only one in there).
    4. Go to the end of the document and comment out (using the /* and */) the three lines below .tab-close-button. Picture for reference:
    5. Click on save. Reboot if you can't see any changes.
  4. If you ever want to get rid of the dev theme, simply remove it from the about:addons page and user style there in.
If they ever decide to bring up the dev themes in the stable version, I'll write up another post. In the mean time, enjoy your square tabs.

No comments:

Post a Comment