Summary

How to make Firefox elegant with themes on Mac OS X

My default browser was Camino on Mac OS X and I had been using my private build.
According to this blog entry the future of Camino was unclear, so I had had a taste of Firefox.
And now the Camino project officially announced that Camino reaches its end!
Thanks to all the the Camino team…

First impressions are important.
  ・ First, it seems to be heavily made up.
  ・ Second, it seems not to be Mac style.

I think that
  ・ simplicity is the essence of appearance desired for all good browsers and
  ・ simplicity leads to elegance.

A brief struggle told me a good solution that makes Firefox elegant using themes such as
  ・ "Simple White"
  ・ "rein: das Monochrom"

I will mention a way to do so later…
  ・ Screenshots with "Simple White 2.0.x" & "rein"
  ・ Screenshots with "Simple White 2.2.x" & customized items of Firefox 54
  ・ How to make Firefox elegant with "Simple White"
  ・ Memorandum: How to modify sources of "Simple White"
  ・ How to assign a hotkey to a bookmarklet and to select tab.



Screenshots with "Simple White 2.0.x" & "rein"

Screenshots with "Simple White 2.0.x"


Screenshot



Screenshot



Screenshot



Screenshot



Screenshot





Screenshots with "rein"

Screenshot



Screenshot



Screenshot



Screenshot



Screenshots with "Simple White 2.2.x" & customized items

Screenshots with "Simple White 2.2.x"


Screenshot



Screenshot



Screenshot



Screenshot



Screenshot





Some screenshots of customized items…

1. Bookmarks & Submenu Icons

・Bookmarks Menu・ ・Submenu・
Bookmarks Menu Submenu





2-1. Add-ons Manager Window (Firefox 58.0)

Screenshot




2-2. Add-ons Manager Window: New UI (Firefox 79.0)

Screenshot




2-3. Add-ons Manager Window (Firefox 79.0)

Screenshot




2-4. Add-ons Manager Window: New UI (Firefox 79.0)

Screenshot




2-5. Add-ons Manager Window: New UI (Firefox 79.0)

Screenshot




3. Preferences Window (<= Firefox 54.0)

Screenshot




3-1. Preferences Window (Firefox 79.0)

Screenshot




3-2. Preferences Window (Firefox 79.0)

Screenshot




3-3. Preferences Window (Firefox 79.0)

Screenshot




3-4. Preferences Window (Firefox 80.0)

Screenshot




4. About Networking Window ((Firefox 79.0)

Screenshot




5. About Debugging Window (Firefox 79.0)

Screenshot




6. The menu of the New User Interface (Firefox 79.0)

Screenshot




7. Customize Window (Firefox 79.0)

Screenshot




8-1. Privacy preference in Firefox 79.0

Screenshot




8-2. Content Blocking: ON in Firefox 69.0

Screenshot




8-3. Content Blocking: OFF in Firefox 69.0

Screenshot




8-4. Mozilla starts to introduce a new protection panel in Firefox 72

・Tracking Protection Panel・   ・Connection and Permissions Panel・
Protection Panel   Submenu




Memorandum: How to make Firefox elegant with "Simple White"

How to customize Australis (Firefox 29 and later) using "Simple White"


Mozilla announced introducing Extension Signing on Firefox 39, and I have no idea signing my private add-ons.
So please download signed extensions from AMO.
"Simple White" 2.1.x and later is fully compatible with Australis UI, so you can enjoy a new look and feel.
"Simple White" 2.2.4x and later is compatible with OS X 10.10.x Yosemite.

1. Download and install Simple White 2.2.b18e+.
    Simple White 2.2.b18e+ is an extra version customized for OS X as below.
2. Download and install Restore Classic 3.8e.
    Restore Classic is an extension for OS X that can customize Australis UI and restore classic elegance:
     ・restoring back, forward, reload/stop and home buttons
     ・displaying the URL of links in the location bar
     ・hiding ClickToPlay Notification in the location bar
     ・restoring conventional Search User Interface…
    Restore Classic is a combination of 2 add-ons and 2 js code to restore classic style,
    and is modified or altered as required to comply with Simple White 2.2.x on OS X.

    1) Buttonsback by Geoff Lankow
    2) Link Location Bar by sTiZz
    3) Hide ClickToPlay Notification by Chris000001
    4) Disable One-Click Search and restore conventional Search UI
gPrefService.setBoolPref("browser.search.showOneOffButtons", false);
        Note: This search UI option has been removed on Firefox 43.0 or later.
        If you want to hide "Popup Search Panel", add to /chrome/userChrome.css as below;
#PopupSearchAutoComplete {
  display: none !important;
}
    5) Show new style preferences window by default
