From ba2647da5be12d63f464a0f5d8fceb0960094acf Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Tue, 13 Dec 2022 16:30:40 +0200
Subject: [PATCH 1/2] fix: Set font size from cookie before DOM is ready, to
 avoid flickering

---
 ietf/static/js/document_html.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/ietf/static/js/document_html.js b/ietf/static/js/document_html.js
index 077ef6ece1..e32bfa6429 100644
--- a/ietf/static/js/document_html.js
+++ b/ietf/static/js/document_html.js
@@ -11,22 +11,23 @@ import { populate_nav } from "./nav.js";
 
 const cookies = Cookies.withAttributes({ sameSite: "strict" });
 
-document.addEventListener("DOMContentLoaded", function (event) {
-    // handle point size slider
-    const cookie = "doc-ptsize-max";
+// set initial point size from cookie before DOM is ready, to avoid flickering
+const ptsize_cookie = "doc-ptsize-max";
+
+function change_ptsize(ptsize) {
+    document.documentElement.style.setProperty(`--${ptsize_cookie}`,
+        `${ptsize}pt`);
+    cookies.set(ptsize_cookie, ptsize);
+}
 
-    function change_ptsize(ptsize) {
-        document.documentElement.style.setProperty(`--${cookie}`,
-            `${ptsize}pt`);
-        cookies.set(cookie, ptsize);
-    }
+const ptsize = cookies.get(ptsize_cookie);
+change_ptsize(ptsize ? Math.min(Math.max(7, ptsize), 16) : 12);
 
+document.addEventListener("DOMContentLoaded", function (event) {
+    // handle point size slider
     document.getElementById("ptsize")
         .oninput = function () { change_ptsize(this.value) };
 
-    const ptsize = cookies.get(cookie);
-    change_ptsize(ptsize ? Math.min(Math.max(7, ptsize), 16) : 12);
-
     // Use the Bootstrap tooltip plugin for all elements with a title attribute
     const tt_triggers = document.querySelectorAll(
         "[title]:not([title=''])");

From df1d1cb1fd3d007c41406141e38b8002f192afa4 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Wed, 14 Dec 2022 11:45:05 +0200
Subject: [PATCH 2/2] fix: Use localStorage instead of cookies where possible

---
 ietf/static/js/document_html.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/ietf/static/js/document_html.js b/ietf/static/js/document_html.js
index e32bfa6429..371e0e7b4d 100644
--- a/ietf/static/js/document_html.js
+++ b/ietf/static/js/document_html.js
@@ -12,15 +12,15 @@ import { populate_nav } from "./nav.js";
 const cookies = Cookies.withAttributes({ sameSite: "strict" });
 
 // set initial point size from cookie before DOM is ready, to avoid flickering
-const ptsize_cookie = "doc-ptsize-max";
+const ptsize_var = "doc-ptsize-max";
 
 function change_ptsize(ptsize) {
-    document.documentElement.style.setProperty(`--${ptsize_cookie}`,
+    document.documentElement.style.setProperty(`--${ptsize_var}`,
         `${ptsize}pt`);
-    cookies.set(ptsize_cookie, ptsize);
+    localStorage.setItem(ptsize_var, ptsize);
 }
 
-const ptsize = cookies.get(ptsize_cookie);
+const ptsize = localStorage.getItem(ptsize_var);
 change_ptsize(ptsize ? Math.min(Math.max(7, ptsize), 16) : 12);
 
 document.addEventListener("DOMContentLoaded", function (event) {
@@ -46,15 +46,25 @@ document.addEventListener("DOMContentLoaded", function (event) {
          #content .h1, #content .h2, #content .h3, #content .h4, #content .h5, #content .h6`,
         ["py-0"]);
 
-    // activate pref buttons selected by pref cookies
+    // activate pref buttons selected by pref cookies or localStorage
+    const in_localStorage = ["deftab"];
     document.querySelectorAll(".btn-check")
         .forEach(btn => {
             const id = btn.id.replace("-radio", "");
-            if (cookies.get(btn.name) == id) {
+
+            const val = in_localStorage.includes(btn.name) ?
+                localStorage.getItem(btn.name) : cookies.get(btn.name);
+            if (val == id) {
                 btn.checked = true;
             }
+
             btn.addEventListener("click", el => {
-                cookies.set(btn.name, id);
+                // only use cookies for things used in HTML templates
+                if (in_localStorage.includes(btn.name)) {
+                    localStorage.setItem(btn.name, id)
+                } else {
+                    cookies.set(btn.name, id);
+                }
                 window.location.reload();
             });
         });
@@ -63,7 +73,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
     let defpane;
     try {
         defpane = Tab.getOrCreateInstance(
-            `#${cookies.get("deftab")}-tab`);
+            `#${localStorage.getItem("deftab")}-tab`);
     } catch (err) {
         defpane = Tab.getOrCreateInstance("#docinfo-tab");
     };