From b734593451b4051c380463de7fb055157fabb844 Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 22:57:48 +0100 Subject: [PATCH 01/20] Add JS API to reorder bookmarks Introduces a new JavaScript callback 'reorderBookmarks' to allow reordering of bookmarks from the UI. The callback parses a JSON array of bookmark IDs and updates the bookmark store accordingly. --- src/Tab.cpp | 47 +++++++++++++++++++++++++++++++++++++++++++++++ src/Tab.h | 1 + 2 files changed, 48 insertions(+) diff --git a/src/Tab.cpp b/src/Tab.cpp index 78b3a4c..b534606 100644 --- a/src/Tab.cpp +++ b/src/Tab.cpp @@ -686,6 +686,7 @@ void Tab::OnDOMReady(View *caller, uint64_t frame_id, bool is_main_frame, const global["removeBookmark"] = BindJSCallback(&Tab::JS_RemoveBookmark); global["isBookmarked"] = BindJSCallbackWithRetval(&Tab::JS_IsBookmarked); global["toggleBookmark"] = BindJSCallback(&Tab::JS_ToggleBookmark); + global["reorderBookmarks"] = BindJSCallback(&Tab::JS_ReorderBookmarks); const char *attachScript = R"JS((function(){ try{ @@ -1682,6 +1683,52 @@ void Tab::JS_ToggleBookmark(const JSObject &obj, const JSArgs &args) } } +void Tab::JS_ReorderBookmarks(const JSObject &obj, const JSArgs &args) +{ + if (!ui_ || !ui_->bookmark_store() || args.empty()) + return; + + // Parse the JSON array of IDs + ultralight::String json_ul = args[0].ToString(); + auto json_str = json_ul.utf8(); + std::string json = json_str.data() ? json_str.data() : ""; + + std::vector ordered_ids; + + // Simple JSON array parsing for [id1, id2, id3, ...] + size_t pos = json.find('['); + if (pos == std::string::npos) return; + pos++; + + while (pos < json.length()) + { + // Skip whitespace + while (pos < json.length() && std::isspace(json[pos])) pos++; + + if (json[pos] == ']') break; + + // Parse number + std::string num; + while (pos < json.length() && std::isdigit(json[pos])) + { + num += json[pos++]; + } + + if (!num.empty()) + { + ordered_ids.push_back(std::stoull(num)); + } + + // Skip comma and whitespace + while (pos < json.length() && (json[pos] == ',' || std::isspace(json[pos]))) pos++; + } + + if (!ordered_ids.empty()) + { + ui_->bookmark_store()->ReorderBookmarks(ordered_ids); + } +} + JSValue Tab::OnDownloadsGetData(const JSObject &obj, const JSArgs &args) { if (!ui_) diff --git a/src/Tab.h b/src/Tab.h index 989e3ee..329af0b 100644 --- a/src/Tab.h +++ b/src/Tab.h @@ -109,6 +109,7 @@ class Tab : public ViewListener, void JS_RemoveBookmark(const JSObject &obj, const JSArgs &args); JSValue JS_IsBookmarked(const JSObject &obj, const JSArgs &args); void JS_ToggleBookmark(const JSObject &obj, const JSArgs &args); + void JS_ReorderBookmarks(const JSObject &obj, const JSArgs &args); // Downloads page callbacks JSValue OnDownloadsGetData(const JSObject &obj, const JSArgs &args); From 061943abe7078a2b75ac1491b21310e54565060f Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 22:57:55 +0100 Subject: [PATCH 02/20] Add bookmark bar ordering and position support Introduces a 'position' field to bookmarks for ordering items on the bookmark bar. Bookmarks added to the bar are assigned the next available position, and bar items are now sorted by position. Adds ReorderBookmarks to update positions based on a given order, and updates JSON serialization/deserialization to include the position field. --- src/BookmarkStore.cpp | 42 ++++++++++++++++++++++++++++++++++++++---- src/BookmarkStore.h | 6 +++++- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/BookmarkStore.cpp b/src/BookmarkStore.cpp index 58b3fca..29ab79b 100644 --- a/src/BookmarkStore.cpp +++ b/src/BookmarkStore.cpp @@ -34,6 +34,14 @@ uint64_t BookmarkStore::AddBookmark(const std::string& url, const std::string& t return bm.id; // Already exists, return existing ID } + // Find the highest position among bar items + int max_position = -1; + for (const auto& bm : bookmarks_) + { + if (bm.show_on_bar && bm.position > max_position) + max_position = bm.position; + } + Bookmark bm; bm.id = next_id_++; bm.url = url; @@ -41,6 +49,7 @@ uint64_t BookmarkStore::AddBookmark(const std::string& url, const std::string& t bm.favicon = favicon; bm.created_at = GetCurrentTimestamp(); bm.show_on_bar = show_on_bar; + bm.position = show_on_bar ? (max_position + 1) : 0; bookmarks_.push_back(bm); SaveToDisk(); @@ -121,9 +130,29 @@ std::vector BookmarkStore::GetBookmarkBarItems() const if (bm.show_on_bar) bar_items.push_back(bm); } + // Sort by position + std::sort(bar_items.begin(), bar_items.end(), + [](const Bookmark& a, const Bookmark& b) { return a.position < b.position; }); return bar_items; } +bool BookmarkStore::ReorderBookmarks(const std::vector& ordered_ids) +{ + // Update positions based on the order in ordered_ids + for (size_t i = 0; i < ordered_ids.size(); ++i) + { + for (auto& bm : bookmarks_) + { + if (bm.id == ordered_ids[i]) + { + bm.position = static_cast(i); + break; + } + } + } + return SaveToDisk(); +} + // Helper to escape JSON strings static std::string EscapeJSON(const std::string& s) { @@ -168,7 +197,8 @@ std::string BookmarkStore::ToJSON() const ss << "\"title\":\"" << EscapeJSON(bm.title) << "\","; ss << "\"favicon\":\"" << EscapeJSON(bm.favicon) << "\","; ss << "\"created_at\":" << bm.created_at << ","; - ss << "\"show_on_bar\":" << (bm.show_on_bar ? "true" : "false"); + ss << "\"show_on_bar\":" << (bm.show_on_bar ? "true" : "false") << ","; + ss << "\"position\":" << bm.position; ss << "}"; } ss << "]"; @@ -177,12 +207,14 @@ std::string BookmarkStore::ToJSON() const std::string BookmarkStore::BookmarkBarToJSON() const { + // Get sorted bar items + auto bar_items = GetBookmarkBarItems(); + std::ostringstream ss; ss << "["; bool first = true; - for (const auto& bm : bookmarks_) + for (const auto& bm : bar_items) { - if (!bm.show_on_bar) continue; if (!first) ss << ","; first = false; ss << "{"; @@ -217,7 +249,8 @@ bool BookmarkStore::SaveToDisk() ss << " \"title\": \"" << EscapeJSON(bm.title) << "\",\n"; ss << " \"favicon\": \"" << EscapeJSON(bm.favicon) << "\",\n"; ss << " \"created_at\": " << bm.created_at << ",\n"; - ss << " \"show_on_bar\": " << (bm.show_on_bar ? "true" : "false") << "\n"; + ss << " \"show_on_bar\": " << (bm.show_on_bar ? "true" : "false") << ",\n"; + ss << " \"position\": " << bm.position << "\n"; ss << " }"; } @@ -364,6 +397,7 @@ bool BookmarkStore::LoadFromDisk() bm.favicon = ExtractString(obj_json, "favicon"); bm.created_at = ExtractUint64(obj_json, "created_at"); bm.show_on_bar = ExtractBool(obj_json, "show_on_bar", true); + bm.position = static_cast(ExtractUint64(obj_json, "position")); if (!bm.url.empty()) { diff --git a/src/BookmarkStore.h b/src/BookmarkStore.h index a8cbce5..b469f2f 100644 --- a/src/BookmarkStore.h +++ b/src/BookmarkStore.h @@ -19,6 +19,7 @@ class BookmarkStore std::string favicon; // Data URL or empty uint64_t created_at; // Timestamp in milliseconds bool show_on_bar; // Whether to show on bookmark bar + int position; // Position in bookmark bar (for ordering) }; BookmarkStore(); @@ -50,9 +51,12 @@ class BookmarkStore // Get all bookmarks const std::vector& GetAllBookmarks() const { return bookmarks_; } - // Get bookmarks for the bookmark bar only + // Get bookmarks for the bookmark bar only (sorted by position) std::vector GetBookmarkBarItems() const; + // Reorder bookmarks on the bar - takes a vector of bookmark IDs in new order + bool ReorderBookmarks(const std::vector& ordered_ids); + // Save bookmarks to disk bool SaveToDisk(); From a5595c9d2dc976bd1639d63180da6f2d89c31aeb Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 22:58:01 +0100 Subject: [PATCH 03/20] Add drag-and-drop reordering to bookmark bar Implements drag-and-drop functionality for bookmark items, allowing users to reorder bookmarks in the bar. Adds related CSS styles and event handlers for drag state, touch/mouse long press, and order persistence via saveBookmarkOrder. --- assets/static-sties/google-static.html | 123 ++++++++++++++++++++++++- 1 file changed, 122 insertions(+), 1 deletion(-) diff --git a/assets/static-sties/google-static.html b/assets/static-sties/google-static.html index da5536b..9a70775 100644 --- a/assets/static-sties/google-static.html +++ b/assets/static-sties/google-static.html @@ -301,6 +301,21 @@ background: rgba(255, 60, 60, 1); } + /* Drag and drop styles */ + .bookmark-item.dragging { + opacity: 0.5; + background: rgba(100, 100, 255, 0.3); + } + + .bookmark-item.drag-over { + border-left: 2px solid #6C63FF; + margin-left: -2px; + } + + .bookmark-bar.drag-active { + background: rgba(29, 29, 33, 0.98); + } + /* Adjust main container for bookmark bar */ .main-container { padding-top: 50px; @@ -368,17 +383,26 @@ } } - // Create a bookmark element + // Drag and drop state + let draggedElement = null; + let draggedBookmarkId = null; + let longPressTimer = null; + let isDragging = false; + + // Create a bookmark element with drag support function createBookmarkElement(bookmark) { const item = document.createElement('a'); item.className = 'bookmark-item'; item.href = bookmark.url; item.title = bookmark.title || bookmark.url; + item.dataset.bookmarkId = bookmark.id; + item.draggable = true; // Icon (favicon or default) if (bookmark.favicon && bookmark.favicon.startsWith('data:')) { const img = document.createElement('img'); img.src = bookmark.favicon; + img.draggable = false; img.onerror = function() { const defaultIcon = document.createElement('div'); defaultIcon.className = 'default-icon'; @@ -412,9 +436,106 @@ }; item.appendChild(removeBtn); + // Drag events + item.addEventListener('dragstart', handleDragStart); + item.addEventListener('dragend', handleDragEnd); + item.addEventListener('dragover', handleDragOver); + item.addEventListener('dragenter', handleDragEnter); + item.addEventListener('dragleave', handleDragLeave); + item.addEventListener('drop', handleDrop); + + // Long press for touch/mouse + item.addEventListener('mousedown', function(e) { + if (e.button !== 0) return; + longPressTimer = setTimeout(() => { + isDragging = true; + item.classList.add('dragging'); + }, 300); + }); + + item.addEventListener('mouseup', function() { + clearTimeout(longPressTimer); + }); + + item.addEventListener('click', function(e) { + if (isDragging) { + e.preventDefault(); + isDragging = false; + } + }); + return item; } + function handleDragStart(e) { + draggedElement = this; + draggedBookmarkId = this.dataset.bookmarkId; + this.classList.add('dragging'); + document.getElementById('bookmarkBar').classList.add('drag-active'); + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', draggedBookmarkId); + } + + function handleDragEnd(e) { + this.classList.remove('dragging'); + document.getElementById('bookmarkBar').classList.remove('drag-active'); + document.querySelectorAll('.bookmark-item').forEach(item => { + item.classList.remove('drag-over'); + }); + draggedElement = null; + draggedBookmarkId = null; + isDragging = false; + } + + function handleDragOver(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + } + + function handleDragEnter(e) { + e.preventDefault(); + if (this !== draggedElement) { + this.classList.add('drag-over'); + } + } + + function handleDragLeave(e) { + this.classList.remove('drag-over'); + } + + function handleDrop(e) { + e.preventDefault(); + e.stopPropagation(); + + if (this === draggedElement) return; + + const bar = document.getElementById('bookmarkBar'); + const items = Array.from(bar.querySelectorAll('.bookmark-item')); + const draggedIndex = items.indexOf(draggedElement); + const dropIndex = items.indexOf(this); + + if (draggedIndex < dropIndex) { + this.parentNode.insertBefore(draggedElement, this.nextSibling); + } else { + this.parentNode.insertBefore(draggedElement, this); + } + + this.classList.remove('drag-over'); + + // Save new order + saveBookmarkOrder(); + } + + function saveBookmarkOrder() { + const bar = document.getElementById('bookmarkBar'); + const items = bar.querySelectorAll('.bookmark-item'); + const orderedIds = Array.from(items).map(item => parseInt(item.dataset.bookmarkId)); + + if (window.reorderBookmarks && orderedIds.length > 0) { + window.reorderBookmarks(JSON.stringify(orderedIds)); + } + } + // Load and display bookmarks function loadBookmarks() { const bar = document.getElementById('bookmarkBar'); From 756e9d80d2c8925c476faef764dcaad0f477b58e Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:01:28 +0100 Subject: [PATCH 04/20] Refactor bookmark drag-and-drop to use mouse events Replaces the previous HTML5 drag-and-drop API with a custom mouse-based drag-and-drop implementation for bookmark items. Improves visual feedback, adds left/right drop indicators, and ensures better compatibility and control over drag behavior. Also prevents accidental navigation during drag and refines the UI for drag states. --- assets/static-sties/google-static.html | 207 ++++++++++++++++--------- 1 file changed, 130 insertions(+), 77 deletions(-) diff --git a/assets/static-sties/google-static.html b/assets/static-sties/google-static.html index 9a70775..6930c53 100644 --- a/assets/static-sties/google-static.html +++ b/assets/static-sties/google-static.html @@ -302,14 +302,24 @@ } /* Drag and drop styles */ + .bookmark-item { + cursor: grab; + } + .bookmark-item.dragging { opacity: 0.5; background: rgba(100, 100, 255, 0.3); + cursor: grabbing; } .bookmark-item.drag-over { - border-left: 2px solid #6C63FF; - margin-left: -2px; + border-left: 3px solid #6C63FF; + padding-left: 7px; + } + + .bookmark-item.drag-over-right { + border-right: 3px solid #6C63FF; + padding-right: 7px; } .bookmark-bar.drag-active { @@ -383,20 +393,24 @@ } } - // Drag and drop state - let draggedElement = null; - let draggedBookmarkId = null; - let longPressTimer = null; - let isDragging = false; + // Mouse-based drag and drop state + let dragState = { + isDragging: false, + element: null, + bookmarkId: null, + startX: 0, + startY: 0, + offsetX: 0, + clone: null, + moved: false + }; - // Create a bookmark element with drag support + // Create a bookmark element with mouse drag support function createBookmarkElement(bookmark) { - const item = document.createElement('a'); + const item = document.createElement('div'); item.className = 'bookmark-item'; - item.href = bookmark.url; - item.title = bookmark.title || bookmark.url; item.dataset.bookmarkId = bookmark.id; - item.draggable = true; + item.dataset.url = bookmark.url; // Icon (favicon or default) if (bookmark.favicon && bookmark.favicon.startsWith('data:')) { @@ -426,6 +440,9 @@ const removeBtn = document.createElement('div'); removeBtn.className = 'remove-btn'; removeBtn.textContent = '×'; + removeBtn.onmousedown = function(e) { + e.stopPropagation(); + }; removeBtn.onclick = function(e) { e.preventDefault(); e.stopPropagation(); @@ -436,94 +453,130 @@ }; item.appendChild(removeBtn); - // Drag events - item.addEventListener('dragstart', handleDragStart); - item.addEventListener('dragend', handleDragEnd); - item.addEventListener('dragover', handleDragOver); - item.addEventListener('dragenter', handleDragEnter); - item.addEventListener('dragleave', handleDragLeave); - item.addEventListener('drop', handleDrop); - - // Long press for touch/mouse + // Mouse down to start drag item.addEventListener('mousedown', function(e) { if (e.button !== 0) return; - longPressTimer = setTimeout(() => { - isDragging = true; - item.classList.add('dragging'); - }, 300); - }); - - item.addEventListener('mouseup', function() { - clearTimeout(longPressTimer); + if (e.target.classList.contains('remove-btn')) return; + + e.preventDefault(); + + dragState.isDragging = true; + dragState.element = item; + dragState.bookmarkId = bookmark.id; + dragState.startX = e.clientX; + dragState.startY = e.clientY; + dragState.moved = false; + + const rect = item.getBoundingClientRect(); + dragState.offsetX = e.clientX - rect.left; + + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); }); + // Click to navigate (only if not dragged) item.addEventListener('click', function(e) { - if (isDragging) { + if (dragState.moved) { e.preventDefault(); - isDragging = false; + return; } + // Navigate to bookmark + window.location.href = bookmark.url; }); return item; } - function handleDragStart(e) { - draggedElement = this; - draggedBookmarkId = this.dataset.bookmarkId; - this.classList.add('dragging'); - document.getElementById('bookmarkBar').classList.add('drag-active'); - e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData('text/plain', draggedBookmarkId); - } - - function handleDragEnd(e) { - this.classList.remove('dragging'); - document.getElementById('bookmarkBar').classList.remove('drag-active'); - document.querySelectorAll('.bookmark-item').forEach(item => { - item.classList.remove('drag-over'); - }); - draggedElement = null; - draggedBookmarkId = null; - isDragging = false; - } - - function handleDragOver(e) { - e.preventDefault(); - e.dataTransfer.dropEffect = 'move'; - } - - function handleDragEnter(e) { - e.preventDefault(); - if (this !== draggedElement) { - this.classList.add('drag-over'); + function handleMouseMove(e) { + if (!dragState.isDragging || !dragState.element) return; + + const dx = e.clientX - dragState.startX; + const dy = e.clientY - dragState.startY; + + // Only start visual drag after moving a bit + if (!dragState.moved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) { + dragState.moved = true; + dragState.element.classList.add('dragging'); + document.getElementById('bookmarkBar').classList.add('drag-active'); + } + + if (!dragState.moved) return; + + // Find the bookmark item we're hovering over + const bar = document.getElementById('bookmarkBar'); + const items = Array.from(bar.querySelectorAll('.bookmark-item')); + + // Clear all drag-over states + items.forEach(item => item.classList.remove('drag-over', 'drag-over-right')); + + // Find which item we're over + for (const item of items) { + if (item === dragState.element) continue; + + const rect = item.getBoundingClientRect(); + const midX = rect.left + rect.width / 2; + + if (e.clientX >= rect.left && e.clientX <= rect.right) { + if (e.clientX < midX) { + item.classList.add('drag-over'); + } else { + item.classList.add('drag-over-right'); + } + break; + } } } - function handleDragLeave(e) { - this.classList.remove('drag-over'); - } - - function handleDrop(e) { - e.preventDefault(); - e.stopPropagation(); + function handleMouseUp(e) { + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); - if (this === draggedElement) return; + if (!dragState.isDragging) return; const bar = document.getElementById('bookmarkBar'); const items = Array.from(bar.querySelectorAll('.bookmark-item')); - const draggedIndex = items.indexOf(draggedElement); - const dropIndex = items.indexOf(this); - if (draggedIndex < dropIndex) { - this.parentNode.insertBefore(draggedElement, this.nextSibling); - } else { - this.parentNode.insertBefore(draggedElement, this); + // Find drop target + let dropTarget = null; + let insertAfter = false; + + for (const item of items) { + if (item.classList.contains('drag-over')) { + dropTarget = item; + insertAfter = false; + break; + } + if (item.classList.contains('drag-over-right')) { + dropTarget = item; + insertAfter = true; + break; + } } - this.classList.remove('drag-over'); + // Move the element + if (dropTarget && dropTarget !== dragState.element && dragState.moved) { + if (insertAfter) { + dropTarget.parentNode.insertBefore(dragState.element, dropTarget.nextSibling); + } else { + dropTarget.parentNode.insertBefore(dragState.element, dropTarget); + } + // Save new order + saveBookmarkOrder(); + } + + // Clean up + items.forEach(item => { + item.classList.remove('dragging', 'drag-over', 'drag-over-right'); + }); + bar.classList.remove('drag-active'); - // Save new order - saveBookmarkOrder(); + // Reset state after a short delay to prevent click from firing + setTimeout(() => { + dragState.isDragging = false; + dragState.element = null; + dragState.bookmarkId = null; + dragState.moved = false; + }, 10); } function saveBookmarkOrder() { From 4fadf4f941071beaa91fedec372cf91b01393c25 Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:10:14 +0100 Subject: [PATCH 05/20] Enhance middle and ctrl+click to open bookmarks in new tab Enhanced bookmark interaction: middle mouse button and Ctrl+click now open bookmarks in a new tab using a native bridge if available, otherwise falling back to navigation in the current tab. --- assets/static-sties/google-static.html | 29 +++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/assets/static-sties/google-static.html b/assets/static-sties/google-static.html index 6930c53..74f6c3d 100644 --- a/assets/static-sties/google-static.html +++ b/assets/static-sties/google-static.html @@ -474,19 +474,46 @@ document.addEventListener('mouseup', handleMouseUp); }); + // Middle click opens in new tab + item.addEventListener('auxclick', function(e) { + if (e.button === 1) { // Middle mouse button + e.preventDefault(); + openInNewTab(bookmark.url); + } + }); + // Click to navigate (only if not dragged) item.addEventListener('click', function(e) { if (dragState.moved) { e.preventDefault(); return; } - // Navigate to bookmark + // Ctrl+Click opens in new tab + if (e.ctrlKey) { + e.preventDefault(); + e.stopPropagation(); + openInNewTab(bookmark.url); + return; + } + // Regular click navigates in current tab window.location.href = bookmark.url; }); return item; } + // Open URL in new tab using native bridge + function openInNewTab(url) { + if (window.__ul_newTab) { + window.__ul_newTab(url); + } else if (window.__ul && window.__ul.newTab) { + window.__ul.newTab(url); + } else { + // Fallback: just navigate + window.location.href = url; + } + } + function handleMouseMove(e) { if (!dragState.isDragging || !dragState.element) return; From d84dc6dcac9c53b4e4a75cf8b9831dfb0c33c58f Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:11:31 +0100 Subject: [PATCH 06/20] Add bookmarks management page Introduces a new bookmarks.html file with UI and JavaScript for displaying, managing, and clearing bookmarks. The page includes styling, favicon support, and integration with window methods for bookmark operations. --- assets/bookmarks.html | 453 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 453 insertions(+) create mode 100644 assets/bookmarks.html diff --git a/assets/bookmarks.html b/assets/bookmarks.html new file mode 100644 index 0000000..1210437 --- /dev/null +++ b/assets/bookmarks.html @@ -0,0 +1,453 @@ + + + + + Bookmarks + + + + + + + +
+
+

+ + + + Bookmarks +

+
+ + +
+
+ + + +
    +
    + + + + + From 5813428d16e055be84c4b0be19c741363b7bde2a Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:12:39 +0100 Subject: [PATCH 07/20] Add Bookmarks Management menu item with shortcut Introduces a Bookmarks entry to the menu with Ctrl+B shortcut and corresponding action handler for opening bookmarks in a new tab. --- assets/menu.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/assets/menu.html b/assets/menu.html index 563e642..2589a6d 100644 --- a/assets/menu.html +++ b/assets/menu.html @@ -88,6 +88,10 @@ History Ctrl+H +
    + Bookmarks + Ctrl+B +
    Downloads Ctrl+J @@ -176,6 +180,9 @@ case 'history': if (window.OnOpenHistoryNewTab) OnOpenHistoryNewTab(); break; + case 'bookmarks': + if (window.OnOpenBookmarksNewTab) OnOpenBookmarksNewTab(); + break; case 'downloads': if (window.OnOpenDownloadsNewTab) OnOpenDownloadsNewTab(); break; From edd861a615f52a1bc2580dd4af8dc09078dbf838 Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:13:29 +0100 Subject: [PATCH 08/20] Add handler to open bookmarks in new tab Introduces OnOpenBookmarksNewTab to allow opening the bookmarks page in a new tab via JavaScript callback binding. This aligns bookmarks behavior with history, downloads, passwords, and extensions. --- src/UI.cpp | 6 ++++++ src/UI.h | 1 + 2 files changed, 7 insertions(+) diff --git a/src/UI.cpp b/src/UI.cpp index 6cafbbd..82cc7db 100644 --- a/src/UI.cpp +++ b/src/UI.cpp @@ -1486,6 +1486,7 @@ void UI::OnDOMReady(View *caller, uint64_t frame_id, bool is_main_frame, const S global["OnRequestChangeURL"] = BindJSCallback(&UI::OnRequestChangeURL); global["OnAddressBarNavigate"] = BindJSCallback(&UI::OnAddressBarNavigate); global["OnOpenHistoryNewTab"] = BindJSCallback(&UI::OnOpenHistoryNewTab); + global["OnOpenBookmarksNewTab"] = BindJSCallback(&UI::OnOpenBookmarksNewTab); global["OnOpenDownloadsNewTab"] = BindJSCallback(&UI::OnOpenDownloadsNewTab); global["OnOpenPasswordsNewTab"] = BindJSCallback(&UI::OnOpenPasswordsNewTab); global["OnOpenExtensionsNewTab"] = BindJSCallback(&UI::OnOpenExtensionsNewTab); @@ -1929,6 +1930,11 @@ void UI::OnOpenHistoryNewTab(const JSObject &obj, const JSArgs &args) CreateNewTabForChildView(String("file:///history.html")); } +void UI::OnOpenBookmarksNewTab(const JSObject &obj, const JSArgs &args) +{ + CreateNewTabForChildView(String("file:///bookmarks.html")); +} + void UI::OnOpenDownloadsNewTab(const JSObject &obj, const JSArgs &args) { CreateNewTabForChildView(String("file:///downloads.html")); diff --git a/src/UI.h b/src/UI.h index ae78486..ce444d7 100644 --- a/src/UI.h +++ b/src/UI.h @@ -145,6 +145,7 @@ class UI : public WindowListener, void OnAddressBarNavigate(const JSObject &obj, const JSArgs &args); // Open History page in a new tab (used by menu button and shortcuts) void OnOpenHistoryNewTab(const JSObject &obj, const JSArgs &args); + void OnOpenBookmarksNewTab(const JSObject &obj, const JSArgs &args); void OnOpenDownloadsNewTab(const JSObject &obj, const JSArgs &args); void OnOpenPasswordsNewTab(const JSObject &obj, const JSArgs &args); void OnAddressBarBlur(const JSObject &obj, const JSArgs &args); From 689f15a910713bee85da917c5bbff1d2a1bd28c0 Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:14:24 +0100 Subject: [PATCH 09/20] Add shortcut info for opening bookmarks Added 'Ctrl+B' to shortcuts.json to enable quick access to bookmarks. --- assets/shortcuts.json | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/shortcuts.json b/assets/shortcuts.json index 8427771..41933b8 100644 --- a/assets/shortcuts.json +++ b/assets/shortcuts.json @@ -3,6 +3,7 @@ "Ctrl+N": "new-window", "Ctrl+W": "close-tab", "Ctrl+H": "open-history", + "Ctrl+B": "open-bookmarks", "Ctrl+J": "open-downloads", "Ctrl+E": "open-extensions", "Ctrl+P": "open-passwords", From 1098f15933350ffd6b9a9d49fa5f54a6070abf67 Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:15:56 +0100 Subject: [PATCH 10/20] Add shortcut action to open bookmarks in new tab Introduces a new shortcut action 'open-bookmarks' that opens the bookmarks page in a new tab. This enhances user accessibility to bookmarks via shortcuts. --- src/UI.cpp | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/UI.cpp b/src/UI.cpp index 82cc7db..85133f0 100644 --- a/src/UI.cpp +++ b/src/UI.cpp @@ -1149,6 +1149,12 @@ bool UI::RunShortcutAction(const std::string &action) CreateNewTabForChildView(String("file:///history.html")); return true; } + if (action == "open-bookmarks") + { + // Open Bookmarks in a NEW tab + CreateNewTabForChildView(String("file:///bookmarks.html")); + return true; + } if (action == "focus-address") { if (focusAddressBar) From c12b6b27d7e0e473d9c8ee2bc8e316c10cdbba5a Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:16:13 +0100 Subject: [PATCH 11/20] Add JS_UpdateBookmark callback for bookmarks Introduces a new JavaScript callback, JS_UpdateBookmark, allowing bookmarks to be updated from the UI while preserving favicon and show_in_bar settings. Updates the Tab class to expose this functionality to the global JS context. --- src/Tab.cpp | 30 ++++++++++++++++++++++++++++++ src/Tab.h | 1 + 2 files changed, 31 insertions(+) diff --git a/src/Tab.cpp b/src/Tab.cpp index b534606..d525d6c 100644 --- a/src/Tab.cpp +++ b/src/Tab.cpp @@ -687,6 +687,7 @@ void Tab::OnDOMReady(View *caller, uint64_t frame_id, bool is_main_frame, const global["isBookmarked"] = BindJSCallbackWithRetval(&Tab::JS_IsBookmarked); global["toggleBookmark"] = BindJSCallback(&Tab::JS_ToggleBookmark); global["reorderBookmarks"] = BindJSCallback(&Tab::JS_ReorderBookmarks); + global["updateBookmark"] = BindJSCallbackWithRetval(&Tab::JS_UpdateBookmark); const char *attachScript = R"JS((function(){ try{ @@ -1729,6 +1730,35 @@ void Tab::JS_ReorderBookmarks(const JSObject &obj, const JSArgs &args) } } +JSValue Tab::JS_UpdateBookmark(const JSObject &obj, const JSArgs &args) +{ + if (!ui_ || !ui_->bookmark_store() || args.size() < 3) + return JSValue(false); + + // Args: id, url, title + uint64_t id = static_cast((double)args[0]); + + ultralight::String url_ul = args[1].ToString(); + auto url_str = url_ul.utf8(); + std::string url = url_str.data() ? url_str.data() : ""; + + ultralight::String title_ul = args[2].ToString(); + auto title_str = title_ul.utf8(); + std::string title = title_str.data() ? title_str.data() : ""; + + // Keep existing favicon and show_in_bar settings + std::string favicon; + bool show_in_bar = true; + + auto* existing = ui_->bookmark_store()->GetBookmarkById(id); + if (existing) { + favicon = existing->favicon_url; + show_in_bar = existing->show_in_bar; + } + + return JSValue(ui_->bookmark_store()->UpdateBookmark(id, url, title, favicon, show_in_bar)); +} + JSValue Tab::OnDownloadsGetData(const JSObject &obj, const JSArgs &args) { if (!ui_) diff --git a/src/Tab.h b/src/Tab.h index 329af0b..fbc38c5 100644 --- a/src/Tab.h +++ b/src/Tab.h @@ -110,6 +110,7 @@ class Tab : public ViewListener, JSValue JS_IsBookmarked(const JSObject &obj, const JSArgs &args); void JS_ToggleBookmark(const JSObject &obj, const JSArgs &args); void JS_ReorderBookmarks(const JSObject &obj, const JSArgs &args); + JSValue JS_UpdateBookmark(const JSObject &obj, const JSArgs &args); // Downloads page callbacks JSValue OnDownloadsGetData(const JSObject &obj, const JSArgs &args); From 7256bb5730aa6fe7fe398a00f03d63483874fb7e Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:18:13 +0100 Subject: [PATCH 12/20] Update bookmark variable names for consistency Renamed variables and comments from 'show_in_bar' and 'favicon_url' to 'show_on_bar' and 'favicon' to match the updated bookmark data structure and improve code clarity. --- src/Tab.cpp | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Tab.cpp b/src/Tab.cpp index d525d6c..f3b4414 100644 --- a/src/Tab.cpp +++ b/src/Tab.cpp @@ -1746,17 +1746,17 @@ JSValue Tab::JS_UpdateBookmark(const JSObject &obj, const JSArgs &args) auto title_str = title_ul.utf8(); std::string title = title_str.data() ? title_str.data() : ""; - // Keep existing favicon and show_in_bar settings + // Keep existing favicon and show_on_bar settings std::string favicon; - bool show_in_bar = true; + bool show_on_bar = true; auto* existing = ui_->bookmark_store()->GetBookmarkById(id); if (existing) { - favicon = existing->favicon_url; - show_in_bar = existing->show_in_bar; + favicon = existing->favicon; + show_on_bar = existing->show_on_bar; } - return JSValue(ui_->bookmark_store()->UpdateBookmark(id, url, title, favicon, show_in_bar)); + return JSValue(ui_->bookmark_store()->UpdateBookmark(id, url, title, favicon, show_on_bar)); } JSValue Tab::OnDownloadsGetData(const JSObject &obj, const JSArgs &args) From 4839138185a66d9f0bc00232142300020f57114e Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:21:08 +0100 Subject: [PATCH 13/20] Normalize whitespace in build workflow scripts Replaces trailing whitespace with consistent formatting in build-linux.yml and build-macos.yml workflow files. No functional changes; improves script readability and consistency. --- .github/workflows/build-linux.yml | 18 +++++++++--------- .github/workflows/build-macos.yml | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.github/workflows/build-linux.yml b/.github/workflows/build-linux.yml index cefcad6..db6b07f 100644 --- a/.github/workflows/build-linux.yml +++ b/.github/workflows/build-linux.yml @@ -336,20 +336,20 @@ jobs: if [ -f "build/CMakeCache.txt" ]; then echo "CMake cache found, checking if reconfiguration needed..." cacheValid=true - + # Check if SDK root changed cachedSdkRoot=$(grep "ULTRALIGHT_SDK_ROOT:.*=" build/CMakeCache.txt | sed 's/.*=//' || true) if [ "$cachedSdkRoot" != "$ULTRALIGHT_SDK_ROOT" ]; then echo "SDK root changed, reconfiguration needed" cacheValid=false fi - + if [ "$cacheValid" = "true" ]; then echo "✅ CMake cache is valid, skipping reconfiguration (saves ~30-60 seconds)" exit 0 fi fi - + cmake --version echo "Configuring with ULTRALIGHT_SDK_ROOT=$ULTRALIGHT_SDK_ROOT" cmake -S . -B build -DCMAKE_BUILD_TYPE=Release -DULTRALIGHT_SDK_ROOT="$ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DWEBBROWSER_VERSION="$WEBBROWSER_VERSION" @@ -417,16 +417,16 @@ jobs: run: | set -euo pipefail echo "🚀 Generating comprehensive build summary..." - + # Get SDK version sdkVersion="${ULTRALIGHT_VERSION:-Unknown}" if [ -f "build/ultralight_sdk_version.txt" ]; then sdkVersion=$(cat "build/ultralight_sdk_version.txt" | tr -d '[:space:]') fi - + # Make script executable chmod +x scripts/generate-build-summary.sh - + # Run the build summary script bash scripts/generate-build-summary.sh \ "build" \ @@ -436,7 +436,7 @@ jobs: "${{ github.sha }}" \ "$sdkVersion" \ "BUILD-SUMMARY.md" - + # Create JSON metadata file cat > build/BUILD-METADATA.json << EOF { @@ -452,7 +452,7 @@ jobs: "runNumber": "${{ github.run_number }}" } EOF - + echo "✅ Build summary and metadata generated successfully" - name: 8.1 Display Build Summary @@ -563,7 +563,7 @@ jobs: else echo "⚠️ BUILD-SUMMARY.md not found, skipping job summary" fi - + # Show cache statistics echo "" echo "📊 Cache Statistics:" diff --git a/.github/workflows/build-macos.yml b/.github/workflows/build-macos.yml index b55779f..449b985 100644 --- a/.github/workflows/build-macos.yml +++ b/.github/workflows/build-macos.yml @@ -386,20 +386,20 @@ jobs: if [ -f "build/CMakeCache.txt" ]; then echo "CMake cache found, checking if reconfiguration needed..." cacheValid=true - + # Check if SDK root changed cachedSdkRoot=$(grep "ULTRALIGHT_SDK_ROOT:.*=" build/CMakeCache.txt | sed 's/.*=//' || true) if [ "$cachedSdkRoot" != "$ULTRALIGHT_SDK_ROOT" ]; then echo "SDK root changed, reconfiguration needed" cacheValid=false fi - + if [ "$cacheValid" = "true" ]; then echo "✅ CMake cache is valid, skipping reconfiguration (saves ~30-60 seconds)" exit 0 fi fi - + cmake --version echo "Configuring with ULTRALIGHT_SDK_ROOT=$ULTRALIGHT_SDK_ROOT" cmake -S . -B build -DULTRALIGHT_SDK_ROOT="$ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DWEBBROWSER_VERSION="$WEBBROWSER_VERSION" @@ -518,16 +518,16 @@ jobs: run: | set -euo pipefail echo "🚀 Generating comprehensive build summary..." - + # Get SDK version sdkVersion="${ULTRALIGHT_VERSION:-Unknown}" if [ -f "build/ultralight_sdk_version.txt" ]; then sdkVersion=$(cat "build/ultralight_sdk_version.txt" | tr -d '[:space:]') fi - + # Make script executable chmod +x scripts/generate-build-summary.sh - + # Run the build summary script bash scripts/generate-build-summary.sh \ "build" \ @@ -537,7 +537,7 @@ jobs: "${{ github.sha }}" \ "$sdkVersion" \ "BUILD-SUMMARY.md" - + # Create JSON metadata file cat > build/BUILD-METADATA.json << EOF { @@ -553,7 +553,7 @@ jobs: "runNumber": "${{ github.run_number }}" } EOF - + echo "✅ Build summary and metadata generated successfully" - name: 7.1 Display Build Summary @@ -643,7 +643,7 @@ jobs: else echo "⚠️ BUILD-SUMMARY.md not found, skipping job summary" fi - + # Show cache statistics echo "" echo "📊 Cache Statistics:" From db6b6b994fdbad2b21bcc90ef231811ca47c734a Mon Sep 17 00:00:00 2001 From: ovsky Date: Fri, 5 Dec 2025 23:21:22 +0100 Subject: [PATCH 14/20] Reformat keyframes and SVG markup for consistency Updated @keyframes and @-webkit-keyframes blocks in multiple HTML and CSS files for improved readability and consistency. Reformatted inline SVG elements for better maintainability and accessibility. No functional changes; this is a code style and formatting update. --- assets/bookmarks.html | 45 +++--- assets/menu.html | 24 +++- assets/new_tab_page.html | 2 +- assets/passwords.html | 120 +++++++++++----- assets/settings.html | 34 +++-- assets/static-sties/google-static.html | 101 ++++++++------ assets/ui.css | 21 ++- assets/ui.html | 182 +++++++++++++++---------- 8 files changed, 342 insertions(+), 187 deletions(-) diff --git a/assets/bookmarks.html b/assets/bookmarks.html index 1210437..c7180f6 100644 --- a/assets/bookmarks.html +++ b/assets/bookmarks.html @@ -3,7 +3,7 @@ Bookmarks - + @@ -235,21 +235,27 @@ --bg: #1a1a1f; --fg: #e8e8e8; } + .btn { background: #2a2a32; border-color: rgba(255, 255, 255, 0.1); } + .btn:hover { background: #3a3a42; } + li.item:hover { background: rgba(255, 255, 255, 0.05); } + .action-btn:hover { background: rgba(255, 255, 255, 0.1); color: #e8e8e8; } - .muted, .url { + + .muted, + .url { color: #999; } } @@ -261,7 +267,8 @@

    - + Bookmarks

    @@ -273,7 +280,7 @@

    - + \ No newline at end of file diff --git a/assets/passwords.html b/assets/passwords.html index 9ce9d3d..6342760 100644 --- a/assets/passwords.html +++ b/assets/passwords.html @@ -1,10 +1,12 @@ + Passwords - Ultralight Browser - + +

    - + + + Passwords

    @@ -686,14 +717,21 @@

    - - + + + +
    - + + +

    No saved passwords

    When you save passwords in the browser, they'll appear here.

    @@ -703,15 +741,21 @@

    Import & Export

    @@ -723,7 +767,10 @@

    Import & Export

    Add Password

    @@ -747,7 +794,10 @@

    Add Password

    @@ -769,7 +819,10 @@

    Add Password

    Password Settings

    @@ -855,10 +908,10 @@

    Password Settings

    const emptyState = document.getElementById('emptyState'); const searchTerm = document.getElementById('searchInput').value.toLowerCase(); - const filtered = passwords.filter(p => + const filtered = passwords.filter(p => !p.blacklisted && - (p.origin.toLowerCase().includes(searchTerm) || - p.username.toLowerCase().includes(searchTerm)) + (p.origin.toLowerCase().includes(searchTerm) || + p.username.toLowerCase().includes(searchTerm)) ); if (filtered.length === 0) { @@ -873,7 +926,7 @@

    Password Settings

    list.innerHTML = filtered.map(p => `
    -
    @@ -1048,7 +1101,7 @@

    Password Settings

    document.body.appendChild(textarea); textarea.focus(); textarea.select(); - + try { const successful = document.execCommand('copy'); if (successful) { @@ -1059,7 +1112,7 @@

    Password Settings

    } catch (err) { showToast('Failed to copy - please copy manually'); } - + document.body.removeChild(textarea); } @@ -1183,9 +1236,9 @@

    Password Settings

    function escapeHtml(str) { if (!str) return ''; return str.replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"'); + .replace(//g, '>') + .replace(/"/g, '"'); } function getDisplayDomain(url) { @@ -1198,4 +1251,5 @@

    Password Settings

    } - + + \ No newline at end of file diff --git a/assets/settings.html b/assets/settings.html index 42728b2..e252862 100644 --- a/assets/settings.html +++ b/assets/settings.html @@ -5,7 +5,8 @@ Settings - + - + + + +
    +
    +
    + + + +
    +

    Themes

    +
    Customize your browser appearance
    +
    +
    + +
    + + +
    +

    Built-in Themes

    +
    +
    + + + + + +
    +

    Import Theme

    +
    + +

    Drag & drop a theme file here, or click to browse

    + +
    + + +
    +

    📁 Theme Storage Information

    +
      +
    • + + Custom themes are saved in browser storage and persist across sessions +
      • +
    • + + Export themes to JSON files for backup or sharing with others +
      • +
    • + + Import JSON theme files by dragging them onto the drop zone above +
      • +
    • + + Tip: Duplicate a built-in theme to create a customized version +
      • +
    +
    +
    +
    + + + + + +
    + + + + + diff --git a/assets/themes/dark.json b/assets/themes/dark.json new file mode 100644 index 0000000..0ca6e54 --- /dev/null +++ b/assets/themes/dark.json @@ -0,0 +1,79 @@ +{ + "id": "dark", + "name": "Dark (Default)", + "description": "The default dark purple theme for Ultralight WebBrowser", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#16151d", + "color-bg-secondary": "#1e1e2e", + "color-bg-tertiary": "#232330", + "color-bg-elevated": "#282839", + "color-bg-hover": "#343446", + "color-bg-active": "#3d3d5c", + "color-bg-overlay": "rgba(22, 21, 29, 0.95)", + + "color-text-primary": "#e4e4ef", + "color-text-secondary": "#c4c2d0", + "color-text-tertiary": "#9999b3", + "color-text-muted": "#71718a", + "color-text-disabled": "#636074", + + "color-border-primary": "#313146", + "color-border-secondary": "#252532", + "color-border-hover": "#404060", + "color-border-focus": "#4a4a6a", + + "color-accent-primary": "#6C63FF", + "color-accent-secondary": "#7c6aef", + "color-accent-hover": "#8a83ff", + "color-accent-light": "rgba(108, 99, 255, 0.15)", + + "color-success": "#6aef8a", + "color-warning": "#f0b866", + "color-danger": "#ef6a6a", + "color-info": "#6ac0ef", + + "color-bookmark-active": "#FFD700", + "color-download-badge": "#ff6b6b", + "color-link": "#8a9eff", + + "toolbar-bg": "linear-gradient(0deg, #232330, #282836)", + "toolbar-border": "#252532", + "toolbar-icon-color": "rgba(200, 200, 200, 1.0)", + + "address-bg": "#16151d", + "address-text": "#c4c2d0", + + "tab-bg": "#1e1e28", + "tab-active-bg": "#282836", + "tab-text": "#b0afc0", + + "menu-bg": "#2b2b38", + "menu-border": "#313146", + "menu-item-hover": "#343446", + "menu-text": "#e2e1ea", + + "card-bg": "#282839", + "card-border": "#404060", + + "btn-primary-bg": "#6C63FF", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "rgba(255, 255, 255, 0.1)", + "btn-danger-bg": "#ef6a6a", + + "input-bg": "#32324a", + "input-border": "#404060", + "input-text": "#e4e4ef", + + "scrollbar-track": "#1e1e2e", + "scrollbar-thumb": "#3d3d5c", + + "tooltip-bg": "rgba(43, 43, 56, 0.95)", + "tooltip-text": "#f0f0ff", + + "bookmark-bar-bg": "rgba(29, 29, 33, 0.92)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.08)" + } +} diff --git a/assets/themes/light.json b/assets/themes/light.json new file mode 100644 index 0000000..8695698 --- /dev/null +++ b/assets/themes/light.json @@ -0,0 +1,79 @@ +{ + "id": "light", + "name": "Light", + "description": "Clean light theme for daytime use", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#ffffff", + "color-bg-secondary": "#f6f8fa", + "color-bg-tertiary": "#eaeef2", + "color-bg-elevated": "#ffffff", + "color-bg-hover": "#e8ebef", + "color-bg-active": "#dce0e4", + "color-bg-overlay": "rgba(255, 255, 255, 0.95)", + + "color-text-primary": "#1f2328", + "color-text-secondary": "#424a53", + "color-text-tertiary": "#656d76", + "color-text-muted": "#8c959f", + "color-text-disabled": "#b0b8c0", + + "color-border-primary": "#d0d7de", + "color-border-secondary": "#e1e4e8", + "color-border-hover": "#c0c8d0", + "color-border-focus": "#0969da", + + "color-accent-primary": "#0969da", + "color-accent-secondary": "#218bff", + "color-accent-hover": "#54aeff", + "color-accent-light": "rgba(9, 105, 218, 0.1)", + + "color-success": "#1a7f37", + "color-warning": "#9a6700", + "color-danger": "#cf222e", + "color-info": "#0969da", + + "color-bookmark-active": "#e3a608", + "color-download-badge": "#cf222e", + "color-link": "#0969da", + + "toolbar-bg": "linear-gradient(0deg, #f6f8fa, #ffffff)", + "toolbar-border": "#d0d7de", + "toolbar-icon-color": "#424a53", + + "address-bg": "#ffffff", + "address-text": "#1f2328", + + "tab-bg": "#f6f8fa", + "tab-active-bg": "#ffffff", + "tab-text": "#424a53", + + "menu-bg": "#ffffff", + "menu-border": "#d0d7de", + "menu-item-hover": "#f6f8fa", + "menu-text": "#1f2328", + + "card-bg": "#ffffff", + "card-border": "#d0d7de", + + "btn-primary-bg": "#0969da", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "#f6f8fa", + "btn-danger-bg": "#cf222e", + + "input-bg": "#ffffff", + "input-border": "#d0d7de", + "input-text": "#1f2328", + + "scrollbar-track": "#f6f8fa", + "scrollbar-thumb": "#c0c8d0", + + "tooltip-bg": "rgba(36, 41, 47, 0.95)", + "tooltip-text": "#ffffff", + + "bookmark-bar-bg": "rgba(246, 248, 250, 0.95)", + "bookmark-item-bg": "rgba(0, 0, 0, 0.04)" + } +} diff --git a/assets/themes/midnight.json b/assets/themes/midnight.json new file mode 100644 index 0000000..08f0927 --- /dev/null +++ b/assets/themes/midnight.json @@ -0,0 +1,79 @@ +{ + "id": "midnight", + "name": "Midnight Blue", + "description": "Deep blue night theme inspired by GitHub's dark mode", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#0d1117", + "color-bg-secondary": "#161b22", + "color-bg-tertiary": "#21262d", + "color-bg-elevated": "#30363d", + "color-bg-hover": "#3d444d", + "color-bg-active": "#484f58", + "color-bg-overlay": "rgba(13, 17, 23, 0.95)", + + "color-text-primary": "#e6edf3", + "color-text-secondary": "#c9d1d9", + "color-text-tertiary": "#8b949e", + "color-text-muted": "#6e7681", + "color-text-disabled": "#484f58", + + "color-border-primary": "#30363d", + "color-border-secondary": "#21262d", + "color-border-hover": "#484f58", + "color-border-focus": "#58a6ff", + + "color-accent-primary": "#58a6ff", + "color-accent-secondary": "#79c0ff", + "color-accent-hover": "#a5d6ff", + "color-accent-light": "rgba(88, 166, 255, 0.15)", + + "color-success": "#3fb950", + "color-warning": "#d29922", + "color-danger": "#f85149", + "color-info": "#58a6ff", + + "color-bookmark-active": "#d29922", + "color-download-badge": "#f85149", + "color-link": "#58a6ff", + + "toolbar-bg": "linear-gradient(0deg, #161b22, #21262d)", + "toolbar-border": "#30363d", + "toolbar-icon-color": "#c9d1d9", + + "address-bg": "#0d1117", + "address-text": "#c9d1d9", + + "tab-bg": "#161b22", + "tab-active-bg": "#21262d", + "tab-text": "#8b949e", + + "menu-bg": "#21262d", + "menu-border": "#30363d", + "menu-item-hover": "#30363d", + "menu-text": "#e6edf3", + + "card-bg": "#21262d", + "card-border": "#30363d", + + "btn-primary-bg": "#238636", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "#21262d", + "btn-danger-bg": "#da3633", + + "input-bg": "#0d1117", + "input-border": "#30363d", + "input-text": "#e6edf3", + + "scrollbar-track": "#161b22", + "scrollbar-thumb": "#30363d", + + "tooltip-bg": "rgba(33, 38, 45, 0.95)", + "tooltip-text": "#e6edf3", + + "bookmark-bar-bg": "rgba(22, 27, 34, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/monokai.json b/assets/themes/monokai.json new file mode 100644 index 0000000..dd5fb65 --- /dev/null +++ b/assets/themes/monokai.json @@ -0,0 +1,79 @@ +{ + "id": "monokai", + "name": "Monokai Pro", + "description": "Classic Monokai color scheme popular with developers", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#2d2a2e", + "color-bg-secondary": "#353236", + "color-bg-tertiary": "#403e41", + "color-bg-elevated": "#4a474c", + "color-bg-hover": "#555158", + "color-bg-active": "#615d63", + "color-bg-overlay": "rgba(45, 42, 46, 0.95)", + + "color-text-primary": "#fcfcfa", + "color-text-secondary": "#c1c0c0", + "color-text-tertiary": "#939293", + "color-text-muted": "#727072", + "color-text-disabled": "#5b595c", + + "color-border-primary": "#4a474c", + "color-border-secondary": "#353236", + "color-border-hover": "#555158", + "color-border-focus": "#ffd866", + + "color-accent-primary": "#ffd866", + "color-accent-secondary": "#ff6188", + "color-accent-hover": "#a9dc76", + "color-accent-light": "rgba(255, 216, 102, 0.15)", + + "color-success": "#a9dc76", + "color-warning": "#ffd866", + "color-danger": "#ff6188", + "color-info": "#78dce8", + + "color-bookmark-active": "#ffd866", + "color-download-badge": "#ff6188", + "color-link": "#78dce8", + + "toolbar-bg": "linear-gradient(0deg, #2d2a2e, #353236)", + "toolbar-border": "#4a474c", + "toolbar-icon-color": "#c1c0c0", + + "address-bg": "#2d2a2e", + "address-text": "#fcfcfa", + + "tab-bg": "#353236", + "tab-active-bg": "#403e41", + "tab-text": "#939293", + + "menu-bg": "#353236", + "menu-border": "#4a474c", + "menu-item-hover": "#403e41", + "menu-text": "#fcfcfa", + + "card-bg": "#353236", + "card-border": "#4a474c", + + "btn-primary-bg": "#a9dc76", + "btn-primary-text": "#2d2a2e", + "btn-secondary-bg": "#403e41", + "btn-danger-bg": "#ff6188", + + "input-bg": "#2d2a2e", + "input-border": "#4a474c", + "input-text": "#fcfcfa", + + "scrollbar-track": "#353236", + "scrollbar-thumb": "#4a474c", + + "tooltip-bg": "rgba(53, 50, 54, 0.95)", + "tooltip-text": "#fcfcfa", + + "bookmark-bar-bg": "rgba(53, 50, 54, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/nord.json b/assets/themes/nord.json new file mode 100644 index 0000000..0b54820 --- /dev/null +++ b/assets/themes/nord.json @@ -0,0 +1,79 @@ +{ + "id": "nord", + "name": "Nord", + "description": "Arctic, north-bluish color palette inspired by the aurora borealis", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#2e3440", + "color-bg-secondary": "#3b4252", + "color-bg-tertiary": "#434c5e", + "color-bg-elevated": "#4c566a", + "color-bg-hover": "#5e6779", + "color-bg-active": "#6e7a8a", + "color-bg-overlay": "rgba(46, 52, 64, 0.95)", + + "color-text-primary": "#eceff4", + "color-text-secondary": "#e5e9f0", + "color-text-tertiary": "#d8dee9", + "color-text-muted": "#a5adba", + "color-text-disabled": "#7b8392", + + "color-border-primary": "#4c566a", + "color-border-secondary": "#3b4252", + "color-border-hover": "#5e6779", + "color-border-focus": "#88c0d0", + + "color-accent-primary": "#88c0d0", + "color-accent-secondary": "#81a1c1", + "color-accent-hover": "#5e81ac", + "color-accent-light": "rgba(136, 192, 208, 0.15)", + + "color-success": "#a3be8c", + "color-warning": "#ebcb8b", + "color-danger": "#bf616a", + "color-info": "#88c0d0", + + "color-bookmark-active": "#ebcb8b", + "color-download-badge": "#bf616a", + "color-link": "#88c0d0", + + "toolbar-bg": "linear-gradient(0deg, #3b4252, #434c5e)", + "toolbar-border": "#4c566a", + "toolbar-icon-color": "#d8dee9", + + "address-bg": "#2e3440", + "address-text": "#e5e9f0", + + "tab-bg": "#3b4252", + "tab-active-bg": "#434c5e", + "tab-text": "#d8dee9", + + "menu-bg": "#3b4252", + "menu-border": "#4c566a", + "menu-item-hover": "#434c5e", + "menu-text": "#eceff4", + + "card-bg": "#3b4252", + "card-border": "#4c566a", + + "btn-primary-bg": "#5e81ac", + "btn-primary-text": "#eceff4", + "btn-secondary-bg": "#434c5e", + "btn-danger-bg": "#bf616a", + + "input-bg": "#2e3440", + "input-border": "#4c566a", + "input-text": "#eceff4", + + "scrollbar-track": "#3b4252", + "scrollbar-thumb": "#4c566a", + + "tooltip-bg": "rgba(59, 66, 82, 0.95)", + "tooltip-text": "#eceff4", + + "bookmark-bar-bg": "rgba(59, 66, 82, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/theme-variables.css b/assets/themes/theme-variables.css new file mode 100644 index 0000000..aa2cf75 --- /dev/null +++ b/assets/themes/theme-variables.css @@ -0,0 +1,254 @@ +/** + * Theme Variables CSS + * ================== + * Central theme system for Ultralight WebBrowser + * All color and style definitions are centralized here. + * + * Usage: Include this file in any HTML page to apply theming. + * Themes override these variables via JavaScript. + */ + +:root { + /* ============================================================ + * COLOR PALETTE - Primary Colors + * ============================================================ */ + + /* Background Colors */ + --color-bg-primary: #16151d; + --color-bg-secondary: #1e1e2e; + --color-bg-tertiary: #232330; + --color-bg-elevated: #282839; + --color-bg-hover: #343446; + --color-bg-active: #3d3d5c; + --color-bg-overlay: rgba(22, 21, 29, 0.95); + + /* Text Colors */ + --color-text-primary: #e4e4ef; + --color-text-secondary: #c4c2d0; + --color-text-tertiary: #9999b3; + --color-text-muted: #71718a; + --color-text-disabled: #636074; + + /* Border Colors */ + --color-border-primary: #313146; + --color-border-secondary: #252532; + --color-border-hover: #404060; + --color-border-focus: #4a4a6a; + + /* Accent Colors */ + --color-accent-primary: #6C63FF; + --color-accent-secondary: #7c6aef; + --color-accent-hover: #8a83ff; + --color-accent-light: rgba(108, 99, 255, 0.15); + + /* Status Colors */ + --color-success: #6aef8a; + --color-success-bg: rgba(106, 239, 138, 0.15); + --color-warning: #f0b866; + --color-warning-bg: rgba(240, 184, 102, 0.15); + --color-danger: #ef6a6a; + --color-danger-bg: rgba(239, 106, 106, 0.15); + --color-info: #6ac0ef; + --color-info-bg: rgba(106, 192, 239, 0.15); + + /* Special Colors */ + --color-bookmark-active: #FFD700; + --color-bookmark-hover: #ffe44d; + --color-download-badge: #ff6b6b; + --color-link: #8a9eff; + --color-link-hover: #aab8ff; + + /* ============================================================ + * COMPONENT COLORS - Toolbar + * ============================================================ */ + --toolbar-bg: linear-gradient(0deg, #232330, #282836); + --toolbar-border: #252532; + --toolbar-icon-color: #c8c8c8; + --toolbar-icon-hover: #ffffff; + --toolbar-icon-active: #6C63FF; + --toolbar-icon-disabled: rgb(99, 96, 116); + --toolbar-icon-hover-bg: #343446; + + /* ============================================================ + * COMPONENT COLORS - Address Bar + * ============================================================ */ + --address-bg: #16151d; + --address-text: #c4c2d0; + --address-focus-text: #ffffff; + --address-focus-ring: #343446; + + /* ============================================================ + * COMPONENT COLORS - Tabs + * ============================================================ */ + --tab-bg: #1e1e28; + --tab-active-bg: #282836; + --tab-hover-bg: #252532; + --tab-text: #b0afc0; + --tab-active-text: #e0dff0; + --tab-close-hover: rgba(255, 255, 255, 0.1); + + /* ============================================================ + * COMPONENT COLORS - Menu/Dropdown + * ============================================================ */ + --menu-bg: #2b2b38; + --menu-border: #313146; + --menu-item-hover: #343446; + --menu-text: #e2e1ea; + --menu-separator: #3a3a4e; + --menu-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); + + /* ============================================================ + * COMPONENT COLORS - Cards & Panels + * ============================================================ */ + --card-bg: #282839; + --card-border: #404060; + --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + --panel-bg: #1e1e2e; + + /* ============================================================ + * COMPONENT COLORS - Buttons + * ============================================================ */ + --btn-primary-bg: #6C63FF; + --btn-primary-hover: #7a72ff; + --btn-primary-text: #ffffff; + --btn-secondary-bg: rgba(255, 255, 255, 0.1); + --btn-secondary-hover: rgba(255, 255, 255, 0.15); + --btn-secondary-text: #c0d0e0; + --btn-secondary-border: rgba(255, 255, 255, 0.2); + --btn-danger-bg: #ef6a6a; + --btn-danger-hover: #f58080; + --btn-danger-text: #ffffff; + + /* ============================================================ + * COMPONENT COLORS - Inputs + * ============================================================ */ + --input-bg: #32324a; + --input-border: #404060; + --input-text: #e4e4ef; + --input-placeholder: #9999b3; + --input-focus-border: #6C63FF; + --input-focus-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); + + /* ============================================================ + * COMPONENT COLORS - Scrollbar + * ============================================================ */ + --scrollbar-track: #1e1e2e; + --scrollbar-thumb: #3d3d5c; + --scrollbar-thumb-hover: #4d4d6c; + + /* ============================================================ + * COMPONENT COLORS - Tooltip + * ============================================================ */ + --tooltip-bg: rgba(43, 43, 56, 0.95); + --tooltip-text: #f0f0ff; + --tooltip-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); + + /* ============================================================ + * COMPONENT COLORS - Bookmark Bar + * ============================================================ */ + --bookmark-bar-bg: rgba(29, 29, 33, 0.92); + --bookmark-bar-border: rgba(255, 255, 255, 0.06); + --bookmark-item-bg: rgba(255, 255, 255, 0.08); + --bookmark-item-hover: rgba(255, 255, 255, 0.14); + --bookmark-item-text: #e0dff0; + + /* ============================================================ + * COMPONENT COLORS - Session Restore + * ============================================================ */ + --session-restore-bg: linear-gradient(180deg, #2d4a6f 0%, #1e3a5f 100%); + --session-restore-border: #3d6a9f; + --session-restore-text: #e0e8f0; + --session-restore-icon: #7cb3e0; + + /* ============================================================ + * SPACING & SIZING + * ============================================================ */ + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 12px; + --spacing-lg: 16px; + --spacing-xl: 24px; + --spacing-xxl: 32px; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-pill: 9999px; + + /* ============================================================ + * TYPOGRAPHY + * ============================================================ */ + --font-family-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, Roboto, Arial, sans-serif; + --font-family-mono: "Consolas", "Courier New", monospace; + + --font-size-xs: 10px; + --font-size-sm: 12px; + --font-size-md: 14px; + --font-size-lg: 16px; + --font-size-xl: 20px; + --font-size-xxl: 24px; + + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* ============================================================ + * TRANSITIONS + * ============================================================ */ + --transition-fast: 0.075s ease; + --transition-normal: 0.15s ease; + --transition-slow: 0.3s ease; + + /* ============================================================ + * Z-INDEX LAYERS + * ============================================================ */ + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; + --z-toast: 12000; +} + +/* ============================================================ + * SCROLLBAR STYLING + * ============================================================ */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: var(--radius-sm); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); +} + +/* ============================================================ + * COMMON UTILITY CLASSES + * ============================================================ */ +.theme-fade-in { + animation: theme_fade_in 0.3s ease forwards; +} + +@keyframes theme_fade_in { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Selection styling */ +::selection { + background: var(--color-accent-light); + color: var(--color-text-primary); +} diff --git a/assets/themes/theme.js b/assets/themes/theme.js new file mode 100644 index 0000000..87a0639 --- /dev/null +++ b/assets/themes/theme.js @@ -0,0 +1,1212 @@ +/** + * Theme Manager JavaScript + * ======================== + * Handles theme loading, applying, and management for Ultralight WebBrowser + */ + +(function() { + 'use strict'; + + // Theme storage key + const THEME_STORAGE_KEY = 'ultralight_active_theme'; + const CUSTOM_THEMES_KEY = 'ultralight_custom_themes'; + + // Default themes that ship with the browser + // Note: Organized with more dark themes as they are more popular + const DEFAULT_THEMES = { + // ================================================================= + // DARK THEMES + // ================================================================= + 'dark': { + id: 'dark', + name: 'Dark (Default)', + description: 'The default dark purple theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + // Background Colors + 'color-bg-primary': '#16151d', + 'color-bg-secondary': '#1e1e2e', + 'color-bg-tertiary': '#232330', + 'color-bg-elevated': '#282839', + 'color-bg-hover': '#343446', + 'color-bg-active': '#3d3d5c', + 'color-bg-overlay': 'rgba(22, 21, 29, 0.95)', + + // Text Colors + 'color-text-primary': '#e4e4ef', + 'color-text-secondary': '#c4c2d0', + 'color-text-tertiary': '#9999b3', + 'color-text-muted': '#71718a', + + // Border Colors + 'color-border-primary': '#313146', + 'color-border-secondary': '#252532', + + // Accent Colors + 'color-accent-primary': '#6C63FF', + 'color-accent-secondary': '#7c6aef', + 'color-accent-hover': '#8a83ff', + + // Status Colors + 'color-success': '#6aef8a', + 'color-warning': '#f0b866', + 'color-danger': '#ef6a6a', + 'color-info': '#6ac0ef', + + // Navbar/Toolbar + 'toolbar-bg': 'linear-gradient(0deg, #232330, #282836)', + 'toolbar-icon-color': '#c8c8c8', + 'toolbar-icon-hover': '#ffffff', + 'toolbar-icon-active': '#6C63FF', + + // Tabs + 'tab-bg': '#1e1e28', + 'tab-active-bg': '#282836', + 'tab-hover-bg': '#252532', + 'tab-text': '#b0afc0', + 'tab-active-text': '#e0dff0', + + // Menu & Cards + 'menu-bg': '#2b2b38', + 'card-bg': '#282839', + + // Inputs + 'input-bg': '#32324a', + 'input-border': '#404060', + + // Scrollbar + 'scrollbar-track': '#1e1e2e', + 'scrollbar-thumb': '#3d3d5c', + + // Radius (in pixels) + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'midnight': { + id: 'midnight', + name: 'Midnight Blue', + description: 'Deep blue night theme inspired by GitHub Dark', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0d1117', + 'color-bg-secondary': '#161b22', + 'color-bg-tertiary': '#21262d', + 'color-bg-elevated': '#30363d', + 'color-bg-hover': '#3d444d', + 'color-bg-active': '#484f58', + 'color-bg-overlay': 'rgba(13, 17, 23, 0.95)', + + 'color-text-primary': '#e6edf3', + 'color-text-secondary': '#c9d1d9', + 'color-text-tertiary': '#8b949e', + 'color-text-muted': '#6e7681', + + 'color-border-primary': '#30363d', + 'color-border-secondary': '#21262d', + + 'color-accent-primary': '#58a6ff', + 'color-accent-secondary': '#79c0ff', + 'color-accent-hover': '#a5d6ff', + + 'color-success': '#3fb950', + 'color-warning': '#d29922', + 'color-danger': '#f85149', + 'color-info': '#58a6ff', + + 'toolbar-bg': 'linear-gradient(0deg, #161b22, #21262d)', + 'toolbar-icon-color': '#8b949e', + 'toolbar-icon-hover': '#e6edf3', + 'toolbar-icon-active': '#58a6ff', + + 'tab-bg': '#0d1117', + 'tab-active-bg': '#21262d', + 'tab-hover-bg': '#161b22', + 'tab-text': '#8b949e', + 'tab-active-text': '#e6edf3', + + 'menu-bg': '#21262d', + 'card-bg': '#21262d', + + 'input-bg': '#0d1117', + 'input-border': '#30363d', + + 'scrollbar-track': '#0d1117', + 'scrollbar-thumb': '#30363d', + + 'radius-sm': '6', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'dracula': { + id: 'dracula', + name: 'Dracula', + description: 'A dark theme with vibrant colors', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282a36', + 'color-bg-secondary': '#21222c', + 'color-bg-tertiary': '#343746', + 'color-bg-elevated': '#3d3f4d', + 'color-bg-hover': '#44475a', + 'color-bg-active': '#4d4f5e', + 'color-bg-overlay': 'rgba(40, 42, 54, 0.95)', + + 'color-text-primary': '#f8f8f2', + 'color-text-secondary': '#d4d4d4', + 'color-text-tertiary': '#a9a9b3', + 'color-text-muted': '#6272a4', + + 'color-border-primary': '#44475a', + 'color-border-secondary': '#343746', + + 'color-accent-primary': '#bd93f9', + 'color-accent-secondary': '#ff79c6', + 'color-accent-hover': '#caa7fa', + + 'color-success': '#50fa7b', + 'color-warning': '#f1fa8c', + 'color-danger': '#ff5555', + 'color-info': '#8be9fd', + + 'toolbar-bg': 'linear-gradient(0deg, #21222c, #282a36)', + 'toolbar-icon-color': '#f8f8f2', + 'toolbar-icon-hover': '#bd93f9', + 'toolbar-icon-active': '#ff79c6', + + 'tab-bg': '#21222c', + 'tab-active-bg': '#343746', + 'tab-hover-bg': '#282a36', + 'tab-text': '#6272a4', + 'tab-active-text': '#f8f8f2', + + 'menu-bg': '#282a36', + 'card-bg': '#343746', + + 'input-bg': '#21222c', + 'input-border': '#44475a', + + 'scrollbar-track': '#21222c', + 'scrollbar-thumb': '#44475a', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'onedark': { + id: 'onedark', + name: 'One Dark', + description: 'Atom One Dark inspired theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282c34', + 'color-bg-secondary': '#21252b', + 'color-bg-tertiary': '#2c323c', + 'color-bg-elevated': '#353b45', + 'color-bg-hover': '#3e4451', + 'color-bg-active': '#4d5566', + 'color-bg-overlay': 'rgba(40, 44, 52, 0.95)', + + 'color-text-primary': '#abb2bf', + 'color-text-secondary': '#9da5b4', + 'color-text-tertiary': '#7f848e', + 'color-text-muted': '#5c6370', + + 'color-border-primary': '#3e4451', + 'color-border-secondary': '#2c323c', + + 'color-accent-primary': '#61afef', + 'color-accent-secondary': '#c678dd', + 'color-accent-hover': '#7ec8f3', + + 'color-success': '#98c379', + 'color-warning': '#e5c07b', + 'color-danger': '#e06c75', + 'color-info': '#61afef', + + 'toolbar-bg': 'linear-gradient(0deg, #21252b, #282c34)', + 'toolbar-icon-color': '#9da5b4', + 'toolbar-icon-hover': '#abb2bf', + 'toolbar-icon-active': '#61afef', + + 'tab-bg': '#21252b', + 'tab-active-bg': '#282c34', + 'tab-hover-bg': '#2c323c', + 'tab-text': '#5c6370', + 'tab-active-text': '#abb2bf', + + 'menu-bg': '#2c323c', + 'card-bg': '#2c323c', + + 'input-bg': '#21252b', + 'input-border': '#3e4451', + + 'scrollbar-track': '#21252b', + 'scrollbar-thumb': '#3e4451', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '10' + } + }, + 'gruvbox': { + id: 'gruvbox', + name: 'Gruvbox Dark', + description: 'Retro groove color scheme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282828', + 'color-bg-secondary': '#1d2021', + 'color-bg-tertiary': '#32302f', + 'color-bg-elevated': '#3c3836', + 'color-bg-hover': '#504945', + 'color-bg-active': '#665c54', + 'color-bg-overlay': 'rgba(40, 40, 40, 0.95)', + + 'color-text-primary': '#ebdbb2', + 'color-text-secondary': '#d5c4a1', + 'color-text-tertiary': '#bdae93', + 'color-text-muted': '#928374', + + 'color-border-primary': '#504945', + 'color-border-secondary': '#3c3836', + + 'color-accent-primary': '#fe8019', + 'color-accent-secondary': '#fabd2f', + 'color-accent-hover': '#ff9633', + + 'color-success': '#b8bb26', + 'color-warning': '#fabd2f', + 'color-danger': '#fb4934', + 'color-info': '#83a598', + + 'toolbar-bg': 'linear-gradient(0deg, #1d2021, #282828)', + 'toolbar-icon-color': '#d5c4a1', + 'toolbar-icon-hover': '#ebdbb2', + 'toolbar-icon-active': '#fe8019', + + 'tab-bg': '#1d2021', + 'tab-active-bg': '#32302f', + 'tab-hover-bg': '#282828', + 'tab-text': '#928374', + 'tab-active-text': '#ebdbb2', + + 'menu-bg': '#32302f', + 'card-bg': '#3c3836', + + 'input-bg': '#1d2021', + 'input-border': '#504945', + + 'scrollbar-track': '#1d2021', + 'scrollbar-thumb': '#504945', + + 'radius-sm': '2', + 'radius-md': '4', + 'radius-lg': '8' + } + }, + 'catppuccin': { + id: 'catppuccin', + name: 'Catppuccin Mocha', + description: 'Soothing pastel theme for the high-spirited', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#1e1e2e', + 'color-bg-secondary': '#181825', + 'color-bg-tertiary': '#313244', + 'color-bg-elevated': '#45475a', + 'color-bg-hover': '#585b70', + 'color-bg-active': '#6c7086', + 'color-bg-overlay': 'rgba(30, 30, 46, 0.95)', + + 'color-text-primary': '#cdd6f4', + 'color-text-secondary': '#bac2de', + 'color-text-tertiary': '#a6adc8', + 'color-text-muted': '#6c7086', + + 'color-border-primary': '#45475a', + 'color-border-secondary': '#313244', + + 'color-accent-primary': '#cba6f7', + 'color-accent-secondary': '#f5c2e7', + 'color-accent-hover': '#dbb9f9', + + 'color-success': '#a6e3a1', + 'color-warning': '#f9e2af', + 'color-danger': '#f38ba8', + 'color-info': '#89dceb', + + 'toolbar-bg': 'linear-gradient(0deg, #181825, #1e1e2e)', + 'toolbar-icon-color': '#bac2de', + 'toolbar-icon-hover': '#cdd6f4', + 'toolbar-icon-active': '#cba6f7', + + 'tab-bg': '#181825', + 'tab-active-bg': '#313244', + 'tab-hover-bg': '#1e1e2e', + 'tab-text': '#6c7086', + 'tab-active-text': '#cdd6f4', + + 'menu-bg': '#313244', + 'card-bg': '#313244', + + 'input-bg': '#181825', + 'input-border': '#45475a', + + 'scrollbar-track': '#181825', + 'scrollbar-thumb': '#45475a', + + 'radius-sm': '6', + 'radius-md': '10', + 'radius-lg': '14' + } + }, + 'tokyo-night': { + id: 'tokyo-night', + name: 'Tokyo Night', + description: 'A clean dark theme celebrating the lights of Tokyo', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#1a1b26', + 'color-bg-secondary': '#16161e', + 'color-bg-tertiary': '#24283b', + 'color-bg-elevated': '#292e42', + 'color-bg-hover': '#343b58', + 'color-bg-active': '#414868', + 'color-bg-overlay': 'rgba(26, 27, 38, 0.95)', + + 'color-text-primary': '#c0caf5', + 'color-text-secondary': '#a9b1d6', + 'color-text-tertiary': '#9aa5ce', + 'color-text-muted': '#565f89', + + 'color-border-primary': '#343b58', + 'color-border-secondary': '#24283b', + + 'color-accent-primary': '#7aa2f7', + 'color-accent-secondary': '#bb9af7', + 'color-accent-hover': '#9bb5f9', + + 'color-success': '#9ece6a', + 'color-warning': '#e0af68', + 'color-danger': '#f7768e', + 'color-info': '#7dcfff', + + 'toolbar-bg': 'linear-gradient(0deg, #16161e, #1a1b26)', + 'toolbar-icon-color': '#a9b1d6', + 'toolbar-icon-hover': '#c0caf5', + 'toolbar-icon-active': '#7aa2f7', + + 'tab-bg': '#16161e', + 'tab-active-bg': '#24283b', + 'tab-hover-bg': '#1a1b26', + 'tab-text': '#565f89', + 'tab-active-text': '#c0caf5', + + 'menu-bg': '#24283b', + 'card-bg': '#24283b', + + 'input-bg': '#16161e', + 'input-border': '#343b58', + + 'scrollbar-track': '#16161e', + 'scrollbar-thumb': '#343b58', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'ayu-dark': { + id: 'ayu-dark', + name: 'Ayu Dark', + description: 'Modern and minimal dark theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0d1017', + 'color-bg-secondary': '#0a0e14', + 'color-bg-tertiary': '#131721', + 'color-bg-elevated': '#1a1f29', + 'color-bg-hover': '#242936', + 'color-bg-active': '#2d3340', + 'color-bg-overlay': 'rgba(13, 16, 23, 0.95)', + + 'color-text-primary': '#bfbdb6', + 'color-text-secondary': '#a09d96', + 'color-text-tertiary': '#73726e', + 'color-text-muted': '#565451', + + 'color-border-primary': '#1a1f29', + 'color-border-secondary': '#131721', + + 'color-accent-primary': '#ffb454', + 'color-accent-secondary': '#e6b450', + 'color-accent-hover': '#ffcc7d', + + 'color-success': '#aad94c', + 'color-warning': '#ffb454', + 'color-danger': '#f07178', + 'color-info': '#39bae6', + + 'toolbar-bg': 'linear-gradient(0deg, #0a0e14, #0d1017)', + 'toolbar-icon-color': '#a09d96', + 'toolbar-icon-hover': '#bfbdb6', + 'toolbar-icon-active': '#ffb454', + + 'tab-bg': '#0a0e14', + 'tab-active-bg': '#131721', + 'tab-hover-bg': '#0d1017', + 'tab-text': '#565451', + 'tab-active-text': '#bfbdb6', + + 'menu-bg': '#131721', + 'card-bg': '#1a1f29', + + 'input-bg': '#0a0e14', + 'input-border': '#1a1f29', + + 'scrollbar-track': '#0a0e14', + 'scrollbar-thumb': '#1a1f29', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '10' + } + }, + 'solarized-dark': { + id: 'solarized-dark', + name: 'Solarized Dark', + description: 'Precision color scheme for professionals', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#002b36', + 'color-bg-secondary': '#001e26', + 'color-bg-tertiary': '#073642', + 'color-bg-elevated': '#0a4352', + 'color-bg-hover': '#0d5564', + 'color-bg-active': '#106878', + 'color-bg-overlay': 'rgba(0, 43, 54, 0.95)', + + 'color-text-primary': '#93a1a1', + 'color-text-secondary': '#839496', + 'color-text-tertiary': '#657b83', + 'color-text-muted': '#586e75', + + 'color-border-primary': '#073642', + 'color-border-secondary': '#002b36', + + 'color-accent-primary': '#2aa198', + 'color-accent-secondary': '#268bd2', + 'color-accent-hover': '#45b6ad', + + 'color-success': '#859900', + 'color-warning': '#b58900', + 'color-danger': '#dc322f', + 'color-info': '#268bd2', + + 'toolbar-bg': 'linear-gradient(0deg, #001e26, #002b36)', + 'toolbar-icon-color': '#839496', + 'toolbar-icon-hover': '#93a1a1', + 'toolbar-icon-active': '#2aa198', + + 'tab-bg': '#001e26', + 'tab-active-bg': '#073642', + 'tab-hover-bg': '#002b36', + 'tab-text': '#586e75', + 'tab-active-text': '#93a1a1', + + 'menu-bg': '#073642', + 'card-bg': '#073642', + + 'input-bg': '#001e26', + 'input-border': '#073642', + + 'scrollbar-track': '#001e26', + 'scrollbar-thumb': '#073642', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '8' + } + }, + 'material-dark': { + id: 'material-dark', + name: 'Material Dark', + description: 'Material Design inspired dark theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#212121', + 'color-bg-secondary': '#1a1a1a', + 'color-bg-tertiary': '#2d2d2d', + 'color-bg-elevated': '#383838', + 'color-bg-hover': '#404040', + 'color-bg-active': '#4a4a4a', + 'color-bg-overlay': 'rgba(33, 33, 33, 0.95)', + + 'color-text-primary': '#eeffff', + 'color-text-secondary': '#b2ccd6', + 'color-text-tertiary': '#89a0a8', + 'color-text-muted': '#546e7a', + + 'color-border-primary': '#383838', + 'color-border-secondary': '#2d2d2d', + + 'color-accent-primary': '#82aaff', + 'color-accent-secondary': '#c792ea', + 'color-accent-hover': '#9dc3ff', + + 'color-success': '#c3e88d', + 'color-warning': '#ffcb6b', + 'color-danger': '#f07178', + 'color-info': '#89ddff', + + 'toolbar-bg': 'linear-gradient(0deg, #1a1a1a, #212121)', + 'toolbar-icon-color': '#b2ccd6', + 'toolbar-icon-hover': '#eeffff', + 'toolbar-icon-active': '#82aaff', + + 'tab-bg': '#1a1a1a', + 'tab-active-bg': '#2d2d2d', + 'tab-hover-bg': '#212121', + 'tab-text': '#546e7a', + 'tab-active-text': '#eeffff', + + 'menu-bg': '#2d2d2d', + 'card-bg': '#2d2d2d', + + 'input-bg': '#1a1a1a', + 'input-border': '#383838', + + 'scrollbar-track': '#1a1a1a', + 'scrollbar-thumb': '#383838', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'nord': { + id: 'nord', + name: 'Nord', + description: 'Arctic, north-bluish color palette', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#2e3440', + 'color-bg-secondary': '#272c36', + 'color-bg-tertiary': '#3b4252', + 'color-bg-elevated': '#434c5e', + 'color-bg-hover': '#4c566a', + 'color-bg-active': '#5e6779', + 'color-bg-overlay': 'rgba(46, 52, 64, 0.95)', + + 'color-text-primary': '#eceff4', + 'color-text-secondary': '#e5e9f0', + 'color-text-tertiary': '#d8dee9', + 'color-text-muted': '#a5adba', + + 'color-border-primary': '#4c566a', + 'color-border-secondary': '#3b4252', + + 'color-accent-primary': '#88c0d0', + 'color-accent-secondary': '#81a1c1', + 'color-accent-hover': '#8fbcbb', + + 'color-success': '#a3be8c', + 'color-warning': '#ebcb8b', + 'color-danger': '#bf616a', + 'color-info': '#5e81ac', + + 'toolbar-bg': 'linear-gradient(0deg, #272c36, #2e3440)', + 'toolbar-icon-color': '#d8dee9', + 'toolbar-icon-hover': '#eceff4', + 'toolbar-icon-active': '#88c0d0', + + 'tab-bg': '#272c36', + 'tab-active-bg': '#3b4252', + 'tab-hover-bg': '#2e3440', + 'tab-text': '#a5adba', + 'tab-active-text': '#eceff4', + + 'menu-bg': '#3b4252', + 'card-bg': '#3b4252', + + 'input-bg': '#272c36', + 'input-border': '#4c566a', + + 'scrollbar-track': '#272c36', + 'scrollbar-thumb': '#4c566a', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'monokai': { + id: 'monokai', + name: 'Monokai Pro', + description: 'Classic Monokai color scheme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#2d2a2e', + 'color-bg-secondary': '#221f22', + 'color-bg-tertiary': '#353236', + 'color-bg-elevated': '#403e41', + 'color-bg-hover': '#4a474c', + 'color-bg-active': '#555158', + 'color-bg-overlay': 'rgba(45, 42, 46, 0.95)', + + 'color-text-primary': '#fcfcfa', + 'color-text-secondary': '#c1c0c0', + 'color-text-tertiary': '#939293', + 'color-text-muted': '#727072', + + 'color-border-primary': '#4a474c', + 'color-border-secondary': '#353236', + + 'color-accent-primary': '#ffd866', + 'color-accent-secondary': '#ff6188', + 'color-accent-hover': '#ffe099', + + 'color-success': '#a9dc76', + 'color-warning': '#ffd866', + 'color-danger': '#ff6188', + 'color-info': '#78dce8', + + 'toolbar-bg': 'linear-gradient(0deg, #221f22, #2d2a2e)', + 'toolbar-icon-color': '#c1c0c0', + 'toolbar-icon-hover': '#fcfcfa', + 'toolbar-icon-active': '#ffd866', + + 'tab-bg': '#221f22', + 'tab-active-bg': '#353236', + 'tab-hover-bg': '#2d2a2e', + 'tab-text': '#727072', + 'tab-active-text': '#fcfcfa', + + 'menu-bg': '#353236', + 'card-bg': '#353236', + + 'input-bg': '#221f22', + 'input-border': '#4a474c', + + 'scrollbar-track': '#221f22', + 'scrollbar-thumb': '#4a474c', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'ocean-deep': { + id: 'ocean-deep', + name: 'Ocean Deep', + description: 'Deep ocean blues for late-night browsing', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0f111a', + 'color-bg-secondary': '#090b10', + 'color-bg-tertiary': '#1a1c25', + 'color-bg-elevated': '#242630', + 'color-bg-hover': '#2e313c', + 'color-bg-active': '#383b48', + 'color-bg-overlay': 'rgba(15, 17, 26, 0.95)', + + 'color-text-primary': '#a6accd', + 'color-text-secondary': '#8a90b3', + 'color-text-tertiary': '#6e7399', + 'color-text-muted': '#525880', + + 'color-border-primary': '#242630', + 'color-border-secondary': '#1a1c25', + + 'color-accent-primary': '#84ffff', + 'color-accent-secondary': '#80cbc4', + 'color-accent-hover': '#b2fff9', + + 'color-success': '#c3e88d', + 'color-warning': '#ffcb6b', + 'color-danger': '#ff5370', + 'color-info': '#82aaff', + + 'toolbar-bg': 'linear-gradient(0deg, #090b10, #0f111a)', + 'toolbar-icon-color': '#8a90b3', + 'toolbar-icon-hover': '#a6accd', + 'toolbar-icon-active': '#84ffff', + + 'tab-bg': '#090b10', + 'tab-active-bg': '#1a1c25', + 'tab-hover-bg': '#0f111a', + 'tab-text': '#525880', + 'tab-active-text': '#a6accd', + + 'menu-bg': '#1a1c25', + 'card-bg': '#1a1c25', + + 'input-bg': '#090b10', + 'input-border': '#242630', + + 'scrollbar-track': '#090b10', + 'scrollbar-thumb': '#242630', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + + // ================================================================= + // LIGHT THEMES + // ================================================================= + 'light': { + id: 'light', + name: 'Light', + description: 'Clean light theme for daytime use', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'light', + colors: { + 'color-bg-primary': '#ffffff', + 'color-bg-secondary': '#f6f8fa', + 'color-bg-tertiary': '#eaeef2', + 'color-bg-elevated': '#ffffff', + 'color-bg-hover': '#e8ebef', + 'color-bg-active': '#dce0e4', + 'color-bg-overlay': 'rgba(255, 255, 255, 0.95)', + + 'color-text-primary': '#1f2328', + 'color-text-secondary': '#424a53', + 'color-text-tertiary': '#656d76', + 'color-text-muted': '#8c959f', + + 'color-border-primary': '#d0d7de', + 'color-border-secondary': '#e1e4e8', + + 'color-accent-primary': '#0969da', + 'color-accent-secondary': '#218bff', + 'color-accent-hover': '#0550ae', + + 'color-success': '#1a7f37', + 'color-warning': '#9a6700', + 'color-danger': '#cf222e', + 'color-info': '#0550ae', + + 'toolbar-bg': 'linear-gradient(0deg, #f6f8fa, #ffffff)', + 'toolbar-icon-color': '#656d76', + 'toolbar-icon-hover': '#1f2328', + 'toolbar-icon-active': '#0969da', + + 'tab-bg': '#f6f8fa', + 'tab-active-bg': '#ffffff', + 'tab-hover-bg': '#eaeef2', + 'tab-text': '#656d76', + 'tab-active-text': '#1f2328', + + 'menu-bg': '#ffffff', + 'card-bg': '#ffffff', + + 'input-bg': '#f6f8fa', + 'input-border': '#d0d7de', + + 'scrollbar-track': '#f6f8fa', + 'scrollbar-thumb': '#d0d7de', + + 'radius-sm': '6', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'light-soft': { + id: 'light-soft', + name: 'Light Soft', + description: 'Warm, easy-on-the-eyes light theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'light', + colors: { + 'color-bg-primary': '#faf8f5', + 'color-bg-secondary': '#f5f2ed', + 'color-bg-tertiary': '#ebe8e3', + 'color-bg-elevated': '#ffffff', + 'color-bg-hover': '#e5e2dd', + 'color-bg-active': '#dbd8d3', + 'color-bg-overlay': 'rgba(250, 248, 245, 0.95)', + + 'color-text-primary': '#2e2e2e', + 'color-text-secondary': '#5a5a5a', + 'color-text-tertiary': '#7a7a7a', + 'color-text-muted': '#9a9a9a', + + 'color-border-primary': '#e0ddd8', + 'color-border-secondary': '#ebe8e3', + + 'color-accent-primary': '#d97706', + 'color-accent-secondary': '#f59e0b', + 'color-accent-hover': '#b45309', + + 'color-success': '#059669', + 'color-warning': '#d97706', + 'color-danger': '#dc2626', + 'color-info': '#0284c7', + + 'toolbar-bg': 'linear-gradient(0deg, #f5f2ed, #faf8f5)', + 'toolbar-icon-color': '#7a7a7a', + 'toolbar-icon-hover': '#2e2e2e', + 'toolbar-icon-active': '#d97706', + + 'tab-bg': '#f5f2ed', + 'tab-active-bg': '#faf8f5', + 'tab-hover-bg': '#ebe8e3', + 'tab-text': '#7a7a7a', + 'tab-active-text': '#2e2e2e', + + 'menu-bg': '#ffffff', + 'card-bg': '#ffffff', + + 'input-bg': '#f5f2ed', + 'input-border': '#e0ddd8', + + 'scrollbar-track': '#f5f2ed', + 'scrollbar-thumb': '#dbd8d3', + + 'radius-sm': '6', + 'radius-md': '10', + 'radius-lg': '14' + } + } + }; + + /** + * Theme Manager Class + */ + class ThemeManager { + constructor() { + this.currentTheme = null; + this.customThemes = {}; + this.styleElement = null; + } + + /** + * Initialize the theme manager + */ + init() { + this.loadCustomThemes(); + this.createStyleElement(); + + // Load saved theme or default + const savedThemeId = this.getSavedThemeId(); + if (savedThemeId) { + this.applyTheme(savedThemeId); + } else { + this.applyTheme('dark'); + } + } + + /** + * Create the style element for dynamic theme injection + */ + createStyleElement() { + if (!this.styleElement) { + this.styleElement = document.createElement('style'); + this.styleElement.id = 'theme-dynamic-styles'; + document.head.appendChild(this.styleElement); + } + } + + /** + * Get all available themes (built-in + custom) + */ + getAllThemes() { + return { ...DEFAULT_THEMES, ...this.customThemes }; + } + + /** + * Get a specific theme by ID + */ + getTheme(themeId) { + return this.getAllThemes()[themeId] || null; + } + + /** + * Get the saved theme ID from storage + */ + getSavedThemeId() { + try { + if (window.NativeGetSetting) { + return window.NativeGetSetting('theme') || 'dark'; + } + return localStorage.getItem(THEME_STORAGE_KEY) || 'dark'; + } catch (e) { + return 'dark'; + } + } + + /** + * Save the active theme ID + */ + saveThemeId(themeId) { + try { + if (window.NativeSetSetting) { + window.NativeSetSetting('theme', themeId); + } + localStorage.setItem(THEME_STORAGE_KEY, themeId); + } catch (e) { + console.warn('Failed to save theme:', e); + } + } + + /** + * Load custom themes from storage + */ + loadCustomThemes() { + try { + if (window.NativeGetThemes) { + const json = window.NativeGetThemes(); + this.customThemes = JSON.parse(json || '{}'); + } else { + const stored = localStorage.getItem(CUSTOM_THEMES_KEY); + this.customThemes = stored ? JSON.parse(stored) : {}; + } + } catch (e) { + console.warn('Failed to load custom themes:', e); + this.customThemes = {}; + } + } + + /** + * Save custom themes to storage + */ + saveCustomThemes() { + try { + const json = JSON.stringify(this.customThemes); + if (window.NativeSaveThemes) { + window.NativeSaveThemes(json); + } + localStorage.setItem(CUSTOM_THEMES_KEY, json); + } catch (e) { + console.warn('Failed to save custom themes:', e); + } + } + + /** + * Apply a theme by ID + */ + applyTheme(themeId) { + const theme = this.getTheme(themeId); + if (!theme) { + console.warn('Theme not found:', themeId); + return false; + } + + this.currentTheme = theme; + + // Generate CSS from theme colors + let css = ':root {\n'; + for (const [key, value] of Object.entries(theme.colors)) { + css += ` --${key}: ${value};\n`; + } + css += '}\n'; + + // Apply to style element + if (this.styleElement) { + this.styleElement.textContent = css; + } + + // Save preference + this.saveThemeId(themeId); + + // Dispatch event for other components + window.dispatchEvent(new CustomEvent('themeChanged', { + detail: { themeId, theme } + })); + + return true; + } + + /** + * Create a new custom theme + */ + createTheme(themeData) { + const id = themeData.id || 'custom_' + Date.now(); + + const theme = { + id: id, + name: themeData.name || 'Custom Theme', + description: themeData.description || '', + author: themeData.author || 'User', + version: themeData.version || '1.0.0', + isBuiltIn: false, + colors: themeData.colors || { ...DEFAULT_THEMES.dark.colors } + }; + + this.customThemes[id] = theme; + this.saveCustomThemes(); + + return theme; + } + + /** + * Update an existing custom theme + */ + updateTheme(themeId, updates) { + if (DEFAULT_THEMES[themeId]) { + console.warn('Cannot modify built-in theme'); + return false; + } + + if (!this.customThemes[themeId]) { + console.warn('Custom theme not found:', themeId); + return false; + } + + this.customThemes[themeId] = { + ...this.customThemes[themeId], + ...updates, + id: themeId // Ensure ID doesn't change + }; + + this.saveCustomThemes(); + + // Re-apply if this is the current theme + if (this.currentTheme && this.currentTheme.id === themeId) { + this.applyTheme(themeId); + } + + return true; + } + + /** + * Delete a custom theme + */ + deleteTheme(themeId) { + if (DEFAULT_THEMES[themeId]) { + console.warn('Cannot delete built-in theme'); + return false; + } + + if (!this.customThemes[themeId]) { + return false; + } + + delete this.customThemes[themeId]; + this.saveCustomThemes(); + + // Switch to default if deleting current theme + if (this.currentTheme && this.currentTheme.id === themeId) { + this.applyTheme('dark'); + } + + return true; + } + + /** + * Export a theme as JSON + */ + exportTheme(themeId) { + const theme = this.getTheme(themeId); + if (!theme) return null; + + return JSON.stringify(theme, null, 2); + } + + /** + * Import a theme from JSON + */ + importTheme(jsonString) { + try { + const theme = JSON.parse(jsonString); + + if (!theme.name || !theme.colors) { + throw new Error('Invalid theme format'); + } + + // Generate new ID for imported theme + theme.id = 'imported_' + Date.now(); + theme.isBuiltIn = false; + + return this.createTheme(theme); + } catch (e) { + console.error('Failed to import theme:', e); + return null; + } + } + + /** + * Get the current theme + */ + getCurrentTheme() { + return this.currentTheme; + } + + /** + * Duplicate a theme for customization + */ + duplicateTheme(themeId) { + const source = this.getTheme(themeId); + if (!source) return null; + + return this.createTheme({ + name: source.name + ' (Copy)', + description: source.description, + author: 'User', + colors: { ...source.colors } + }); + } + } + + // Create global instance + window.ThemeManager = new ThemeManager(); + + // Auto-initialize when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + window.ThemeManager.init(); + }); + } else { + window.ThemeManager.init(); + } + +})(); diff --git a/docs/Theme-System.md b/docs/Theme-System.md new file mode 100644 index 0000000..1c312c2 --- /dev/null +++ b/docs/Theme-System.md @@ -0,0 +1,400 @@ +# Theme System Documentation + +The Ultralight WebBrowser features a comprehensive theme system that allows users to customize the browser's appearance. This document covers the architecture, usage, and how to create custom themes. + +## Table of Contents + +1. [Overview](#overview) +2. [File Structure](#file-structure) +3. [Built-in Themes](#built-in-themes) +4. [Using Themes](#using-themes) +5. [Creating Custom Themes](#creating-custom-themes) +6. [Theme File Format](#theme-file-format) +7. [CSS Variables Reference](#css-variables-reference) +8. [JavaScript API](#javascript-api) +9. [C++ Backend](#c-backend) +10. [Best Practices](#best-practices) + +--- + +## Overview + +The theme system provides: + +- **5 built-in themes**: Dark (default), Light, Midnight Blue, Nord, and Monokai Pro +- **Custom theme creation**: Users can create and save their own themes +- **Import/Export**: Share themes as JSON files +- **Live preview**: See changes in real-time while editing +- **Persistent storage**: Themes are saved and remembered across sessions + +--- + +## File Structure + +``` +assets/ +├── themes/ +│ ├── theme-variables.css # Central CSS variables +│ ├── theme.js # JavaScript theme manager +│ ├── dark.json # Dark theme definition +│ ├── light.json # Light theme definition +│ ├── midnight.json # Midnight Blue theme +│ └── nord.json # Nord theme +├── themes.html # Theme management page +└── ... + +src/ +├── ThemeManager.h # C++ theme manager header +├── ThemeManager.cpp # C++ theme manager implementation +└── ... +``` + +--- + +## Built-in Themes + +### Dark (Default) +The default dark purple theme with a modern, comfortable appearance. +- Primary accent: `#6C63FF` (purple) +- Background: Deep purples (`#16151d`, `#1e1e2e`) + +### Light +A clean, bright theme for daytime use. +- Primary accent: `#0969da` (blue) +- Background: Whites and light grays + +### Midnight Blue +Deep blue night theme inspired by GitHub's dark mode. +- Primary accent: `#58a6ff` (bright blue) +- Background: Dark blues (`#0d1117`, `#161b22`) + +### Nord +Arctic, north-bluish color palette inspired by the aurora borealis. +- Primary accent: `#88c0d0` (frost blue) +- Background: Polar night colors (`#2e3440`, `#3b4252`) + +### Monokai Pro +Classic Monokai color scheme popular with developers. +- Primary accent: `#ffd866` (yellow) +- Background: Warm grays (`#2d2a2e`, `#353236`) + +--- + +## Using Themes + +### Accessing the Theme Manager + +1. Click the **menu button** (three dots) in the toolbar +2. Select **"Themes"** from the dropdown +3. The Theme Management page opens in a new tab + +### Applying a Theme + +1. Browse available themes in the grid +2. Click **"Apply"** on the theme you want to use +3. The theme is applied immediately and saved + +### Importing a Theme + +1. Scroll to the **"Import Theme"** section +2. Either: + - Drag and drop a `.json` theme file + - Click the drop zone to browse for a file +3. The theme is imported and appears in Custom Themes + +### Exporting a Theme + +1. Click **"Create Theme"** or edit an existing custom theme +2. Configure the theme as desired +3. Click **"Export"** in the modal footer +4. Save the downloaded JSON file + +--- + +## Creating Custom Themes + +### Quick Start + +1. Open the Themes page +2. Click **"Create Theme"** +3. Fill in the theme details: + - **Name**: A descriptive name + - **Description**: What makes this theme special + - **Author**: Your name + - **Base Theme**: Choose a starting point +4. Switch to the **"Colors"** tab +5. Modify colors using the color pickers +6. Preview your changes in the **"Preview"** tab +7. Click **"Save Theme"** + +### Duplicating an Existing Theme + +1. Find a built-in or custom theme you like +2. Click **"Duplicate"** +3. The theme editor opens with all colors copied +4. Modify as needed and save + +--- + +## Theme File Format + +Themes are stored as JSON files with the following structure: + +```json +{ + "id": "my-theme", + "name": "My Custom Theme", + "description": "A beautiful custom theme", + "author": "Your Name", + "version": "1.0.0", + "isBuiltIn": false, + "colors": { + "color-bg-primary": "#16151d", + "color-bg-secondary": "#1e1e2e", + "color-text-primary": "#e4e4ef", + "color-accent-primary": "#6C63FF", + ... + } +} +``` + +### Required Fields + +| Field | Type | Description | +|-------|------|-------------| +| `id` | string | Unique identifier (auto-generated for custom themes) | +| `name` | string | Display name shown in the UI | +| `colors` | object | Map of CSS variable names to color values | + +### Optional Fields + +| Field | Type | Default | Description | +|-------|------|---------|-------------| +| `description` | string | "" | Brief description of the theme | +| `author` | string | "User" | Theme creator's name | +| `version` | string | "1.0.0" | Semantic version number | +| `isBuiltIn` | boolean | false | Whether this is a built-in theme | + +--- + +## CSS Variables Reference + +### Background Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--color-bg-primary` | Main background | `#16151d` | +| `--color-bg-secondary` | Secondary surfaces | `#1e1e2e` | +| `--color-bg-tertiary` | Toolbar, elevated areas | `#232330` | +| `--color-bg-elevated` | Cards, modals | `#282839` | +| `--color-bg-hover` | Hover state backgrounds | `#343446` | +| `--color-bg-active` | Active/pressed states | `#3d3d5c` | +| `--color-bg-overlay` | Modal overlays | `rgba(22, 21, 29, 0.95)` | + +### Text Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--color-text-primary` | Main text | `#e4e4ef` | +| `--color-text-secondary` | Secondary text | `#c4c2d0` | +| `--color-text-tertiary` | Tertiary/muted text | `#9999b3` | +| `--color-text-muted` | Very muted text | `#71718a` | +| `--color-text-disabled` | Disabled text | `#636074` | + +### Border Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--color-border-primary` | Main borders | `#313146` | +| `--color-border-secondary` | Subtle borders | `#252532` | +| `--color-border-hover` | Hover state borders | `#404060` | +| `--color-border-focus` | Focus ring color | `#4a4a6a` | + +### Accent Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--color-accent-primary` | Primary accent | `#6C63FF` | +| `--color-accent-secondary` | Secondary accent | `#7c6aef` | +| `--color-accent-hover` | Accent hover state | `#8a83ff` | +| `--color-accent-light` | Light accent background | `rgba(108, 99, 255, 0.15)` | + +### Status Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--color-success` | Success/positive | `#6aef8a` | +| `--color-warning` | Warning/caution | `#f0b866` | +| `--color-danger` | Error/destructive | `#ef6a6a` | +| `--color-info` | Informational | `#6ac0ef` | + +### Component Colors + +| Variable | Description | Default (Dark) | +|----------|-------------|----------------| +| `--toolbar-bg` | Toolbar gradient | `linear-gradient(...)` | +| `--menu-bg` | Menu background | `#2b2b38` | +| `--card-bg` | Card background | `#282839` | +| `--btn-primary-bg` | Primary button | `#6C63FF` | +| `--input-bg` | Input background | `#32324a` | +| `--scrollbar-thumb` | Scrollbar | `#3d3d5c` | +| `--tooltip-bg` | Tooltip background | `rgba(43, 43, 56, 0.95)` | + +--- + +## JavaScript API + +The theme system exposes a global `ThemeManager` object: + +```javascript +// Get all available themes (built-in + custom) +const themes = ThemeManager.getAllThemes(); + +// Apply a theme by ID +ThemeManager.applyTheme('dark'); + +// Get the current theme +const current = ThemeManager.getCurrentTheme(); + +// Create a new custom theme +const newTheme = ThemeManager.createTheme({ + name: 'My Theme', + description: 'A custom theme', + colors: { ... } +}); + +// Update an existing custom theme +ThemeManager.updateTheme('theme-id', { + name: 'Updated Name', + colors: { ... } +}); + +// Delete a custom theme +ThemeManager.deleteTheme('theme-id'); + +// Duplicate a theme for customization +const copy = ThemeManager.duplicateTheme('dark'); + +// Export theme as JSON string +const json = ThemeManager.exportTheme('theme-id'); + +// Import theme from JSON string +const imported = ThemeManager.importTheme(jsonString); +``` + +### Events + +Listen for theme changes: + +```javascript +window.addEventListener('themeChanged', (e) => { + console.log('Theme changed to:', e.detail.themeId); + console.log('Theme data:', e.detail.theme); +}); +``` + +--- + +## C++ Backend + +The `ThemeManager` class handles theme persistence and provides native bindings. + +### Header (ThemeManager.h) + +```cpp +class ThemeManager { +public: + struct Theme { + std::string id; + std::string name; + std::string description; + std::string author; + std::string version; + bool is_builtin; + std::map colors; + }; + + void Initialize(const std::filesystem::path& storage_dir); + std::string GetActiveThemeId() const; + bool SetActiveTheme(const std::string& theme_id); + std::string GetCustomThemesJSON() const; + bool SaveCustomThemes(const std::string& json); + // ... more methods +}; +``` + +### Storage + +Themes are stored in the browser's settings directory: +- `custom_themes.json` - Array of custom theme objects +- `theme_settings.json` - Active theme preference + +--- + +## Best Practices + +### Color Contrast + +Ensure sufficient contrast between text and backgrounds: +- Text on backgrounds: Minimum 4.5:1 contrast ratio +- Large text: Minimum 3:1 contrast ratio +- Interactive elements: Clearly distinguishable states + +### Consistency + +- Use the accent color consistently for interactive elements +- Maintain visual hierarchy with proper use of text colors +- Keep hover/active states visually connected to their base states + +### Testing + +Before sharing a theme: +1. Test on all major browser pages (history, bookmarks, settings, etc.) +2. Check readability of all text elements +3. Verify button and input visibility +4. Test in different lighting conditions + +### Naming + +- Use descriptive names that hint at the color palette +- Include version numbers when making significant changes +- Credit original themes if creating variations + +--- + +## Troubleshooting + +### Theme Not Applying + +1. Check browser console for errors +2. Verify the theme JSON is valid +3. Try reloading the page +4. Clear browser data and re-import the theme + +### Colors Not Updating + +1. Some pages may cache styles - try hard refresh +2. Check if the variable name matches exactly +3. Verify the color value format (hex, rgb, rgba) + +### Import Failures + +1. Ensure the file is valid JSON +2. Check that required fields (`name`, `colors`) exist +3. Verify color values are properly quoted strings + +--- + +## Contributing + +To add a new built-in theme: + +1. Create a theme JSON file in `assets/themes/` +2. Add the theme definition to `ThemeManager::LoadBuiltinThemes()` in `ThemeManager.cpp` +3. Add the theme to the `DEFAULT_THEMES` object in `theme.js` +4. Test thoroughly on all pages +5. Submit a pull request with screenshots + +--- + +*Last updated: December 2024* diff --git a/src/ThemeManager.cpp b/src/ThemeManager.cpp new file mode 100644 index 0000000..b00f137 --- /dev/null +++ b/src/ThemeManager.cpp @@ -0,0 +1,601 @@ +#include "ThemeManager.h" +#include +#include +#include +#include + +// Simple JSON helpers (reusing pattern from BookmarkStore) +namespace { + std::string EscapeJSON(const std::string& s) { + std::string result; + for (char c : s) { + switch (c) { + case '"': result += "\\\""; break; + case '\\': result += "\\\\"; break; + case '\n': result += "\\n"; break; + case '\r': result += "\\r"; break; + case '\t': result += "\\t"; break; + default: result += c; break; + } + } + return result; + } + + std::string UnescapeJSON(const std::string& s) { + std::string result; + for (size_t i = 0; i < s.length(); ++i) { + if (s[i] == '\\' && i + 1 < s.length()) { + switch (s[i + 1]) { + case '"': result += '"'; ++i; break; + case '\\': result += '\\'; ++i; break; + case 'n': result += '\n'; ++i; break; + case 'r': result += '\r'; ++i; break; + case 't': result += '\t'; ++i; break; + default: result += s[i]; break; + } + } else { + result += s[i]; + } + } + return result; + } + + std::string ExtractJSONString(const std::string& json, const std::string& key) { + std::string search = "\"" + key + "\""; + size_t pos = json.find(search); + if (pos == std::string::npos) return ""; + + pos = json.find(':', pos); + if (pos == std::string::npos) return ""; + + pos = json.find('"', pos); + if (pos == std::string::npos) return ""; + + size_t end = pos + 1; + while (end < json.length()) { + if (json[end] == '"' && json[end - 1] != '\\') break; + ++end; + } + + return UnescapeJSON(json.substr(pos + 1, end - pos - 1)); + } + + bool ExtractJSONBool(const std::string& json, const std::string& key) { + std::string search = "\"" + key + "\""; + size_t pos = json.find(search); + if (pos == std::string::npos) return false; + + pos = json.find(':', pos); + if (pos == std::string::npos) return false; + + // Skip whitespace + while (pos < json.length() && (json[pos] == ':' || json[pos] == ' ')) ++pos; + + return json.substr(pos, 4) == "true"; + } + + std::map ExtractJSONColorMap(const std::string& json) { + std::map colors; + + size_t colorsPos = json.find("\"colors\""); + if (colorsPos == std::string::npos) return colors; + + size_t start = json.find('{', colorsPos); + if (start == std::string::npos) return colors; + + int depth = 1; + size_t end = start + 1; + while (end < json.length() && depth > 0) { + if (json[end] == '{') ++depth; + else if (json[end] == '}') --depth; + ++end; + } + + std::string colorsJson = json.substr(start, end - start); + + // Parse key-value pairs + size_t pos = 0; + while (pos < colorsJson.length()) { + size_t keyStart = colorsJson.find('"', pos); + if (keyStart == std::string::npos) break; + + size_t keyEnd = colorsJson.find('"', keyStart + 1); + if (keyEnd == std::string::npos) break; + + std::string key = colorsJson.substr(keyStart + 1, keyEnd - keyStart - 1); + + size_t valueStart = colorsJson.find('"', keyEnd + 1); + if (valueStart == std::string::npos) break; + + size_t valueEnd = valueStart + 1; + while (valueEnd < colorsJson.length()) { + if (colorsJson[valueEnd] == '"' && colorsJson[valueEnd - 1] != '\\') break; + ++valueEnd; + } + + std::string value = colorsJson.substr(valueStart + 1, valueEnd - valueStart - 1); + colors[key] = value; + + pos = valueEnd + 1; + } + + return colors; + } +} + +ThemeManager::ThemeManager() + : active_theme_id_("dark") +{ +} + +ThemeManager::~ThemeManager() +{ +} + +void ThemeManager::Initialize(const std::filesystem::path& storage_dir) +{ + storage_dir_ = storage_dir; + themes_file_ = storage_dir / "custom_themes.json"; + + LoadBuiltinThemes(); + LoadThemes(); +} + +void ThemeManager::LoadBuiltinThemes() +{ + // Dark theme (default) + Theme dark; + dark.id = "dark"; + dark.name = "Dark (Default)"; + dark.description = "The default dark purple theme"; + dark.author = "Ultralight Team"; + dark.version = "1.0.0"; + dark.is_builtin = true; + dark.colors = { + {"color-bg-primary", "#16151d"}, + {"color-bg-secondary", "#1e1e2e"}, + {"color-bg-tertiary", "#232330"}, + {"color-bg-elevated", "#282839"}, + {"color-bg-hover", "#343446"}, + {"color-text-primary", "#e4e4ef"}, + {"color-text-secondary", "#c4c2d0"}, + {"color-text-tertiary", "#9999b3"}, + {"color-text-muted", "#71718a"}, + {"color-border-primary", "#313146"}, + {"color-border-secondary", "#252532"}, + {"color-accent-primary", "#6C63FF"}, + {"color-accent-secondary", "#7c6aef"}, + {"color-accent-hover", "#8a83ff"}, + {"color-success", "#6aef8a"}, + {"color-warning", "#f0b866"}, + {"color-danger", "#ef6a6a"}, + {"color-info", "#6ac0ef"}, + {"menu-bg", "#2b2b38"}, + {"card-bg", "#282839"}, + {"btn-primary-bg", "#6C63FF"}, + {"input-bg", "#32324a"} + }; + builtin_themes_["dark"] = dark; + + // Light theme + Theme light; + light.id = "light"; + light.name = "Light"; + light.description = "Clean light theme for daytime use"; + light.author = "Ultralight Team"; + light.version = "1.0.0"; + light.is_builtin = true; + light.colors = { + {"color-bg-primary", "#ffffff"}, + {"color-bg-secondary", "#f6f8fa"}, + {"color-bg-tertiary", "#eaeef2"}, + {"color-bg-elevated", "#ffffff"}, + {"color-bg-hover", "#e8ebef"}, + {"color-text-primary", "#1f2328"}, + {"color-text-secondary", "#424a53"}, + {"color-text-tertiary", "#656d76"}, + {"color-text-muted", "#8c959f"}, + {"color-border-primary", "#d0d7de"}, + {"color-border-secondary", "#e1e4e8"}, + {"color-accent-primary", "#0969da"}, + {"color-accent-secondary", "#218bff"}, + {"color-accent-hover", "#54aeff"}, + {"color-success", "#1a7f37"}, + {"color-warning", "#9a6700"}, + {"color-danger", "#cf222e"}, + {"color-info", "#0969da"}, + {"menu-bg", "#ffffff"}, + {"card-bg", "#ffffff"}, + {"btn-primary-bg", "#0969da"}, + {"input-bg", "#ffffff"} + }; + builtin_themes_["light"] = light; + + // Midnight theme + Theme midnight; + midnight.id = "midnight"; + midnight.name = "Midnight Blue"; + midnight.description = "Deep blue night theme"; + midnight.author = "Ultralight Team"; + midnight.version = "1.0.0"; + midnight.is_builtin = true; + midnight.colors = { + {"color-bg-primary", "#0d1117"}, + {"color-bg-secondary", "#161b22"}, + {"color-bg-tertiary", "#21262d"}, + {"color-bg-elevated", "#30363d"}, + {"color-bg-hover", "#3d444d"}, + {"color-text-primary", "#e6edf3"}, + {"color-text-secondary", "#c9d1d9"}, + {"color-text-tertiary", "#8b949e"}, + {"color-text-muted", "#6e7681"}, + {"color-border-primary", "#30363d"}, + {"color-border-secondary", "#21262d"}, + {"color-accent-primary", "#58a6ff"}, + {"color-accent-secondary", "#79c0ff"}, + {"color-accent-hover", "#a5d6ff"}, + {"color-success", "#3fb950"}, + {"color-warning", "#d29922"}, + {"color-danger", "#f85149"}, + {"color-info", "#58a6ff"}, + {"menu-bg", "#21262d"}, + {"card-bg", "#21262d"}, + {"btn-primary-bg", "#238636"}, + {"input-bg", "#0d1117"} + }; + builtin_themes_["midnight"] = midnight; + + // Nord theme + Theme nord; + nord.id = "nord"; + nord.name = "Nord"; + nord.description = "Arctic, north-bluish color palette"; + nord.author = "Ultralight Team"; + nord.version = "1.0.0"; + nord.is_builtin = true; + nord.colors = { + {"color-bg-primary", "#2e3440"}, + {"color-bg-secondary", "#3b4252"}, + {"color-bg-tertiary", "#434c5e"}, + {"color-bg-elevated", "#4c566a"}, + {"color-bg-hover", "#5e6779"}, + {"color-text-primary", "#eceff4"}, + {"color-text-secondary", "#e5e9f0"}, + {"color-text-tertiary", "#d8dee9"}, + {"color-text-muted", "#a5adba"}, + {"color-border-primary", "#4c566a"}, + {"color-border-secondary", "#3b4252"}, + {"color-accent-primary", "#88c0d0"}, + {"color-accent-secondary", "#81a1c1"}, + {"color-accent-hover", "#5e81ac"}, + {"color-success", "#a3be8c"}, + {"color-warning", "#ebcb8b"}, + {"color-danger", "#bf616a"}, + {"color-info", "#88c0d0"}, + {"menu-bg", "#3b4252"}, + {"card-bg", "#3b4252"}, + {"btn-primary-bg", "#5e81ac"}, + {"input-bg", "#2e3440"} + }; + builtin_themes_["nord"] = nord; + + // Monokai theme + Theme monokai; + monokai.id = "monokai"; + monokai.name = "Monokai Pro"; + monokai.description = "Classic Monokai color scheme"; + monokai.author = "Ultralight Team"; + monokai.version = "1.0.0"; + monokai.is_builtin = true; + monokai.colors = { + {"color-bg-primary", "#2d2a2e"}, + {"color-bg-secondary", "#353236"}, + {"color-bg-tertiary", "#403e41"}, + {"color-bg-elevated", "#4a474c"}, + {"color-bg-hover", "#555158"}, + {"color-text-primary", "#fcfcfa"}, + {"color-text-secondary", "#c1c0c0"}, + {"color-text-tertiary", "#939293"}, + {"color-text-muted", "#727072"}, + {"color-border-primary", "#4a474c"}, + {"color-border-secondary", "#353236"}, + {"color-accent-primary", "#ffd866"}, + {"color-accent-secondary", "#ff6188"}, + {"color-accent-hover", "#a9dc76"}, + {"color-success", "#a9dc76"}, + {"color-warning", "#ffd866"}, + {"color-danger", "#ff6188"}, + {"color-info", "#78dce8"}, + {"menu-bg", "#353236"}, + {"card-bg", "#353236"}, + {"btn-primary-bg", "#ffd866"}, + {"input-bg", "#2d2a2e"} + }; + builtin_themes_["monokai"] = monokai; +} + +void ThemeManager::LoadThemes() +{ + if (!std::filesystem::exists(themes_file_)) + return; + + std::ifstream file(themes_file_); + if (!file.is_open()) + return; + + std::stringstream buffer; + buffer << file.rdbuf(); + std::string json = buffer.str(); + + // Parse custom themes JSON array + // Simple parsing for array of theme objects + size_t pos = json.find('['); + if (pos == std::string::npos) + return; + + size_t end = json.rfind(']'); + if (end == std::string::npos || end <= pos) + return; + + // Find each theme object + size_t objStart = pos; + while ((objStart = json.find('{', objStart)) != std::string::npos && objStart < end) + { + int depth = 1; + size_t objEnd = objStart + 1; + while (objEnd < json.length() && depth > 0) + { + if (json[objEnd] == '{') ++depth; + else if (json[objEnd] == '}') --depth; + ++objEnd; + } + + std::string themeJson = json.substr(objStart, objEnd - objStart); + Theme theme = ParseThemeJSON(themeJson); + if (!theme.id.empty() && !theme.is_builtin) + { + custom_themes_[theme.id] = theme; + } + + objStart = objEnd; + } + + // Load active theme preference + std::filesystem::path settingsFile = storage_dir_ / "theme_settings.json"; + if (std::filesystem::exists(settingsFile)) + { + std::ifstream sf(settingsFile); + if (sf.is_open()) + { + std::stringstream sb; + sb << sf.rdbuf(); + active_theme_id_ = ExtractJSONString(sb.str(), "active_theme"); + if (active_theme_id_.empty()) + active_theme_id_ = "dark"; + } + } +} + +void ThemeManager::SaveThemes() +{ + // Ensure directory exists + std::filesystem::create_directories(storage_dir_); + + // Save custom themes + std::ofstream file(themes_file_); + if (!file.is_open()) + return; + + file << "[\n"; + bool first = true; + for (const auto& [id, theme] : custom_themes_) + { + if (!first) file << ",\n"; + first = false; + file << ThemeToJSON(theme); + } + file << "\n]"; + file.close(); + + // Save active theme preference + std::filesystem::path settingsFile = storage_dir_ / "theme_settings.json"; + std::ofstream sf(settingsFile); + if (sf.is_open()) + { + sf << "{\n \"active_theme\": \"" << EscapeJSON(active_theme_id_) << "\"\n}"; + } +} + +ThemeManager::Theme ThemeManager::ParseThemeJSON(const std::string& json) const +{ + Theme theme; + theme.id = ExtractJSONString(json, "id"); + theme.name = ExtractJSONString(json, "name"); + theme.description = ExtractJSONString(json, "description"); + theme.author = ExtractJSONString(json, "author"); + theme.version = ExtractJSONString(json, "version"); + theme.is_builtin = ExtractJSONBool(json, "isBuiltIn"); + theme.colors = ExtractJSONColorMap(json); + return theme; +} + +std::string ThemeManager::ThemeToJSON(const Theme& theme) const +{ + std::ostringstream ss; + ss << " {\n"; + ss << " \"id\": \"" << EscapeJSON(theme.id) << "\",\n"; + ss << " \"name\": \"" << EscapeJSON(theme.name) << "\",\n"; + ss << " \"description\": \"" << EscapeJSON(theme.description) << "\",\n"; + ss << " \"author\": \"" << EscapeJSON(theme.author) << "\",\n"; + ss << " \"version\": \"" << EscapeJSON(theme.version) << "\",\n"; + ss << " \"isBuiltIn\": " << (theme.is_builtin ? "true" : "false") << ",\n"; + ss << " \"colors\": {\n"; + + bool first = true; + for (const auto& [key, value] : theme.colors) + { + if (!first) ss << ",\n"; + first = false; + ss << " \"" << EscapeJSON(key) << "\": \"" << EscapeJSON(value) << "\""; + } + + ss << "\n }\n"; + ss << " }"; + return ss.str(); +} + +bool ThemeManager::SetActiveTheme(const std::string& theme_id) +{ + // Check if theme exists + if (builtin_themes_.find(theme_id) == builtin_themes_.end() && + custom_themes_.find(theme_id) == custom_themes_.end()) + { + return false; + } + + active_theme_id_ = theme_id; + SaveThemes(); + return true; +} + +std::string ThemeManager::GetCustomThemesJSON() const +{ + std::ostringstream ss; + ss << "{"; + + bool first = true; + for (const auto& [id, theme] : custom_themes_) + { + if (!first) ss << ","; + first = false; + ss << "\n \"" << EscapeJSON(id) << "\": " << ThemeToJSON(theme); + } + + ss << "\n}"; + return ss.str(); +} + +bool ThemeManager::SaveCustomThemes(const std::string& json) +{ + // Clear and repopulate from JSON + custom_themes_.clear(); + + // Parse the JSON object of themes + size_t pos = json.find('{'); + if (pos == std::string::npos) + return false; + + // Find theme objects + size_t objStart = pos; + while ((objStart = json.find('{', objStart + 1)) != std::string::npos) + { + int depth = 1; + size_t objEnd = objStart + 1; + while (objEnd < json.length() && depth > 0) + { + if (json[objEnd] == '{') ++depth; + else if (json[objEnd] == '}') --depth; + ++objEnd; + } + + std::string themeJson = json.substr(objStart, objEnd - objStart); + Theme theme = ParseThemeJSON(themeJson); + if (!theme.id.empty() && !theme.is_builtin) + { + custom_themes_[theme.id] = theme; + } + + objStart = objEnd; + } + + SaveThemes(); + return true; +} + +std::string ThemeManager::GetThemeJSON(const std::string& theme_id) const +{ + auto it = builtin_themes_.find(theme_id); + if (it != builtin_themes_.end()) + { + return ThemeToJSON(it->second); + } + + auto cit = custom_themes_.find(theme_id); + if (cit != custom_themes_.end()) + { + return ThemeToJSON(cit->second); + } + + return "{}"; +} + +bool ThemeManager::AddCustomTheme(const std::string& json) +{ + Theme theme = ParseThemeJSON(json); + if (theme.id.empty()) + return false; + + theme.is_builtin = false; + custom_themes_[theme.id] = theme; + SaveThemes(); + return true; +} + +bool ThemeManager::RemoveCustomTheme(const std::string& theme_id) +{ + auto it = custom_themes_.find(theme_id); + if (it == custom_themes_.end()) + return false; + + custom_themes_.erase(it); + + // Reset to default if active theme was deleted + if (active_theme_id_ == theme_id) + { + active_theme_id_ = "dark"; + } + + SaveThemes(); + return true; +} + +bool ThemeManager::ExportTheme(const std::string& theme_id, const std::filesystem::path& file_path) const +{ + std::string json = GetThemeJSON(theme_id); + if (json == "{}") + return false; + + std::ofstream file(file_path); + if (!file.is_open()) + return false; + + file << json; + return true; +} + +std::string ThemeManager::ImportTheme(const std::filesystem::path& file_path) +{ + if (!std::filesystem::exists(file_path)) + return ""; + + std::ifstream file(file_path); + if (!file.is_open()) + return ""; + + std::stringstream buffer; + buffer << file.rdbuf(); + std::string json = buffer.str(); + + Theme theme = ParseThemeJSON(json); + if (theme.id.empty()) + return ""; + + // Generate new ID for imported theme + theme.id = "imported_" + std::to_string(std::chrono::system_clock::now().time_since_epoch().count()); + theme.is_builtin = false; + + custom_themes_[theme.id] = theme; + SaveThemes(); + + return theme.id; +} diff --git a/src/ThemeManager.h b/src/ThemeManager.h new file mode 100644 index 0000000..fada5a4 --- /dev/null +++ b/src/ThemeManager.h @@ -0,0 +1,70 @@ +#pragma once +#include +#include +#include +#include + +/** + * Theme Manager for the browser + * Handles loading, saving, and applying themes. + */ +class ThemeManager +{ +public: + struct Theme + { + std::string id; + std::string name; + std::string description; + std::string author; + std::string version; + bool is_builtin; + std::map colors; + }; + + ThemeManager(); + ~ThemeManager(); + + // Initialize with storage directory path + void Initialize(const std::filesystem::path& storage_dir); + + // Get the currently active theme ID + std::string GetActiveThemeId() const { return active_theme_id_; } + + // Set the active theme + bool SetActiveTheme(const std::string& theme_id); + + // Get all custom themes as JSON + std::string GetCustomThemesJSON() const; + + // Save custom themes from JSON + bool SaveCustomThemes(const std::string& json); + + // Get a specific theme by ID (returns JSON) + std::string GetThemeJSON(const std::string& theme_id) const; + + // Add or update a custom theme + bool AddCustomTheme(const std::string& json); + + // Remove a custom theme + bool RemoveCustomTheme(const std::string& theme_id); + + // Export a theme to file + bool ExportTheme(const std::string& theme_id, const std::filesystem::path& file_path) const; + + // Import a theme from file + std::string ImportTheme(const std::filesystem::path& file_path); + +private: + void LoadThemes(); + void SaveThemes(); + void LoadBuiltinThemes(); + Theme ParseThemeJSON(const std::string& json) const; + std::string ThemeToJSON(const Theme& theme) const; + + std::filesystem::path storage_dir_; + std::filesystem::path themes_file_; + std::string active_theme_id_; + std::map builtin_themes_; + std::map custom_themes_; +}; diff --git a/src/UI.cpp b/src/UI.cpp index 64b0be4..ae51af4 100644 --- a/src/UI.cpp +++ b/src/UI.cpp @@ -1494,6 +1494,7 @@ void UI::OnDOMReady(View *caller, uint64_t frame_id, bool is_main_frame, const S global["OnOpenDownloadsNewTab"] = BindJSCallback(&UI::OnOpenDownloadsNewTab); global["OnOpenPasswordsNewTab"] = BindJSCallback(&UI::OnOpenPasswordsNewTab); global["OnOpenExtensionsNewTab"] = BindJSCallback(&UI::OnOpenExtensionsNewTab); + global["OnOpenThemesNewTab"] = BindJSCallback(&UI::OnOpenThemesNewTab); global["GetDownloadsSnapshot"] = BindJSCallbackWithRetval(&UI::OnDownloadsOverlayGet); global["ClearDownloadsSnapshot"] = BindJSCallback(&UI::OnDownloadsOverlayClear); global["OnAddressBarBlur"] = BindJSCallback(&UI::OnAddressBarBlur); @@ -1954,6 +1955,11 @@ void UI::OnOpenExtensionsNewTab(const JSObject &obj, const JSArgs &args) CreateNewTabForChildView(String("file:///extensions.html")); } +void UI::OnOpenThemesNewTab(const JSObject &obj, const JSArgs &args) +{ + CreateNewTabForChildView(String("file:///themes.html")); +} + // ============================================================================ // Extension System Implementation // ============================================================================ diff --git a/src/UI.h b/src/UI.h index 5c93018..69432aa 100644 --- a/src/UI.h +++ b/src/UI.h @@ -148,6 +148,7 @@ class UI : public WindowListener, void OnOpenBookmarksNewTab(const JSObject &obj, const JSArgs &args); void OnOpenDownloadsNewTab(const JSObject &obj, const JSArgs &args); void OnOpenPasswordsNewTab(const JSObject &obj, const JSArgs &args); + void OnOpenThemesNewTab(const JSObject &obj, const JSArgs &args); void OnAddressBarBlur(const JSObject &obj, const JSArgs &args); void OnAddressBarFocus(const JSObject &obj, const JSArgs &args); void OnMenuOpen(const JSObject &obj, const JSArgs &args); From 372638cbf45fe5f39efa3025538869dc6d992562 Mon Sep 17 00:00:00 2001 From: ovsky Date: Sat, 6 Dec 2025 04:39:55 +0100 Subject: [PATCH 18/20] Add Windows ARM64EC build workflow Introduces a GitHub Actions workflow for building the project on Windows ARM64EC. The workflow supports SDK auto-detection, caching, installer creation, and configurable build options for development and clean builds. --- .github/workflows/build-windows-arm64ec.yml | 245 ++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 .github/workflows/build-windows-arm64ec.yml diff --git a/.github/workflows/build-windows-arm64ec.yml b/.github/workflows/build-windows-arm64ec.yml new file mode 100644 index 0000000..e1b1c02 --- /dev/null +++ b/.github/workflows/build-windows-arm64ec.yml @@ -0,0 +1,245 @@ +name: Build - Windows ARM64EC + +permissions: + contents: read + actions: write + +on: + workflow_dispatch: + inputs: + sdk_url: + description: "Override ULTRALIGHT_SDK_URL (raw .7z in base-sdk branch)" + required: false + type: string + version: + description: "Override ULTRALIGHT_VERSION (eg. 1.4.0)" + required: false + type: string + webbrowser_version: + description: "Override build version name (default 'dev')" + required: false + type: string + create_installer: + description: "Create Windows installer via CPack (NSIS)" + required: false + type: boolean + development_build: + description: "Development build (keeps intermediate packages, verbose logs)" + required: false + type: boolean + default: false + clean_build: + description: "Clean build (skip all caches for fresh build)" + required: false + type: boolean + default: false + workflow_call: + inputs: + sdk_url: + description: "Override ULTRALIGHT_SDK_URL (raw .7z in base-sdk branch)" + required: false + type: string + version: + description: "Override ULTRALIGHT_VERSION (eg. 1.4.0)" + required: false + type: string + webbrowser_version: + description: "Override build version name (default 'dev')" + required: false + type: string + create_installer: + description: "Create Windows installer via CPack (NSIS)" + required: false + type: boolean + default: false + development_build: + description: "Development build (keeps intermediate packages, verbose logs)" + required: false + type: boolean + default: false + clean_build: + description: "Clean build (skip all caches for fresh build)" + required: false + type: boolean + default: false + +jobs: + build-arm64ec: + runs-on: windows-latest + env: + ULTRALIGHT_SDK_URL: ${{ inputs.sdk_url || github.event.inputs.sdk_url }} + ULTRALIGHT_VERSION: ${{ inputs.version || github.event.inputs.version }} + WEBBROWSER_VERSION: ${{ inputs.webbrowser_version || github.event.inputs.webbrowser_version || 'dev' }} + CREATE_INSTALLER: ${{ inputs.create_installer || github.event.inputs.create_installer }} + DEVELOPMENT_BUILD: ${{ inputs.development_build || github.event.inputs.development_build || 'false' }} + CLEAN_BUILD: ${{ inputs.clean_build || github.event.inputs.clean_build || 'false' }} + + steps: + - name: Configure Git (longpaths, autocrlf=false) + shell: pwsh + run: | + git config --global core.longpaths true + git config --global core.autocrlf false + + - name: Checkout Code (with submodules) + uses: actions/checkout@v4 + with: + submodules: recursive + fetch-depth: 1 + + - name: Setup CMake Build Cache + if: inputs.clean_build != true + uses: actions/cache@v4 + with: + path: | + build + !build/CMakeFiles + !build/Testing + !build/_CPack_Packages + !build/**/*.exe + !build/**/*.dll + !build/**/*.zip + !build/**/*.7z + key: ${{ runner.os }}-cmake-${{ hashFiles('CMakeLists.txt', 'cmake/**') }}-${{ github.sha }} + restore-keys: | + ${{ runner.os }}-cmake-${{ hashFiles('CMakeLists.txt', 'cmake/**') }}- + ${{ runner.os }}-cmake- + + - name: Setup SDK Cache + if: inputs.clean_build != true + uses: actions/cache@v4 + with: + path: | + libs/Ultralight + ultralight-sdk-*.7z + key: ${{ runner.os }}-sdk-${{ env.ULTRALIGHT_VERSION || 'latest' }} + restore-keys: | + ${{ runner.os }}-sdk- + + - name: Setup Compiler Cache (sccache) + if: inputs.clean_build != true + uses: mozilla-actions/sccache-action@v0.0.5 + + - name: Configure Compiler Cache Environment + if: inputs.clean_build != true + shell: pwsh + run: | + echo "SCCACHE_DIR=$env:GITHUB_WORKSPACE\.sccache" >> $env:GITHUB_ENV + echo "CMAKE_CXX_COMPILER_LAUNCHER=sccache" >> $env:GITHUB_ENV + echo "CMAKE_C_COMPILER_LAUNCHER=sccache" >> $env:GITHUB_ENV + + - name: Detect ULTRALIGHT_SDK_URL from repo base-sdk branch (Windows) + id: detect_url + shell: pwsh + run: | + if ($env:ULTRALIGHT_SDK_URL) { exit 0 } + $api = "https://api.github.com/repos/${{ github.repository }}/contents/sdks?ref=base-sdk" + $headers = @{ Authorization = "Bearer $env:GITHUB_TOKEN"; Accept = "application/vnd.github+json" } + try { $resp = Invoke-RestMethod -Uri $api -Headers $headers -Method Get -UseBasicParsing } catch { $resp = $null } + if ($resp) { + $names = @($resp | Where-Object { $_.type -eq 'file' } | ForEach-Object { $_.name }) + if ($names.Count -gt 0) { + $candidates = @() + foreach ($n in $names) { + if ($n -match '^ultralight(-free)?-sdk-([0-9]+\.[0-9]+\.[0-9]+)-(win|windows)-x64\.7z$') { $candidates += $n } + } + if ($candidates.Count -gt 0) { + $best = $null + foreach ($f in $candidates) { + $m = [regex]::Match($f, '([0-9]+\.[0-9]+\.[0-9]+)') + if ($m.Success) { + $ver = [version]$m.Groups[1].Value + if (-not $best -or $ver -gt $best.Version) { $best = [pscustomobject]@{ Version=$ver; File=$f } } + } + } + if ($best) { + $baseRaw = "https://raw.githubusercontent.com/${{ github.repository }}/base-sdk/sdks" + $url = "$baseRaw/$($best.File)" + "ULTRALIGHT_SDK_URL=$url" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + "ULTRALIGHT_VERSION=$($best.Version.ToString())" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + "url=$url" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + "version=$($best.Version.ToString())" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + exit 0 + } + } + } + } + $header = "data/include/Ultralight/Defines.h" + $version = $null + if (Test-Path $header) { + $matchLine = Select-String -Path $header -Pattern '^#define\s+ULTRALIGHT_VERSION\s+"([^"]+)"' | Select-Object -First 1 + if ($matchLine) { $version = $matchLine.Matches[0].Groups[1].Value } + } + if (-not $version) { + if ($env:ULTRALIGHT_VERSION) { $version = $env:ULTRALIGHT_VERSION } + else { $version = '1.4.0' } + } + $baseRaw = "https://raw.githubusercontent.com/${{ github.repository }}/base-sdk/sdks" + $candidates = @( + "$baseRaw/ultralight-free-sdk-$version-win-x64.7z", + "$baseRaw/ultralight-free-sdk-$version-windows-x64.7z" + ) + function Test-Url($u) { + try { $r = Invoke-WebRequest -Uri $u -Method Head -UseBasicParsing; return $true } catch {} + try { $tmp = Join-Path $env:RUNNER_TEMP "probe.tmp"; Invoke-WebRequest -Uri $u -Method Get -UseBasicParsing -OutFile $tmp | Out-Null; Remove-Item $tmp -ErrorAction SilentlyContinue; return $true } catch { return $false } + } + $found = $null + foreach ($url in $candidates) { if (Test-Url $url) { $found = $url; break } } + if ($found) { "ULTRALIGHT_SDK_URL=$found" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append } + else { Write-Error "Could not auto-detect a valid Windows SDK URL in base-sdk branch for version $version."; exit 1 } + + - name: Install 7zip + shell: pwsh + run: | + choco install 7zip -y --no-progress + $sevenZipExe = Join-Path $env:ProgramFiles '7-Zip/7z.exe' + if (Test-Path $sevenZipExe) { (Split-Path $sevenZipExe) | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append } + + - name: Prepare Ultralight SDK (Windows) + id: prep_sdk + shell: pwsh + run: | + $rootDefault = Join-Path $env:GITHUB_WORKSPACE 'data' + $root = $env:ULTRALIGHT_SDK_ROOT + if (-not $root) { $root = $rootDefault } + $present = 'false' + if ((Test-Path (Join-Path $root 'include')) -and ((Test-Path (Join-Path $root 'lib')) -or (Test-Path (Join-Path $root 'bin')))) { $present = 'true' } + elseif ($env:ULTRALIGHT_SDK_URL) { + $dlUrl = $env:ULTRALIGHT_SDK_URL + if ($dlUrl -match '^https://github.com/([^/]+)/([^/]+)/blob/(.+)$') { + $dlUrl = "https://raw.githubusercontent.com/$($Matches[1])/$($Matches[2])/$($Matches[3])" + } + $pkg = Join-Path $env:RUNNER_TEMP 'ultralight-sdk' + Invoke-WebRequest -Uri $dlUrl -UseBasicParsing -OutFile $pkg + $extract = Join-Path $env:RUNNER_TEMP 'sdk-extract' + New-Item -ItemType Directory -Force -Path $extract | Out-Null + & 7z x -y -o"$extract" "$pkg" | Out-Null + $rootFound = Get-ChildItem -Path $extract -Recurse -Directory | Where-Object { Test-Path (Join-Path $_.FullName 'include') -and Test-Path (Join-Path $_.FullName 'lib') } | Select-Object -First 1 + if ($rootFound) { $root = $rootFound.FullName; $present = 'true' } + } + "present=$present" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + if ($present -eq 'true') { + "ULTRALIGHT_SDK_ROOT=$root" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + } else { Write-Error "Ultralight Windows SDK not found."; exit 1 } + + - name: Install libcurl (vcpkg/choco) + shell: pwsh + run: | + pwsh -File "${{ github.workspace }}\scripts\install_curl.ps1" + + - name: Configure CMake (ARM64EC) + if: steps.prep_sdk.outputs.present == 'true' + shell: pwsh + run: | + cmake --version + $createInstaller = "$env:CREATE_INSTALLER" + if ($createInstaller -eq '' -or $null -eq $createInstaller) { $createInstaller = 'false' } + $installerFlag = if ($createInstaller -match '^(true|1|on)$') { 'ON' } else { 'OFF' } + $vcpkgToolchain = if ($env:VCPKG_ROOT) { "-DCMAKE_TOOLCHAIN_FILE=$env:VCPKG_ROOT/scripts/buildsystems/vcpkg.cmake" } else { "" } + cmake -S . -B build -G "Visual Studio 17 2022" -A ARM64EC -DULTRALIGHT_SDK_ROOT="$env:ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DCREATE_INSTALLER=$installerFlag -DWEBBROWSER_VERSION="$env:WEBBROWSER_VERSION" -DCMAKE_BUILD_TYPE=Release $vcpkgToolchain + + - name: Build Project + shell: pwsh + run: | + $ErrorActionPreference = 'Stop' + & cmake --build build --config Release --parallel From 7e9d91b1a3acf829de8fa6941a152acc5a1041b3 Mon Sep 17 00:00:00 2001 From: ovsky <37027844+ovsky@users.noreply.github.com> Date: Sat, 6 Dec 2025 04:55:45 +0100 Subject: [PATCH 19/20] Add Windows ARM64EC build to workflow --- .github/workflows/build-all.yml | 36 +++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/.github/workflows/build-all.yml b/.github/workflows/build-all.yml index ad5369a..4ed36c4 100644 --- a/.github/workflows/build-all.yml +++ b/.github/workflows/build-all.yml @@ -104,9 +104,20 @@ jobs: development_build: ${{ inputs.development_build || github.event.inputs.development_build || false }} clean_build: ${{ inputs.clean_build || github.event.inputs.clean_build || false }} + windows-arm64ec: + uses: ./.github/workflows/build-windows-arm64ec.yml + secrets: inherit + with: + sdk_url: ${{ inputs.sdk_url || github.event.inputs.sdk_url }} + version: ${{ inputs.version || github.event.inputs.version }} + webbrowser_version: ${{ inputs.webbrowser_version || github.event.inputs.webbrowser_version }} + development_build: ${{ inputs.development_build || github.event.inputs.development_build || false }} + clean_build: ${{ inputs.clean_build || github.event.inputs.clean_build || false }} + create_installer: ${{ inputs.create_installer || github.event_name == 'pull_request' }} + summary: name: "📊 Build Summary" - needs: [windows, macos-x64, macos-arm64, linux-x64, linux-arm64] + needs: [windows, windows-arm64ec, macos-x64, macos-arm64, linux-x64, linux-arm64] if: always() runs-on: ubuntu-latest steps: @@ -136,6 +147,7 @@ jobs: echo "| Platform | Status |" >> $GITHUB_STEP_SUMMARY echo "|----------|--------|" >> $GITHUB_STEP_SUMMARY echo "| 🪟 Windows x64 | ${{ needs.windows.result }} |" >> $GITHUB_STEP_SUMMARY + echo "| 🪟 Windows ARM64EC | ${{ needs.windows-arm64ec.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🍎 macOS x64 | ${{ needs.macos-x64.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🍎 macOS ARM64 | ${{ needs.macos-arm64.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🐧 Linux x64 | ${{ needs.linux-x64.result }} |" >> $GITHUB_STEP_SUMMARY @@ -192,17 +204,19 @@ jobs: run: | echo "Checking build results..." if [[ "${{ needs.windows.result }}" != "success" ]] || \ + [[ "${{ needs.windows-arm64ec.result }}" != "success" ]] || \ [[ "${{ needs.macos-x64.result }}" != "success" ]] || \ [[ "${{ needs.macos-arm64.result }}" != "success" ]] || \ [[ "${{ needs.linux-x64.result }}" != "success" ]] || \ [[ "${{ needs.linux-arm64.result }}" != "success" ]]; then - echo "⚠️ One or more builds failed or were skipped" - echo "Windows: ${{ needs.windows.result }}" - echo "macOS x64: ${{ needs.macos-x64.result }}" - echo "macOS ARM64: ${{ needs.macos-arm64.result }}" - echo "Linux x64: ${{ needs.linux-x64.result }}" - echo "Linux ARM64: ${{ needs.linux-arm64.result }}" - exit 1 - else - echo "✅ All builds succeeded!" - fi + echo "⚠️ One or more builds failed or were skipped" + echo "Windows: ${{ needs.windows.result }}" + echo "Windows ARM64EC: ${{ needs.windows-arm64ec.result }}" + echo "macOS x64: ${{ needs.macos-x64.result }}" + echo "macOS ARM64: ${{ needs.macos-arm64.result }}" + echo "Linux x64: ${{ needs.linux-x64.result }}" + echo "Linux ARM64: ${{ needs.linux-arm64.result }}" + exit 1 + else + echo "✅ All builds succeeded!" + fi From a9fceceb831e7b1ee989d978d5cb3c3059b2d0d9 Mon Sep 17 00:00:00 2001 From: ovsky <37027844+ovsky@users.noreply.github.com> Date: Sat, 6 Dec 2025 04:58:44 +0100 Subject: [PATCH 20/20] Remove unnecessary blank lines in build-all.yml --- .github/workflows/build-all.yml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.github/workflows/build-all.yml b/.github/workflows/build-all.yml index 4ed36c4..2695e22 100644 --- a/.github/workflows/build-all.yml +++ b/.github/workflows/build-all.yml @@ -140,7 +140,7 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # Job status table echo "## 📋 Build Status" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY @@ -155,11 +155,11 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # List all artifacts echo "## 📦 Generated Artifacts" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + if [ -d "artifacts" ]; then find artifacts -type f \( -name "*.zip" -o -name "*.exe" -o -name "*.tar.gz" -o -name "*.deb" -o -name "*.rpm" -o -name "*.dmg" \) | while read file; do size=$(du -h "$file" | cut -f1) @@ -169,15 +169,15 @@ jobs: else echo "⚠️ No artifacts directory found" >> $GITHUB_STEP_SUMMARY fi - + echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # Include individual platform summaries if available echo "## 📝 Platform Details" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + for summary in artifacts/*/BUILD-SUMMARY.md; do if [ -f "$summary" ]; then platform=$(dirname "$summary" | xargs basename) @@ -192,7 +192,7 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY fi done - + echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY echo "**🎉 Build completed!**" >> $GITHUB_STEP_SUMMARY @@ -217,6 +217,6 @@ jobs: echo "Linux x64: ${{ needs.linux-x64.result }}" echo "Linux ARM64: ${{ needs.linux-arm64.result }}" exit 1 - else - echo "✅ All builds succeeded!" - fi + else + echo "✅ All builds succeeded!" + fi