gPrefService.setBoolPref("browser.preferences.inContent", true);
gPrefService.setBoolPref("browser.preferences.instantApply", false);
3. Download and install RSS Icon in url bar 1.5e.
    ・This extension is based on the extension "RSS Icon in url bar" by Vasiliy Temnikov.
    ・I adjusted the feed-icon for "Simple White 2.2.x".
4. Add this to /chrome/userContent.css to make <select>s Aqua-looking.
5. Search engine's favicon in the search bar is set forth in /searchplugins/*.xml.
    Edit corresponding section of .xml files to replace its favicon by magnifying glass.
6. To hide warning "--- could not be verified for use…" on Add-ons Manager on Firefox 40.0a2 or later,
    add to /chrome/userContent.css as below;
@-moz-document url("about:addons") { 
  .addon-view .warning { 
	display: none !important; 
  }
  .addon-view .legacy-warning { 
	display: none !important; 
  }
  .addon-view[notification="warning"] {
	background-image: none !important; 
  }
  #category-legacy {
	visibility: collapse !important;
  }
}
7. To enable legacy extensions in Firefox 57 and later
user_pref("extensions.legacy.enabled", true);
8. Since Bug 1447903 landed on Firefox Nightly repository, SimpleWhite works no more!
    You have to replace directly sources as follows:
