Add revoke capabilities

_locales/en/messages.json

@@ -1365,6 +1365,10 @@
     "message": "Sections",
     "description": "Header for the table of contents block listing style section names in the left panel of the classic editor"
   },
+  "linking": {
+    "message": "Linking",
+    "description": "Header for the section to link the style with other services."
+  },
   "shortcuts": {
     "message": "Shortcuts",
     "description": "Go to shortcut configuration"

background/style-manager.js

@@ -354,14 +354,23 @@ const styleMan = (() => {
     if (port.name !== 'link-style-usw') {
       return;
     }
-    port.onMessage.addListener(async style => {
+    port.onMessage.addListener(async incData => {
+      const {data: style, reason} = incData;
       if (!style.id) {
         return;
       }
-      const resultToken = await tokenMan.getToken('userstylesworld', true, style.id);
-      style._uswToken = resultToken;
-      await saveStyle(style);
-      broadcastStyleUpdated(style, 'updateLinking');
+      switch (reason) {
+        case 'link':
+          style._uswToken = await tokenMan.getToken('userstylesworld', true, style.id);
+          handleSave(await saveStyle(style), 'success-linking', true);
+          break;
+
+        case 'revoke':
+          await tokenMan.revokeToken('userstylesworld', style.id);
+          style._uswToken = '';
+          handleSave(await saveStyle(style), 'success-revoke', true);
+          break;
+      }
     });
   }
 

background/token-manager.js

@@ -94,9 +94,9 @@ const tokenMan = (() => {
       return authUser(name, k, interactive);
     },
 
-    async revokeToken(name) {
+    async revokeToken(name, styleId) {
       const provider = AUTH[name];
-      const k = tokenMan.buildKeys(name);
+      const k = tokenMan.buildKeys(name, styleId);
       if (provider.revoke) {
         try {
           const token = await chromeLocal.getValue(k.TOKEN);

edit.html

@@ -59,6 +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/edit.js"></script>
 
     <template data-id="appliesTo">
@@ -391,13 +392,20 @@
             </div>
           </div>
         </details>
+        <details id="linking">
+          <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>
+        </details>
         <details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
           <summary><h2 i18n-text="sections"></h2></summary>
           <ol id="toc"></ol>
         </details>
-        <details id="debug">
-          <button id="debug-button">Link style</button>
-        </details>
         <details id="lint" data-pref="editor.lint.expanded" class="hidden-unless-compact ignore-pref-if-compact">
           <summary>
             <h2 i18n-text="linterIssues">: <span id="issue-count"></span>

edit/edit.js

@@ -11,6 +11,7 @@
 /* global linterMan */
 /* global prefs */
 /* global t */// localization.js
+/* global updateUI, linkToUSW revokeLinking */// usw-linking.js
 'use strict';
 
 //#region init
@@ -18,6 +19,7 @@
 baseInit.ready.then(async () => {
   await waitForSheet();
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
+  updateUI();
   await editor.ready;
   editor.ready = true;
   editor.dirty.onChange(editor.updateDirty);
@@ -42,8 +44,8 @@ baseInit.ready.then(async () => {
     require(['/edit/linter-dialogs'], () => linterMan.showLintConfig());
   $('#lint-help').onclick = () =>
     require(['/edit/linter-dialogs'], () => linterMan.showLintHelp());
-  $('#debug-button').onclick = () =>
-    require(['/edit/usw-debug'], () => linkToUSW()); /* global linkToUSW */
+  $('#link-style').onclick = () => linkToUSW();
+  $('#revoke-style').onclick = () => revokeLinking();
   require([
     '/edit/autocomplete',
     '/edit/global-search',
@@ -57,10 +59,14 @@ msg.onExtension(request => {
       if (editor.style.id === style.id) {
         if (!['editPreview', 'editPreviewEnd', 'editSave', 'config'].includes(request.reason)) {
           Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
-            .then(newStyle => editor.replaceStyle(newStyle, request.codeIsUpdated));
-        }
-        if (request.reason === 'updateLinking') {
-          console.log(editor.style._uswToken);
+            .then(newStyle => {
+              editor.replaceStyle(newStyle, request.codeIsUpdated);
+
+              if (['success-linking', 'success-revoke'].includes(request.reason)) {
+                updateUI(newStyle);
+                console.log(editor.style._uswToken);
+              }
+            });
         }
       }
       break;

edit/usw-debug.js

@@ -1,16 +0,0 @@
-/* global editor */
-
-'use strict';
-
-let uswPort;
-
-/* exported linkToUSW */
-function linkToUSW() {
-  if (!uswPort) {
-    uswPort = chrome.runtime.connect({name: 'link-style-usw'});
-    uswPort.onDisconnect.addListener(err => {
-      throw err;
-    });
-  }
-  uswPort.postMessage(editor.style);
-}

edit/usw-linking.js

@@ -0,0 +1,42 @@
+/* global $ */// dom.js
+/* global editor */
+
+'use strict';
+
+let uswPort;
+
+function connectToPort() {
+  if (!uswPort) {
+    uswPort = chrome.runtime.connect({name: 'link-style-usw'});
+    uswPort.onDisconnect.addListener(err => {
+      throw err;
+    });
+  }
+}
+
+/* exported linkToUSW */
+function linkToUSW() {
+  connectToPort();
+
+  uswPort.postMessage({reason: 'link', data: editor.style});
+}
+
+/* exported revokeLinking */
+function revokeLinking() {
+  connectToPort();
+
+  uswPort.postMessage({reason: 'revoke', data: editor.style});
+}
+
+
+/* exported updateUI */
+function updateUI(useStyle) {
+  const style = useStyle || editor.style;
+  if (style._uswToken) {
+    $('#after-linking').style = '';
+    $('#pre-linking').style = 'display: none;';
+  } else {
+    $('#after-linking').style = 'display: none;';
+    $('#pre-linking').style = '';
+  }
+}