Add option for changing poup scale relative to visual viewport

ext/bg/data/options-schema.json

@@ -93,6 +93,7 @@
                                     "popupVerticalTextPosition",
                                     "popupScalingFactor",
                                     "popupScaleRelativeToPageZoom",
+                                    "popupScaleRelativeToVisualViewport",
                                     "showGuide",
                                     "compactTags",
                                     "compactGlossaries",
@@ -176,6 +177,10 @@
                                         "type": "boolean",
                                         "default": false
                                     },
+                                    "popupScaleRelativeToVisualViewport": {
+                                        "type": "boolean",
+                                        "default": true
+                                    },
                                     "showGuide": {
                                         "type": "boolean",
                                         "default": true

ext/bg/js/options.js

@@ -281,6 +281,7 @@ function profileOptionsCreateDefaults() {
             popupVerticalTextPosition: 'before',
             popupScalingFactor: 1,
             popupScaleRelativeToPageZoom: false,
+            popupScaleRelativeToVisualViewport: true,
             showGuide: true,
             compactTags: false,
             compactGlossaries: false,

ext/bg/js/settings/main.js

@@ -45,7 +45,8 @@ async function formRead(options) {
     options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0);
     options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10);
     options.general.popupScalingFactor = parseInt($('#popup-scaling-factor').val(), 10);
-    options.general.popupScaleRelativeToPageZoom = $('#popup-scale-relative-to-page-zoom').val() === 'true';
+    options.general.popupScaleRelativeToPageZoom = $('#popup-scale-relative-to-page-zoom').prop('checked');
+    options.general.popupScaleRelativeToVisualViewport = $('#popup-scale-relative-to-visual-viewport').prop('checked');
     options.general.popupTheme = $('#popup-theme').val();
     options.general.popupOuterTheme = $('#popup-outer-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
@@ -112,7 +113,8 @@ async function formWrite(options) {
     $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2);
     $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2);
     $('#popup-scaling-factor').val(options.general.popupScalingFactor);
-    $('#popup-scale-relative-to-page-zoom').val(options.general.popupScaleRelativeToPageZoom ? 'true' : 'false');
+    $('#popup-scale-relative-to-page-zoom').prop('checked', options.general.popupScaleRelativeToPageZoom);
+    $('#popup-scale-relative-to-visual-viewport').prop('checked', options.general.popupScaleRelativeToVisualViewport);
     $('#popup-theme').val(options.general.popupTheme);
     $('#popup-outer-theme').val(options.general.popupOuterTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);

ext/bg/settings.html

@@ -150,6 +150,14 @@
                     <label><input type="checkbox" id="show-advanced-options"> Show advanced options</label>
                 </div>
 
+                <div class="checkbox options-advanced">
+                    <label><input type="checkbox" id="popup-scale-relative-to-page-zoom"> Change popup size relative to page zoom level</label>
+                </div>
+
+                <div class="checkbox options-advanced">
+                    <label><input type="checkbox" id="popup-scale-relative-to-visual-viewport"> Change popup size relative to page viewport</label>
+                </div>
+
                 <div class="checkbox options-advanced">
                     <label><input type="checkbox" id="show-debug-info"> Show debug information</label>
                 </div>
@@ -171,6 +179,11 @@
                     </select>
                 </div>
 
+                <div class="form-group">
+                    <label for="popup-scaling-factor">Popup size multiplier</label>
+                    <input type="number" min="0" id="popup-scaling-factor" class="form-control">
+                </div>
+
                 <div class="form-group options-advanced">
                     <label for="max-displayed-results">Maximum displayed results</label>
                     <input type="number" min="1" id="max-displayed-results" class="form-control">
@@ -237,22 +250,6 @@
                     </div>
                 </div>
 
-                <div class="form-group options-advanced">
-                    <div class="row">
-                        <div class="col-xs-6">
-                            <label for="popup-scaling-factor">Popup size multiplier</label>
-                            <input type="number" min="0" id="popup-scaling-factor" class="form-control">
-                        </div>
-                        <div class="col-xs-6">
-                            <label for="popup-scale-relative-to-page-zoom">Popup size mode</label>
-                            <select class="form-control" id="popup-scale-relative-to-page-zoom">
-                                <option value="false">Absolute</option>
-                                <option value="true">Relative to zoom level</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
                 <div class="form-group">
                     <div class="row">
                         <div class="col-xs-6">