Popup action bar options (#1140)

* Add options for action bar visibility and location

* Add settings

* Update styles

* Expose properties

* Update styles

* Update tests

ext/bg/data/options-schema.json

@@ -110,7 +110,9 @@
                                     "usePopupShadowDom",
                                     "usePopupWindow",
                                     "maximumClipboardSearchLength",
-                                    "popupCurrentIndicatorMode"
+                                    "popupCurrentIndicatorMode",
+                                    "popupActionBarVisibility",
+                                    "popupActionBarLocation"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -271,6 +273,16 @@
                                         "type": "string",
                                         "enum": ["none", "asterisk", "triangle", "bar-left", "bar-right", "dot-left", "dot-right"],
                                         "default": "bar-left"
+                                    },
+                                    "popupActionBarVisibility": {
+                                        "type": "string",
+                                        "enum": ["auto", "always"],
+                                        "default": "auto"
+                                    },
+                                    "popupActionBarLocation": {
+                                        "type": "string",
+                                        "enum": ["left", "right", "top", "bottom"],
+                                        "default": "right"
                                     }
                                 }
                             },

ext/bg/js/options.js

@@ -663,9 +663,13 @@ class OptionsUtil {
         // Version 7 changes:
         //  Added general.maximumClipboardSearchLength.
         //  Added general.popupCurrentIndicatorMode.
+        //  Added general.popupActionBarVisibility.
+        //  Added general.popupActionBarLocation.
         for (const profile of options.profiles) {
             profile.options.general.maximumClipboardSearchLength = 1000;
             profile.options.general.popupCurrentIndicatorMode = 'bar-left';
+            profile.options.general.popupActionBarVisibility = 'auto';
+            profile.options.general.popupActionBarLocation = 'right';
         }
         return options;
     }

ext/bg/settings2.html

@@ -437,6 +437,34 @@
                 </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">Action bar appearance</div>
+                    <div class="settings-item-description">Control when and where the action bar is visible.</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">Visibility</div>
+                            <select data-setting="general.popupActionBarVisibility" class="short-width short-height">
+                                <option value="auto">Auto</option>
+                                <option value="always">Always</option>
+                            </select>
+                        </div>
+                        <div class="settings-item-group-item">
+                            <div class="settings-item-group-item-label">Location</div>
+                            <select data-setting="general.popupActionBarLocation" class="short-width short-height">
+                                <option value="left">Left</option>
+                                <option value="right">Right</option>
+                                <option value="top">Top</option>
+                                <option value="bottom">Bottom</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="settings-item"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Glossary layout</div>

ext/fg/float.html

@@ -56,8 +56,10 @@
     </div>
     <div class="content-sidebar scrollbar" id="content-sidebar" hidden>
         <div class="content-sidebar-inner">
-            <div class="content-sidebar-top">
+            <div class="content-sidebar-top-pre">
                 <button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
+            </div>
+            <div class="content-sidebar-top">
                 <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
                 <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition (Alt + F)"><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>
             </div>

ext/mixed/css/display.css

@@ -298,6 +298,7 @@ a {
     justify-content: flex-start;
 }
 .content-body {
+    height: 0;
     flex: 1 1 auto;
     position: relative;
 }
@@ -352,7 +353,8 @@ a {
     display: none;
 }
 .content-sidebar[hidden][data-has-navigation-previous=true],
-.content-sidebar[hidden][data-has-navigation-next=true] {
+.content-sidebar[hidden][data-has-navigation-next=true],
+:root[data-popup-action-bar-visibility=always] .content-sidebar {
     display: block;
 }
 .content-sidebar-inner {
@@ -361,6 +363,11 @@ a {
     width: var(--sidebar-width);
     height: 100%;
 }
+.content-sidebar-top-pre {
+    flex: 0 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
+}
 .content-sidebar-top {
     flex: 1 1 auto;
     display: flex;
@@ -373,6 +380,43 @@ a {
     display: flex;
     flex-flow: column nowrap;
 }
+:root[data-popup-action-bar-location=top] .content-outer,
+:root[data-popup-action-bar-location=bottom] .content-outer {
+    flex-flow: column nowrap;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar,
+:root[data-popup-action-bar-location=bottom] .content-sidebar {
+    height: auto;
+    width: 100%;
+}
+:root[data-popup-action-bar-location=left] .content-sidebar,
+:root[data-popup-action-bar-location=top] .content-sidebar {
+    order: -1;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-inner,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-inner {
+    flex-flow: row nowrap;
+    width: auto;
+    height: var(--sidebar-button-height);
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-top-pre,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre {
+    flex-flow: row nowrap;
+    order: 1;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-top,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-top {
+    flex-flow: row nowrap;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-bottom,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
+    flex-flow: row nowrap;
+}
+:root[data-popup-action-bar-location=top] button.sidebar-button,
+:root[data-popup-action-bar-location=bottom] button.sidebar-button {
+    width: var(--sidebar-width) !important;
+    height: 100% !important;
+}
 
 
 /* Sidebar buttons */

ext/mixed/js/display.js

@@ -837,6 +837,8 @@ class Display extends EventDispatcher {
         data.debug = `${options.general.debugInfo}`;
         data.popupDisplayMode = `${options.general.popupDisplayMode}`;
         data.popupCurrentIndicatorMode = `${options.general.popupCurrentIndicatorMode}`;
+        data.popupActionBarVisibility = `${options.general.popupActionBarVisibility}`;
+        data.popupActionBarLocation = `${options.general.popupActionBarLocation}`;
     }
 
     _updateTheme(themeName) {

test/test-options-util.js

@@ -294,7 +294,9 @@ function createProfileOptionsUpdatedTestData1() {
             usePopupShadowDom: true,
             usePopupWindow: false,
             maximumClipboardSearchLength: 1000,
-            popupCurrentIndicatorMode: 'bar-left'
+            popupCurrentIndicatorMode: 'bar-left',
+            popupActionBarVisibility: 'auto',
+            popupActionBarLocation: 'right'
         },
         audio: {
             enabled: true,