Port of QupZilla version

Signed-off-by: Juraj Oravec <sgd.orava@gmail.com>

readability/__init__.py

@@ -1,13 +1,16 @@
 import Falkon
-from PySide2 import QtCore
+import os
+from PySide2 import QtCore, QtGui
 
 
 class Readability(Falkon.PluginInterface, QtCore.QObject):
+    view = None
+
     def init(self, state, settingsPath):
         plugins = Falkon.MainApplication.instance().plugins()
 
         plugins.mainWindowCreated.connect(self.onMainWindowCreated)
-        plugins.mainWindowDeleted.connect(self.mainWindowDeleted)
+        plugins.mainWindowDeleted.connect(self.onMainWindowDeleted)
 
         if state == Falkon.PluginInterface.LateInitState:
             for window in Falkon.MainApplication.instance().windows():
@@ -15,7 +18,7 @@ class Readability(Falkon.PluginInterface, QtCore.QObject):
 
     def unload(self):
         for window in Falkon.MainApplication.instance().windows():
-            self.mainWindowDeleted(window)
+            self.onMainWindowDeleted(window)
 
     def testPlugin(self):
         return True
@@ -23,8 +26,73 @@ class Readability(Falkon.PluginInterface, QtCore.QObject):
     def onMainWindowCreated(self, window):
         pass
 
-    def mainWindowDeleted(self, window):
+    def onMainWindowDeleted(self, window):
         pass
 
+    def populateWebViewMenu(self, menu, view, hitTestResult):
+        self.view = view
+
+        if (hitTestResult.imageUrl().isEmpty()
+                and hitTestResult.linkUrl().isEmpty()
+                and hitTestResult.mediaUrl().isEmpty()
+                and not hitTestResult.isContentEditable()
+                and not hitTestResult.isContentSelected()):
+            menu.addAction(
+                QtGui.QIcon(os.path.join(os.path.dirname(__file__), "data", "icon.png")),
+                "Readability",
+                self.makeReadability
+            )
+
+    def makeReadability(self):
+        dataDir = os.path.join(os.path.dirname(__file__), "data")
+
+        iconClose = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-close.png"))
+        ).toString()
+        iconCloseHover = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-close-hover.png"))
+        ).toString()
+        iconDelete = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-Delete-24x24.png"))
+        ).toString()
+        iconPlus = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-Plus-24x24.png"))
+        ).toString()
+        iconMinus = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-Minus-24x24.png"))
+        ).toString()
+        iconArrow = Falkon.QzTools.readAllFileContents(
+            os.path.join(dataDir, "RM-Type-Controls-Arrow.png")
+        )
+        iconControls = Falkon.QzTools.pixmapToDataUrl(
+            QtGui.QPixmap(os.path.join(dataDir, "RM-Type-Controls-24x24.png"))
+        ).toString()
+
+        css = Falkon.QzTools.readAllFileContents(
+            os.path.join(dataDir, "style.css")
+        ).replace("\n", "")
+        css = css.replace("{1}", iconClose)
+        css = css.replace("{2}", iconCloseHover)
+        css = css.replace("{3}", iconDelete)
+        css = css.replace("{4}", iconPlus)
+        css = css.replace("{5}", iconMinus)
+        css = css.replace("{6}", iconArrow)
+        css = css.replace("{7}", iconControls)
+
+        javascript = Falkon.QzTools.readAllFileContents(
+            os.path.join(dataDir, "Readability.js")
+        )
+        toolbar = Falkon.QzTools.readAllFileContents(
+            os.path.join(dataDir, "Toolbar.js")
+        )
+        call = Falkon.QzTools.readAllFileContents(
+            os.path.join(dataDir, "Call.js")
+        )
+        call = call.replace("{1}", javascript)
+        call = call.replace("{2}", toolbar)
+        call = call.replace("{3}", css)
+
+        self.view.page().runJavaScript(call)
+
 
 Falkon.registerPlugin(Readability())

readability/data/Call.js

