Popup window options (#1245)

* Add popupWindow options

* Add toBoolean converter

* Add settings

* Use new options

* Add test link

* Fix window state not working

* Make the window section advanced only

1 files changed, 122 insertions, 3 deletions

diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 08dc92d5..33edca69 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -28,7 +28,7 @@
             <a href="#!popup"            class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a>
             <a href="#!popup-appearance" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>
             <a href="#!popup-size"       class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup-size"></span></span><span class="outline-item-label">Position &amp; Size</span></a>
-            <a href="#!window"           class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a>
+            <a href="#!window"           class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a>
             <a href="#!audio"            class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="speaker"></span></span><span class="outline-item-label">Audio</span></a>
             <a href="#!text-parsing"     class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="text-parsing"></span></span><span class="outline-item-label">Text Parsing</span></a>
             <a href="#!sentence-parsing" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="sentence-parsing"></span></span><span class="outline-item-label">Sentence Parsing</span></a>
@@ -921,11 +921,12 @@
     </div>
 
     <!-- Window -->
-    <div class="heading-container">
+    <div class="heading-container advanced-only">
         <div class="heading-container-icon"><span class="icon" data-icon="window"></span></div>
         <div class="heading-container-left"><h2 id="window"><a href="#!window">Window</a></h2></div>
+        <div class="heading-container-right"><a class="heading-link-light" id="test-window-open-link">Open&hellip;</a></div>
     </div>
-    <div class="settings-group">
+    <div class="settings-group advanced-only">
         <div class="settings-item">
             <div class="settings-item-inner">
                 <div class="settings-item-left">
@@ -989,6 +990,123 @@
                 <input type="number" min="0" step="1" data-setting="general.maximumClipboardSearchLength">
             </div>
         </div></div>
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Size</div>
+                <div class="settings-item-description">Control the size of the window, in pixels.</div>
+            </div>
+            <div class="settings-item-right">
+                <div class="settings-item-group">
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">Width</div>
+                        <input type="number" class="short-width short-height" min="0" step="1" data-setting="popupWindow.width">
+                    </div>
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">Height</div>
+                        <input type="number" class="short-width short-height" min="0" step="1" data-setting="popupWindow.height">
+                    </div>
+                </div>
+            </div>
+        </div></div>
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Left position</div>
+                <div class="settings-item-description">Control the left position of the window, in pixels.</div>
+            </div>
+            <div class="settings-item-right">
+                <div class="settings-item-group">
+                    <div class="settings-item-group-item" id="popup-window-left-container" hidden>
+                        <div class="settings-item-group-item-label">x</div>
+                        <input type="number" class="short-width short-height" step="1" data-setting="popupWindow.left">
+                    </div>
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">Mode</div>
+                        <select class="short-width short-height" data-setting="popupWindow.useLeft"
+                            data-transform='[
+                                {
+                                    "step": "pre",
+                                    "type": "toBoolean"
+                                },
+                                {
+                                    "type": "setVisibility",
+                                    "selector": "#popup-window-left-container",
+                                    "condition": {"op": "===", "value": true}
+                                },
+                                {
+                                    "step": "post",
+                                    "type": "toString"
+                                }
+                            ]'
+                        >
+                            <option value="false">Auto</option>
+                            <option value="true">Manual</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div></div>
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Top position</div>
+                <div class="settings-item-description">Control the top position of the window, in pixels.</div>
+            </div>
+            <div class="settings-item-right">
+                <div class="settings-item-group">
+                    <div class="settings-item-group-item" id="popup-window-top-container" hidden>
+                        <div class="settings-item-group-item-label">y</div>
+                        <input type="number" class="short-width short-height" step="1" data-setting="popupWindow.top">
+                    </div>
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">Mode</div>
+                        <select class="short-width short-height" data-setting="popupWindow.useTop"
+                            data-transform='[
+                                {
+                                    "step": "pre",
+                                    "type": "toBoolean"
+                                },
+                                {
+                                    "type": "setVisibility",
+                                    "selector": "#popup-window-top-container",
+                                    "condition": {"op": "===", "value": true}
+                                },
+                                {
+                                    "step": "post",
+                                    "type": "toString"
+                                }
+                            ]'
+                        >
+                            <option value="false">Auto</option>
+                            <option value="true">Manual</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div></div>
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Window style</div>
+                <div class="settings-item-description">Change the appearance of the window.</div>
+            </div>
+            <div class="settings-item-right">
+                <div class="settings-item-group">
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">Type</div>
+                        <select class="short-width short-height" data-setting="popupWindow.windowType">
+                            <option value="normal">Normal</option>
+                            <option value="popup">Popup</option>
+                        </select>
+                    </div>
+                    <div class="settings-item-group-item">
+                        <div class="settings-item-group-item-label">State</div>
+                        <select class="short-width short-height" data-setting="popupWindow.windowState">
+                            <option value="normal">Normal</option>
+                            <option value="maximized">Maximized</option>
+                            <option value="fullscreen">Fullscreen</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div></div>
     </div>
 
     <!-- Audio -->
@@ -2971,6 +3089,7 @@
 
 <script src="/bg/js/settings2/keyboard-shortcuts-controller.js"></script>
 <script src="/bg/js/settings2/nested-popups-controller.js"></script>
+<script src="/bg/js/settings2/popup-window-controller.js"></script>
 <script src="/bg/js/settings2/secondary-search-dictionary-controller.js"></script>
 <script src="/bg/js/settings2/sentence-termination-characters-controller.js"></script>
 <script src="/bg/js/settings2/settings-display-controller.js"></script>