Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
376 lines
14 KiB
HTML
376 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Updated Enhanced Items Extension Test</title>
|
|
|
|
<!-- Import Enhanced Items Panel CSS -->
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
|
|
<!-- Import Responsive Accessibility CSS -->
|
|
<link rel="stylesheet" href="src/ResponsiveAccessibility.css">
|
|
|
|
<!-- Import Interactivity Enhancements CSS -->
|
|
<link rel="stylesheet" href="src/InteractivityEnhancements.css">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #0a0a0a;
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: #1a1a1a;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.test-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.test-header h1 {
|
|
color: #ff9900;
|
|
margin: 0 0 10px 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.test-header p {
|
|
color: #a0a0a0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-container {
|
|
width: 100%;
|
|
height: 600px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.status-indicator {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 10px 20px;
|
|
background: rgba(40, 167, 69, 0.15);
|
|
border: 1px solid rgba(40, 167, 69, 0.3);
|
|
border-radius: 8px;
|
|
color: #69db7c;
|
|
font-weight: 600;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.debug-info {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.debug-info h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #ff9900;
|
|
}
|
|
|
|
.responsive-test-controls {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.responsive-btn {
|
|
padding: 8px 16px;
|
|
background: rgba(255, 153, 0, 0.1);
|
|
border: 1px solid rgba(255, 153, 0, 0.3);
|
|
border-radius: 6px;
|
|
color: #ff9900;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.responsive-btn:hover {
|
|
background: rgba(255, 153, 0, 0.2);
|
|
border-color: rgba(255, 153, 0, 0.5);
|
|
}
|
|
|
|
.responsive-btn.active {
|
|
background: rgba(255, 153, 0, 0.3);
|
|
border-color: #ff9900;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="status-indicator" id="statusIndicator">
|
|
✅ Extension Test Environment Ready
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<div class="test-header">
|
|
<h1>🚀 Updated Enhanced Items Extension Test</h1>
|
|
<p>Testing the updated EnhancedItemsPanelManager with full responsive accessibility</p>
|
|
</div>
|
|
|
|
<div class="responsive-test-controls">
|
|
<button class="responsive-btn active" onclick="setViewport('desktop')">🖥️ Desktop (1200px)</button>
|
|
<button class="responsive-btn" onclick="setViewport('tablet')">📱 Tablet (768px)</button>
|
|
<button class="responsive-btn" onclick="setViewport('mobile')">📱 Mobile (480px)</button>
|
|
<button class="responsive-btn" onclick="toggleHighContrast()">🎨 High Contrast</button>
|
|
<button class="responsive-btn" onclick="testKeyboardNav()">⌨️ Keyboard Test</button>
|
|
</div>
|
|
|
|
<div class="panel-container" id="panelContainer">
|
|
<!-- Enhanced Items Panel will be rendered here -->
|
|
</div>
|
|
|
|
<div class="debug-info">
|
|
<h3>🔍 Debug Information</h3>
|
|
<div id="debugOutput">Initializing Enhanced Items Panel Manager...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mock Chrome Extension APIs -->
|
|
<script>
|
|
// Mock chrome.storage API
|
|
window.chrome = {
|
|
storage: {
|
|
local: {
|
|
get: function(keys, callback) {
|
|
const mockData = {
|
|
'amazon_ext_enhanced_items': JSON.stringify([
|
|
{
|
|
id: 'B08WX56W96',
|
|
amazonUrl: 'https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7',
|
|
originalTitle: 'ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS',
|
|
customTitle: 'ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS',
|
|
price: '12.00',
|
|
currency: 'EUR',
|
|
createdAt: new Date().toISOString(),
|
|
titleSuggestions: []
|
|
},
|
|
{
|
|
id: 'B08N5WRWNW',
|
|
amazonUrl: 'https://www.amazon.de/dp/B08N5WRWNW',
|
|
originalTitle: 'Anker PowerCore 10000 Portable Charger',
|
|
customTitle: 'Anker PowerCore 10000 - Kompakte Powerbank mit hoher Kapazität',
|
|
price: '24.99',
|
|
currency: 'EUR',
|
|
createdAt: new Date(Date.now() - 86400000).toISOString(),
|
|
titleSuggestions: [
|
|
'Anker PowerCore 10000 - Kompakte Powerbank mit hoher Kapazität',
|
|
'Anker PowerCore 10000 - Tragbares Ladegerät für unterwegs',
|
|
'Anker PowerCore 10000 - Zuverlässige mobile Stromversorgung'
|
|
]
|
|
}
|
|
]),
|
|
'amazon_ext_settings': JSON.stringify({
|
|
mistralApiKey: 'test-api-key',
|
|
language: 'de'
|
|
})
|
|
};
|
|
|
|
if (typeof keys === 'string') {
|
|
callback({ [keys]: mockData[keys] });
|
|
} else if (Array.isArray(keys)) {
|
|
const result = {};
|
|
keys.forEach(key => {
|
|
result[key] = mockData[key];
|
|
});
|
|
callback(result);
|
|
} else {
|
|
callback(mockData);
|
|
}
|
|
},
|
|
set: function(data, callback) {
|
|
console.log('Mock storage.set:', data);
|
|
if (callback) callback();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Mock global event bus
|
|
window.amazonExtEventBus = {
|
|
listeners: {},
|
|
on: function(event, callback) {
|
|
if (!this.listeners[event]) {
|
|
this.listeners[event] = [];
|
|
}
|
|
this.listeners[event].push(callback);
|
|
},
|
|
off: function(event, callback) {
|
|
if (this.listeners[event]) {
|
|
this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
|
|
}
|
|
},
|
|
emit: function(event, data) {
|
|
console.log('Event emitted:', event, data);
|
|
if (this.listeners[event]) {
|
|
this.listeners[event].forEach(callback => callback(data));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Mock localStorage
|
|
if (!window.localStorage) {
|
|
window.localStorage = {
|
|
getItem: function(key) {
|
|
return this[key] || null;
|
|
},
|
|
setItem: function(key, value) {
|
|
this[key] = value;
|
|
},
|
|
removeItem: function(key) {
|
|
delete this[key];
|
|
}
|
|
};
|
|
}
|
|
|
|
// Debug logging
|
|
function debugLog(message) {
|
|
const debugOutput = document.getElementById('debugOutput');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
debugOutput.innerHTML += `<br>[${timestamp}] ${message}`;
|
|
debugOutput.scrollTop = debugOutput.scrollHeight;
|
|
}
|
|
|
|
// Responsive testing functions
|
|
function setViewport(size) {
|
|
const container = document.getElementById('panelContainer');
|
|
const buttons = document.querySelectorAll('.responsive-btn');
|
|
|
|
// Remove active class from all buttons
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Add active class to clicked button
|
|
event.target.classList.add('active');
|
|
|
|
switch(size) {
|
|
case 'mobile':
|
|
container.style.width = '480px';
|
|
container.style.margin = '0 auto';
|
|
debugLog(`📱 Switched to Mobile view (480px)`);
|
|
break;
|
|
case 'tablet':
|
|
container.style.width = '768px';
|
|
container.style.margin = '0 auto';
|
|
debugLog(`📱 Switched to Tablet view (768px)`);
|
|
break;
|
|
case 'desktop':
|
|
default:
|
|
container.style.width = '100%';
|
|
container.style.margin = '0';
|
|
debugLog(`🖥️ Switched to Desktop view (100%)`);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function toggleHighContrast() {
|
|
document.body.classList.toggle('high-contrast');
|
|
const isHighContrast = document.body.classList.contains('high-contrast');
|
|
debugLog(`🎨 High contrast mode: ${isHighContrast ? 'ON' : 'OFF'}`);
|
|
}
|
|
|
|
function testKeyboardNav() {
|
|
debugLog(`⌨️ Keyboard navigation test: Use Tab to navigate, O/E/Del for item actions`);
|
|
const firstItem = document.querySelector('.enhanced-item');
|
|
if (firstItem) {
|
|
firstItem.focus();
|
|
debugLog(`🎯 Focused on first item for keyboard testing`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Load Enhanced Items Panel Manager -->
|
|
<script type="module">
|
|
import { EnhancedItemsPanelManager } from './src/EnhancedItemsPanelManager.js';
|
|
|
|
async function initializePanel() {
|
|
try {
|
|
debugLog('🚀 Initializing Enhanced Items Panel Manager...');
|
|
|
|
// Create manager instance
|
|
const manager = new EnhancedItemsPanelManager();
|
|
|
|
debugLog('✅ Manager created successfully');
|
|
|
|
// Create the panel content
|
|
const panelContent = manager.createItemsContent();
|
|
|
|
debugLog('✅ Panel content created with responsive accessibility features');
|
|
|
|
// Insert into container
|
|
const container = document.getElementById('panelContainer');
|
|
container.appendChild(panelContent);
|
|
|
|
debugLog('✅ Panel rendered in container');
|
|
debugLog('🎨 Responsive breakpoints: Mobile ≤480px, Tablet 481-768px, Desktop ≥769px');
|
|
debugLog('♿ Accessibility features: ARIA labels, keyboard shortcuts, screen reader support');
|
|
debugLog('⌨️ Keyboard shortcuts: O (Original), E (Edit), Del (Delete)');
|
|
|
|
// Test responsive features
|
|
setTimeout(() => {
|
|
const items = document.querySelectorAll('.enhanced-item');
|
|
debugLog(`📊 Loaded ${items.length} enhanced items with full accessibility`);
|
|
|
|
if (items.length > 0) {
|
|
debugLog('🎯 Try clicking on items or using keyboard navigation');
|
|
debugLog('📱 Use the responsive test buttons to check different screen sizes');
|
|
}
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
debugLog(`❌ Error initializing panel: ${error.message}`);
|
|
console.error('Panel initialization error:', error);
|
|
}
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initializePanel);
|
|
} else {
|
|
initializePanel();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* High contrast mode styles */
|
|
.high-contrast {
|
|
filter: contrast(150%) brightness(120%);
|
|
}
|
|
|
|
.high-contrast .test-container {
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.high-contrast .responsive-btn {
|
|
border: 2px solid white;
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
.high-contrast .responsive-btn:hover,
|
|
.high-contrast .responsive-btn.active {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |