Merge branch 'use-save-modal-with-editor'

Fixes greasemonkey#2858, greasemonkey#2900
arantius · Jun 7, 2018 · a26b52f · a26b52f
2 parents 8a66c21 + 76ed54a
commit a26b52f
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 87 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -2,9 +2,6 @@
   "NAME_greasemonkey_user_script": {
     "message": "$1 - Greasemonkey User Script"
   },
-  "NAME_greasemonkey_user_script_editor": {
-    "message": "$1 - Greasemonkey User Script Editor"
-  },
   "ERROR_at_URL": {
     "message": "$1 at $2",
     "description": "E.g. 404 - Not Found at http://.../404.js"
@@ -39,6 +36,9 @@
   "cancel": {
     "message": "Cancel"
   },
+  "close": {
+    "message": "Close"
+  },
   "description": {
     "message": "Description:"
   },
@@ -106,6 +106,9 @@
   "greasemonkey_is_disabled": {
     "message": "Greasemonkey is disabled"
   },
+  "greasemonkey_user_script_editor": {
+    "message": "Greasemonkey User Script Editor"
+  },
   "greasemonkey_wiki": {
     "message": "Greasemonkey Wiki"
   },
@@ -154,6 +157,9 @@
   "save": {
     "message": "Save"
   },
+  "saving": {
+    "message": "Saving"
+  },
   "save_failed_NAME_already_in_NAMESPACE": {
     "message": "User script save failed: script named $1 already exists in namespace $2."
   },

diff --git a/doc/Messages.md b/doc/Messages.md
@@ -109,13 +109,6 @@ Response data:
 
 * An array of `.details` objects from installed `RunnableUserScript`s.
 
-# UserScriptChanged
-Sent by: `bg/user-script-registry.js`
-
-Sent when some value (like enabled state) of a script is changed.  Data:
-
-* `details` Updated script's current.
-
 # UserScriptGet
 Sent by: `content/edit-user-script.js`
 

diff --git a/src/bg/user-script-registry.js b/src/bg/user-script-registry.js
@@ -104,7 +104,7 @@ async function installFromDownloader(userScriptDetails, downloaderDetails) {
       });
       await Promise.all(setValues);
     }
-    return details.uuid;
+    return details;
   }).catch(err => {
     console.error('Error in installFromDownloader()', err);
     // Rethrow so caller can also deal with it
@@ -261,17 +261,10 @@ async function saveUserScript(userScript) {
     } else {
       message = _('save_failed_unknown');
     }
-
-    // TODO: Pass this message to the editor tab, not general notifications.
-    let notificationOpts = {
-      'iconUrl': '/skin/icon.svg',
-      'message': message,
-      'title': _('script_save_error'),
-      'type': 'basic',
-    };
-    chrome.notifications.create(notificationOpts);
     // Rethrow to allow caller to deal with error
-    throw error;
+    let retError = new Error(message);
+    retError.orig = error;
+    throw retError;
   }
 
   let details = userScript.details;

diff --git a/src/content/edit-user-script.css b/src/content/edit-user-script.css
@@ -1,11 +1,48 @@
 html, body {
   background: lightgrey;
-  height: calc(100% - 8px);
+  height: 100%;
   margin: 0;
   overflow: hidden;
   padding: 4px;
 }
 
+body.save #modal-splash {
+  display: block;
+}
+body #modal-splash {
+  display: none
+}
+
+#modal-splash {
+  background-color: #A3A3A363;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 100;
+}
+#modal {
+  background-color: #FCFCF9;
+  border: 1px solid #CCC;
+  border-radius: 2px;
+  margin: 25% auto;
+  padding: 1rem;
+  width: 30em;
+}
+#modal header {
+  border-bottom: 1px solid #CCC;
+  font-size: 25px;
+  margin: 0 0 10px 0;
+  padding-bottom: 10px;
+}
+#modal footer {
+  margin: 10px 0 0 0;
+  text-align: right;
+}
+#modal footer button {
+  padding: 0 1em;
+}
 
 #tabs {
   margin: 0;
@@ -20,7 +57,7 @@ html, body {
   cursor: default;
   display: inline-block;
   font-family: arial, sans-serif;
-  font-size: smaller;
+  font-size: small;
   list-style: none;
   margin: 0 0 0 1ex;
   padding: 4px 8px;
@@ -60,3 +97,11 @@ body, #editor {
 .CodeMirror {
   height: 100% !important;
 }
+
+/* Replace shoelace.css settings with defaults. */
+body {
+  font-size: 14px;
+}
+.CodeMirror pre {
+  line-height: 1.0 !important;
+}
diff --git a/src/content/edit-user-script.html b/src/content/edit-user-script.html
@@ -2,7 +2,8 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>Greasemonkey User Script Editor</title>
+<title>{name} {name|strBool '-' ''} Greasemonkey User Script Editor</title>
+<link rel="stylesheet" href="/third-party/shoelace/shoelace.css">
 <link rel="stylesheet" href="/third-party/font_awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="./edit-user-script.css">
 
@@ -39,13 +40,44 @@
 </head>
 
 <body>
+
+<div id="modal-splash">
+  <div id="modal">
+    <header>
+      <span class="fa fa-cog" rv-class-fa-spin="modal.closeDisabled"></span>
+      {modal.title}
+    </header>
+
+    <div rv-show="modal.errorList | empty">
+      <progress></progress>
+    </div>
+    <div rv-show="modal.errorList | empty | not">
+      <p>{'script_save_error'|i18n}</p>
+      <ul>
+        <li rv-each-error="modal.errorList">{error}</li>
+      </ul>
+    </div>
+
+    <footer>
+      <button
+          class="button button-info button-big"
+          id="modal-close"
+          rv-disabled="modal.closeDisabled">
+        {'close'|i18n}
+      </button>
+    </footer>
+  </div>
+</div>
+
 <div class="tab-bar">
   <div id="save" class="command-item" rv-title="'save'|i18n">
     <i class="icon fa fa-floppy-o"></i>
   </div>
   <ul id="tabs"></ul>
 </div>
 <div id="editor"></div>
+
 <script src="edit-user-script.js"></script>
+
 </body>
 </html>