Add upload capabilities + UI?

background/style-manager.js

@@ -7,6 +7,7 @@
 /* global tabMan */
 /* global usercssMan */
 /* global tokenMan */
+/* global retrieveStyleInformation uploadStyle */// usw-api.js
 'use strict';
 
 /*
@@ -48,7 +49,7 @@ const styleMan = (() => {
     name: style => `ID: ${style.id}`,
     _id: () => uuidv4(),
     _rev: () => Date.now(),
-    _uswToken: () => '',
+    _usw: () => ({}),
   };
   const DELETE_IF_NULL = ['id', 'customName', 'md5Url', 'originalMd5'];
   /** @type {Promise|boolean} will be `true` to avoid wasting a microtask tick on each `await` */
@@ -361,15 +362,26 @@ const styleMan = (() => {
       }
       switch (reason) {
         case 'link':
-          style._uswToken = await tokenMan.getToken('userstylesworld', true, style.id);
+          style._usw = {
+            token: await tokenMan.getToken('userstylesworld', true, style.id),
+          };
+          for (const [k, v] of Object.entries(await retrieveStyleInformation(style._usw.token))) {
+            style._usw[k] = v;
+          }
           handleSave(await saveStyle(style), 'success-linking', true);
           break;
 
         case 'revoke':
           await tokenMan.revokeToken('userstylesworld', style.id);
-          style._uswToken = '';
+          style._usw = {};
           handleSave(await saveStyle(style), 'success-revoke', true);
           break;
+
+        case 'upload':
+          if (!style._usw.token) {
+            return;
+          }
+          uploadStyle(style._usw.token, style);
       }
     });
   }
@@ -449,7 +461,7 @@ const styleMan = (() => {
       style.id = newId;
     }
     uuidIndex.set(style._id, style.id);
-    API.sync.put(style._id, style._rev, style._uswToken);
+    API.sync.put(style._id, style._rev, style._usw);
   }
 
   async function saveStyle(style) {

background/usw-api.js

@@ -0,0 +1,29 @@
+/* global URLS */ // toolbox.js
+
+'use strict';
+
+/* exported retrieveStyleInformation */
+async function retrieveStyleInformation(token) {
+  return (await (await fetch(`${URLS.usw}api/style`, {
+    method: 'GET',
+    headers: new Headers({
+      'Authorization': `Bearer ${token}`,
+    }),
+    credentials: 'omit',
+  })).json()).data;
+}
+
+/* exported uploadStyle */
+async function uploadStyle(token, style) {
+  return (await (await fetch(`${URLS.usw}api/style/${style._usw.id}`, {
+    method: 'POST',
+    headers: new Headers({
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    }),
+    body: JSON.stringify({
+      code: style.sourceCode,
+    }),
+    credentials: 'omit',
+  })).json()).data;
+}

edit.html

@@ -392,14 +392,16 @@
             </div>
           </div>
         </details>
-        <details id="linking">
+        <details id="linking" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
           <summary><h2 i18n-text="linking"></h2></summary>
           <div id="pre-linking">
             <button id="link-style">Link style</button>
           </div>
           <div id="after-linking">
-            <p>This style has been linked.</p>
-            <button id="revoke-style">Revoke linking</button>
+            <div>
+              <button id="upload-style">Upload style</button>
+              <button id="revoke-style">Revoke linking</button>
+            </div>
           </div>
         </details>
         <details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">

edit/edit.js

@@ -11,7 +11,7 @@
 /* global linterMan */
 /* global prefs */
 /* global t */// localization.js
-/* global updateUI, linkToUSW revokeLinking */// usw-linking.js
+/* global updateUI linkToUSW revokeLinking uploadStyle */// usw-linking.js
 'use strict';
 
 //#region init
@@ -46,6 +46,7 @@ baseInit.ready.then(async () => {
     require(['/edit/linter-dialogs'], () => linterMan.showLintHelp());
   $('#link-style').onclick = () => linkToUSW();
   $('#revoke-style').onclick = () => revokeLinking();
+  $('#upload-style').onclick = () => uploadStyle();
   require([
     '/edit/autocomplete',
     '/edit/global-search',
@@ -64,7 +65,6 @@ msg.onExtension(request => {
 
               if (['success-linking', 'success-revoke'].includes(request.reason)) {
                 updateUI(newStyle);
-                console.log(editor.style._uswToken);
               }
             });
         }

edit/usw-linking.js

@@ -1,4 +1,4 @@
-/* global $ */// dom.js
+/* global $ $create $remove */// dom.js
 /* global editor */
 
 'use strict';
@@ -28,13 +28,28 @@ function revokeLinking() {
   uswPort.postMessage({reason: 'revoke', data: editor.style});
 }
 
+/* exported uploadStyle */
+function uploadStyle() {
+  connectToPort();
+  const data = Object.assign(editor.style, {sourceCode: editor.getEditors()[0].getValue()});
+  uswPort.postMessage({reason: 'upload', data});
+}
+
 
 /* exported updateUI */
 function updateUI(useStyle) {
   const style = useStyle || editor.style;
-  if (style._uswToken) {
-    $('#after-linking').style = '';
+  if (style._usw && style._usw.token) {
+    const afterLinking = $('#after-linking');
+    afterLinking.style = '';
     $('#pre-linking').style = 'display: none;';
+
+    const linkInformation = $create('div', {id: 'link-info'}, [
+      $create('p', `Style name: ${style._usw.name}`),
+      $create('p', `Description: ${style._usw.description}`),
+    ]);
+    $remove('#link-info');
+    afterLinking.insertBefore(linkInformation, afterLinking.firstChild);
   } else {
     $('#after-linking').style = 'display: none;';
     $('#pre-linking').style = '';

manifest.json

@@ -44,6 +44,7 @@
       "background/sync-manager.js",
       "background/tab-manager.js",
       "background/token-manager.js",
+      "background/usw-api.js",
       "background/update-manager.js",
       "background/usercss-install-helper.js",
       "background/usercss-manager.js",