electrobun 0.4.1 → 0.6.0-beta.0

package/tests/src/mainview/styles/main.css

@@ -1,451 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #f5f5f5;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* Header */
-.header {
-  background: #2c3e50;
-  color: white;
-  padding: 15px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.header h1 {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.platform-info {
-  color: #bdc3c7;
-  font-size: 14px;
-}
-
-/* Buttons */
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background: #3498db;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #2980b9;
-}
-
-.btn-secondary {
-  background: #95a5a6;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #7f8c8d;
-}
-
-.btn-success {
-  background: #27ae60;
-  color: white;
-}
-
-.btn-danger {
-  background: #e74c3c;
-  color: white;
-}
-
-.btn-run {
-  background: #f39c12;
-  color: white;
-  padding: 6px 12px;
-  font-size: 12px;
-}
-
-/* Main content */
-.main-content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 250px;
-  background: white;
-  border-right: 1px solid #e0e0e0;
-  padding: 20px;
-  overflow-y: auto;
-}
-
-.sidebar h3 {
-  font-size: 16px;
-  margin-bottom: 15px;
-  color: #2c3e50;
-}
-
-.test-categories {
-  margin-bottom: 30px;
-}
-
-.filter-item {
-  display: block;
-  margin-bottom: 8px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.filter-item input {
-  margin-right: 8px;
-}
-
-.test-status-summary {
-  border-top: 1px solid #e0e0e0;
-  padding-top: 20px;
-}
-
-.status-counts {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.count-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.count {
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.label {
-  color: #7f8c8d;
-  font-size: 14px;
-}
-
-/* Test area */
-.test-area {
-  flex: 1;
-  padding: 20px;
-  overflow-y: auto;
-}
-
-.test-area h2 {
-  font-size: 20px;
-  margin-bottom: 8px;
-  color: #2c3e50;
-}
-
-.section-description {
-  color: #7f8c8d;
-  margin-bottom: 20px;
-  font-size: 14px;
-}
-
-.tests-container {
-  margin-bottom: 40px;
-}
-
-/* Test cards */
-.test-card {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 15px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-  border-left: 4px solid #e0e0e0;
-  transition: all 0.2s;
-}
-
-.test-card.auto {
-  border-left-color: #3498db;
-}
-
-.test-card.manual {
-  border-left-color: #f39c12;
-  background: #fffbf0;
-}
-
-.test-card.hybrid {
-  border-left-color: #9b59b6;
-}
-
-.test-card.passed {
-  border-left-color: #27ae60;
-  background: #f0fff4;
-}
-
-.test-card.failed {
-  border-left-color: #e74c3c;
-  background: #fef5f5;
-}
-
-.test-card.running {
-  border-left-color: #f39c12;
-  background: #fffef7;
-}
-
-.test-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 15px;
-}
-
-.test-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #2c3e50;
-  margin-bottom: 5px;
-}
-
-.test-meta {
-  display: flex;
-  gap: 10px;
-  font-size: 12px;
-  color: #7f8c8d;
-}
-
-.test-badge {
-  background: #ecf0f1;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.test-description {
-  color: #5d6d7e;
-  margin-bottom: 15px;
-  line-height: 1.4;
-}
-
-.test-status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
-}
-
-.status-indicator {
-  font-size: 16px;
-}
-
-.status-text {
-  font-weight: 500;
-}
-
-.status-details {
-  color: #7f8c8d;
-  font-size: 14px;
-}
-
-/* Instructions for manual tests */
-.test-instructions {
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-  padding: 15px;
-  margin-bottom: 15px;
-}
-
-.test-instructions h4 {
-  margin-bottom: 10px;
-  color: #495057;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.test-instructions ol {
-  margin-left: 20px;
-}
-
-.test-instructions li {
-  margin-bottom: 5px;
-  line-height: 1.4;
-}
-
-/* Test actions */
-.test-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.manual-verify {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 10px;
-  background: #fff3cd;
-  border: 1px dashed #ffc107;
-  border-radius: 6px;
-  margin-top: 15px;
-}
-
-.manual-verify-text {
-  flex: 1;
-  font-weight: 500;
-  color: #856404;
-}
-
-/* Animations */
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-@keyframes flash-success {
-  0%, 100% { background-color: transparent; }
-  50% { background-color: #d4f4dd; }
-}
-
-@keyframes flash-error {
-  0%, 100% { background-color: transparent; }
-  50% { background-color: #f8d7da; }
-}
-
-.flash-success {
-  animation: flash-success 0.6s ease-in-out;
-}
-
-.flash-error {
-  animation: flash-error 0.6s ease-in-out;
-}
-
-.pulse {
-  animation: pulse 1s infinite;
-}
-
-/* Event log */
-.event-log {
-  height: 150px;
-  background: #2c3e50;
-  color: white;
-  border-top: 1px solid #34495e;
-}
-
-.event-log h3 {
-  padding: 10px 20px;
-  font-size: 14px;
-  color: #bdc3c7;
-  background: #34495e;
-}
-
-.log-content {
-  height: calc(150px - 35px);
-  overflow-y: auto;
-  padding: 10px 20px;
-  font-family: 'Monaco', 'Consolas', monospace;
-  font-size: 12px;
-}
-
-.log-entry {
-  margin-bottom: 5px;
-  line-height: 1.3;
-}
-
-.timestamp {
-  color: #95a5a6;
-  margin-right: 10px;
-}
-
-.log-success {
-  color: #2ecc71;
-}
-
-.log-error {
-  color: #e74c3c;
-}
-
-.log-info {
-  color: #3498db;
-}
-
-/* Modal */
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.5);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  max-width: 600px;
-  max-height: 80vh;
-  width: 90%;
-  overflow: hidden;
-}
-
-.modal-header {
-  padding: 20px;
-  border-bottom: 1px solid #e0e0e0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #7f8c8d;
-}
-
-.modal-body {
-  padding: 20px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .main-content {
-    flex-direction: column;
-  }
-  
-  .sidebar {
-    width: 100%;
-    height: auto;
-  }
-}