@@ -0,0 +1,118 @@
+/* ============================================================
+* QupZilla - WebKit based browser
+* Copyright (C) 2016  Jaroslav Bambas <jar.bambas@gmail.com>
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program.  If not, see <http://www.gnu.org/licenses/>.
+* ============================================================ */
+
+{1}
+
+{2}
+
+function callReadability(){
+    var loc = document.location;
+    var uri = {
+        spec: loc.href,
+        host: loc.host,
+        prePath: loc.protocol + "//" + loc.host,
+        scheme: loc.protocol.substr(0, loc.protocol.indexOf(":")),
+        pathBase: loc.protocol + "//" + loc.host + loc.pathname.substr(0, loc.pathname.lastIndexOf("/") + 1)
+    };
+    var article = new Readability(uri, document).parse();
+    renderPage(article);
+}
+
+function readabilityHead(article){
+    var head = document.createElement('head');
+    document.documentElement.appendChild(head);
+
+    var title = document.createElement('title');
+    title.innerHTML = article.title;
+    head.appendChild(title);
+
+    var css = document.createElement('style');
+    css.innerHTML = '{3}';
+    head.appendChild(css);
+
+    var meta  = document.createElement('meta');
+    meta.content = "text/html; charset=UTF-8";
+    meta.httpEquiv = 'content-type';
+    head.appendChild(meta);
+    meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'width=device-width, user-scalable=0';
+    head.appendChild(meta);
+}
+
+function readablilityBody(article){
+    var body = document.createElement('body');
+    body.className = 'loaded sans-serif sepia';
+    document.documentElement.appendChild(body);
+
+    var container = document.createElement('div');
+    container.className = 'container font-size5';
+    container.id = 'container';
+    body.appendChild(container);
+
+    var header = document.createElement('div');
+    header.className = 'header';
+    header.id = 'reader-header';
+    header.style.display = 'block';
+    container.appendChild(header);
+
+    var domain = document.createElement('a');
+    domain.id = 'reader-domain';
+    domain.className = 'domain';
+    domain.href = article.uri.spec;
+    domain.innerHTML = article.uri.host;
+    header.appendChild(domain);
+
+    var h1 = document.createElement('h1');
+    h1.id = 'reader-title';
+    h1.innerHTML = article.title;
+    header.appendChild(h1);
+
+    var credit = document.createElement('div');
+    credit.id = 'reader-credits';
+    credit.className = 'credits';
+    credit.innerHTML = article.byline;
+    header.appendChild(credit);
+
+    var content = document.createElement('div');
+    content.className = 'content';
+    container.appendChild(content);
+
+    var reader_content = document.createElement('div');
+    reader_content.id = 'moz-reader-content';
+    reader_content.style.display = 'block';
+    reader_content.innerHTML = article.content;
+    content.appendChild(reader_content);
+}
+
+function renderPage(article){
+    var element = document.documentElement;
+    if(element && !!article && !!article.content){
+        element.removeChild(document.body);
+        element.removeChild(document.head);
+
+        readabilityHead(article);
+        readablilityBody(article);
+
+        readablilityToolbar();
+    } else {
+        alert("No content to transform.");
+    }
+}
+
+callReadability();

readability/data/RM-Type-Controls-Arrow.png

@@ -0,0 +1 @@
+data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWdvbiBvcGFjaXR5PSIwLjE1IiBwb2ludHM9IjE2LjU4MywwLjAxNSAxNi41NjksMCA0LjU4MywxMiAxNi41NjksMjQgMTYuNTgzLDIzLjk4NSIvPgogIDxwb2x5Z29uIGZpbGw9IiNmYmZiZmIiIHBvaW50cz0iMTYuNTc1LDEuMDIxIDE2LjU2MSwxLjAwOCA1LjU4MywxMiAxNi41NzcsMjMuMDA4IDE2LjU5MSwyMi45OTQgIi8+Cjwvc3ZnPg==

readability/data/Toolbar.js

