Added floating message

src/content-script/extension.ts

@@ -7,6 +7,7 @@ import { buildErrorNode } from './dom/build-error-node';
 import { findNodeWithCode } from './json-detector';
 import styles from './styles.module.scss';
 import { buildContainers } from './ui/containers';
+import { FloatingMessageElement } from './ui/floating-message';
 import { ToolboxElement } from './ui/toolbox';
 
 const ONE_MEGABYTE_LENGTH = 927182;
@@ -23,7 +24,7 @@ export const runExtension = async () => {
 
   const content = preNode.textContent;
   isNotNull(content, 'No data found');
-  
+
   const { rootContainer, rawContainer, formatContainer, queryContainer } = buildContainers(shadowRoot);
 
   if (content.length > LIMIT) {
@@ -42,6 +43,11 @@ export const runExtension = async () => {
       content: formatted,
     }));
 
+    rootContainer.appendChild(new FloatingMessageElement(
+      'File is too large',
+      'File is too large to be processed (More than 3MB). It has been formatted instead.',
+    ));
+
     return;
   }
 

src/content-script/ui/floating-message/floating-message.module.scss

@@ -0,0 +1,57 @@
+:host {
+  display: flex;
+  position: fixed;
+  right: 25px;
+  bottom: 15px;
+  padding: 10px;
+  background: #282828;
+  color: #eee;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 70%);
+  border-radius: 5px;
+  font-size: 10px;
+  flex-direction: column;
+  max-width: 300px;
+  user-select: none;
+
+  .header-container {
+    display: flex;
+    flex-direction: row;
+
+    .header {
+      flex: 1 1 auto;
+      margin-bottom: 5px;
+      font-size: 12px;
+    }
+
+    .close {
+      cursor: pointer;
+      width: 12px;
+      height: 12px;
+      position: relative;
+
+      &:before,
+      &:after {
+        position: absolute;
+        width: 2px;
+        background-color: #eee;
+        left: 5px;
+        content: " ";
+        height: 12px;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    color: #9b9b9b;
+  }
+}

src/content-script/ui/floating-message/floating-message.ts

@@ -0,0 +1,29 @@
+import { createElement, CustomElement, StyledComponentElement } from '@core/dom';
+import floatingMessageStyles from './floating-message.module.scss';
+
+@CustomElement('floating-message')
+export class FloatingMessageElement extends StyledComponentElement {
+  private readonly close = createElement({ element: 'div', class: 'close' });
+
+  constructor(header: string, message: string) {
+    super(floatingMessageStyles);
+
+    this.shadow.append(
+      createElement({
+        element: 'div',
+        class: 'header-container',
+        children: [
+          createElement({ element: 'div', class: 'header', content: header }),
+          this.close,
+        ],
+      }),
+      createElement({ element: 'div', class: 'body', content: message }),
+    );
+
+    // const id = setTimeout(() => this.remove(), 15_000);
+    this.close.addEventListener('click', () => {
+      // clearTimeout(id);
+      this.remove();
+    });
+  }
+}

src/content-script/ui/floating-message/index.ts

@@ -0,0 +1 @@
+export * from './floating-message';