package/tests/src/testviews/tray-test.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Tray Test Instructions</title>
-    <style>
-        body {
-            padding: 20px;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        .instructions-box {
-            background: #e3f2fd;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        .instructions-box ol {
-            margin: 10px 0;
-            padding-left: 20px;
-        }
-        .instructions-box li {
-            margin: 5px 0;
-        }
-        #tray-events {
-            background: #f0f0f0;
-            padding: 15px;
-            border-radius: 8px;
-            min-height: 100px;
-        }
-        .event-item {
-            margin: 5px 0;
-        }
-    </style>
-</head>
-<body>
-    <h2>System Tray Test</h2>
-    <p><strong>Look for the tray icon in your system tray/menu bar</strong></p>
-    
-    <div class="instructions-box">
-        <h3>Instructions:</h3>
-        <ol>
-            <li>Find the test tray icon (usually in top-right on macOS, bottom-right on Windows)</li>
-            <li>Click the tray icon</li>
-            <li>Click "Test Item 1" and "Test Item 2"</li>
-            <li>Try the submenu items</li>
-            <li>When done testing, click "Mark Tray Test as Passed" in the tray menu</li>
-        </ol>
-    </div>
-    
-    <div>
-        <h3>Tray Events:</h3>
-        <div id="tray-events">
-            No events yet - try clicking tray menu items...
-        </div>
-    </div>
-</body>
-</html>

