Fix linter errors in the editor and improve CSS

Author: MrBlankCoding

.eslintrc.json

@@ -15,6 +15,19 @@
     "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
   },
   "globals": {
-    "chrome": "readonly"
+    "chrome": "readonly",
+    "GM_addElement": "readonly",
+    "GM_addStyle": "readonly",
+    "GM_setValue": "readonly",
+    "GM_getValue": "readonly",
+    "GM_deleteValue": "readonly",
+    "GM_listValues": "readonly",
+    "GM_openInTab": "readonly",
+    "GM_notification": "readonly",
+    "GM_getResourceText": "readonly",
+    "GM_getResourceURL": "readonly",
+    "GM_xmlhttpRequest": "readonly",
+    "GM_setInnerHTML": "readonly",
+    "GM_createHTML": "readonly"
   }
 }

Chrome/editor.html

@@ -66,32 +66,37 @@
                <div class="sidebar-icon-bar">
                   <button class="sidebar-icon-btn active" data-section="info" title="Script Information">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <circle cx="12" cy="12" r="3"></circle>
-                        <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path>
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="16" x2="12" y2="12"></line>
+                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                      </svg>
                   </button>
                   <button class="sidebar-icon-btn" data-section="execution" title="Execution Settings">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <polyline points="12 6 12 12 16 14"></polyline>
                      </svg>
                   </button>
                   <button class="sidebar-icon-btn" data-section="api" title="GM API Access">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M12 2 L12 22 M2 12 L22 12"></path>
+                        <polyline points="16 18 22 12 16 6"></polyline>
+                        <polyline points="8 6 2 12 8 18"></polyline>
                      </svg>
                      <div class="api-count-badge" id="apiCountBadge">0</div>
                   </button>
                   <button class="sidebar-icon-btn" data-section="requires" title="Required Scripts">
-                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="12 5 12 19"></polyline>
-                        <polyline points="5 12 19 12"></polyline>
+                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+                        <polyline points="2 12 12 17 22 12"></polyline>
+                        <polyline points="2 17 12 22 22 17"></polyline>
                      </svg>
                   </button>
                   <button class="sidebar-icon-btn" data-section="resources" title="Script Resources">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                        <polyline points="7 10 12 15 17 10"></polyline>
-                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                        <path d="M3 5v14c0 1.657 4.03 3 9 3s9-1.343 9-3V5"></path>
+                        <path d="M21 8c0 1.657-4.03 3-9 3S3 9.657 3 8"></path>
+                        <path d="M21 12c0 1.657-4.03 3-9 3s-9-1.343-9-3"></path>
                      </svg>
                   </button>
                </div>

Chrome/editor.js

@@ -659,6 +659,11 @@ class ScriptEditor {
     this.elements.scriptIcon.value = script.icon || "";
     this.codeEditorManager.setValue(script.code || "");
 
+    // Reset the URL list before adding to avoid duplicates when reloading/editing
+    if (this.elements.urlList) {
+      this.elements.urlList.innerHTML = "";
+    }
+    
     script.targetUrls?.forEach((url) => this.ui.addUrlToList(url));
 
     // Set the sidebar checkboxes -> Not clean but its okay

Chrome/styles/e_sidebar.css

@@ -140,8 +140,13 @@
   display: flex;
   opacity: 1;
   transform: translateX(0);
-  width: 280px;
-  min-width: 280px;
+  width: calc(var(--sidebar-width, 328px) - 48px);
+  min-width: calc(var(--sidebar-width, 328px) - 48px);
+  /* Compact control density scoped to sidebar */
+  --form-element-height: 34px;
+  --form-element-padding: 6px 10px;
+  --button-height: 30px;
+  --button-padding: 6px 10px;
 }
 
 /* Hide content area when no panel is active */
@@ -167,14 +172,14 @@
 }
 
 .panel-header {
-  padding: var(--space-lg) var(--space-md) var(--space-md);
+  padding: var(--space-md) var(--space-sm) var(--space-sm);
   background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(99, 102, 241, 0.02) 100%);
   border-bottom: 1px solid var(--border-primary);
   border-left: 3px solid var(--primary);
 }
 
 .panel-title {
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-primary);
   margin: 0 0 var(--space-xs) 0;
@@ -190,7 +195,7 @@
 .panel-content {
   flex: 1;
   overflow-y: auto;
-  padding: var(--space-md);
+  padding: var(--space-sm);
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
@@ -212,17 +217,52 @@
   background: var(--scrollbar-thumb-hover);
 }
 