@@ -0,0 +1,145 @@
+/* ============================================================
+* QupZilla - WebKit based browser
+* Copyright (C) 2016  Jaroslav Bambas <jar.bambas@gmail.com>
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program.  If not, see <http://www.gnu.org/licenses/>.
+* ============================================================ */
+
+function readablilityToolbar(){
+    renderToolbar();
+    addListeners();
+}
+
+function renderToolbar(){
+    var toolbar = document.createElement('div');
+    document.getElementById('container').appendChild(toolbar);
+
+    toolbar.innerHTML = '<ul visible="true" id="reader-toolbar" class="toolbar"><li><button id="close-button" class="button close-button"></button></li><ul id="style-dropdown" class="dropdown"><li><button id="style-button" class="dropdown-toggle button style-button"></button></li><li style="top: 48px;" id="reader-popup" class="dropdown-popup"><div id="font-type-buttons"><button id="sans-serif-button" class="sans-serif-button selected"><div class="name">Aa</div><div class="description">Sans-serif</div></button><button id="serif-button" class="serif-button"><div class="name">Aa</div><div class="description">Serif</div></button></div><hr><div id="font-size-buttons"><button id="font-size-minus" class="minus-button"></button><button id="font-size-plus" class="plus-button"></button></div><hr><div id="color-scheme-buttons"><button id="light-button" class="light-button"><div class="name">Light</div></button><button id="dark-button" class="dark-button"><div class="name">Dark</div></button><button id="sepia-button" class="sepia-button selected"><div class="name">Sepia</div></button></div><div class="dropdown-arrow"></div></li></ul></ul>';
+}
+
+function addListeners(){
+    document.getElementById('close-button').addEventListener("click", closeReadability);
+    document.getElementById('style-button').addEventListener("click", toolbarService);
+
+    var lightButton = document.getElementById('light-button');
+    lightButton.addEventListener("click", function(){switchToLight(lightButton);});
+    var sepiaButton = document.getElementById('sepia-button');
+    sepiaButton.addEventListener("click", function(){switchToSepia(sepiaButton);});
+    var darkButton = document.getElementById('dark-button');
+    darkButton.addEventListener("click", function(){switchToDark(darkButton);});
+
+    var serifButton = document.getElementById('serif-button');
+    serifButton.addEventListener("click", function(){switchToSerif(serifButton);});
+    var sansSerifButton = document.getElementById('sans-serif-button');
+    sansSerifButton.addEventListener("click", function(){switchToSansSerif(sansSerifButton);});
+
+    var fontSizePlusButton = document.getElementById('font-size-plus');
+    fontSizePlusButton.addEventListener("click", fontSizePlus);
+    var fontSizeMinusButton = document.getElementById('font-size-minus');
+    fontSizeMinusButton.addEventListener("click", fontSizeMinus);
+}
+
+function closeReadability(){
+    location.reload();
+}
+
+function toolbarService(){
+    var element = document.getElementById('style-dropdown');
+
+    if(element.classList.contains('open')){
+        element.classList.remove('open');
+    } else {
+        element.classList.add('open');
+
+    }
+}
+
+function switchToLight(item){
+    document.body.classList.remove('sepia', 'dark');
+    document.body.classList.add('light');
+
+    var items = document.getElementById('color-scheme-buttons').children;
+    for (var j = items.length - 1; j >= 0; j--) {
+        items[j].classList.remove("selected");
+    }
+    item.classList.add('selected');
+}
+
+function switchToSepia(item){
+    document.body.classList.remove('light', 'dark');
+    document.body.classList.add('sepia');
+
+    var items = document.getElementById('color-scheme-buttons').children;
+    for (var j = items.length - 1; j >= 0; j--) {
+        items[j].classList.remove("selected");
+    }
+    item.classList.add('selected');
+}
+
+function switchToDark(item){
+    document.body.classList.remove('sepia', 'light');
+    document.body.classList.add('dark');
+
+    var items = document.getElementById('color-scheme-buttons').children;
+    for (var j = items.length - 1; j >= 0; j--) {
+        items[j].classList.remove("selected");
+    }
+    item.classList.add('selected');
+}
+
+function switchToSerif(item){
+    document.body.classList.remove('sans-serif');
+    document.body.classList.add('serif');
+    document.getElementById('sans-serif-button').classList.remove('selected');
+    item.classList.add('selected');
+}
+
+function switchToSansSerif(item){
+    document.body.classList.remove('serif');
+    document.body.classList.add('sans-serif');
+    document.getElementById('serif-button').classList.remove('selected');
+    item.classList.add('selected');
+}
+
+function fontSizePlus(){
+    var container = document.getElementById('container');
+    var incrementedSize = 0;
+    for (var i = 0; i < container.classList.length; i++){
+        if(container.classList[i].indexOf('font-size') > -1){
+            var size = container.classList[i].substr(-1, 1);
+            if(parseInt(size) < 9){
+                incrementedSize = parseInt(size) + 1;
+            } else return;
+            container.classList.remove(container.classList[i]);
+            container.classList.add('font-size' + incrementedSize);
+            return;
+        }
+    }
+}
+
+function fontSizeMinus(){
+    var container = document.getElementById('container');
+    var decrementedSize = 0;
+    for (var i = 0; i < container.classList.length; i++){
+        if(container.classList[i].indexOf('font-size') > -1){
+            var size = container.classList[i].substr(-1, 1);
+            if(parseInt(size) > 1){
+                incrementedSize = parseInt(size) - 1;
+            } else return;
+            container.classList.remove(container.classList[i]);
+            container.classList.add('font-size' + incrementedSize);
+            return;
+        }
+    }
+}

