Merge pull request #470 from adobe/feat-20230803

Feat 20230803
adobe · Aug 4, 2023 · 8e6c1fc · 8e6c1fc
2 parents 128df9b + 017c93d
commit 8e6c1fc
Show file tree

Hide file tree

Showing 77 changed files with 1,342 additions and 225 deletions.
diff --git a/docs/API.md b/docs/API.md
@@ -567,10 +567,12 @@ A custom view configuration.
 **Kind**: global typedef  
 **Properties**
 
-| Name | Type | Description |
-| --- | --- | --- |
-| path | <code>string</code> | The path or globbing pattern where to apply this view |
-| css | <code>string</code> | The URL of a CSS file or inline CSS to render this view (optional) |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| path | <code>string</code> |  | The path or globbing pattern where to apply this view |
+| title | <code>string</code> |  | The view title (optional) |
+| titleI18n | <code>Object</code> | <code>{}</code> | A map of translated view titles |
+| viewer | <code>string</code> |  | The URL to render this view |
 
 <a name="HelpStep"></a>
 

diff --git a/docs/config.schema.json b/docs/config.schema.json
@@ -97,6 +97,46 @@
         { "required": [ "isContainer" ] }
       ],
       "additionalProperties": false
+    },
+    "specialView": {
+      "type": "object",
+      "properties": {
+        "path": {
+          "type": "string",
+          "description": "Open the special view on this path",
+          "examples": [
+            "/foo/**.json"
+          ]
+        },
+        "title": {
+          "type": "string",
+          "description": "The title of the special view"
+        },
+        "titleI18n": {
+          "type": "object",
+          "description": "The title of the special view in other supported languages",
+          "patternProperties": {
+            "^[a-z]{2}(-[A-Z]{2})?$": {
+              "type": "string",
+              "description": "ISO language code (`en` or `en-US`) with translated button text"
+            }
+          },
+          "minProperties": 1,
+          "additionalProperties": false
+        },
+        "viewer": {
+          "type": "string",
+          "description": "The URL of the special view. The resource URL will be passed to it via 'url' parameter",
+          "examples": [
+            "/tools/sidekick/foo/index.html"
+          ]
+        }
+      },
+      "required": [
+        "path",
+        "viewer"
+      ],
+      "additionalProperties": false
     }
   },
   "description": "Sidekick configuration",

diff --git a/src/extension/app.css b/src/extension/app.css
@@ -758,14 +758,17 @@
   font-family: var(--hlx-sk-font-family);
   font-size: var(--hlx-sk-font-size);
   color: var(--hlx-sk-color);
-  padding: 60px 20px 20px;
+  padding: 49px 0 0;
 }
 
