Change new style into a dropdown

_locales/en/messages.json

@@ -3,6 +3,14 @@
     "message": "Write new style",
     "description": "Label for the button to go to the add style page"
   },
+  "addPlainStyleLabel": {
+    "message": "New plain style",
+    "description": "Label for the button to go to the add style page"
+  },
+  "addUserCSSStyleLabel": {
+    "message": "New UserCSS style",
+    "description": "Label for the button to go to the add style page"
+  },
   "addStyleTitle": {
     "message": "Add Style",
     "description": "Title of the page for adding styles"

manage.html

@@ -221,12 +221,16 @@
     </span>
   </div>
   <div id="main-actions">
-    <a href="edit.html" i18n-data-title="addStyleLabel" class="new-style tt-w">
+    <div class="new-style tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
         <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0
           16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
       </svg>
-    </a>
+      <div class="dropdown">
+        <a href="edit.html" id="add-usercss" i18n-text="addUserCSSStyleLabel"></a>
+        <a href="edit.html" id="add-reg-css" i18n-text="addPlainStyleLabel"></a>
+      </div>
+    </div>
 
     <span class="spacer"></span>
 

manage/manage-actions.js

@@ -79,6 +79,7 @@ function initGlobalEvents() {
   }
 
   $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
+  $$('#add-usercss, #add-reg-css').forEach(a => (a.onclick = handleEvent.newStyle));
 
   document.addEventListener('visibilitychange', onVisibilityChange);
 
@@ -162,6 +163,12 @@ Object.assign(handleEvent, {
     handleEvent.edit(event);
   },
 
+  newStyle(event) {
+    event.preventDefault();
+    prefs.set('newStyleAsUsercss', event.target.id === 'add-usercss');
+    window.location.href = 'edit.html';
+  },
+
   edit(event) {
     if (event.altKey) {
       return;

manage/manage.css

@@ -809,11 +809,13 @@ a svg, .svg-icon.sort {
   text-overflow: ellipsis;
 }
 
-/* export/import buttons */
+/* dropdown buttons */
+.new-style,
 .manage-backups {
   position: relative;
 }
 
+.new-style .dropdown,
 .manage-backups .dropdown {
   display: none;
   background: transparent;
@@ -824,6 +826,7 @@ a svg, .svg-icon.sort {
   z-index: 101;
 }
 
+.new-style .dropdown a,
 .manage-backups .dropdown a {
   background-color: #f9f9f9;
   color: black;
@@ -833,12 +836,14 @@ a svg, .svg-icon.sort {
   display: block;
 }
 
+#main-header .new-style .dropdown a:hover,
 #main-header .manage-backups .dropdown a:hover {
   /* background-color: #f2f2f2 */
   background-color: #e9e9e9;
   color: var(--header-text-hover-color);
 }
 
+.new-style:hover .dropdown,
 .manage-backups:hover .dropdown {
   display: block;
   right: -20px;
@@ -917,10 +922,12 @@ a svg, .svg-icon.sort {
     width: 100%;
     height: auto;
   }
+  .new-style,
   .manage-backups {
     display: inline-block;
     vertical-align: center;
   }
+  .new-style:hover .dropdown,
   .manage-backups:hover .dropdown {
     display: block;
     left: -20px;