readability/data/style.css

@@ -0,0 +1,543 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+    padding: 64px 0;
+    margin: 0 auto;
+}
+
+@media (max-width: 785px) {
+    body {
+        padding-top: 64px;
+        -moz-padding-end: 0;
+        padding-bottom: 64px;
+        -moz-padding-start: 51px;
+  }
+}
+
+body.loaded {
+    transition: color 0.4s, background-color 0.4s;
+}
+
+#container {
+    max-width: 40em;
+    margin: 0 auto;
+}
+
+.light,
+.light-button {
+    color: #333333;
+    background-color: #ffffff;
+}
+
+.dark,
+.dark-button {
+    color: #eeeeee;
+    background-color: #333333;
+}
+
+.sepia,
+.sepia-button {
+    color: #333333;
+    background-color: #f0ece7;
+}
+
+.sans-serif,
+.sans-serif-button,
+.sans-serif .remove-button {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.serif,
+.serif-button,
+.serif .remove-button {
+    font-family: Georgia, "Times New Roman", serif;
+}
+
+.font-size1 {
+    font-size: 10px;
+}
+
+.font-size2 {
+    font-size: 12px;
+}
+
+.font-size3 {
+    font-size: 14px;
+}
+
+.font-size4  {
+    font-size: 16px;
+}
+
+.font-size5 {
+    font-size: 18px;
+}
+
+.font-size6 {
+    font-size: 20px;
+}
+
+.font-size7 {
+    font-size: 22px;
+}
+
+.font-size8 {
+    font-size: 24px;
+}
+
+.font-size9 {
+    font-size: 26px;
+}
+
+
+/* Loading/error message */
+
+.message {
+    margin-top: 40px;
+    display: none;
+    text-align: center;
+    width: 100%;
+    font-size: 0.9em;
+}
+
+/* Header */
+
+.header {
+    text-align: start;
+    display: none;
+}
+
+.domain {
+    font-size: 0.9em;
+    line-height: 1.48em;
+    padding-bottom: 4px;
+    font-family: Helvetica, Arial, sans-serif;
+    text-decoration: none;
+    border-bottom: 1px solid;
+    color: #0095dd;
+}
+
+.light > .container > .header > .domain,
+.sepia > .container > .header > .domain {
+    border-bottom-color: #333333;
+}
+
+.dark > .container > .header > .domain {
+    border-bottom-color: #eeeeee;
+}
+
+.header > h1 {
+    font-size: 1.33em;
+    line-height: 1.25em;
+    width: 100%;
+    margin: 30px 0;
+    padding: 0;
+}
+
+.header > .credits {
+    font-size: 0.9em;
+    line-height: 1.48em;
+    margin: 0 0 30px 0;
+    padding: 0;
+    font-style: italic;
+}
+
+/* Content */
+
+#moz-reader-content {
+    display: none;
+    font-size: 1em;
+    line-height: 1.6em;
+}
+
+.content h1,
+.content h2,
+.content h3 {
+    font-weight: bold;
+}
+
+#moz-reader-content h1 {
+    font-size: 1.33em;
+    line-height: 1.25em;
+}
+
+#moz-reader-content h2 {
+    font-size: 1.1em;
+    line-height: 1.51em;
+}
+
+#moz-reader-content h3 {
+    font-size: 1em;
+    line-height: 1.66em;
+}
+
+.content a {
+    text-decoration: underline;
+    font-weight: normal;
+}
+
+.content a,
+.content a:visited,
+.content a:hover,
+.content a:active {
+    color: #0095dd;
+}
+
+.content * {
+    max-width: 100%;
+    height: auto;
+}
+
+.content p,
+.content code,
+.content pre,
+.content blockquote,
+.content ul,
+.content ol,
+.content li,
+.content figure,
+.content .wp-caption {
+    margin: 0 0 30px 0;
+}
+
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+    display: block;
+}
+
+.content img[moz-reader-center] {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+    font-size: 0.9em;
+    line-height: 1.48em;
+    font-style: italic;
+}
+
+.content code,
+.content pre {
+    white-space: pre-wrap;
+}
+
+.content blockquote {
+    padding: 0;
+    -moz-padding-start: 16px;
+}
+
+.light > .container > .content blockquote,
+.sepia > .container > .content blockquote {
+    -moz-border-start: 2px solid #333333;
+}
+
+.dark > .container > .content blockquote {
+    -moz-border-start: 2px solid #eeeeee;
+}
+.dark *::-moz-selection {
+    background-color: #FFFFFF;
+    color: #0095DD;
+}
+.dark a::-moz-selection {
+    color: #DD4800;
+}
+
+.content ul,
+.content ol {
+    padding: 0;
+}
+
+.content ul {
+    -moz-padding-start: 30px;
+    list-style: disc;
+}
+
+.content ol {
+    -moz-padding-start: 30px;
+    list-style: decimal;
+}
+
+/*======= Controls toolbar =======*/
+
+.toolbar {
+    font-family: Helvetica, Arial, sans-serif;
+    position: fixed;
+    height: 100%;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    background-color: #fbfbfb;
+    -moz-user-select: none;
+    border-right: 1px solid #b5b5b5;
+}
+
+.button {
+    display: block;
+    background-size: 24px 24px;
+    background-repeat: no-repeat;
+    color: #333;
+    background-color: #fbfbfb;
+    height: 40px;
+    padding: 0;
+}
+
+.toolbar .button {
+    width: 40px;
+    background-position: center;
+    margin-right: -1px;
+    border-top: 0;
+    border-left: 0;
+    border-right: 1px solid #b5b5b5;
+    border-bottom: 1px solid #c1c1c1;
+}
+
+.button[hidden] {
+  display: none;
+}
+
+.dropdown {
+    text-align: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.dropdown li {
+    margin: 0;
+    padding: 0;
+}
+
+/*======= Font style popup =======*/
+
+.dropdown-popup {
+    min-width: 300px;
+    text-align: start;
+    position: absolute;
+    left: 48px; /* offset to account for toolbar width */
+    z-index: 1000;
+    background-color: #fbfbfb;
+    visibility: hidden;
+    border-radius: 4px;
+    border: 1px 1px 0 1px solid #b5b5b5;
+    box-shadow: 0 1px 12px #666;
+}
+
+.dropdown-popup > hr {
+    display: none;
+}
+
+.open > .dropdown-popup {
+    visibility: visible;
+}
+
+.dropdown-arrow {
+    position: absolute;
+    top: 30px; /* offset arrow from top of popup */
+    left: -16px;
+    width: 24px;
+    height: 24px;
+    background-image: url({6});
+    display: block;
+}
+
+#font-type-buttons,
+#font-size-buttons,
+#color-scheme-buttons {
+    display: flex;
+    flex-direction: row;
+}
+
+#font-type-buttons > button:first-child {
+    border-top-left-radius: 3px;
+}
+#font-type-buttons > button:last-child {
+    border-top-right-radius: 3px;
+}
+#color-scheme-buttons > button:first-child {
+    border-bottom-left-radius: 3px;
+}
+#color-scheme-buttons > button:last-child {
+    border-bottom-right-radius: 3px;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button,
+#color-scheme-buttons > button {
+    text-align: center;
+    border: 0;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button {
+    width: 50%;
+    background-color: transparent;
+    border-left: 1px solid #B5B5B5;
+    border-bottom: 1px solid #B5B5B5;
+}
+
+#color-scheme-buttons > button {
+    width: 33.33%;
+    font-size: 14px;
+}
+
+#color-scheme-buttons > .dark-button {
+    margin-top: -1px;
+    height: 61px;
+}
+
+#font-type-buttons > button:first-child,
+#font-size-buttons > button:first-child {
+    border-left: 0;
+}
+
+#font-type-buttons > button {
+    display: inline-block;
+    font-size: 62px;
+    height: 100px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button {
+    height: 60px;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected,
+#color-scheme-buttons > button:active:hover,
+#color-scheme-buttons > button.selected {
+    box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+    border-bottom: 1px solid #FC6420;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > button > .description {
+    color: #666;
+    font-size: 12px;
+    margin-top: -5px;
+}
+
+/* Font sizes are different per-platform, so we need custom CSS to line them up. */
+#font-type-buttons > .sans-serif-button > .name {
+    margin-top: 5px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+    margin-top: -8px;
+}
+
+#font-type-buttons > .serif-button > .name {
+    font-size: 70px;
+}
+
+.button:hover,
+#font-size-buttons > button:hover,
+#font-type-buttons > button:hover {
+    background-color: #ebebeb;
+}
+
+.dropdown.open,
+.button:active,
+#font-size-buttons > button:active,
+#font-size-buttons > button.selected {
+    background-color: #dadada;
+}
+
+.minus-button,
+.plus-button {
+    background-color: transparent;
+    border: 0;
+    background-size: 18px 18px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.footer {
+    height: 64px;
+    background-color: #ebebeb;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    padding: 12px 0;
+    box-sizing: border-box;
+    box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
+}
+
+.sepia .footer {
+    background-color: #dedad4;
+}
+
+.remove-button {
+    background-image: url({3});
+    margin: 0 auto;
+    border: 1px solid #c1c1c1;
+    background-position: 10px 7px;
+    padding-left: 42px;
+    padding-right: 10px;
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+}
+
+/*======= Toolbar icons =======*/
+
+.close-button {
+    background-image: url({1});
+    height: 68px;
+    background-position: center 8px;
+}
+
+.close-button:hover {
+    background-image: url({2});
+    background-color: #d94141;
+    border-bottom: 1px solid #d94141;
+    border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+    background-image: url({2});
+    background-color: #AE2325;
+    border-bottom: 1px solid #AE2325;
+    border-right: 1px solid #AE2325;
+}
+
+.style-button {
+    background-image: url({7});
+}
+
+.minus-button {
+     background-image: url({5});
+}
+
+.plus-button {
+    background-image: url({4});
+}
+
+@media print {
+    .toolbar {
+        display: none;
+    }
+    .footer {
+        display: none;
+    }
+}
+
+#close-hover {
+    fill: #fff;
+}
+
+#close {
+    fill: #808080;
+}

readability/metadata.desktop

@@ -1,11 +1,12 @@
 [Desktop Entry]
 Name=Readability
-Comment=A basic python plugin for Falkon
+Comment=Transform webpage to easy reading.
 
+Icon=data/icon.png
 Type=Service
 X-Falkon-Type=Extension/Python
 
-X-Falkon-Author=Example name
-X-Falkon-Email=python@example.com
+X-Falkon-Author=Juraj Oravec
+X-Falkon-Email=sgd.orava@gmail.com
 X-Falkon-Version=1.0.0
 X-Falkon-Settings=false