-.hlx-sk-special-view .description {
-  margin-bottom: 10px;
+.hlx-sk-special-view .header {
+  box-sizing: border-box;
+  padding: 0 20px;
+  height: 32px;
+  line-height: 32px;
 }
 
-.hlx-sk-special-view .description button {
+.hlx-sk-special-view .header button {
   background-color: transparent;
   border: none;
   font-family: var(--hlx-sk-font-family);
@@ -777,74 +780,13 @@
 }
 
 .hlx-sk-special-view .container {
-  max-width: 100vw;
-  max-height: calc(100% - 99px);
-  overflow: auto;
-}
-
-.hlx-sk-special-view h2 {
-  margin: 10px 0;
-  font-size: 1.25rem;
-  min-height: 1.25rem;
-}
-
-.hlx-sk-special-view table {
-  width: calc(100vw - 40px);
-  max-height: calc(100vh - 80px);
-  border-collapse: collapse;
-  text-align: left;
-  margin-bottom: 20px;
-}
-
-.hlx-sk-special-view table tr {
-  vertical-align: top;
-}
-
-
-.hlx-sk-special-view table th {
-  background-color: var(--hlx-sk-bg);
-  padding: 5px;
-}
-
-.hlx-sk-special-view table,
-.hlx-sk-special-view table tr,
-.hlx-sk-special-view table th,
-.hlx-sk-special-view table td {
-  border: solid 1px var(--hlx-sk-special-view-table-border);
-}
-
-.hlx-sk-special-view table td > div {
-  padding: 5px;
-  min-height: 0.875rem;
-  font-size: 0.875rem;
-}
-
-.hlx-sk-special-view table td > div.image  {
-  padding: 0;
-}
-
-.hlx-sk-special-view table td > div img {
+  box-sizing: border-box;
+  border: none;
   width: 100%;
-  max-width: 240px;
-}
-
-.hlx-sk-special-view table td > div ul {
-  margin: 0;
-  padding-inline-start: 20px;
-}
-
-.hlx-sk-special-view table td > div li {
-  padding: 0;
-}
-
-.hlx-sk-special-view table td > div a:any-link {
-  color: var(--hlx-sk-color);
-  text-decoration: none;
+  height: calc(100% - 81px);
+  overflow: auto;
 }
 
-.hlx-sk-special-view table td > div a:hover {
-  text-decoration: underline;
-}
 
 .hlx-sk-palette {
   position: fixed;

diff --git a/src/extension/background.js b/src/extension/background.js
@@ -31,6 +31,7 @@ import {
   updateProjectConfigs,
   populateDiscoveryCache,
   queryDiscoveryCache,
+  setDisplay,
 } from './utils.js';
 
 /**
@@ -547,6 +548,7 @@ const externalActions = {
           const match = projects.find((p) => p.owner === owner && p.repo === repo);
           if (match) {
             log.info(`enabling sidekick for project ${owner}/${repo} on ${url}`);
+            await setDisplay(true);
             await injectContentScript(tab.id, [match]);
             resolve(true);
           } else {
@@ -599,7 +601,7 @@ const internalActions = {
       const reload = () => chrome.tabs.reload(id, { bypassCache: true });
       const project = projects.find((p) => p.owner === owner && p.repo === repo);
       if (!project) {
-        addProject(cfg, reload, true);
+        addProject(cfg, reload);
       } else {
         deleteProject(`${owner}/${repo}`, reload);
       }

diff --git a/src/extension/manifest.json b/src/extension/manifest.json
@@ -52,7 +52,7 @@
         "module.js",
         "sidekick.js",
         "utils.js",
-        "view/json.js",
+        "view/json/json.html",
         "view-doc-source/js/content.js"
       ],
       "matches": [

diff --git a/src/extension/module.js b/src/extension/module.js
@@ -78,7 +78,9 @@
    * @typedef {Object} ViewConfig
    * @description A custom view configuration.
    * @prop {string} path The path or globbing pattern where to apply this view
-   * @prop {string} css The URL of a CSS file or inline CSS to render this view (optional)
+   * @prop {string} title The view title (optional)
+   * @prop {Object} titleI18n={} A map of translated view titles
+   * @prop {string} viewer The URL to render this view
    */
 
   /**
@@ -540,7 +542,7 @@
     const defaultSpecialViews = [
       {
         path: '**.json',
-        js: `${scriptRoot}/view/json.js`,
+        viewer: `${scriptRoot}/view/json/json.html`,
       },
     ];
     // try custom views first
@@ -2368,13 +2370,13 @@
   }
 
   /**
-   * Creates and/or returns a special view.
+   * Creates and/or returns a special view overlay.
    * @private
    * @param {Sidekick} sk The sidekick
    * @param {boolean} create Create the special view if none exists
-   * @returns {HTMLELement} The special view
+   * @returns {HTMLELement} The special view overlay
    */
-  function getSpecialView(sk, create) {
+  function getSpecialViewOverlay(sk, create) {
     const view = sk.shadowRoot.querySelector('.hlx-sk-special-view')
       || (create
         ? appendTag(sk.shadowRoot, {
@@ -2383,22 +2385,26 @@
         })
         : null);
     if (create && view) {
-      const description = appendTag(view, {
+      const header = appendTag(view, {
         tag: 'div',
-        text: i18n(sk, 'json_view_description'),
-        attrs: { class: 'description' },
+        attrs: { class: 'header' },
       });
-      appendTag(description, {
+      appendTag(header, {
+        tag: 'span',
+        attrs: { class: 'title' },
+      });
+      appendTag(header, {
         tag: 'button',
         text: i18n(sk, 'close'),
         attrs: { class: 'close' },
         // eslint-disable-next-line no-use-before-define
         lstnrs: { click: () => hideSpecialView(sk) },
       });
       appendTag(view, {
-        tag: 'div',
+        tag: 'iframe',
         attrs: {
           class: 'container',
+          allow: 'clipboard-write *',
         },
       });
     }
@@ -2413,67 +2419,34 @@
   async function showSpecialView(sk) {
     const {
       config: {
+        lang,
         specialView,
-        pushDownElements,
       },
       location: {
+        origin,
         href,
-        pathname,
       },
     } = sk;
-    if (specialView && !getSpecialView(sk)) {
-      try {
-        const resp = await fetch(href);
-        if (!resp.ok) {
-          return;
-        }
-        const { js, css, cssLoaded } = specialView;
-        if (css && !cssLoaded) {
-          if (css.startsWith('https://') || css.startsWith('/')) {
-            // load external css file
-            sk.loadCSS(css);
-          } else {
-            // load inline css
-            const style = appendTag(sk.shadowRoot, {
-              tag: 'style',
-              attrs: {
-                type: 'text/css',
-              },
-            });
-            style.textContent = css;
-          }
-          specialView.cssLoaded = true;
-        }
-
-        // hide original content
-        [...sk.parentElement.children].forEach((el) => {
-          if (el !== sk) {
-            try {
-              el.style.display = 'none';
-            } catch (e) {
-              // ignore
-            }
+    if (specialView && !getSpecialViewOverlay(sk)) {
+      // hide original content
+      [...sk.parentElement.children].forEach((el) => {
+        if (el !== sk) {
+          try {
+            el.style.display = 'none';
+          } catch (e) {
+            // ignore
           }
-        });
-
-        const view = getSpecialView(sk, true);
-        view.classList.add(pathname.split('.').pop());
-        pushDownElements.push(view);
-
-        const data = await resp.text();
-        let callback;
-        if (typeof js === 'function') {
-          callback = js;
-        } else if (typeof js === 'string') {
-          // load external module
-          const mod = await import(js);
-          callback = mod.default;
-        } else {
-          throw new Error('invalid view callback');
         }
-        callback(view.querySelector(':scope .container'), data);
-      } catch (e) {
-        console.log('failed to draw view', e);
+      });
+      const { viewer, title, titleI18n } = specialView;
+      if (viewer) {
+        const viewUrl = new URL(viewer, origin);
+        viewUrl.searchParams.set('url', href);
+        const viewOverlay = getSpecialViewOverlay(sk, true);
+        viewOverlay.querySelector('.title').textContent = (titleI18n && titleI18n[lang])
+          || title || i18n(sk, 'json_view_description');
+        viewOverlay.querySelector('.container')
+          .setAttribute('src', viewUrl.toString());
       }
     }
   }
@@ -2484,11 +2457,9 @@
    * @param {Sidekick} sk The sidekick
    */
   function hideSpecialView(sk) {
-    const { config } = sk;
-    const view = getSpecialView(sk);
-    if (view) {
-      config.pushDownElements = config.pushDownElements.filter((el) => el !== view);
-      view.replaceWith('');
+    const viewOverlay = getSpecialViewOverlay(sk);
+    if (viewOverlay) {
+      viewOverlay.replaceWith('');
 
       // show original content
       [...sk.parentElement.children].forEach((el) => {
@@ -2763,13 +2734,11 @@
         })
         .then((json) => {
           this.status = json;
-          this.setAttribute('status', JSON.stringify(json));
           return json;
         })
         .then((json) => fireEvent(this, 'statusfetched', json))
         .catch(({ message }) => {
           this.status.error = message;
-          this.setAttribute('status', JSON.stringify(this.status));
           const modal = {
             message: message.startsWith('error_') ? i18n(this, message) : [
               i18n(this, 'error_status_fatal'),

diff --git a/src/extension/sidekick.js b/src/extension/sidekick.js
@@ -49,7 +49,7 @@ export default async function injectSidekick(config, display) {
         'authToken',
       ].includes(k)));
     curatedConfig.scriptUrl = url('module.js');
-    [curatedConfig.mountpoint] = config.mountpoints;
+    [curatedConfig.mountpoint] = config.mountpoints || [];
     log.debug('sidekick.js: curated config', curatedConfig);
 
     // inject sidekick