Split the menu; add captions to buttons

macrovision.css

@@ -316,8 +316,26 @@ body.show-extra-options .options-block.options-block-optional {
     height: 64pt;
 }
 
+.menubar-group button div ~ i {
+    font-size: 18pt;
+    position: absolute;
+    top: 4px;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
+
+.menubar-group button div {
+    font-size: 12pt;
+    position: absolute;
+    bottom: 4px;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
+
 .menubar-group input {
-    font-size: 24pt;
+    font-size: 18pt;
 }
 
 .popout-group {
@@ -981,6 +999,7 @@ button {
     user-select: none;
     -webkit-user-select: none;
     flex: 1;
+    color: #ddd;
 }
 
 .settings-holder.disabled {
@@ -989,7 +1008,7 @@ button {
 }
 
 .settings-name {
-    font-size: 200%;
+    font-size: 150%;
     margin-left: 8pt;
     user-select: none;
     -webkit-user-select: none;
@@ -1050,12 +1069,12 @@ body.screenshot-mode .scroll-button {
 }
 
 .filter-holder > select {
-    font-size: 200%;
+    font-size: 150%;
     width: 100%;
 }
 
 .filter-holder > div {
-    font-size: 200%;
+    font-size: 150%;
     flex-basis: 150pt;
 }
 
@@ -1074,7 +1093,7 @@ body.screenshot-mode .scroll-button {
 
 .info-holder > div,
 .info-holder > i {
-    font-size: 200%;
+    font-size: 150%;
     margin: 10px;
 }
 

macrovision.html

@@ -83,28 +83,39 @@
   <div id="menubar">
     <span class="menubar-group">
       <button id="toggle-menu">
+        <div>Menu</div>
         <i class="fas fa-bars"></i>
       </button>
+      <button id="toggle-scene">
+        <div>Scene</div>
+        <i class="fas fa-map"></i>
+      </button>
       <button id="toggle-settings">
+        <div>Settings</div>
         <i class="fas fa-cogs"></i>
       </button>
       <button id="toggle-filters">
+        <div>Filters</div>
         <i class="fas fa-search"></i>
       </button>
       <button id="toggle-info">
-        <i class="fas fa-info-circle"></i>
+        <div>Help</div>
+        <i class="fas fa-question-circle"></i>
       </button>
     </span>
     <span class="menubar-group" id="spawners">
     </span>
     <span class="menubar-group">
       <button id="copy-screenshot">
+        <div>Screenshot</div>
         <i class="fas fa-camera"></i>
       </button>
       <button id="save-screenshot">
+        <div>Save</div>
         <i class="fas fa-download"></i>
       </button>
       <button id="open-screenshot">
+        <div>Open Tab</div>
         <i class="fas fa-external-link-alt"></i>
       </button>
     </span>

macrovision.js

@@ -3147,84 +3147,100 @@ function handleResize(update = true) {
 }
 
 function preparePopoutMenu() {
-    const menubar = document.querySelector("#menu-menu");
-
+    const menubars = {
+        "menu": document.querySelector("#menu-menu"),
+        "scene": document.querySelector("#scene-menu")
+    };
     [
         {
             name: "Show/hide sidebar",
             id: "menu-toggle-sidebar",
             icon: "fas fa-chevron-circle-down",
             rotates: true,
+            type: "menu"
         },
         {
             name: "Fullscreen",
             id: "menu-fullscreen",
             icon: "fas fa-compress",
+            type: "menu"
         },
         {
             name: "Clear",
             id: "menu-clear",
             icon: "fas fa-file",
+            type: "scene"
         },
         {
             name: "Sort by height",
             id: "menu-order-height",
             icon: "fas fa-sort-numeric-up",
+            type: "scene"
         },
         {
             name: "Permalink",
             id: "menu-permalink",
             icon: "fas fa-link",
+            type: "scene"
         },
         {
             name: "Export to clipboard",
             id: "menu-export",
             icon: "fas fa-share",
+            type: "scene"
         },
         {
             name: "Import from clipboard",
             id: "menu-import",
             icon: "fas fa-share",
             classes: ["flipped"],
+            type: "scene"
         },
         {
             name: "Save Scene",
             id: "menu-save",
             icon: "fas fa-download",
             input: true,
+            type: "scene"
         },
         {
             name: "Load Scene",
             id: "menu-load",
             icon: "fas fa-upload",
             select: true,
+            type: "scene"
         },
         {
             name: "Delete Scene",
             id: "menu-delete",
             icon: "fas fa-trash",
             select: true,
+            type: "scene"
         },
         {
             name: "Load Autosave",
             id: "menu-load-autosave",
             icon: "fas fa-redo",
+            type: "scene"
         },
         {
             name: "Load Preset",
             id: "menu-preset",
             icon: "fas fa-play",
             select: true,
+            type: "scene"
         },
         {
             name: "Add Image",
             id: "menu-add-image",
             icon: "fas fa-camera",
+            type: "menu"
         },
         {
             name: "Clear Rulers",
             id: "menu-clear-rulers",
             icon: "fas fa-ruler",
+            type: "menu"
         },
     ].forEach((entry) => {
         const buttonHolder = document.createElement("div");
@@ -3279,7 +3295,7 @@ function preparePopoutMenu() {
             buttonHolder.appendChild(select);
         }
 
-        menubar.appendChild(buttonHolder);
+        menubars[entry.type].appendChild(buttonHolder);
     });
 
     document
@@ -4193,6 +4209,7 @@ function setupMenuButtons() {
         });
 
     setupPopoutMenu("menu");
+    setupPopoutMenu("scene");
     setupPopoutMenu("settings");
     setupPopoutMenu("filters");
     setupPopoutMenu("info");