package/tests/src/testviews/webview-mask.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>WebView Mask Test</title>
-    <script src="views://webviewtag/index.js"></script>
-    <style>
-        body {
-            height: 2000px;
-            padding: 20px;
-            background: linear-gradient(to bottom, white, #e0e0e0);
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        h2 {
-            color: #333;
-        }
-        .instructions {
-            font-size: 16px;
-            line-height: 1.5;
-        }
-        .spacer {
-            height: 600px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: rgba(255, 255, 255, 0.8);
-            border: 2px dashed #999;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        electrobun-webview {
-            width: 100%;
-            height: 400px;
-            border: 2px solid #666;
-            display: block;
-        }
-    </style>
-</head>
-<body>
-    <script>
-        function addMask() {
-            const webview = document.querySelector('electrobun-webview');
-            if (webview) {
-                webview.addMaskSelector('#overlay-button');
-                console.log('Added mask selector for #overlay-button');
-            }
-        }
-        
-        function removeMask() {
-            const webview = document.querySelector('electrobun-webview');
-            if (webview) {
-                webview.removeMaskSelector('#overlay-button');
-                console.log('Removed mask selector for #overlay-button');
-            }
-        }
-    </script>
-    <h2>WebView Mask Layer Test</h2>
-    <p class="instructions">
-        <strong>Instructions:</strong><br>
-        1. Scroll down to see the WebView below<br>
-        2. Continue scrolling up and down<br>
-        3. Watch the RED button - it should ALWAYS stay on top
-    </p>
-    
-    <div style="margin-top: 300px; position: relative; border: 3px dashed #666; padding: 20px;">
-        <h3>WebView with Overlay Test</h3>
-        <div style="margin-bottom: 10px;">
-            <button onclick="addMask()" style="padding: 8px 16px; margin-right: 10px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                Add Mask
-            </button>
-            <button onclick="removeMask()" style="padding: 8px 16px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                Remove Mask
-            </button>
-        </div>
-        <electrobun-webview 
-            src="https://electrobun.dev"
-            renderer="cef"
-            partition=""
-            masks="#overlay-button"
-            style="width: 600px; height: 350px; border: 2px solid blue;">
-        </electrobun-webview>
-        
-        <!-- Critical: This button MUST stay on top -->
-        <button id="overlay-button" style="
-            position: absolute;
-            top: 80px;
-            left: 350px;
-            padding: 15px 30px;
-            background: #ff0000;
-            color: white;
-            font-size: 18px;
-            font-weight: bold;
-            z-index: 9999;
-            border: 3px solid #cc0000;
-            border-radius: 8px;
-            cursor: pointer;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-        " onclick="this.style.background = this.style.background === 'green' ? '#ff0000' : 'green'">
-            I MUST STAY ON TOP!<br>
-            <small>Click me to change color</small>
-        </button>
-    </div>
-    
-    <div style="margin-top: 200px; padding: 20px; background: #f9f9f9; border: 2px solid #ddd;">
-        <h3>Keep scrolling...</h3>
-        <p>The red button above should remain visible above the WebView at all times.</p>
-        <p>If it disappears behind the WebView content, that's a mask layer bug.</p>
-    </div>
-    
-    <div style="margin-top: 200px;">
-        <p>End of content - scroll back up to test more</p>
-    </div>
-</body>
-</html>

package/tests/src/testviews/webview-navigation.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>WebView Navigation Test</title>
-    <script src="views://webviewtag/index.js"></script>
-    <style>
-        body {
-            padding: 20px;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        #nav-events {
-            background: #f0f0f0;
-            padding: 10px;
-            border-radius: 4px;
-            min-height: 50px;
-            margin-bottom: 20px;
-        }
-        electrobun-webview {
-            width: 100%;
-            height: 400px;
-            border: 2px solid #666;
-            display: block;
-        }
-    </style>
-</head>
-<body>
-    <h2>WebView Navigation Test</h2>
-    <div>
-        <strong>Navigation Events:</strong>
-        <div id="nav-events">Waiting for navigation...</div>
-    </div>
-    
-    <electrobun-webview src="https://electrobun.dev"></electrobun-webview>
-</body>
-</html>

package/tests/src/testviews/window-create.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Test Window</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            padding: 20px;
-        }
-    </style>
-</head>
-<body>
-    <h2>Test Window Created!</h2>
-    <p>This window should appear and auto-close.</p>
-</body>
-</html>

package/tests/src/testviews/window-events.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Window Events Test</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            padding: 20px;
-        }
-        #status {
-            margin-top: 20px;
-            padding: 15px;
-            background: #f0f0f0;
-            border-radius: 8px;
-        }
-    </style>
-</head>
-<body>
-    <h2>Window Event Test</h2>
-    <p><strong>Try moving this window by dragging the title bar</strong></p>
-    <p><strong>Try resizing this window by dragging edges/corners</strong></p>
-    <div id="status">
-        Events detected:<br>
-        <div id="events"></div>
-    </div>
-    <p style="margin-top: 20px; color: #666;">Close this window manually to complete the test</p>
-</body>
-</html>