feat: UI Extensibility

- add border to preview frame
- fix Code Mirror theming

crawl.html

@@ -75,7 +75,7 @@ <h3>Crawl</h3>
                         <div class="page-preview hidden">
                             <sp-divider size="s"></sp-divider>
                             <h3>Page preview</h3>
-                            <iframe id="crawl-content-frame" frameborder="0"></iframe>
+                            <div><iframe id="crawl-content-frame"></iframe></div>
                         </div>
                     </div>
                     <div class="section-col">

css/import/import.css

@@ -1,9 +1,10 @@
 @import url("../libs/vendors/codemirror/codemirror.css");
 @import url("../libs/vendors/codemirror/base16-dark.css");
+@import url("../libs/vendors/codemirror/base16-light.css");
 
 .import {
   /* COLORS */
-  --hlx-import-text-color: var(--spectrum-global-color-gray-50);
+  --hlx-import-text-color: var(--spectrum-global-color-gray-500);
   --hlx-import-link-color: #0563C1;
   --hlx-import-secondary-heading-color: #434343;
   --hlx-import-tertiary-heading-color: #666;
@@ -34,7 +35,8 @@
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.import .cm-s-base16-dark.CodeMirror, .import .cm-s-base16-dark .CodeMirror-gutters {
+.import .CodeMirror,
+.import .CodeMirror-gutters {
   background-color: var(--spectrum-global-color-gray-75);
 }
 
@@ -43,18 +45,25 @@
   border: 1px solid var(--spectrum-global-color-gray-100);
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.import .cm-s-base16-light.CodeMirror {
+  border: 1px solid var(--spectrum-global-color-gray-300);
+}
+
 .import #import-action-row {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   gap: var(--spectrum-global-dimension-size-150);
+  margin-top: var(--spectrum-global-dimension-size-150);
 }
 
-.import sp-theme[color="light"] {
-  width: 100%;
+.import #import-action-row sp-button-group {
+  margin-top: unset;
 }
 
-.import #import-content-frame {
-  border: none;
+.import sp-theme[color="light"] {
+  width: 100%;
 }
 
 .import #import-markdown-preview {

css/libs/vendors/codemirror/base16-light.css

@@ -0,0 +1,38 @@
+/*
+
+    Name:       Base16 Default Light
+    Author:     Chris Kempson (http://chriskempson.com)
+
+    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
+    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+
+.cm-s-base16-light.CodeMirror { background: #f5f5f5; color: #202020; }
+.cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; }
+.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; }
+.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
+.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
+.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
+.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
+.cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; }
+.cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }
+
+.cm-s-base16-light span.cm-comment { color: #8f5536; }
+.cm-s-base16-light span.cm-atom { color: #aa759f; }
+.cm-s-base16-light span.cm-number { color: #aa759f; }
+
+.cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #90a959; }
+.cm-s-base16-light span.cm-keyword { color: #ac4142; }
+.cm-s-base16-light span.cm-string { color: #f4bf75; }
+
+.cm-s-base16-light span.cm-variable { color: #90a959; }
+.cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
+.cm-s-base16-light span.cm-def { color: #d28445; }
+.cm-s-base16-light span.cm-bracket { color: #202020; }
+.cm-s-base16-light span.cm-tag { color: #ac4142; }
+.cm-s-base16-light span.cm-link { color: #aa759f; }
+.cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; }
+
+.cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; }
+.cm-s-base16-light .CodeMirror-matchingbracket { color: #f5f5f5 !important; background-color: #6A9FB5 !important}

css/styles.css

@@ -134,7 +134,7 @@ header a i {
 }
 
 sp-theme[color="light"] header a i {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--spectrum-global-color-gray-200);
   border-radius: 22%;
 }
 
@@ -167,7 +167,6 @@ footer svg {
 }
 
 .tool main {
-  grid-area: main;
   height: 100vh;
   max-height: 100vh;
   padding: var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300) 0;
@@ -316,6 +315,8 @@ section sp-tabs sp-tab-panel > div {
 }
 
 section .page-preview {
+  display: flex;
+  flex-direction: column;
   height: calc(100vh - 305px);
   margin-top: var(--spectrum-global-dimension-size-150);
   overflow: hidden;
@@ -325,13 +326,25 @@ section .page-preview h3 {
   padding-top: var(--spectrum-global-dimension-size-150);
 }
 
+section .page-preview > div:first-of-type {
+  flex: 1;
+  width: 100%;
+  border: none;
+  box-sizing: border-box;
+}
+
+body > sp-theme[color="light"] section .page-preview > div:first-of-type {
+ border: 1px solid var(--spectrum-global-color-gray-300);
+}
+
 section .page-preview iframe {
   height: calc(100% / .45);
   width: calc(100% / .45);
   transform: scale(0.45);
   transform-origin: 0 0;
   background-color: var(--spectrum-global-color-gray-75);
   overflow-x: auto;
+  border: none;
 }
 
 /* ALERT CONTAINER */

import-bulk.html

@@ -95,7 +95,7 @@ <h3>Bulk Import</h3>
                         <div class="page-preview hidden">
                             <sp-divider size="s"></sp-divider>
                             <h3>Page preview</h3>
-                            <iframe id="import-content-frame"></iframe>
+                            <div><iframe id="import-content-frame"></iframe></div>
                         </div>
                     </div>
                     <div class="section-col">

import.html

@@ -107,7 +107,7 @@ <h3>Workbench</h3>
                         <div class="page-preview hidden">
                             <sp-divider size="s"></sp-divider>
                             <h3>Page preview</h3>
-                            <iframe id="import-content-frame"></iframe>
+                            <div><iframe id="import-content-frame"></iframe></div>
                         </div>
                     </div>
                     <div class="section-col">

inspect.html

@@ -57,7 +57,7 @@ <h3>Eyedropper</h3>
                         <div class="page-preview hidden">
                             <sp-divider size="s"></sp-divider>
                             <h3>Page preview</h3>
-                            <iframe id="inspect-content-frame" frameborder="0"></iframe>
+                            <div><iframe id="inspect-content-frame"></iframe></div>
                         </div>
 
                     </div>

js/import/import.bulk.js

@@ -63,7 +63,7 @@ const updateBulkResults = (results, originalURL, importStatus) => {
     BULK_URLS_HEADING.innerText = `Imported URLs (${importStatus.imported} / ${importStatus.total}) - Elapsed time: ${timeStr}`;
 
     if (importStatus.urls.length === 0) {
-      alert.info('Bulk import completed');
+      alert.success('Bulk import completed');
     }
   } catch (err) {
     // eslint-disable-next-line no-console

js/import/import.preview.js

@@ -13,6 +13,7 @@
 
 import importStatus from './import.status.js';
 import alert from '../shared/alert.js';
+import { getTheme } from '../shared/theme.js';
 
 const PreviewElements = Object.freeze({
   TRANSFORMED_HTML_TEXTAREA: document.getElementById('import-transformed-html'),
@@ -108,17 +109,18 @@ const attachListeners = (config, parentSelector) => {
 };
 
 const setupPreview = (parentSelector) => {
+  const codeMirrorTheme = getTheme() === 'dark' ? 'base16-dark' : 'base16-light';
   preview.transformedEditor = CodeMirror.fromTextArea(PreviewElements.TRANSFORMED_HTML_TEXTAREA, {
     lineNumbers: true,
     mode: 'htmlmixed',
-    theme: 'base16-dark',
+    theme: codeMirrorTheme,
   });
   preview.transformedEditor.setSize('100%', '100%');
 
   preview.markdownEditor = CodeMirror.fromTextArea(PreviewElements.MD_SOURCE_TEXTAREA, {
     lineNumbers: true,
     mode: 'markdown',
-    theme: 'base16-dark',
+    theme: codeMirrorTheme,
   });
   preview.markdownEditor.setSize('100%', '100%');
 
@@ -208,6 +210,12 @@ const toggleReportButton = (show) => {
   PreviewButtons.DOWNLOAD_IMPORT_REPORT_BUTTON.classList.toggle('hidden', !show);
 };
 
+const setTheme = (theme) => {
+  const codeMirrorTheme = theme === 'dark' ? 'base16-dark' : 'base16-light';
+  preview.transformedEditor.setOption('theme', codeMirrorTheme);
+  preview.markdownEditor.setOption('theme', codeMirrorTheme);
+}
+
 export {
   REPORT_FILENAME,
   PreviewButtons,
@@ -217,4 +225,5 @@ export {
   updatePreview,
   getReport,
   toggleReportButton,
+  setTheme as setPreviewTheme
 };

js/import/import.ui.js

@@ -25,6 +25,7 @@ import {
   getReport,
   REPORT_FILENAME,
   toggleReportButton,
+  setPreviewTheme,
 } from './import.preview.js';
 import {
   updateBulkResults,
@@ -287,7 +288,7 @@ const startImport = async () => {
     } else {
       PREVIEW_CONTAINER.classList.add('hidden');
     }
-    toggleReportButton(true);
+    toggleReportButton(false);
   } else {
     toggleReportButton(false);
     PREVIEW_CONTAINER.classList.remove('hidden');
@@ -366,7 +367,10 @@ const init = () => {
   config.fields = initOptionFields(CONFIG_PARENT_SELECTOR);
 
   applyDefaultTheme();
-  registerRuntime();
+  registerRuntime(({ theme }) => {
+    setPreviewTheme(theme);
+  });
+
   createImporter();
 
   if (!IS_BULK) {

js/shared/theme.js

@@ -14,9 +14,13 @@ import { sendMessage } from '../shell.js';
 
 const SP_THEME = document.querySelector('sp-theme');
 
+function getTheme() {
+  return localStorage.getItem('sp-theme') || 'dark';
+}
+
 function applyDefaultTheme() {
   if (SP_THEME) {
-    SP_THEME.setAttribute('color', localStorage.getItem('sp-theme') || 'dark');
+    SP_THEME.setAttribute('color', getTheme());
   }
 }
 
@@ -30,6 +34,7 @@ function toggleTheme() {
 }
 
 export {
+  getTheme,
   toggleTheme,
   applyDefaultTheme,
 };