+/* Execution panel-specific spacing improvements */
+#execution-panel .panel-content {
+  padding: var(--space-md);
+}
+
+#execution-panel .form-group {
+  margin-bottom: var(--space-md);
+}
+
+#execution-panel .url-input-group {
+  margin-bottom: var(--space-md);
+}
+
+#execution-panel .pattern-builder {
+  gap: var(--space-md);
+}
+
+#execution-panel .generated-pattern-group {
+  margin-top: var(--space-md);
+  gap: var(--space-md);
+}
+
+/* Script Information panel-specific spacing improvements */
+#info-panel .panel-content {
+  padding: var(--space-md);
+}
+
+#info-panel .form-group {
+  margin-bottom: var(--space-md);
+}
+
+#info-panel .form-row {
+  gap: var(--space-sm);
+}
+
 /* Form Layout Improvements */
 .form-grid {
   display: flex;
   flex-direction: column;
-  gap: var(--space-md);
+  gap: var(--space-sm);
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-sm);
+  gap: var(--space-xs);
 }
 
 .form-group {
@@ -292,7 +332,7 @@
 
 .form-textarea {
   resize: vertical;
-  min-height: 80px;
+  min-height: 64px;
   font-family: var(--font-mono);
   font-size: var(--text-xs);
 }
@@ -301,7 +341,7 @@
 .api-categories {
   display: flex;
   flex-direction: column;
-  gap: var(--space-md);
+  gap: var(--space-sm);
 }
 
 .api-category {
@@ -313,7 +353,7 @@
 
 .category-title {
   margin: 0;
-  padding: var(--space-md);
+  padding: var(--space-sm);
   background: var(--bg-tertiary);
   border-bottom: 1px solid var(--border-primary);
   font-size: var(--text-xs);
@@ -325,11 +365,11 @@
 
 .api-list {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--space-xs);
   padding: var(--space-sm);
-  max-height: 200px;
-  overflow-y: auto;
+  max-height: none;
+  overflow-y: visible;
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
@@ -355,7 +395,7 @@
   display: flex;
   align-items: center;
   margin: 0;
-  padding: var(--space-sm);
+  padding: var(--space-xs);
   cursor: pointer;
   border-radius: var(--radius-sm);
   transition: var(--transition-colors);
@@ -417,7 +457,7 @@
 .url-input-group,
 .resource-input-group {
   display: flex;
-  gap: var(--space-sm);
+  gap: var(--space-xs);
   margin-bottom: var(--space-sm);
   align-items: flex-end;
 }
@@ -428,10 +468,13 @@
 }
 
 .resource-input-group {
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  gap: var(--space-sm);
-  align-items: end;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-xs);
+}
+
+.resource-input-group .add-btn {
+  width: 100%;
 }
 
 /* Enhanced Lists with Better Visual Hierarchy */
@@ -440,8 +483,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  max-height: 120px;
-  overflow-y: auto;
+  max-height: none;
+  overflow-y: visible;
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
@@ -472,7 +515,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-md);
+  padding: var(--space-sm);
   background: var(--bg-tertiary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
@@ -517,6 +560,27 @@
   background: var(--error-light);
 }
 
+/* Generic remove button styling (used in lists) */
+.remove-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: var(--transition-all);
+  padding: 0;
+  border-radius: var(--radius-sm);
+}
+
+.remove-btn:hover {
+  color: var(--error);
+  background: var(--error-light);
+}
+
 /* Enhanced API Search */
 .api-search {
   background: var(--bg-primary);

Chrome/utils/editor_managers.js

@@ -567,8 +567,15 @@ export class URLManager extends BaseUIComponent {
   }
 
   addUrlToList(url) {
-    // Note: We don't need to validate URL here since it's already validated in addCurrentUrl
-    // This prevents duplicate error messages
+    // Prevent duplicates
+    if (this.elements.urlList) {
+      const existing = Array.from(this.elements.urlList.querySelectorAll('.url-item'))
+        .some(item => item.dataset.url === url);
+      if (existing) {
+        return false;
+      }
+    }
+
     try {
       const urlItem = document.createElement('div');
       urlItem.className = 'url-item';
@@ -722,8 +729,9 @@ export class ResourceManager extends BaseUIComponent {
     });
 
     this.addEventListener(this.elements.resourceList, 'click', (e) => {
-      if (e.target.classList.contains('remove-resource-btn')) {
-        this.removeResource(e.target.closest('.resource-item'));
+      const btn = e.target.closest('.remove-resource-btn, .remove-resource');
+      if (btn) {
+        this.removeResource(btn.closest('.resource-item'));
       }
     });
 

Chrome/utils/editor_settings.js

@@ -388,10 +388,20 @@ export class CodeEditorManager {
   }
 
   //lint options
-  getLintOptions(enable) {
+  getLintOptions(enable, enabledApiNames = []) {
     // Skip linting entirely for large files to avoid freezes
     if (this.largeFileOptimized || !enable || typeof window.JSHINT === "undefined") return false;
 
+    // Build globals map including enabled GM_* APIs
+    const globals = {
+      chrome: false,
+      CodeMirror: false,
+      GM: false,
+    };
+    enabledApiNames.forEach((name) => {
+      globals[name] = false; // treat as read-only globals
+    });
+
     return {
       getAnnotations: (text) => {
         const errors = [];
@@ -411,11 +421,7 @@ export class CodeEditorManager {
             sub: true,
             shadow: false,
             strict: true,
-            globals: {
-              chrome: false,
-              CodeMirror: false,
-              GM: false,
-            },
+            globals,
           })
         ) {
           const jshintErrors = window.JSHINT.errors;
@@ -440,7 +446,7 @@ export class CodeEditorManager {
 
   toggleLinting(enabled) {
     this.state.lintingEnabled = enabled !== undefined ? enabled : !this.state.lintingEnabled;
-    const lintOptions = this.getLintOptions(this.state.lintingEnabled);
+    const lintOptions = this.getLintOptions(this.state.lintingEnabled, this.getEnabledGmApis());
     this.codeEditor.setOption("lint", lintOptions);
 
     // Force a re-lint when enabling