Pebble: use iframe for clay configuration webpages

Replacing the top frame with a data-uri is forbidden since chromium-based-webview version 60.
With this commit we swap the body with an iframe when needed. Old webviews work as usual also with this approach.
No special treatment is needed for local storage as its usage is forbidden in data-uri iframes.

Fixes #758

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Add workaround for blacklist not properly persisting
 * Handle resetting language to default properly
 * Pebble: Pass booleans from Javascript Appmessage correctly
+* Pebble: Use iframe for clay configuration webpages
 * Add greek transliteration support
 * Various visual improvements to charts
 

app/src/main/assets/app_config/configure.html

@@ -9,6 +9,18 @@
     <script type="text/javascript">
     </script>
     <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        iframe {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
         body {
         -webkit-user-select: none;
         -moz-user-select: none;

app/src/main/assets/app_config/js/gadgetbridge_boilerplate.js

@@ -75,6 +75,13 @@ function showStep(desiredStep) {
     }
 }
 
+function hideSteps() {
+    var steps = document.getElementsByClassName("step");
+        for (var i = 0; i < steps.length; i ++) {
+            steps[i].style.display = 'none';
+        }
+}
+
 function gbPebble() {
     this.configurationURL = null;
     this.configurationValues = null;
@@ -142,7 +149,18 @@ function gbPebble() {
                     self.configurationURL = new Uri(url).addQueryParam("return_to", "gadgetbridge://"+UUID+"?config=true&json=");
             } else {
                 //TODO: add custom return_to
-                location.href = url;
+                var iframe = document.getElementsByTagName('iframe')[0];
+                var oldbody = document.getElementsByTagName("body")[0];
+                if (iframe === undefined && oldbody !== undefined) {
+                    iframe = document.createElement("iframe");
+                    oldbody.parentNode.replaceChild(iframe,oldbody);
+                } else {
+                    hideSteps();
+                    document.documentElement.appendChild(iframe);
+                }
+
+                iframe.src = url;
+
             }
 
     }

app/src/main/res/xml/changelog_master.xml

@@ -1,5 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <changelog>
+    <release version="0.20.0">
+        <change>Inital Amazfit Bip support (WIP)</change>
+        <change>Various theming fixes</change>
+        <change>Add workaround for blacklist not properly persisting</change>
+        <change>Handle resetting language to default properly</change>
+        <change>Pebble: Pass booleans from Javascript Appmessage correctly</change>
+        <change>Pebble: Use iframe for clay configuration webpages</change>
+        <change>Add greek transliteration support</change>
+        <change>Various visual improvements to charts</change>
+    </release>
     <release version="0.19.4" versioncode="97">
         <change>Replace or relicense CC-NC licensed icons to satisfy F-Droid</change>
         <change>Mi Band 2: Make infos to display on the Band configurable</change>