From ad4fdb6d6e87d5587e4d9b54c6f159ffa055b67d Mon Sep 17 00:00:00 2001
From: Arnaud GRANAL <arnaud@geometry.ee>
Date: Tue, 16 Feb 2021 03:55:08 +0000
Subject: [PATCH] Add mechanism to clear cached tiles that have not been
 displayed for 7 days (in order to save cache space) and prepare for release

---
 .../resources/local_ntp/local_ntp.html        | 43 ++++++++++++++++++-
 .../browser/resources/local_ntp/local_ntp.js  |  2 +-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/chrome/browser/resources/local_ntp/local_ntp.html b/chrome/browser/resources/local_ntp/local_ntp.html
index a4c98a40c52..c285f3bd19f 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chrome/browser/resources/local_ntp/local_ntp.html
@@ -638,6 +638,7 @@ <h2>Private mode</h2>
   console.log("Invalidating rootDomain: " + rootDomain);
   item.src = "data:image/svg+xml;base64," + btoa(jdenticon.toSvg(parser.hostname, 64));
   localStorage.setItem('icon-' + rootDomain, item.src);
+  localStorage.setItem('lastShown-' + rootDomain, Math.floor(Date.now() / 1000));
 }
 
 function remove_favorite(e)
@@ -658,6 +659,7 @@ <h2>Private mode</h2>
   var innerDiv = document.createElement('div');
   innerDiv.className = 'grid-item grid-idea';
   var cachedImage = localStorage.getItem('icon-' + rootDomain);
+  localStorage.setItem('lastShown-' + rootDomain, Math.floor(Date.now() / 1000));
   var imageUri = null;
   var randomId = Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9);
   if (cachedImage != null) {
@@ -673,6 +675,7 @@ <h2>Private mode</h2>
       })
       .then(function(answer) {
         localStorage.setItem('icon-' + rootDomain, 'data:image/png;base64,' + arrayBufferToBase64(answer));
+        localStorage.setItem('lastShown-' + rootDomain, Math.floor(Date.now() / 1000));
         document.getElementById('icon' + randomId).src = 'data:image/png;base64,' + arrayBufferToBase64(answer);
         console.log('Icon for ' + rootDomain + ' is now fetched');
       });
@@ -682,7 +685,7 @@ <h2>Private mode</h2>
   }
   if (impression_url && impression_url != 'about:blank')
     navigator.sendBeacon(impression_url);
-  innerDiv.innerHTML = '<img id="closeImg" src="' + closeImg + '" class="closeImg closeImgInvisible" height="20" width="20" style="position: absolute; right: 0px; border: 0px;" /><a id="tile_target" href="' + click_url + '"><img border="0" class="grid-image" title="' + name + '" src="' + imageUri + '" id="icon' + randomId + '" onError="invalidate_image(this)" width="64" style="max-height: 64px; border-radius: 4px;" /><span style="width: 60px; line-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block">' + name + '</span></a>';
+  innerDiv.innerHTML = '<a id="tile_target" href="' + click_url + '"><img border="0" class="grid-image" title="' + name + '" src="' + imageUri + '" id="icon' + randomId + '" onError="invalidate_image(this)" width="64" style="max-height: 64px; border-radius: 4px;" /><span style="width: 60px; line-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block">' + name + '</span></a>';
   innerDiv.style.minHeight = '64px';
 
 //  innerDiv.querySelector('#closeImg').addEventListener("touchstart", remove_favorite);
@@ -702,6 +705,7 @@ <h2>Private mode</h2>
   var innerDiv = document.createElement('div');
   innerDiv.className = 'grid-item';
   var cachedImage = localStorage.getItem('icon-' + rootDomain);
+  localStorage.setItem('lastShown-' + rootDomain, Math.floor(Date.now() / 1000));
   var imageUri = null;
   var randomId = Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9);
   if (nItemsAdded++ < 10) {
@@ -814,7 +818,7 @@ <h2>Private mode</h2>
   if (globalGrid.isDragifierOn()) {
     iseditable = false;
     globalGrid.dragifierOff();
-    Array.prototype.forEach.call(document.getElementsByClassName("grid-item"), function (el) { el.style.WebkitAnimation = 'none'; });
+    Array.prototype.forEach.call(document.getElementsByClassName("grid-item"), function (el) { if (!el.classList.contains('grid-idea')) { el.style.WebkitAnimation = 'none'; } });
     Array.prototype.forEach.call(document.getElementsByClassName('closeImg'), function (el) { el.classList.add('closeImgInvisible'); });
   } else {
     iseditable = true;
@@ -1225,5 +1229,40 @@ <h2>Private mode</h2>
 <script>
 <include src="./local_ntp.js">
 </script>
+<script>
+function cleanUpOldTilesIdeas() {
+  var values = Object.values(localStorage),
+       keys = Object.keys(localStorage),
+       i = keys.length;
+    while ( i-- ) {
+      if (keys[i].startsWith('lastShown-idea-')) {
+        var tile_name = keys[i].substring('lastShown-idea-'.length);
+        var difference = Math.floor(Date.now() / 1000) - parseInt(localStorage[keys[i]]);
+        if (difference > (86400 * 7)) {
+          console.log('Dropping tile idea: ' + keys[i]);
+          delete localStorage[keys[i]];
+          delete localStorage['icon-idea-' + tile_name];
+        }
+      }
+    }
+}
+function cleanUpOldTiles() {
+  var values = Object.values(localStorage),
+       keys = Object.keys(localStorage),
+       i = keys.length;
+    while ( i-- ) {
+      if (keys[i].startsWith('lastShown-') && !keys[i].startsWith('lastShown-idea-')) {
+        var tile_name = keys[i].substring('lastShown-'.length);
+        var difference = Math.floor(Date.now() / 1000) - parseInt(localStorage[keys[i]]);
+        if (difference > (86400 * 7)) {
+          console.log('Dropping tile: ' + keys[i]);
+          delete localStorage[keys[i]];
+          delete localStorage['icon-' + tile_name];
+        }
+      }
+    }
+}
+window.setTimeout(function () { cleanUpOldTilesIdeas(); cleanUpOldTiles(); }, 3000);
+</script>
 </body>
 </html>
diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js
index 59617446953..f7ba8fea2c2 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.js
+++ b/chrome/browser/resources/local_ntp/local_ntp.js
@@ -1093,7 +1093,7 @@ function setup_grid()
     document.areIdeasFetched = true;
     document.getElementById('explore-section').style.display = 'none';
     console.log("Fetching tiles ideas");
-    fetch('https://tiles.kiwibrowser.org/ideas/?version=1&cachebuster=' + Math.random(), { method: 'GET' })
+    fetch('https://tiles.kiwibrowser.org/ideas/?version=2&cachebuster=' + Math.random(), { method: 'GET' })
         .then(function(response) {
             console.log("We received tiles ideas");
             return response.json();