Update the popup preview to always be visible on the settings v2 page (#1151)

ext/bg/css/settings2.css

@@ -561,11 +561,7 @@ h3 {
 .preview-frame-container {
     position: relative;
     align-self: stretch;
-    flex: 0 1 auto;
-    visibility: hidden;
-}
-.preview-frame-container.preview-frame-container-visible {
-    flex-grow: 1;
+    flex: 1 1 auto;
     visibility: visible;
 }
 .preview-frame {

ext/bg/data/options-schema.json

@@ -821,7 +821,6 @@
             "type": "object",
             "required": [
                 "database",
-                "showPopupPreview",
                 "useSettingsV2"
             ],
             "properties": {
@@ -837,10 +836,6 @@
                         }
                     }
                 },
-                "showPopupPreview": {
-                    "type": "boolean",
-                    "default": false
-                },
                 "useSettingsV2": {
                     "type": "boolean",
                     "default": false

ext/bg/js/options.js

@@ -665,6 +665,8 @@ class OptionsUtil {
         //  Added general.popupCurrentIndicatorMode.
         //  Added general.popupActionBarVisibility.
         //  Added general.popupActionBarLocation.
+        //  Removed global option showPopupPreview.
+        delete options.global.showPopupPreview;
         for (const profile of options.profiles) {
             profile.options.general.maximumClipboardSearchLength = 1000;
             profile.options.general.popupCurrentIndicatorMode = 'bar-left';

ext/bg/js/settings/popup-preview-controller.js

@@ -29,7 +29,6 @@ class PopupPreviewController {
         this._customCss = null;
         this._customOuterCss = null;
         this._previewFrameContainer = null;
-        this._showPopupPreviewCheckbox = null;
     }
 
     async prepare() {
@@ -41,19 +40,13 @@ class PopupPreviewController {
             this._customCss = document.querySelector('#custom-popup-css');
             this._customOuterCss = document.querySelector('#custom-popup-outer-css');
             this._previewFrameContainer = document.querySelector('.preview-frame-container');
-            this._showPopupPreviewCheckbox = document.querySelector('#show-preview-checkbox');
 
             this._customCss.addEventListener('input', this._onCustomCssChange.bind(this), false);
             this._customCss.addEventListener('settingChanged', this._onCustomCssChange.bind(this), false);
             this._customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false);
             this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false);
             this._frame.addEventListener('load', this._onFrameLoad2.bind(this), false);
-            this._showPopupPreviewCheckbox.addEventListener('change', this._onShowPreviewCheckboxChange.bind(this), false);
             this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this));
-
-            const {global: {showPopupPreview}} = await this._settingsController.getOptionsFull();
-            this._showPopupPreviewCheckbox.checked = showPopupPreview;
-            this._updatePopupPreviewVisibility();
         }
     }
 
@@ -65,10 +58,6 @@ class PopupPreviewController {
         this._previewVisible = true;
     }
 
-    _onShowPreviewCheckboxChange() {
-        this._updatePopupPreviewVisibility();
-    }
-
     _showAppearancePreview() {
         const container = document.querySelector('#settings-popup-preview-container');
         const buttonContainer = document.querySelector('#settings-popup-preview-button-container');
@@ -137,10 +126,4 @@ class PopupPreviewController {
         if (this._frame === null || this._frame.contentWindow === null) { return; }
         this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
     }
-
-    _updatePopupPreviewVisibility() {
-        const value = this._showPopupPreviewCheckbox.checked;
-        this._previewFrameContainer.classList.toggle('preview-frame-container-visible', value);
-        this._settingsController.setGlobalSetting('global.showPopupPreview', value);
-    }
 }

ext/bg/settings2.html

@@ -1458,12 +1458,6 @@
 </div>
 <div class="content-right">
     <div class="preview-sidebar"><div class="preview-sidebar-inner">
-        <div class="preview-sidebar-setting">
-            <label class="show-preview-switch"><span class="show-preview-switch-inner">
-                <label class="toggle"><input type="checkbox" id="show-preview-checkbox"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                <span class="show-preview-switch-label">Show popup preview</span>
-            </span></label>
-        </div>
         <div class="preview-frame-container">
             <iframe src="/bg/popup-preview.html" class="preview-frame" id="popup-preview-frame"></iframe>
         </div>

test/test-options-util.js

@@ -507,7 +507,6 @@ function createOptionsUpdatedTestData1() {
             database: {
                 prefixWildcardsSupported: false
             },
-            showPopupPreview: false,
             useSettingsV2: false
         }
     };