[epiphany] overview: Ensure there are always 9 items on overview

[Jan-Michael Brummer <jbrummer src gnome org>]

commit 19bef4c258218ab085599934db94808b6b65ca05
Author: Jan-Michael Brummer <jan brummer tabos org>
Date:   Fri Sep 4 19:27:35 2020 +0200

    overview: Ensure there are always 9 items on overview
    
    Fixes: https://gitlab.gnome.org/GNOME/epiphany/-/issues/1326

 embed/ephy-about-handler.c                         |  8 ------
 .../web-process-extension/resources/js/overview.js | 30 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index 597a1654e..61deac0a8 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -429,14 +429,6 @@ history_service_query_urls_cb (EphyHistoryService     *history,
                             thumbnail_style ? thumbnail_style : "", url->title);
   }
 
-  for (guint idx = list_length; idx < 9; idx++) {
-    g_string_append_printf (data_str,
-                            "<i class=\"overview-item\">"
-                            "  <span class=\"overview-thumbnail\"></span>"
-                            "  <span class=\"overview-title\"></span>"
-                            "</i>");
-  }
-
   data_str = g_string_append (data_str,
                               "  </div>\n"
                               "  </div>\n"
diff --git a/embed/web-process-extension/resources/js/overview.js 
b/embed/web-process-extension/resources/js/overview.js
index ad9e9c8fc..e898bd700 100644
--- a/embed/web-process-extension/resources/js/overview.js
+++ b/embed/web-process-extension/resources/js/overview.js
@@ -62,6 +62,7 @@ Ephy.Overview = class Overview
         for (let titleChange of this._pendingTitleChanges)
             this._onTitleChanged(titleChange.url, titleChange.title);
         this._pendingTitleChanges = [];
+        this._addPlaceholders();
     }
 
     _onKeyPress(event)
@@ -76,6 +77,33 @@ Ephy.Overview = class Overview
         }
     }
 
+    _addPlaceholders() {
+        let parentNode = document.getElementById('most-visited-grid');
+        let anchors = document.getElementsByTagName('a');
+
+        for (let i = anchors.length; i < 9; i++) {
+            let anchor = document.createElement('a');
+            anchor.className = 'overview-item';
+            let span_thumbnail = document.createElement('span');
+            span_thumbnail.className = 'overview-thumbnail';
+            anchor.appendChild(span_thumbnail);
+            let span_title = document.createElement('span');
+            span_title.className = 'overview-title';
+            anchor.appendChild(span_title);
+
+            parentNode.appendChild(anchor);
+        }
+      }
+
+    _removePlaceholders() {
+        let anchors = document.getElementsByTagName('a')
+
+        for (let anchor of anchors) {
+            if (anchor.href == '')
+                document.removeChild(anchor);
+        }
+    }
+
     _removeItem(item)
     {
         item.classList.add('overview-removed');
@@ -88,6 +116,7 @@ Ephy.Overview = class Overview
                     break;
                 }
             }
+            this._addPlaceholders();
             window.webkit.messageHandlers.overview.postMessage(item.href);
         }, 500);  // This value needs to be synced with the one in about.css
     }
@@ -102,6 +131,7 @@ Ephy.Overview = class Overview
             overview.classList.remove('overview-empty');
         }
 
+        this._removePlaceholders();
         for (let i = 0; i < urls.length; i++) {
             let url = urls[i];