Retrieve og:image for better shortcut icons (#346)

- og:image is looked up in the DOM
- The history database stores the "image" of an item
- An image is preferred over a favicon in the speed dial
- Shortcuts with images cover(stretch) the whole element
- Add background color to the title

7 files changed, 52 insertions, 8 deletions

diff --git a/core/app.vala b/core/app.vala
index fdec1c7d..7091f8c9 100644
--- a/core/app.vala
+++ b/core/app.vala
@@ -181,17 +181,22 @@ namespace Midori {
 
         async void internal_scheme (WebKit.URISchemeRequest request) {
             try {
-                var shortcuts = yield HistoryDatabase.get_default ().query (null, 9);
+                var database = HistoryDatabase.get_default ();
+                var shortcuts = yield database.query (null, 9);
                 string content = "";
                 uint index = 0;
                 foreach (var shortcut in shortcuts) {
+                    var statement = database.prepare ("SELECT image FROM %s WHERE uri = :uri LIMIT 1".printf (database.table),
+                                                      ":uri", typeof (string), shortcut.uri);
+                    statement.step ();
+                    var image_uri = statement.get_string ("image") ?? "favicon:///" + shortcut.uri;
                     index++;
                     content += """
                         <div class="shortcut" style="background-image: url('%s')">
                           <a href="%s" accesskey="%u">
                             <span class="title">%s</span>
                           </a>
-                        </div>""".printf ("favicon:///" + shortcut.uri, shortcut.uri, index, shortcut.title);
+                        </div>""".printf (image_uri, shortcut.uri, index, shortcut.title);
                 }
                 string stylesheet = (string)resources_lookup_data ("/data/about.css",
                                                                     ResourceLookupFlags.NONE).get_data ();
diff --git a/core/database.vala b/core/database.vala
index 64abeee4..6b562d0c 100644
--- a/core/database.vala
+++ b/core/database.vala
@@ -231,7 +231,7 @@ namespace Midori {
                 return ":memory:";
             else if (!Path.is_absolute (path))
                 return Path.build_filename (Environment.get_user_config_dir (),
-                    Environment.get_prgname (), path);
+                    Config.PROJECT_NAME, path);
             return path;
         }
 
diff --git a/data/about.css b/data/about.css
index 98e5c468..01332848 100644
--- a/data/about.css
+++ b/data/about.css
@@ -86,6 +86,7 @@ button {
     margin: 1%;
     background-repeat: no-repeat;
     background-position: center;
+    background-size: cover;
     display: inline-block;
     box-sizing: border-box;
     overflow: hidden;
@@ -93,6 +94,10 @@ button {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12),
                 0 1px 2px rgba(0,0,0,0.24);
 }
+/* Match style="background-image: url('favicon:///');" */
+.shortcut[style*='favicon'] {
+    background-size: auto;
+}
 
 .shortcut a {
     width: 100%;
@@ -108,14 +113,15 @@ button {
 
 .shortcut a .title {
     position: absolute;
-    bottom: 4px;
-    margin: 4px;
-    width: 90%;
+    bottom: 0;
+    padding: 1em 4px;
+    width: 100%;
+    background-color: #dedede;
     color: #222222;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
-    height: 2em;
+    height: 1em;
     line-height: 1em;
     overflow: hidden;
     display: block;
diff --git a/data/history/Update1.sql b/data/history/Update1.sql
new file mode 100644
index 00000000..23d2967b
--- /dev/null
+++ b/data/history/Update1.sql
@@ -0,0 +1 @@
+ALTER TABLE history ADD image TEXT;
diff --git a/gresource.xml b/gresource.xml
index 239fa140..f2b692a7 100644
--- a/gresource.xml
+++ b/gresource.xml
@@ -20,6 +20,7 @@
     <file compressed="true">data/bookmarks/Create.sql</file>
     <file compressed="true">data/history/Create.sql</file>
     <file compressed="true">data/history/Day.sql</file>
+    <file compressed="true">data/history/Update1.sql</file>
     <file compressed="true">data/tabby/Create.sql</file>
     <file compressed="true">data/tabby/Update1.sql</file>
     <file compressed="true">data/tabby/Update2.sql</file>
diff --git a/web/CMakeLists.txt b/web/CMakeLists.txt
index a74ccf83..6224e812 100644
--- a/web/CMakeLists.txt
+++ b/web/CMakeLists.txt
@@ -15,11 +15,13 @@ foreach(UNIT_SRC ${EXTENSIONS})
         include(ValaPrecompile)
         vala_precompile(UNIT_SRC_C ${UNIT}
             ${UNIT_SRC}
+            ${CMAKE_SOURCE_DIR}/core/database.vala
+            ${CMAKE_SOURCE_DIR}/core/history.vala
             ${CMAKE_SOURCE_DIR}/core/loggable.vala
             ${CMAKE_SOURCE_DIR}/core/plugins.vala
             ${CMAKE_SOURCE_DIR}/core/settings.vala
         PACKAGES
-            libsoup-2.4 libpeas-1.0
+            libsoup-2.4 libpeas-1.0 sqlite3
         OPTIONS
             ${VALAFLAGS}
         CUSTOM_VAPIS
diff --git a/web/activatable.vala b/web/activatable.vala
index bd75e51b..98c614ce 100644
--- a/web/activatable.vala
+++ b/web/activatable.vala
@@ -13,6 +13,35 @@ Midori.Plugins? plugins;
 public void webkit_web_extension_initialize_with_user_data (WebKit.WebExtension extension, Variant user_data) {
     plugins = Midori.Plugins.get_default (user_data.get_string ());
     extension.page_created.connect ((page) => {
+        page.document_loaded.connect (() => {
+            try {
+                // cf. http://ogp.me
+                // Note: Some websites incorrectly use "name" instead of "property"
+                var image = page.get_dom_document ().query_selector ("meta[property=\"og:image\"],meta[name=\"og:image\"]");
+                var uri = image != null ? image.get_attribute ("content") : null;
+                if (uri == null) {
+                    // Fallback to high res apple-touch-icon or "shortcut icon"
+                    image = page.get_dom_document ().query_selector ("link[sizes=\"any\"],link[sizes=\"152x152\"],link[sizes=\"144x144\"]");
+                    uri = image != null ? image.get_attribute ("href") : null;
+                }
+                if (uri != null && uri != "") {
+                    // Relative URL
+                    if (!("://" in uri)) {
+                        var soup_uri = new Soup.URI (page.uri);
+                        soup_uri.set_path ("/" + uri);
+                        soup_uri.set_query (null);
+                        uri = soup_uri.to_string (false);
+                    }
+                    debug ("Found thumbnail for %s: %s", page.uri, uri);
+                    var history = Midori.HistoryDatabase.get_default ();
+                    history.prepare ("UPDATE %s SET image = :image WHERE uri = :uri".printf (history.table),
+                                     ":image", typeof (string), uri,
+                                     ":uri", typeof (string), page.uri).exec ();
+                }
+            } catch (Error error) {
+                debug ("Failed to locate thumbnail for %s: %s", page.uri, error.message);
+            }
+        });
         var extensions = plugins.plug<Peas.Activatable> ("object", page);
         extensions.extension_added.connect ((info, extension) => ((Peas.Activatable)extension).activate ());
         extensions.extension_removed.connect ((info, extension) => { ((Peas.Activatable)extension).deactivate (); });