We have moved to a new Sailfish OS Forum. Please start new discussions there.
21

[Wiki] Sailfish browser tweaking

asked 2014-12-21 17:16:33 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2015-02-24 10:44:06 +0300

Manatus gravatar image

==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.
edit retag flag offensive close delete

Comments

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 +0300 )edit

Very 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 +0300 )edit

i'd love to have this settings implemented in the settigsmenu

NuklearFart ( 2014-12-21 23:05:22 +0300 )edit

1 Answer

Sort by » oldest newest most voted
10

answered 2014-12-21 17:18:39 +0300

Manatus gravatar image

updated 2015-02-24 10:45:39 +0300

==OBSOLETE SINCE 1.1.2.15 Yliaavanlampi==

Depending on your use case, you may just want to enable Close tab and disable Favorites buttons in portrait mode in BrowserPage.qml.

Add visible: isLandscape under Favorites icon button, and uncomment or remove it under Close tab parameters respectively .

The result looks like this:

image description

Back button gets pushed to the right because Favorites is now restricted to landscape mode only. Close tab button appeared leftmost because it is the first button mentioned in the file under Toolbar row. I found this setup more comfortable personally because

  • I can reach the back button easier with right hand, and I don't press Favorites accidentally.

  • I open articles in a tab quite often and close them immediately after reading them. Having the Close tab button on the main screen saves me one click and swipe back (which is required via bookmarks page), or alternatively turning the phone into landscape and pressing the close tab button with other hand.

  • I don't use favorites much after initial setup of bookmarked sites, but it can be reached from the landscape if necessary.

edit flag offensive delete publish link more

Comments

Thanks for this! Makes the user experience much better.

ssahla ( 2014-12-21 20:01:56 +0300 )edit
Login/Signup to Answer

Question tools

Follow
8 followers

Stats

Asked: 2014-12-21 17:16:33 +0300

Seen: 1,577 times

Last updated: Feb 24 '15