add files

2025-07-07 09:39:03 +08:00
commit c9f6571a0f
181 changed files with 100140 additions and 0 deletions
--- a/assets/wvbrowser_ui/content_ui/favorites.html
+++ b/assets/wvbrowser_ui/content_ui/favorites.html
@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>Favorites</title>
+        <link rel="shortcut icon" href="img/favorites.png">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="stylesheet" type="text/css" href="items.css">
+    </head>
+    <body>
+        <h1 class="main-title">Favorites</h1>
+        <div id="entries-container">
+            You don't have any favorites.
+        </div>
+        <script src="../commands.js"></script>
+        <script src="favorites.js"></script>
+    <body>
+</html>
--- a/assets/wvbrowser_ui/content_ui/favorites.js
+++ b/assets/wvbrowser_ui/content_ui/favorites.js
@ -0,0 +1,95 @@
+const messageHandler = event => {
+    var message = event.data.message;
+    var args = event.data.args;
+
+    switch (message) {
+        case commands.MG_GET_FAVORITES:
+            loadFavorites(args.favorites);
+            break;
+        default:
+            console.log(`Unexpected message: ${JSON.stringify(event.data)}`);
+            break;
+    }
+};
+
+function requestFavorites() {
+    let message = {
+        message: commands.MG_GET_FAVORITES,
+        args: {}
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function removeFavorite(uri) {
+    let message = {
+        message: commands.MG_REMOVE_FAVORITE,
+        args: {
+            uri: uri
+        }
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function loadFavorites(payload) {
+    let fragment = document.createDocumentFragment();
+
+    if (payload.length > 0) {
+        let container = document.getElementById('entries-container');
+        container.textContent = '';
+    }
+
+    payload.map(favorite => {
+        let favoriteContainer = document.createElement('div');
+        favoriteContainer.className = 'item-container';
+        let favoriteElement = document.createElement('div');
+        favoriteElement.className = 'item';
+
+        let faviconElement = document.createElement('div');
+        faviconElement.className = 'favicon';
+        let faviconImage = document.createElement('img');
+        faviconImage.src = favorite.favicon;
+        faviconElement.appendChild(faviconImage);
+
+        let labelElement = document.createElement('div');
+        labelElement.className = 'label-title';
+        let linkElement = document.createElement('a');
+        linkElement.textContent = favorite.title;
+        linkElement.href = favorite.uri;
+        linkElement.title = favorite.title;
+        labelElement.appendChild(linkElement);
+
+        let uriElement = document.createElement('div');
+        uriElement.className = 'label-uri';
+        let textElement = document.createElement('p');
+        textElement.textContent = favorite.uriToShow || favorite.uri;
+        textElement.title = favorite.uriToShow || favorite.uri;
+        uriElement.appendChild(textElement);
+
+        let buttonElement = document.createElement('div');
+        buttonElement.className = 'btn-close';
+        buttonElement.addEventListener('click', function(e) {
+            favoriteContainer.parentNode.removeChild(favoriteContainer);
+            removeFavorite(favorite.uri);
+        });
+
+        favoriteElement.appendChild(faviconElement);
+        favoriteElement.appendChild(labelElement);
+        favoriteElement.appendChild(uriElement);
+        favoriteElement.appendChild(buttonElement);
+
+        favoriteContainer.appendChild(favoriteElement);
+        fragment.appendChild(favoriteContainer);
+    });
+
+    let container = document.getElementById('entries-container');
+    container.appendChild(fragment);
+}
+
+function init() {
+    window.chrome.webview.addEventListener('message', messageHandler);
+    requestFavorites();
+}
+
+init();
--- a/assets/wvbrowser_ui/content_ui/history.css
+++ b/assets/wvbrowser_ui/content_ui/history.css
@ -0,0 +1,81 @@
+.header-date {
+    font-weight: 400;
+    font-size: 14px;
+    color: rgb(16, 16, 16);
+    line-height: 20px;
+    padding-top: 10px;
+    padding-bottom: 4px;
+    margin: 0;
+}
+
+#btn-clear {
+    font-size: 14px;
+    color: rgb(0, 97, 171);
+    cursor: pointer;
+    line-height: 20px;
+}
+
+#btn-clear.hidden {
+    display: none;
+}
+
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+#overlay.hidden {
+    display: none;
+}
+
+#prompt-box {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    position: fixed;
+    left: calc(50% - 130px);
+    top: calc(50% - 70px);
+    width: 260px;
+    height: 140px;
+    padding: 20px;
+    border-radius: 5px;
+    background-color: white;
+
+    box-shadow: rgba(0, 0, 0, 0.13) 0px 1.6px 20px, rgba(0, 0, 0, 0.11) 0px 0.3px 10px;
+}
+
+#prompt-options {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    user-select: none;
+}
+
+.prompt-btn {
+    flex: 1;
+    flex-grow: 0;
+    align-self: flex-end;
+    cursor: pointer;
+    font-family: 'system-ui', sans-serif;
+    display: inline-block;
+    padding: 2px 7px;
+    font-size: 14px;
+    line-height: 20px;
+    border-radius: 3px;
+    font-weight: 400;
+}
+
+#prompt-true {
+    background-color: rgb(0, 112, 198);
+    color: white;
+}
+
+#prompt-false {
+    background-color: rgb(210, 210, 210);
+    margin-right: 5px;
+}
--- a/assets/wvbrowser_ui/content_ui/history.html
+++ b/assets/wvbrowser_ui/content_ui/history.html
@ -0,0 +1,30 @@
+<html>
+    <head>
+        <title>History</title>
+        <link rel="shortcut icon" href="img/history.png">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="stylesheet" type="text/css" href="items.css">
+        <link rel="stylesheet" type="text/css" href="history.css">
+    </head>
+    <body>
+        <div id="overlay" class="hidden">
+            <div id="prompt-box">
+                <span class="prompt-text">Clear history?</span>
+                <div id="prompt-options">
+                    <div class="prompt-btn" id="prompt-false">Cancel</div>
+                    <div class="prompt-btn" id="prompt-true">Clear</div>
+                </div>
+            </div>
+        </div>
+        <h1 class="main-title">History</h1>
+        <div>
+            <span id="btn-clear" class="hidden">Clear history</span>
+        </div>
+        <div id="entries-container">
+            Loading...
+        </div>
+
+        <script src="../commands.js"></script>
+        <script src="history.js"></script>
+    </body>
+</html>
--- a/assets/wvbrowser_ui/content_ui/history.js
+++ b/assets/wvbrowser_ui/content_ui/history.js
@ -0,0 +1,273 @@
+const DEFAULT_HISTORY_ITEM_COUNT = 20;
+const EMPTY_HISTORY_MESSAGE = `You haven't visited any sites yet.`;
+let requestedTop = 0;
+let lastRequestSize = 0;
+let itemHeight = 48;
+
+const dateStringFormat = new Intl.DateTimeFormat('default', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+});
+
+const timeStringFormat = new Intl.DateTimeFormat('default', {
+    hour: '2-digit',
+    minute: '2-digit'
+});
+
+const messageHandler = event => {
+    var message = event.data.message;
+    var args = event.data.args;
+
+    switch (message) {
+        case commands.MG_GET_HISTORY:
+            let entriesContainer = document.getElementById('entries-container');
+            if (args.from == 0 && args.items.length) {
+                entriesContainer.textContent = '';
+
+                let clearButton = document.getElementById('btn-clear');
+                clearButton.classList.remove('hidden');
+            }
+
+            loadItems(args.items);
+            if (args.items.length == lastRequestSize) {
+                document.addEventListener('scroll', requestTrigger);
+            } else if (entriesContainer.childElementCount == 0) {
+                loadUIForEmptyHistory();
+            }
+            break;
+        default:
+            console.log(`Unexpected message: ${JSON.stringify(event.data)}`);
+            break;
+    }
+};
+
+const requestTrigger = function(event) {
+    let triggerRange = 50;
+    let element = document.body;
+
+    if (element.scrollTop + element.clientHeight >= element.scrollHeight - triggerRange) {
+        getMoreHistoryItems();
+        event.target.removeEventListener('scroll', requestTrigger);
+    }
+};
+
+function requestHistoryItems(from, count) {
+    let message = {
+        message: commands.MG_GET_HISTORY,
+        args: {
+            from: from,
+            count: count || DEFAULT_HISTORY_ITEM_COUNT
+        }
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function removeItem(id) {
+    let message = {
+        message: commands.MG_REMOVE_HISTORY_ITEM,
+        args: {
+            id: id
+        }
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function createItemElement(item, id, date) {
+    let itemContainer = document.createElement('div');
+    itemContainer.id = id;
+    itemContainer.className = 'item-container';
+
+    let itemElement = document.createElement('div');
+    itemElement.className = 'item';
+
+    // Favicon
+    let faviconElement = document.createElement('div');
+    faviconElement.className = 'favicon';
+    let faviconImage = document.createElement('img');
+    faviconImage.src = item.favicon;
+    faviconElement.append(faviconImage);
+    itemElement.append(faviconElement);
+
+    // Title
+    let titleLabel = document.createElement('div');
+    titleLabel.className = 'label-title';
+    let linkElement = document.createElement('a');
+    linkElement.href = item.uri;
+    linkElement.title = item.title;
+    linkElement.textContent = item.title;
+    titleLabel.append(linkElement);
+    itemElement.append(titleLabel);
+
+    // URI
+    let uriLabel = document.createElement('div');
+    uriLabel.className = 'label-uri';
+    let textElement = document.createElement('p');
+    textElement.title = item.uri;
+    textElement.textContent = item.uri;
+    uriLabel.append(textElement);
+    itemElement.append(uriLabel);
+
+    // Time
+    let timeLabel = document.createElement('div');
+    timeLabel.className = 'label-time';
+    let timeText = document.createElement('p');
+    timeText.textContent = timeStringFormat.format(date);
+    timeLabel.append(timeText);
+    itemElement.append(timeLabel);
+
+    // Close button
+    let closeButton = document.createElement('div');
+    closeButton.className = 'btn-close';
+    closeButton.addEventListener('click', function(e) {
+        if (itemContainer.parentNode.children.length <= 2) {
+            itemContainer.parentNode.remove();
+        } else {
+            itemContainer.remove();
+        }
+
+        let entriesContainer = document.getElementById('entries-container');
+        if (entriesContainer.childElementCount == 0) {
+            loadUIForEmptyHistory();
+        }
+        removeItem(parseInt(id.split('-')[1]));
+    });
+    itemElement.append(closeButton);
+    itemContainer.append(itemElement);
+
+    return itemContainer;
+}
+
+function createDateContainer(id, date) {
+    let dateContainer = document.createElement('div');
+    dateContainer.id = id;
+
+    let dateLabel = document.createElement('h3');
+    dateLabel.className = 'header-date';
+    dateLabel.textContent = dateStringFormat.format(date);
+    dateContainer.append(dateLabel);
+
+    return dateContainer;
+}
+
+function loadItems(items) {
+    let dateContainer;
+    let fragment;
+
+    items.map((entry) => {
+        let id = entry.id;
+        let item = entry.item;
+        let itemContainerId = `item-${id}`;
+
+        // Skip the item if already loaded. This could happen if the user
+        // visits an item for the current date again before requesting more
+        // history items.
+        let itemContainer = document.getElementById(itemContainerId);
+        if (itemContainer) {
+            return;
+        }
+
+        let date = new Date(item.timestamp);
+        let day = date.getDate();
+        let month = date.getMonth();
+        let year = date.getFullYear();
+        let dateContainerId = `entries-${month}-${day}-${year}`;
+
+        // If entry belongs to a new date, append buffered items for previous
+        // date.
+        if (dateContainer && dateContainer.id != dateContainerId) {
+            dateContainer.append(fragment);
+        }
+
+        dateContainer = document.getElementById(dateContainerId);
+        if (!dateContainer) {
+            dateContainer = createDateContainer(dateContainerId, date);
+            fragment = document.createDocumentFragment();
+
+            let entriesContainer = document.getElementById('entries-container');
+            entriesContainer.append(dateContainer);
+        } else if (!fragment) {
+            fragment = document.createDocumentFragment();
+        }
+
+        itemContainer = createItemElement(item, itemContainerId, date);
+        fragment.append(itemContainer);
+    });
+
+    // Append remaining items in buffer
+    if (fragment) {
+        dateContainer.append(fragment);
+    }
+}
+
+function getMoreHistoryItems(n) {
+    n = n ? n : DEFAULT_HISTORY_ITEM_COUNT;
+
+    requestHistoryItems(requestedTop, n);
+    requestedTop += n;
+    lastRequestSize = n;
+    document.removeEventListener('scroll', requestTrigger);
+}
+
+function addUIListeners() {
+    let confirmButton = document.getElementById('prompt-true');
+    confirmButton.addEventListener('click', function(event) {
+        clearHistory();
+        event.stopPropagation();
+    });
+
+    let cancelButton = document.getElementById('prompt-false');
+    cancelButton.addEventListener('click', function(event) {
+        toggleClearPrompt();
+        event.stopPropagation();
+    });
+
+    let promptBox = document.getElementById('prompt-box');
+    promptBox.addEventListener('click', function(event) {
+        event.stopPropagation();
+    });
+
+    let promptOverlay = document.getElementById('overlay');
+    promptOverlay.addEventListener('click', toggleClearPrompt);
+
+    let clearButton = document.getElementById('btn-clear');
+    clearButton.addEventListener('click', toggleClearPrompt);
+}
+
+function toggleClearPrompt() {
+    let promptOverlay = document.getElementById('overlay');
+    promptOverlay.classList.toggle('hidden');
+}
+
+function loadUIForEmptyHistory() {
+    let entriesContainer = document.getElementById('entries-container');
+    entriesContainer.textContent = EMPTY_HISTORY_MESSAGE;
+
+    let clearButton = document.getElementById('btn-clear');
+    clearButton.classList.add('hidden');
+}
+
+function clearHistory() {
+    toggleClearPrompt();
+    loadUIForEmptyHistory();
+
+    let message = {
+        message: commands.MG_CLEAR_HISTORY,
+        args: {}
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function init() {
+    window.chrome.webview.addEventListener('message', messageHandler);
+
+    let viewportItemsCapacity = Math.round(window.innerHeight / itemHeight);
+    addUIListeners();
+    getMoreHistoryItems(viewportItemsCapacity);
+}
+
+init();
--- a/assets/wvbrowser_ui/content_ui/img/close.png
+++ b/assets/wvbrowser_ui/content_ui/img/close.png
--- a/assets/wvbrowser_ui/content_ui/img/favorites.png
+++ b/assets/wvbrowser_ui/content_ui/img/favorites.png
--- a/assets/wvbrowser_ui/content_ui/img/history.png
+++ b/assets/wvbrowser_ui/content_ui/img/history.png
--- a/assets/wvbrowser_ui/content_ui/img/settings.png
+++ b/assets/wvbrowser_ui/content_ui/img/settings.png
--- a/assets/wvbrowser_ui/content_ui/items.css
+++ b/assets/wvbrowser_ui/content_ui/items.css
@ -0,0 +1,92 @@
+.item-container {
+    box-sizing: border-box;
+    padding: 4px 0;
+    height: 48px;
+}
+
+.item {
+    display: flex;
+    width: 100%;
+    max-width: 820px;
+    height: 40px;
+    width: 100%;
+    border-radius: 4px;
+    box-sizing: border-box;
+    box-shadow: rgba(0, 0, 0, 0.13) 0px 1.6px 3.6px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px;
+    align-items: center;
+    background: rgb(255, 255, 255);
+}
+
+.item:hover {
+    box-shadow: 0px 4.8px 10.8px rgba(0,0,0,0.13), 0px 0.9px 2.7px rgba(0,0,0,0.11);
+}
+
+.favicon {
+    display: flex;
+    height: 40px;
+    width: 40px;
+    justify-content: center;
+    align-items: center;
+}
+
+.favicon img {
+    width: 16px;
+    height: 16px;
+}
+
+.label-title, .label-uri {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    height: 40px;
+    align-items: center;
+}
+
+.label-title a {
+    cursor: pointer;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgb(16, 16, 16);
+    border-width: initial;
+    border-style: none;
+    border-color: initial;
+    border-image: initial;
+    overflow: hidden;
+    background: none;
+    text-decoration: none;
+}
+
+.label-title a:hover {
+    text-decoration: underline;
+}
+
+.label-uri, .label-time {
+    margin: 0 6px;
+    line-height: 16px;
+    font-size: 12px;
+    color: rgb(115, 115, 115);
+}
+
+.label-uri p, .label-time p {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.btn-close {
+    height: 28px;
+    width: 28px;
+    margin: 6px;
+    border-radius: 2px;
+    background-image: url('img/close.png');
+    background-size: 100%;
+}
+
+.btn-close:hover {
+    background-color: rgb(243, 243, 243);
+}
--- a/assets/wvbrowser_ui/content_ui/settings.css
+++ b/assets/wvbrowser_ui/content_ui/settings.css
@ -0,0 +1,54 @@
+.settings-entry {
+    display: block;
+    height: 48px;
+    width: 100%;
+    max-width: 500px;
+
+    background: none;
+    border: none;
+    padding: 4px 0;
+	font: inherit;
+	cursor: pointer;
+}
+
+#entry-script, #entry-popups {
+    display: none;
+}
+
+.entry {
+    display: block;
+    height: 100%;
+    text-align: left;
+    border-radius: 5px;
+}
+
+.entry:hover {
+    background-color: rgb(220, 220, 220);
+}
+
+.entry:focus {
+    outline: none;
+}
+
+.entry-name, .entry-value {
+    display: inline-flex;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.entry-name span, .entry-value span {
+    flex: 1;
+    align-self: center;
+}
+
+.entry-name {
+    padding-left: 10px;
+}
+
+.entry-value {
+    float: right;
+    vertical-align: middle;
+    margin: 0 15px;
+    font-size: 0.8em;
+    color: gray;
+}
--- a/assets/wvbrowser_ui/content_ui/settings.html
+++ b/assets/wvbrowser_ui/content_ui/settings.html
@ -0,0 +1,56 @@
+<html>
+    <head>
+        <title>Settings</title>
+        <link rel="shortcut icon" href="img/settings.png">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="stylesheet" type="text/css" href="settings.css">
+    </head>
+    <body>
+        <h1 class="main-title">Settings</h1>
+        <div class="page-content">
+            <button class="settings-entry" id="entry-cache">
+                <div class="entry">
+                    <div class="entry-name">
+                        <span>Clear cache</span>
+                    </div>
+                    <div class="entry-value">
+                        <span></span>
+                    </div>
+                </div>
+            </button>
+            <button class="settings-entry" id="entry-cookies">
+                <div class="entry">
+                    <div class="entry-name">
+                        <span>Clear cookies</span>
+                    </div>
+                    <div class="entry-value">
+                        <span></span>
+                    </div>
+                </div>
+            </button>
+            <button class="settings-entry" id="entry-script">
+                <div class="entry">
+                    <div class="entry-name">
+                        <span>Toggle JavaScript</span>
+                    </div>
+                    <div class="entry-value">
+                        <span></span>
+                    </div>
+                </div>
+            </button>
+            <button class="settings-entry" id="entry-popups">
+                <div class="entry">
+                    <div class="entry-name">
+                        <span>Block pop-ups</span>
+                    </div>
+                    <div class="entry-value">
+                        <span></span>
+                    </div>
+                </div>
+            </button>
+        </div>
+
+        <script src="../commands.js"></script>
+        <script src="settings.js"></script>
+    </body>
+</html>
--- a/assets/wvbrowser_ui/content_ui/settings.js
+++ b/assets/wvbrowser_ui/content_ui/settings.js
@ -0,0 +1,107 @@
+const messageHandler = event => {
+    var message = event.data.message;
+    var args = event.data.args;
+
+    switch (message) {
+        case commands.MG_GET_SETTINGS:
+            loadSettings(args.settings);
+            break;
+        case commands.MG_CLEAR_CACHE:
+            if (args.content && args.controls) {
+                updateLabelForEntry('entry-cache', 'Cleared');
+            } else {
+                updateLabelForEntry('entry-cache', 'Try again');
+            }
+            break;
+        case commands.MG_CLEAR_COOKIES:
+            if (args.content && args.controls) {
+                updateLabelForEntry('entry-cookies', 'Cleared');
+            } else {
+                updateLabelForEntry('entry-cookies', 'Try again');
+            }
+            break;
+        default:
+            console.log(`Unexpected message: ${JSON.stringify(event.data)}`);
+            break;
+    }
+};
+
+function addEntriesListeners() {
+    let cacheEntry = document.getElementById('entry-cache');
+    cacheEntry.addEventListener('click', function(e) {
+        let message = {
+            message: commands.MG_CLEAR_CACHE,
+            args: {}
+        };
+
+        window.chrome.webview.postMessage(message);
+    });
+
+    let cookiesEntry = document.getElementById('entry-cookies');
+    cookiesEntry.addEventListener('click', function(e) {
+        let message = {
+            message: commands.MG_CLEAR_COOKIES,
+            args: {}
+        };
+
+        window.chrome.webview.postMessage(message);
+    });
+
+    let scriptEntry = document.getElementById('entry-script');
+    scriptEntry.addEventListener('click', function(e) {
+        // Toggle script support
+    });
+
+    let popupsEntry = document.getElementById('entry-popups');
+    popupsEntry.addEventListener('click', function(e) {
+        // Toggle popups
+    });
+}
+
+function requestBrowserSettings() {
+    let message = {
+        message: commands.MG_GET_SETTINGS,
+        args: {}
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function loadSettings(settings) {
+    if (settings.scriptsEnabled) {
+        updateLabelForEntry('entry-script', 'Enabled');
+    } else {
+        updateLabelForEntry('entry-script', 'Disabled');
+    }
+
+    if (settings.blockPopups) {
+        updateLabelForEntry('entry-popups', 'Blocked');
+    } else {
+        updateLabelForEntry('entry-popups', 'Allowed');
+    }
+}
+
+function updateLabelForEntry(elementId, label) {
+    let entryElement = document.getElementById(elementId);
+    if (!entryElement) {
+        console.log(`Element with id ${elementId} does not exist`);
+        return;
+    }
+
+    let labelSpan = entryElement.querySelector(`.entry-value span`);
+
+    if (!labelSpan) {
+        console.log(`${elementId} does not have a label`);
+        return;
+    }
+
+    labelSpan.textContent = label;
+}
+
+function init() {
+    window.chrome.webview.addEventListener('message', messageHandler);
+    requestBrowserSettings();
+    addEntriesListeners();
+}
+
+init();
--- a/assets/wvbrowser_ui/content_ui/styles.css
+++ b/assets/wvbrowser_ui/content_ui/styles.css
@ -0,0 +1,25 @@
+html, body {
+    margin: 0;
+    border: none;
+    padding: 0;
+
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: rgb(240, 240, 242);
+}
+
+p {
+    margin: 0;
+}
+
+body {
+    padding: 32px 50px;
+    font-family: 'system-ui', sans-serif;
+}
+
+.main-title {
+    display: block;
+    margin-bottom: 18px;
+    font-size: 24px;
+    font-weight: 600;
+    color: rgb(16, 16, 16);
+}