Firefox Nightly.app/Contents/Resources/browser/omni.ja/chrome/browser/skin/classic/browser/*
Firefox Nightly.app/Contents/Resources/omni.ja/chrome/toolkit/skin/classic/global/*
Firefox Nightly.app/Contents/Resources/omni.ja/chrome/toolkit/skin/classic/mozapps/*
    Thus you can restore SimpleWhite's look and feel as the default theme.


Screenshot



Screenshot



9. Since Bug 1541233 landed on Firefox Nightly repository, Firefox 69.0 doesn't allow use of userChrome.css
    or userContent.css files by default.
    To use these files for Firefox customization, you will need to manually set as follows:
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
10. That's all there is to it!


Memorandum: How to modify sources of "Simple White"

How to modify sources of "Simple White"


1. Download Louis Chan's latest Simple White 2.2.x theme.
2. Modify some files in /foo/Simple.White.v2.2.x.xpi as below.

1) Step1 - Unpack Simple.White.v2.2.x.xpi and reduce files unnecessary for Mac
cd /foo/
unzip Simple.White.v2.2.x.xpi
rm -r whitefox/ostarget/general
rm -r whitefox/ostarget/sunos
rm -r whitefox/ostarget/win
2) Step2 - Modify files as below:
  1. /whitefox/apptarget/*
  2. /whitefox/browser/aboutNetError.css
  3. /whitefox/browser/addons/*
  4. /whitefox/browser/browser.css
  5. /whitefox/browser/devtools/*
  6. /whitefox/browser/cert-error.svg
  7. /whitefox/browser/aboutNetError_info.svg
  8. /whitefox/browser/customizableui/*
  9. /whitefox/browser/downloads/allDownloadsViewOverlay.css
  10. /whitefox/browser/downloads/buttons.png
  11. /whitefox/browser/downloads/download-glow.png
  12. /whitefox/browser/downloads/download-notification.png
  13. /whitefox/browser/downloads/downloads.css
  14. /whitefox/browser/feeds/feedIcon.png
  15. /whitefox/browser/feeds/feedIcon16.png
  16. /whitefox/browser/identity-icons-generic.png
  17. /whitefox/browser/in-content/common.css
  18. /whitefox/browser/livemark-folder.png
  19. /whitefox/browser/newtab/controls.svg
  20. /whitefox/browser/newtab/newTab.css
  21. /whitefox/browser/page-livemarks.png
  22. /whitefox/browser/places/bookmarksToolbar.png
  23. /whitefox/browser/places/livemark-item.png
  24. /whitefox/browser/places/query.png
  25. /whitefox/browser/places/unsortedBookmarks.png
  26. /whitefox/browser/preferences/incontent/icons.png
  27. /whitefox/browser/preferences/incontent/icons@2x.png
  28. /whitefox/browser/preferences/incontent/preferences.css
  29. /whitefox/browser/preferences/incontent/search.css
  30. /whitefox/browser/preferences/preferences.css
  31. /whitefox/browser/preferences/search.css
  32. /whitefox/browser/readerMode.svg
  33. /whitefox/browser/readinglist/icons.svg
  34. /whitefox/browser/searchbar.css
  35. /whitefox/browser/search-icon.png
  36. /whitefox/browser/tabbrowser/chevron-inverted.png
  37. /whitefox/browser/tabbrowser/chevron.png
  38. /whitefox/browser/tabbrowser/tab-overflow-border.png
  39. /whitefox/browser/tabbrowser/tab.png
  40. /whitefox/browser/tabbrowser/tabDragIndicator.png
  41. /whitefox/browser/yosemite/preferences/checkbox.png
  42. /whitefox/global/aboutReader.css
  43. /whitefox/global/arrow/panelarrow-horizontal.png
  44. /whitefox/global/arrow/panelarrow-horizontal@2x.png
  45. /whitefox/global/arrow/panelarrow-vertical.png
  46. /whitefox/global/arrow/panelarrow-vertical@2x.png
  47. /whitefox/global/icons/folder-item.png
  48. /whitefox/global/config.css
  49. /whitefox/global/findBar.css
  50. /whitefox/global/global.css
  51. /whitefox/global/in-content/check.svg
  52. /whitefox/global/in-content/common.css
  53. /whitefox/global/in-content/info-pages.css
  54. /whitefox/global/in-content/radio.svg
  55. /whitefox/global/narrate/*
  56. /whitefox/global/popup.css
  57. /whitefox/global/progressmeter.css
  58. /whitefox/global/reader/*
  59. /whitefox/global/scrollbox.css
  60. /whitefox/global/toolbarbutton.css
  61. /whitefox/global/tree.css
  62. /whitefox/mozapps/extensions/category-available.png
  63. /whitefox/mozapps/extensions/category-dictionaries.png
  64. /whitefox/mozapps/extensions/category-discover.png
  65. /whitefox/mozapps/extensions/category-experiments.png
  66. /whitefox/mozapps/extensions/category-extensions.png
  67. /whitefox/mozapps/extensions/category-languages.png
  68. /whitefox/mozapps/extensions/category-plugins.png
  69. /whitefox/mozapps/extensions/category-recent.png
  70. /whitefox/mozapps/extensions/category-search.png
  71. /whitefox/mozapps/extensions/category-searchengines.png
  72. /whitefox/mozapps/extensions/category-service.png
  73. /whitefox/mozapps/extensions/category-themes.png
  74. /whitefox/mozapps/extensions/category-userstyle.png
  75. /whitefox/mozapps/extensions/extensions.css
  76. /whitefox/mozapps/places/defaultFavicon.png
  77. /whitefox/ostarget/darwin/*
3) Step3 - Delete unused icons and delete files as below to use adaptive background color:
  1. /whitefox/browser/downloads/download-glow-menuPanel.png
  2. /whitefox/browser/downloads/download-notification-finish.png
  3. /whitefox/browser/downloads/download-notification-start.png
  4. /whitefox/global/icons/find.png
  5. /whitefox/global-darwin/media/TopLevelImageDocument.css
  6. /whitefox/global-darwin/media/TopLevelVideoDocument.css
4) Step4 - Edit /foo/chrome.manifest

5) Step5 - Edit /foo/install.rdf

6) Step6 - Repack simple_white2.2.xe.xpi
cd /foo
find /foo -name .DS_Store -print -exec rm {} ";"
zip -qr9XD simple_white2.2.xe.xpi chrome.manifest icon.png install.rdf whitefox -x ".DS_Store"
3. Install simple_white2.2.xe.xpi


Memorandum: How to assign a hotkey to a bookmarklet and to select tab.

1. How to assign a hotkey to a bookmarklet

    In Firefox 25, getShortcutOrURI() was removed and it was replaced by getShortcutOrURIAndPostData().
    So keyboard shortcut that opens a bookmarklet by its keyword using
if(window.loadURI) loadURI(getShortcutOrURI('mykeyword',{}));
    doesn't work on Firefox 25 and later with Dorando's keyconfig.


    Here is how to do the trick:
if(window.loadURI) loadURI(PlacesUtils.getURLAndPostDataForKeyword('mykeyword')[0]);
        instead of
if(window.loadURI) loadURI(getShortcutOrURI('mykeyword',{}));

    In Firefox 57, use the following:
if(window.loadURI) getShortcutOrURIAndPostData('mykeyword').then(function(result) {
  loadURI(result.url);
});
        instead of
if(window.loadURI) loadURI(PlacesUtils.getURLAndPostDataForKeyword('mykeyword')[0]);

2. How to assign a hotkey to select tab on Firefox 57

    mTabContainer property has been replaced by tabContainer, and it was removed in Firefox 57.
    So use the following that selects a next tab or previous tab:
gBrowser.tabContainer.advanceSelectedTab(1,true);
gBrowser.tabContainer.advanceSelectedTab(-1,true);
        instead of
gBrowser.mTabContainer.advanceSelectedTab(1,true);
gBrowser.mTabContainer.advanceSelectedTab(-1,true);


Links

email


Firefox Get ¤