Adjusted behavior

Applied suggestions from Narco.

_locales/en/messages.json

@@ -1365,17 +1365,13 @@
     "message": "Sections",
     "description": "Header for the table of contents block listing style section names in the left panel of the classic editor"
   },
-  "linking": {
+  "integration": {
     "message": "UserStyles.world integration",
     "description": "Header for the section to link the style with userStyles.world"
   },
-  "linkStyle": {
-    "message": "Link Style",
-    "description": "Link the current style with userstyles.world"
-  },
   "uploadStyle": {
-    "message": "Upload Style",
+    "message": "Publish Style",
-    "description": "Upload the current style to userstyles.world"
+    "description": "Publish the current style to userstyles.world"
   },
   "revokeLink": {
     "message": "Revoke Link",

background/style-manager.js

@@ -56,7 +56,7 @@ const styleMan = (() => {
   let ready = init();
 
   chrome.runtime.onConnect.addListener(handleLivePreview);
-  chrome.runtime.onConnect.addListener(handleLinkingUSW);
+  chrome.runtime.onConnect.addListener(handlePublishingUSW);
 
   //#endregion
   //#region Exports
@@ -349,7 +349,7 @@ const styleMan = (() => {
     });
   }
 
-  function handleLinkingUSW(port) {
+  function handlePublishingUSW(port) {
     if (port.name !== 'link-style-usw') {
       return;
     }
@@ -359,28 +359,32 @@ const styleMan = (() => {
         return;
       }
       switch (reason) {
-        case 'link':
-          style._linking = true;
-          saveStyle(style);
-          style._usw = {
-            token: await tokenMan.getToken('userstylesworld', true, style),
-          };
-          delete style._linking;
-          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._usw = {};
           handleSave(await saveStyle(style), 'success-revoke', true);
           break;
 
-        case 'upload':
+        case 'publish':
-          if (!style._usw.token) {
+          if (!style._usw || !style._usw.token) {
-            return;
+            style._linking = true;
+            await saveStyle(style);
+            const data = id2data(style.id);
+            if (!data) {
+              storeInMap(style);
+            } else {
+              data.style = style;
+            }
+
+            style._usw = {
+              token: await tokenMan.getToken('userstylesworld', true, style),
+            };
+
+            delete style._linking;
+            for (const [k, v] of Object.entries(await retrieveStyleInformation(style._usw.token))) {
+              style._usw[k] = v;
+            }
+            handleSave(await saveStyle(style), 'success-publishing', true);
           }
           uploadStyle(style);
           break;

edit.html

@@ -59,7 +59,7 @@
     <script src="edit/source-editor.js"></script>
     <script src="edit/sections-editor-section.js"></script>
     <script src="edit/sections-editor.js"></script>
-    <script src="edit/usw-linking.js"></script>
+    <script src="edit/usw-integration.js"></script>
     <script src="edit/edit.js"></script>
 
     <template data-id="appliesTo">
@@ -392,16 +392,11 @@
             </div>
           </div>
         </details>
-        <details id="linking" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
+        <details id="integration" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
-          <summary><h2 i18n-text="linking"></h2></summary>
+          <summary><h2 i18n-text="integration"></h2></summary>
-          <div id="pre-linking">
+          <div>
-            <button id="link-style" i18n-text="linkStyle"></button>
+            <button id="publish-style" i18n-text="uploadStyle"></button>
-          </div>
+            <button id="revoke-link" i18n-text="revokeLink"></button>
-          <div id="after-linking">
-            <div>
-              <button id="upload-style" i18n-text="uploadStyle"></button>
-              <button id="revoke-link" i18n-text="revokeLink"></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 uploadStyle */// usw-linking.js
+/* global updateUI revokeLinking publishStyle */// usw-integration.js
 'use strict';
 
 //#region init
@@ -44,9 +44,8 @@ baseInit.ready.then(async () => {
     require(['/edit/linter-dialogs'], () => linterMan.showLintConfig());
   $('#lint-help').onclick = () =>
     require(['/edit/linter-dialogs'], () => linterMan.showLintHelp());
-  $('#link-style').onclick = () => linkToUSW();
   $('#revoke-link').onclick = () => revokeLinking();
-  $('#upload-style').onclick = () => uploadStyle();
+  $('#publish-style').onclick = () => publishStyle();
   require([
     '/edit/autocomplete',
     '/edit/global-search',
@@ -63,7 +62,7 @@ msg.onExtension(request => {
             .then(newStyle => {
               editor.replaceStyle(newStyle, request.codeIsUpdated);
 
-              if (['success-linking', 'success-revoke'].includes(request.reason)) {
+              if (['success-publishing', 'success-revoke'].includes(request.reason)) {
                 updateUI(newStyle);
               }
             });

edit/usw-integration.js

@@ -14,13 +14,6 @@ function connectToPort() {
   }
 }
 
-/* exported linkToUSW */
-function linkToUSW() {
-  connectToPort();
-
-  const data = Object.assign(editor.style, {sourceCode: editor.getEditors()[0].getValue()});
-  uswPort.postMessage({reason: 'link', data});
-}
 
 /* exported revokeLinking */
 function revokeLinking() {
@@ -29,11 +22,11 @@ function revokeLinking() {
   uswPort.postMessage({reason: 'revoke', data: editor.style});
 }
 
-/* exported uploadStyle */
+/* exported publishStyle */
-function uploadStyle() {
+function publishStyle() {
   connectToPort();
   const data = Object.assign(editor.style, {sourceCode: editor.getEditors()[0].getValue()});
-  uswPort.postMessage({reason: 'upload', data});
+  uswPort.postMessage({reason: 'publish', data});
 }
 
 
@@ -41,18 +34,16 @@ function uploadStyle() {
 function updateUI(useStyle) {
   const style = useStyle || editor.style;
   if (style._usw && style._usw.token) {
-    const afterLinking = $('#after-linking');
+    $('#revoke-link').style = '';
-    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);
+    $('#integration').insertBefore(linkInformation, $('#integration').firstChild);
   } else {
-    $('#after-linking').style = 'display: none;';
+    $('#revoke-link').style = 'display: none;';
-    $('#pre-linking').style = '';
+    $remove('#link-info');
   }
 }