Add "Greasemonkey Options" submenu.

Currently empty besides a TODO. Refs greasemonkey#2843
arantius · Jun 29, 2018 · 01565b6 · 01565b6
1 parent 2f2de7c
commit 01565b6
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 40 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -109,6 +109,9 @@
   "greasemonkey_is_disabled": {
     "message": "Greasemonkey is disabled"
   },
+  "greasemonkey_options": {
+    "message": "Greasemonkey Options"
+  },
   "greasemonkey_user_script_editor": {
     "message": "Greasemonkey User Script Editor"
   },

diff --git a/src/browser/monkey-menu.css b/src/browser/monkey-menu.css
@@ -34,13 +34,50 @@ section {
   width: 100vw;
 }
 
-section.user-script {
+/* Hide non-main sections by default. */
+section.options,
+section.user-script
+{
   position: absolute;
   top: 0;
   left: 100vw;
 }
 
-body#user-script section { margin-left: -100vw; }
+/* Slide the main menu away when it's non-active. */
+section.main-menu
+{ margin-left: -100vw; }
+body#main-menu section.main-menu
+{ margin-left: 0; }
+
+/* Slide the other menu in when it's active. */
+body#options section.options,
+body#user-script section.user-script
+{ margin-left: -100vw; }
+
+
+section header {
+  color: -moz-fieldText;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+section menuitem.go-back {
+  box-sizing: content-box;
+  color: inherit;
+  display: inline-block;
+  height: 16px;
+  margin: 4px 4px 0 4px;
+  padding: 8px;
+  vertical-align: -10px;  /* Relative to text, after padding. */
+  width: 16px;
+}
+section menuitem.go-back:hover {
+  background-color: var(--focus-color);
+}
+section menuitem.go-back::before {
+  content: url(/skin/back.svg);
+}
 
 /********************************** MENUS ************************************/
 
@@ -99,31 +136,6 @@ menu heading {
 
 /***************************** SCRIPT DETAIL *********************************/
 
-menuitem#back {
-  box-sizing: content-box;
-  color: inherit;
-  display: inline-block;
-  height: 16px;
-  margin: 4px 4px 0 4px;
-  padding: 8px;
-  vertical-align: -10px;  /* Relative to text, after padding. */
-  width: 16px;
-}
-menuitem#back:hover {
-  background-color: var(--focus-color);
-}
-menuitem#back::before {
-  content: url(/skin/back.svg);
-}
-
-
-section header {
-  color: -moz-fieldText;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 
 section.user-script p {
   margin: 0;

diff --git a/src/browser/monkey-menu.html b/src/browser/monkey-menu.html
@@ -17,12 +17,10 @@
         {enabled|i18nBool 'greasemonkey_is_active' 'greasemonkey_is_disabled'}
       </span>
     </menuitem>
-    <!-- TODO: This feature.
-    <menuitem id="open-options">
+    <menuitem id="open-options" tabindex="0">
       <i class="icon fa fa-fw fa-cogs"></i>
-      <span class="text">Greasemonkey Options</span>
+      <span class="text">{'greasemonkey_options'|i18n}</span>
     </menuitem>
-    -->
 
     <hr rv-if="userScripts.active | bothArraysEmpty userScripts.inactive | not">
 
@@ -76,12 +74,10 @@
       <i class="icon fa fa-link"></i>
       <span class="text">{'greasemonkey_home_page'|i18n}</span>
     </menuitem>
-
     <menuitem tabindex="0" data-url="https://wiki.greasespot.net/">
       <i class="icon fa fa-link"></i>
       <span class="text">{'greasemonkey_wiki'|i18n}</span>
     </menuitem>
-
     <menuitem tabindex="0" data-url="https://wiki.greasespot.net/User_Script_Hosting">
       <i class="icon fa fa-link"></i>
       <span class="text">{'get_user_scripts'|i18n}</span>
@@ -92,7 +88,7 @@
 
 <section class="user-script">
   <header>
-    <menuitem tabindex="0" id="back"></menuitem>
+    <menuitem tabindex="0" class="go-back"></menuitem>
     {activeScript.name}
   </header>
 
@@ -138,6 +134,18 @@
 </section>
 
 
+<section class="options">
+  <header>
+    <menuitem tabindex="0" class="go-back"></menuitem>
+    {'greasemonkey_options'|i18n}
+  </header>
+
+  <hr>
+
+  TODO something here
+</section>
+
+
 <script src="/src/i18n.js"></script>
 <script src="/third-party/tinybind/tinybind.min.js"></script>
 <script src="/third-party/convert2RegExp.js"></script>

diff --git a/src/browser/monkey-menu.js b/src/browser/monkey-menu.js
@@ -108,11 +108,13 @@ function activate(el) {
   while (el && el.tagName != 'MENUITEM') el = el.parentNode;
   if (!el) return;
 
-  switch (el.id) {
-    case 'back':
+  switch (el.className) {
+    case 'go-back':
       navigateToMainMenu();
       return;
+  }
 
+  switch (el.id) {
     case 'backup-export':
       chrome.runtime.sendMessage({'name': 'ExportDatabase'}, logUnhandledError);
       window.close();
@@ -130,6 +132,10 @@ function activate(el) {
       browser.runtime.sendMessage({'name': 'EnabledToggle'})
           .then(enabled => gTplData.enabled = enabled);
       return;
+    case 'open-options':
+      gMainFocusedItem = document.activeElement;
+      document.body.id = 'options';
+      return;
 
     case 'user-script-toggle-enabled':
       toggleUserScriptEnabled(gTplData.activeScript.uuid);
@@ -179,11 +185,19 @@ function loadScripts(userScriptsDetail, url) {
 
 
 function navigateToMainMenu() {
-  if (gTplData.pendingUninstall > 0) {
-    uninstall(gTplData.activeScript.uuid);
-    return;
+  switch (document.body.id) {
+    case 'options':
+      console.log('TODO: Save options.');
+      break;
+    case 'user-script':
+      if (gTplData.pendingUninstall > 0) {
+        uninstall(gTplData.activeScript.uuid);
+        return;
+      }
+      gTplData.activeScript = {};
+      break;
   }
-  gTplData.activeScript = {};
+
   document.body.id = 'main-menu';
 
   if (gMainFocusedItem) {
@@ -199,6 +213,7 @@ function navigateToScript(uuid) {
   document.body.id = 'user-script';
 }
 
+
 async function newUserScript() {
   let r = Math.floor(Math.random() * 900000 + 100000);
   let name = _('unnamed_script_RAND', r);