[Wiki] Sailfish browser tweaking
asked 2014-12-21 17:16:33 +0200

This post is a wiki. Anyone with karma >75 is welcome to improve it.
==NEEDS REVISIONING SINCE 1.1.2.25 Yliaavanlampi==
Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su
) and text editor such as vim, nano, tinyedit etc.
For general preferences root privileges are not required.
Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.
Sailfish browser layout
Main page layout file:
/usr/share/sailfish-browser/pages/BrowserPage.qml
To edit buttons layout, look for items called Browser.IconButton
Browser.IconButton {
...button details here...
}
Increase the toolbar space for icons in portrait mode
Default values (5 icons):
// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall
To add space for the sixth button into portrait view change values to:
spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall
Visibility in Landscape versus Portrait
Some of the buttons are visible only in landscape by default but you can add them in portrait too.
Under Browser.IconButton
add or remove (or comment/uncomment line):
visible: isLandscape
For instance you can add 'Close tab' button to portrait mode by commenting the line under button entry:
Browser.IconButton {
// visible: isLandscape
enabled: webView.tabModel.count > 0
icon.source: "image://theme/icon-m-close"
onClicked: {
webView.tabModel.closeActiveTab()
webView.activatePage(webView.tabId, true)
}
}
If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.
How to re-arrange toolbar icons
Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:
Original:
Browser.IconButton {
id:backIcon
icon.source: "image://theme/icon-m-back"
enabled: webView.canGoBack
onClicked: webView.goBack()
}
Browser.IconButton {
property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
enabled: webView.visible
icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
onClicked: {
if (favorited) {
favorites.removeBookmark(webView.url)
} else {
favorites.addBookmark(webView.url, webView.title, webView.favicon)
}
}
}
Switch the buttons around:
Browser.IconButton {
property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
enabled: webView.visible
icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
onClicked: {
if (favorited) {
favorites.removeBookmark(webView.url)
} else {
favorites.addBookmark(webView.url, webView.title, webView.favicon)
}
}
}
Browser.IconButton {
id:backIcon
icon.source: "image://theme/icon-m-back"
enabled: webView.canGoBack
onClicked: webView.goBack()
}
General settings
Jolla browser uses Mozilla style settings file:
/home/nemo/.mozilla/mozembed/prefs.js
Since Sailfish OS 1.1.2.7 you can also use browser builtin interface at url about:config
for preferences.
Change minimum font size
By default some sites font is extremely small. Example: talk.maemo.org
Add line:
user_pref("font.minimum-size.x-western", 16);
Notes:
- If set too high, page layouts on some sites will break.
I guess these personal changes are lost the next time the browser package receives an update (and so, keep also a copy of your changes somewhere safe)
simosagi ( 2014-12-21 21:10:07 +0200 )editVery likely. I waited for the Vaarainjärvi in case there were any changes to the interface, so these should be ok for a month or two.
Manatus ( 2014-12-21 21:44:34 +0200 )editi'd love to have this settings implemented in the settigsmenu
NuklearFart ( 2014-12-21 23:05:22 +0200 )edit