├── .editorconfig
├── .eslintrc.js
├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    ├── PULL_REQUEST_TEMPLATE.md
    ├── config.yml
    └── workflows
    │   └── build.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
    └── settings.json
├── .yarnclean
├── README.md
├── dev-app-update.yml
├── docs
    ├── README.md
    ├── development.md
    ├── extensions.md
    └── keyboard-shortcuts.md
├── electron-builder.json
├── package.json
├── removeLocales.js
├── scripts
    ├── ci-build.js
    └── utils.js
├── src
    ├── common
    │   ├── renderer-config.ts
    │   ├── rpc
    │   │   ├── extensions.ts
    │   │   └── network.ts
    │   ├── webui-main.ts
    │   └── webui.ts
    ├── constants
    │   ├── design.ts
    │   ├── files.ts
    │   ├── index.ts
    │   ├── settings.ts
    │   └── web-contents.ts
    ├── index.d.ts
    ├── interfaces
    │   ├── bookmark.ts
    │   ├── bounds.ts
    │   ├── download-item.ts
    │   ├── extensions.ts
    │   ├── favicon.ts
    │   ├── form-fill.ts
    │   ├── history-item.ts
    │   ├── history-section.ts
    │   ├── index.ts
    │   ├── news-item.ts
    │   ├── settings.ts
    │   ├── startup-tab.ts
    │   ├── storage.ts
    │   ├── suggestion.ts
    │   ├── tabs.ts
    │   ├── theme.ts
    │   ├── urls.ts
    │   └── weather.ts
    ├── main
    │   ├── application.ts
    │   ├── dialogs
    │   │   ├── add-bookmark.ts
    │   │   ├── auth.ts
    │   │   ├── credentials.ts
    │   │   ├── dialog.ts
    │   │   ├── downloads.ts
    │   │   ├── extension-popup.ts
    │   │   ├── find.ts
    │   │   ├── form-fill.ts
    │   │   ├── menu.ts
    │   │   ├── permissions.ts
    │   │   ├── popup.ts
    │   │   ├── preview.ts
    │   │   ├── search.ts
    │   │   ├── show-block.ts
    │   │   ├── show-video.ts
    │   │   ├── tabgroup.ts
    │   │   └── zoom.ts
    │   ├── extension-service-handler.ts
    │   ├── index.ts
    │   ├── menus
    │   │   ├── bookmarks.ts
    │   │   ├── common-actions.ts
    │   │   ├── extension-popup.ts
    │   │   ├── main.ts
    │   │   └── view.ts
    │   ├── models
    │   │   ├── protocol.ts
    │   │   └── settings.ts
    │   ├── network
    │   │   ├── network-service-handler.ts
    │   │   └── request.ts
    │   ├── services
    │   │   ├── adblock.ts
    │   │   ├── auto-updater.ts
    │   │   ├── dialogs-service.ts
    │   │   ├── index.ts
    │   │   ├── messaging.ts
    │   │   ├── storage.ts
    │   │   └── xiu-video.ts
    │   ├── sessions-service.ts
    │   ├── user-agent.ts
    │   ├── utils
    │   │   ├── form-fill.ts
    │   │   └── index.ts
    │   ├── view-manager.ts
    │   ├── view.ts
    │   ├── windows-service.ts
    │   └── windows
    │   │   ├── app.ts
    │   │   └── index.ts
    ├── models
    │   ├── database.ts
    │   └── dialog-store.ts
    ├── preloads
    │   ├── chrome-webstore.ts
    │   ├── constants
    │   │   ├── form-fill.ts
    │   │   └── index.ts
    │   ├── extensions-preload.ts
    │   ├── models
    │   │   ├── auto-complete.ts
    │   │   ├── database.ts
    │   │   ├── form.ts
    │   │   ├── index.ts
    │   │   └── ipc-event.ts
    │   ├── popup-preload.ts
    │   ├── preload.js
    │   ├── utils
    │   │   ├── autofill.ts
    │   │   ├── dom.ts
    │   │   └── index.ts
    │   └── view-preload.ts
    ├── renderer
    │   ├── components
    │   │   ├── Button
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   ├── Checkbox
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   ├── ContextMenu
    │   │   │   └── index.ts
    │   │   ├── Dropdown
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   ├── GlobalNavigationDrawer
    │   │   │   └── index.tsx
    │   │   ├── Input
    │   │   │   └── index.tsx
    │   │   ├── ListItem
    │   │   │   └── index.ts
    │   │   ├── NavigationDrawer
    │   │   │   ├── NavigationDrawerItem
    │   │   │   │   ├── index.tsx
    │   │   │   │   └── style.ts
    │   │   │   ├── index.tsx
    │   │   │   └── style.ts
    │   │   ├── Pages
    │   │   │   └── index.ts
    │   │   ├── PasswordInput
    │   │   │   └── index.tsx
    │   │   ├── Preloader
    │   │   │   ├── index.tsx
    │   │   │   └── style.ts
    │   │   ├── RadioButton
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   ├── RadioButtons
    │   │   │   └── index.tsx
    │   │   ├── Ripple
    │   │   │   ├── index.tsx
    │   │   │   └── style.ts
    │   │   ├── SelectionDialog
    │   │   │   ├── index.tsx
    │   │   │   └── style.ts
    │   │   ├── Switch
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   └── Textfield
    │   │   │   ├── index.tsx
    │   │   │   └── style.ts
    │   ├── constants
    │   │   ├── colors.ts
    │   │   ├── design.ts
    │   │   ├── dictionary.ts
    │   │   ├── fonts.ts
    │   │   ├── icons.ts
    │   │   ├── index.ts
    │   │   ├── themes.ts
    │   │   └── transparency.ts
    │   ├── mixins
    │   │   ├── cursors.ts
    │   │   ├── default-styles.ts
    │   │   ├── dialogs.ts
    │   │   ├── images.ts
    │   │   ├── index.ts
    │   │   ├── positioning.ts
    │   │   ├── scroll.ts
    │   │   ├── shadows.ts
    │   │   ├── typography.ts
    │   │   └── user-selection.ts
    │   ├── pre-entry.ts
    │   ├── resources
    │   │   ├── fonts
    │   │   │   ├── roboto-light.woff2
    │   │   │   ├── roboto-medium.woff2
    │   │   │   └── roboto-regular.woff2
    │   │   └── icons
    │   │   │   ├── about.svg
    │   │   │   ├── add.svg
    │   │   │   ├── all.svg
    │   │   │   ├── arrow-back.svg
    │   │   │   ├── arrow-right.svg
    │   │   │   ├── autofill.svg
    │   │   │   ├── back.svg
    │   │   │   ├── bookmarks.svg
    │   │   │   ├── calendar.svg
    │   │   │   ├── check.svg
    │   │   │   ├── close.svg
    │   │   │   ├── dashboard.svg
    │   │   │   ├── delete.svg
    │   │   │   ├── down.svg
    │   │   │   ├── download.svg
    │   │   │   ├── drop-down.svg
    │   │   │   ├── drop-window.svg
    │   │   │   ├── edit.svg
    │   │   │   ├── extensions.svg
    │   │   │   ├── find.svg
    │   │   │   ├── fire.svg
    │   │   │   ├── folder.svg
    │   │   │   ├── folder_dark.png
    │   │   │   ├── folder_dark@2x.png
    │   │   │   ├── folder_light.png
    │   │   │   ├── folder_light@2x.png
    │   │   │   ├── forward.svg
    │   │   │   ├── fullscreen-exit.svg
    │   │   │   ├── history.svg
    │   │   │   ├── home.svg
    │   │   │   ├── incognito.svg
    │   │   │   ├── invisible.svg
    │   │   │   ├── key.svg
    │   │   │   ├── link.svg
    │   │   │   ├── location.svg
    │   │   │   ├── magnify-minus.svg
    │   │   │   ├── magnify-plus.svg
    │   │   │   ├── menu.svg
    │   │   │   ├── more.svg
    │   │   │   ├── new-folder.svg
    │   │   │   ├── night.svg
    │   │   │   ├── page.svg
    │   │   │   ├── page_dark.png
    │   │   │   ├── page_dark@2x.png
    │   │   │   ├── page_light.png
    │   │   │   ├── page_light@2x.png
    │   │   │   ├── palette.svg
    │   │   │   ├── pause.svg
    │   │   │   ├── play.svg
    │   │   │   ├── power.svg
    │   │   │   ├── print.svg
    │   │   │   ├── refresh.svg
    │   │   │   ├── save.svg
    │   │   │   ├── search.svg
    │   │   │   ├── settings.svg
    │   │   │   ├── shield.svg
    │   │   │   ├── star-filled.svg
    │   │   │   ├── star.svg
    │   │   │   ├── tab.svg
    │   │   │   ├── today.svg
    │   │   │   ├── top-most.svg
    │   │   │   ├── tune.svg
    │   │   │   ├── up.svg
    │   │   │   ├── video.svg
    │   │   │   ├── visible.svg
    │   │   │   ├── volume-high.svg
    │   │   │   ├── volume-off.svg
    │   │   │   ├── weather
    │   │   │       ├── day
    │   │   │       │   ├── clear.png
    │   │   │       │   ├── few-clouds.png
    │   │   │       │   ├── rain.png
    │   │   │       │   ├── showers.png
    │   │   │       │   ├── snow.png
    │   │   │       │   └── storm.png
    │   │   │       └── night
    │   │   │       │   ├── clear.png
    │   │   │       │   ├── drizzle.png
    │   │   │       │   ├── few-clouds.png
    │   │   │       │   ├── rain.png
    │   │   │       │   ├── showers.png
    │   │   │       │   ├── snow.png
    │   │   │       │   └── storm.png
    │   │   │   ├── week.svg
    │   │   │   └── window.svg
    │   └── views
    │   │   ├── add-bookmark
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── app
    │   │       ├── components
    │   │       │   ├── AddressBar
    │   │       │   │   ├── index.tsx
    │   │       │   │   ├── input.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── AddressBarContainer
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── BookmarkBar
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── BrowserAction
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── NavigationButtons
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── RightButtons
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── SiteButtons
    │   │       │   │   └── index.tsx
    │   │       │   ├── Tab
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── TabGroup
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Tabbar
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Tabs
    │   │       │   │   └── index.tsx
    │   │       │   ├── Titlebar
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Toolbar
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── ToolbarButton
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── constants
    │   │       │   ├── api.ts
    │   │       │   ├── dictionary.ts
    │   │       │   ├── index.ts
    │   │       │   └── tabs.ts
    │   │       ├── index.tsx
    │   │       ├── models
    │   │       │   ├── browser-action.ts
    │   │       │   ├── index.ts
    │   │       │   ├── tab-group.ts
    │   │       │   └── tab.ts
    │   │       ├── store
    │   │       │   ├── add-tab.ts
    │   │       │   ├── autofill.ts
    │   │       │   ├── bookmark-bar.ts
    │   │       │   ├── downloads.ts
    │   │       │   ├── extensions.ts
    │   │       │   ├── index.ts
    │   │       │   ├── settings.ts
    │   │       │   ├── startup-tabs.ts
    │   │       │   ├── tab-groups.ts
    │   │       │   └── tabs.ts
    │   │       └── utils
    │   │       │   ├── dialogs.ts
    │   │       │   ├── tabs.ts
    │   │       │   ├── view.ts
    │   │       │   └── windows.ts
    │   │   ├── auth
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── bookmarks
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Bookmark
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── BookmarksSection
    │   │       │   │   └── style.ts
    │   │       │   ├── Tree
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── TreeItem
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       ├── store
    │   │       │   └── index.ts
    │   │       └── utils
    │   │       │   └── index.ts
    │   │   ├── credentials
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── List
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── styles.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── downloads-dialog
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── DownloadItem
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── DownloadItemMenu
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.tsx
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── extension-popup
    │   │       └── index.tsx
    │   │   ├── find
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── form-fill
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── List
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── styles.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── history
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   └── index.tsx
    │   │       │   ├── HistoryItem
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── HistorySection
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       ├── store
    │   │       │   └── index.ts
    │   │       └── utils
    │   │       │   └── index.ts
    │   │   ├── menu
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── QuickMenu
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── newtab
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── News
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── NewsItem
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Preferences
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── TopSite
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── TopSites
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       ├── store
    │   │       │   └── index.ts
    │   │       └── utils
    │   │       │   └── index.ts
    │   │   ├── permissions
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── preview
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── search
    │   │       ├── components
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Suggestion
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   └── Suggestions
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       ├── store
    │   │       │   ├── index.ts
    │   │       │   └── suggestions.ts
    │   │       └── utils
    │   │       │   └── suggestions.ts
    │   │   ├── settings
    │   │       ├── components
    │   │       │   ├── About
    │   │       │   │   └── index.tsx
    │   │       │   ├── AddressBar
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       │   ├── Appearance
    │   │       │   │   └── index.tsx
    │   │       │   ├── Autofill
    │   │       │   │   ├── AddressDialog
    │   │       │   │   │   └── index.tsx
    │   │       │   │   ├── Addresses
    │   │       │   │   │   ├── index.tsx
    │   │       │   │   │   └── styles.ts
    │   │       │   │   ├── Passwords
    │   │       │   │   │   ├── index.tsx
    │   │       │   │   │   └── styles.ts
    │   │       │   │   ├── Section
    │   │       │   │   │   ├── index.tsx
    │   │       │   │   │   └── styles.ts
    │   │       │   │   └── index.tsx
    │   │       │   ├── Dialog
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── styles.ts
    │   │       │   ├── Downloads
    │   │       │   │   └── index.tsx
    │   │       │   ├── Extensions
    │   │       │   │   └── index.tsx
    │   │       │   ├── Privacy
    │   │       │   │   ├── BrowsingDataDialog
    │   │       │   │   │   └── index.tsx
    │   │       │   │   └── index.tsx
    │   │       │   └── Startup
    │   │       │   │   └── index.tsx
    │   │       ├── index.tsx
    │   │       ├── store
    │   │       │   ├── autofill.ts
    │   │       │   ├── index.ts
    │   │       │   └── startup-tabs.ts
    │   │       ├── style.ts
    │   │       └── utils
    │   │       │   ├── index.ts
    │   │       │   └── settings.ts
    │   │   ├── show-block
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   ├── input.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── show-video
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   ├── tabgroup
    │   │       ├── components
    │   │       │   └── App
    │   │       │   │   ├── index.tsx
    │   │       │   │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │       │   └── index.ts
    │   │   └── zoom
    │   │       ├── components
    │   │           └── App
    │   │           │   ├── index.tsx
    │   │           │   └── style.ts
    │   │       ├── index.tsx
    │   │       └── store
    │   │           └── index.ts
    └── utils
    │   ├── colors.ts
    │   ├── crx.ts
    │   ├── files.ts
    │   ├── form-fill.ts
    │   ├── history.ts
    │   ├── index.ts
    │   ├── paths.ts
    │   ├── queue.ts
    │   ├── string.ts
    │   ├── themes.ts
    │   ├── ui-entry.ts
    │   ├── url.ts
    │   ├── view.ts
    │   ├── webui-entry.ts
    │   └── zip.ts
├── static
    ├── icons
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    ├── installer.nsh
    ├── nightly-icons
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── pages
    │   ├── app.html
    │   ├── extension-popup.html
    │   └── network-error.html
├── tsconfig.json
├── web.koodoreader.com
    ├── assets
    │   ├── empty.svg
    │   ├── label.png
    │   └── styles
    │   │   ├── blue.css
    │   │   ├── default.css
    │   │   ├── green.css
    │   │   ├── purple.css
    │   │   └── red.css
    ├── favicon.png
    ├── index.html
    ├── lib
    │   ├── 7z-wasm
    │   │   └── 7zz.umd.js
    │   ├── Dropbox
    │   │   └── Dropbox-sdk.min.js
    │   ├── Hammer
    │   │   └── hammer.min.js
    │   ├── JSZip
    │   │   └── jszip.min.js
    │   ├── Rangy
    │   │   ├── rangy-classapplier.js
    │   │   ├── rangy-core.js
    │   │   ├── rangy-highlighter.js
    │   │   ├── rangy-serializer.js
    │   │   └── rangy-textrange.js
    │   ├── chinese-s2t
    │   │   └── chinese-s2t.js
    │   ├── fflate
    │   │   └── fflate.min.js
    │   ├── filesaver
    │   │   └── FileSaver.min.js
    │   ├── js-untar
    │   │   └── untar.js
    │   ├── jschardet
    │   │   └── jschardet.min.js
    │   ├── kookit
    │   │   └── kookit.min.js
    │   ├── libunrar
    │   │   └── rpc.js
    │   ├── localforage
    │   │   └── localforage.min.js
    │   ├── mammoth
    │   │   └── mammoth.browser.min.js
    │   ├── marked
    │   │   └── marked.js
    │   ├── mhtml2html
    │   │   └── mhtml2html.js
    │   ├── underscore
    │   │   └── underscore-umd-min.js
    │   └── zipjs
    │   │   └── zip-no-worker.min.js
    └── static
    │   ├── css
    │       └── main.44bf7702.css
    │   ├── js
    │       └── main.13cf373f.js
    │   └── media
    │       └── icomoon.07265ef087078c194d79.ttf
├── webpack.config.base.js
├── webpack.config.js
├── webpack.config.renderer.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | charset = utf-8
7 | trim_trailing_whitespace = false
8 | insert_final_newline = false


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parser: '@typescript-eslint/parser',
 3 |   extends: [
 4 |     'plugin:react/recommended',
 5 |     'plugin:@typescript-eslint/recommended',
 6 |     'prettier/@typescript-eslint',
 7 |     'plugin:prettier/recommended',
 8 |     'prettier/react',
 9 |   ],
10 |   parserOptions: {
11 |     ecmaVersion: 2018,
12 |     sourceType: 'module',
13 |   },
14 |   rules: {
15 |     '@typescript-eslint/explicit-function-return-type': 'off',
16 |     '@typescript-eslint/interface-name-prefix': 'off',
17 |     '@typescript-eslint/no-var-requires': 'off',
18 |     '@typescript-eslint/no-namespace': 'off',
19 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [sentialx]
2 | patreon: sentialx
3 | open_collective: wexond
4 | custom: https://paypal.me/sentialx
5 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Bug description**
11 | <!-- A clear and concise description of what the bug is. -->
12 | 
13 | **To Reproduce**
14 | <!-- Steps to reproduce the behavior -->
15 | 
16 | **Expected behavior**
17 | <!-- A clear and concise description of what you expected to happen. -->
18 | 
19 | **Screenshots**
20 | <!-- If applicable, add screenshots to help explain your problem. -->
21 | 
22 | **Details:**
23 |  - Operating System: 
24 |  - Wexond version: 
25 |  - Last known working Wexond version: 
26 | 
27 | **Additional context**
28 | <!-- Add any other context about the problem here. -->
29 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
12 | 
13 | **Describe the solution you'd like**
14 | <!-- A clear and concise description of what you want to happen. -->
15 | 
16 | **Describe alternatives you've considered**
17 | <!-- A clear and concise description of any alternative solutions or features you've considered. -->
18 | 
19 | **Additional context**
20 | <!-- Add any other context or screenshots about the feature request here. -->
21 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | #### Description of Change
 2 | 
 3 | <!--
 4 | Thank you for your Pull Request. Please provide a description above and review
 5 | the requirements below.
 6 | -->
 7 | 
 8 | #### Checklist
 9 | 
10 | <!-- Remove items that do not apply. For completed items, change [ ] to [x]. -->
11 | 
12 | - [ ] PR description included
13 | - [ ] PR title follows semantic [commit guidelines](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
14 | - [ ] PR release notes describe the change, and are capitalized, punctuated, and past tense.
15 | 
16 | #### Release Notes
17 | 
18 | Notes: <!-- Please add a one-line description for users to read in the release notes, or 'none' if no notes relevant to users.
19 | 


--------------------------------------------------------------------------------
/.github/config.yml:
--------------------------------------------------------------------------------
1 | authorizedUsers:
2 |   - sentialx
3 |   - xnerhu
4 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   release:
 7 |     runs-on: ${{ matrix.os }}
 8 | 
 9 |     strategy:
10 |       matrix:
11 |         os: [macos-latest, windows-latest, ubuntu-latest]
12 | 
13 |     steps:
14 |       - name: Check out Git repository
15 |         uses: actions/checkout@v2
16 | 
17 |       - name: Install Node.js
18 |         uses: actions/setup-node@v1
19 |         with:
20 |           node-version: 14
21 | 
22 |       # - name: Install required build toolchain
23 |       # if: matrix.os == 'ubuntu-latest'
24 |       # run: sudo apt-get install gcc-multilib g++-multilib
25 | 
26 |       - name: Install dependencies
27 |         run: yarn install --frozen-lockfile
28 |         env:
29 |           ADBLOCK: true
30 | 
31 |       - name: Get commit message
32 |         run: echo "::set-output name=message::$(git log --no-merges -1 --oneline)"
33 | 
34 |       - name: Build the app
35 |         run: yarn ci-build
36 |         env:
37 |           GH_TOKEN: ${{ secrets.token }}
38 | 
39 |           MAC_CERTS: ${{ secrets.mac_certs }}
40 |           MAC_CERTS_PASSWORD: ${{ secrets.mac_certs_password }}
41 | 
42 |           RELEASE: ${{ contains(steps.log.outputs.message, 'bump version') }}
43 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log
 3 | *.log*
 4 | build
 5 | dist
 6 | .DS_Store
 7 | .fusebox
 8 | filters
 9 | package-lock.json
10 | temp-electron-builder.json
11 | temp-package.json
12 | chunks-entries-map.json
13 | .idea
14 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: true,
3 |   trailingComma: 'all',
4 |   singleQuote: true,
5 |   tabWidth: 2,
6 | };
7 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "typescript.tsdk": "node_modules\\typescript\\lib",
 3 |   "eslint.packageManager": "npm",
 4 |   "[javascript]": {
 5 |     "editor.defaultFormatter": "esbenp.prettier-vscode",
 6 |     "editor.formatOnSave": true
 7 |   },
 8 |   "[javascriptreact]": {
 9 |     "editor.defaultFormatter": "esbenp.prettier-vscode",
10 |     "editor.formatOnSave": true
11 |   },
12 |   "[typescript]": {
13 |     "editor.defaultFormatter": "esbenp.prettier-vscode",
14 |     "editor.formatOnSave": true
15 |   },
16 |   "[typescriptreact]": {
17 |     "editor.defaultFormatter": "esbenp.prettier-vscode",
18 |     "editor.formatOnSave": true
19 |   },
20 |   "editor.codeActionsOnSave": {
21 |     "source.fixAll.eslint": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/.yarnclean:
--------------------------------------------------------------------------------
 1 | # test directories
 2 | __tests__
 3 | test
 4 | tests
 5 | powered-test
 6 | 
 7 | # asset directories
 8 | docs
 9 | doc
10 | website
11 | images
12 | assets
13 | 
14 | # examples
15 | example
16 | examples
17 | 
18 | # code coverage directories
19 | coverage
20 | .nyc_output
21 | 
22 | # build scripts
23 | Makefile
24 | Gulpfile.js
25 | Gruntfile.js
26 | 
27 | # configs
28 | appveyor.yml
29 | circle.yml
30 | codeship-services.yml
31 | codeship-steps.yml
32 | wercker.yml
33 | .tern-project
34 | .gitattributes
35 | .editorconfig
36 | .*ignore
37 | .eslintrc
38 | .jshintrc
39 | .flowconfig
40 | .documentup.json
41 | .yarn-metadata.json
42 | .travis.yml
43 | 
44 | # misc
45 | *.md
46 | 


--------------------------------------------------------------------------------
/dev-app-update.yml:
--------------------------------------------------------------------------------
1 | owner: wexond
2 | repo: desktop
3 | provider: github
4 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Documentation
2 | 
3 | ## Table of contents
4 | 
5 | 1. [Keyboard shortcuts](keyboard-shortcuts.md)
6 | 2. [Extensions](extensions.md)
7 | 


--------------------------------------------------------------------------------
/docs/development.md:
--------------------------------------------------------------------------------
 1 | # Development
 2 | 
 3 | ## IPC
 4 | 
 5 | Now, the preferred way to communicate between processes is to use [`@wexond/rpc-electron`](https://github.com/wexond/rpc) package.
 6 | 
 7 | Example:
 8 | 
 9 | Handling the IPC message in the main process:
10 | 
11 | [`src/main/network/network-service-handler.ts`](../src/main/network/network-service-handler.ts)
12 | 
13 | 
14 | Sending the IPC message to the main process:
15 | 
16 | ```ts
17 | const { data } = await networkMainChannel.getInvoker().request('http://localhost');
18 | ```
19 | 
20 | Common RPC interface
21 | 
22 | [`src/common/rpc/network.ts`](../src/common/rpc/network.ts)
23 | 
24 | ## Remote module
25 | 
26 | As Electron will be deprecating the `remote` module, we are migrating to our RPC solution.
27 | 
28 | ## Node integration
29 | 
30 | We are going to turn off `nodeIntegration`, enable `contextIsolation` and `sandbox` in the UI webContents,
31 | therefore we prefer not having requires to node.js built-in modules in renderers.
32 | 
33 | ## Project structure
34 | 
35 | Common interfaces, constants etc. should land into the `common` directory.
36 | 


--------------------------------------------------------------------------------
/docs/extensions.md:
--------------------------------------------------------------------------------
 1 | # Extensions
 2 | 
 3 | Wexond has partial support for Chrome extensions (see [#110](https://github.com/wexond/desktop/issues/110)).
 4 | 
 5 | # Installing an extension
 6 | 
 7 | To install an extension, you will need to extract the `crx` file of the extension and put the extracted folder to `extensions` directory.
 8 | 
 9 | The `extensions` directory paths:
10 | - On Linux and macOS: `~/.wexond/extensions`
11 | - On Windows: `%USERPROFILE%/.wexond/extensions`
12 | 


--------------------------------------------------------------------------------
/removeLocales.js:
--------------------------------------------------------------------------------
 1 | //https://www.electron.build/configuration/configuration#afterpack
 2 | exports.default = async function(context) {
 3 |   //console.log(context)
 4 |   const fs = require('fs')
 5 |   const localeDir = context.appOutDir + '/locales/'
 6 |   fs.readdir(localeDir, function(err, files) {
 7 |     if (!(files && files.length)) return
 8 |     for (let i = 0, len = files.length; i < len; i++) {
 9 |       const match = files[i].match(/zh-CN|zh-TW|en-US\.pak/)
10 |       if (match === null) {
11 |         fs.unlinkSync(localeDir + files[i])
12 |       }
13 |     }
14 |   })
15 | }


--------------------------------------------------------------------------------
/scripts/utils.js:
--------------------------------------------------------------------------------
 1 | const { execSync } = require('child_process');
 2 | const { resolve } = require('path');
 3 | 
 4 | const run = cmd => {
 5 |   execSync(cmd, {
 6 |     encoding: 'utf8',
 7 |     cwd: resolve(__dirname, '..'),
 8 |     stdio: 'inherit',
 9 |   });
10 | };
11 | 
12 | module.exports = {
13 |   run,
14 | };
15 | 


--------------------------------------------------------------------------------
/src/common/renderer-config.ts:
--------------------------------------------------------------------------------
 1 | import { configure } from 'mobx';
 2 | import { setIpcRenderer } from '@wexond/rpc-electron';
 3 | import { ipcRenderer } from 'electron';
 4 | 
 5 | export const configureUI = () => {
 6 |   configure({ enforceActions: 'never' });
 7 | };
 8 | 
 9 | export const configureRenderer = () => {
10 |   setIpcRenderer(ipcRenderer);
11 | };
12 | 


--------------------------------------------------------------------------------
/src/common/rpc/extensions.ts:
--------------------------------------------------------------------------------
 1 | import { RendererToMainChannel } from '@wexond/rpc-electron';
 2 | 
 3 | export interface ExtensionMainService {
 4 |   uninstall(id: string): void;
 5 |   inspectBackgroundPage(id: string): void;
 6 | }
 7 | 
 8 | export const extensionMainChannel = new RendererToMainChannel<ExtensionMainService>(
 9 |   'ExtensionMainService',
10 | );
11 | 


--------------------------------------------------------------------------------
/src/common/rpc/network.ts:
--------------------------------------------------------------------------------
 1 | import { RendererToMainChannel } from '@wexond/rpc-electron';
 2 | 
 3 | export interface ResponseDetails {
 4 |   statusCode: number;
 5 |   data: string;
 6 | }
 7 | 
 8 | export interface NetworkService {
 9 |   request(url: string): Promise<ResponseDetails>;
10 | }
11 | 
12 | export const networkMainChannel = new RendererToMainChannel<NetworkService>(
13 |   'NetworkService',
14 | );
15 | 


--------------------------------------------------------------------------------
/src/common/webui-main.ts:
--------------------------------------------------------------------------------
 1 | import {WEBUI_BASE_URL, WEBUI_URL_SUFFIX} from '~/constants/files';
 2 | import {Application} from "~/main/application";
 3 | 
 4 | export const getWebUIURL = (hostname: string) => {
 5 |   if (hostname == "boke") {
 6 |     return "https://haikuoshijie.cn/";
 7 |   }
 8 |   if (hostname == "newtab" && process.env.ENABLE_EXTENSIONS) {
 9 |     const newtabUrl = Application.instance.settings.object.newtab;
10 |     console.log("newtab", newtabUrl);
11 |     if (newtabUrl && newtabUrl != "") {
12 |       if(Application.instance.tempTabUrl) {
13 |         return Application.instance.tempTabUrl;
14 |       }
15 |       return newtabUrl.split("\n")[0];
16 |     }
17 |   }
18 |   return `${WEBUI_BASE_URL}${hostname}${WEBUI_URL_SUFFIX}`;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/common/webui.ts:
--------------------------------------------------------------------------------
 1 | import {WEBUI_BASE_URL, WEBUI_URL_SUFFIX} from '~/constants/files';
 2 | 
 3 | let storeNewTab = "";
 4 | let storeNewTabTemp = "";
 5 | 
 6 | export const updateStoreNewTab = (url: string) => {
 7 |   storeNewTab = url;
 8 |   if (!url) {
 9 |     storeNewTabTemp = url;
10 |   }
11 | }
12 | 
13 | export const updateStoreNewTabTemp = (url: string) => {
14 |   storeNewTabTemp = url;
15 | }
16 | 
17 | export const getWebUIURL = (hostname: string) => {
18 |   if (hostname == "boke") {
19 |     return "https://haikuoshijie.cn/";
20 |   }
21 |   if ("newtab" == hostname) {
22 |     if (storeNewTabTemp) {
23 |       return storeNewTabTemp;
24 |     }
25 |     if (storeNewTab) {
26 |       return storeNewTab.split("\n")[0];
27 |     }
28 |   }
29 |   return `${WEBUI_BASE_URL}${hostname}${WEBUI_URL_SUFFIX}`;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/constants/design.ts:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_TAB_MARGIN_TOP = 8;
 2 | export const COMPACT_TAB_MARGIN_TOP = 8;
 3 | 
 4 | export const DEFAULT_TAB_HEIGHT = 28;
 5 | export const COMPACT_TAB_HEIGHT = 28;
 6 | 
 7 | // Toolbar
 8 | export const TOOLBAR_HEIGHT = 42;
 9 | 
10 | export const TOOLBAR_BUTTON_WIDTH = 36;
11 | export const TOOLBAR_BUTTON_HEIGHT = 32;
12 | 
13 | export const ADD_TAB_BUTTON_WIDTH = 28;
14 | export const ADD_TAB_BUTTON_HEIGHT = 28;
15 | 
16 | export const DEFAULT_TITLEBAR_HEIGHT =
17 |   DEFAULT_TAB_MARGIN_TOP * 2 + DEFAULT_TAB_HEIGHT;
18 | export const COMPACT_TITLEBAR_HEIGHT =
19 |   2 * COMPACT_TAB_MARGIN_TOP + COMPACT_TAB_HEIGHT;
20 | 
21 | export const VIEW_Y_OFFSET = TOOLBAR_HEIGHT + DEFAULT_TITLEBAR_HEIGHT;
22 | 
23 | // Widths
24 | export const WINDOWS_BUTTON_WIDTH = 45;
25 | export const MENU_WIDTH = 330;
26 | 
27 | // Dialogs
28 | export const DIALOG_MIN_HEIGHT = 130;
29 | export const DIALOG_MARGIN = 16;
30 | export const DIALOG_TOP = 34;
31 | export const DIALOG_MARGIN_TOP = 3;
32 | 


--------------------------------------------------------------------------------
/src/constants/files.ts:
--------------------------------------------------------------------------------
 1 | import { DEFAULT_SETTINGS } from './settings';
 2 | 
 3 | export const DIRECTORIES = ['adblock', 'extensions', 'storage'];
 4 | 
 5 | export const WEBUI_PROTOCOL = 'wexond';
 6 | 
 7 | export const ERROR_PROTOCOL = 'wexond-error';
 8 | 
 9 | export const NETWORK_ERROR_HOST = 'network-error';
10 | 
11 | export const WEBUI_BASE_URL =
12 |   process.env.NODE_ENV === 'development'
13 |     ? 'http://localhost:4444/'
14 |     : `${WEBUI_PROTOCOL}://`;
15 | 
16 | export const WEBUI_URL_SUFFIX = WEBUI_BASE_URL.startsWith('http')
17 |   ? '.html'
18 |   : '';
19 | 
20 | export const FILES = {
21 |   'settings.json': DEFAULT_SETTINGS,
22 |   'window-data.json': {},
23 | };
24 | 


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './settings';
2 | 
3 | export const EXTENSIONS_PROTOCOL = 'chrome-extension';
4 | 


--------------------------------------------------------------------------------
/src/constants/web-contents.ts:
--------------------------------------------------------------------------------
1 | export const ZOOM_FACTOR_INCREMENT = 0.2;
2 | export const ZOOM_FACTOR_MAX = 5;
3 | export const ZOOM_FACTOR_MIN = 0.2;
4 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg';
2 | declare module '*.png';
3 | declare module '*.woff2';
4 | 


--------------------------------------------------------------------------------
/src/interfaces/bookmark.ts:
--------------------------------------------------------------------------------
 1 | export interface IBookmark {
 2 |   _id?: string;
 3 |   title?: string;
 4 |   url?: string;
 5 |   favicon?: string;
 6 |   hovered?: boolean;
 7 |   isFolder?: boolean;
 8 |   parent?: string;
 9 |   order?: number;
10 |   expanded?: boolean;
11 |   static?: 'mobile' | 'main' | 'other' | 'pinned';
12 |   children?: string[];
13 | }
14 | 


--------------------------------------------------------------------------------
/src/interfaces/bounds.ts:
--------------------------------------------------------------------------------
 1 | export interface IRectangle {
 2 |   x?: number;
 3 |   y?: number;
 4 |   height?: number;
 5 |   width?: number;
 6 | }
 7 | 
 8 | export interface IPoint {
 9 |   x?: number;
10 |   y?: number;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/interfaces/download-item.ts:
--------------------------------------------------------------------------------
 1 | export interface IDownloadItem {
 2 |   fileName?: string;
 3 |   receivedBytes?: number;
 4 |   totalBytes?: number;
 5 |   savePath?: string;
 6 |   url?: string;
 7 |   id?: string;
 8 |   completed?: boolean;
 9 |   paused?: boolean;
10 |   canceled?: boolean;
11 |   menuIsOpen?: boolean;
12 |   openWhenDone?: boolean;
13 | }
14 | 
15 | export interface IElectronDownloadItem {
16 |   item?: Electron.DownloadItem;
17 |   webContents?: Electron.WebContents;
18 |   id?: string;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/interfaces/extensions.ts:
--------------------------------------------------------------------------------
 1 | export type BrowserActionChangeType =
 2 |   | 'setPopup'
 3 |   | 'setBadgeText'
 4 |   | 'setTitle'
 5 |   | 'setIcon'
 6 |   | 'setBadgeBackgroundColor';
 7 | 
 8 | export const BROWSER_ACTION_METHODS: BrowserActionChangeType[] = [
 9 |   'setPopup',
10 |   'setBadgeText',
11 |   'setTitle',
12 |   'setIcon',
13 |   'setBadgeBackgroundColor',
14 | ];
15 | 


--------------------------------------------------------------------------------
/src/interfaces/favicon.ts:
--------------------------------------------------------------------------------
1 | export interface IFavicon {
2 |   url?: string;
3 |   data?: string;
4 |   _id?: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/interfaces/form-fill.ts:
--------------------------------------------------------------------------------
 1 | export interface IFormFillData {
 2 |   _id?: string;
 3 |   type?: 'password' | 'address';
 4 |   url?: string;
 5 |   favicon?: string;
 6 |   fields?: {
 7 |     username?: string;
 8 |     passLength?: number;
 9 |     password?: string;
10 |     name?: string;
11 |     address?: string;
12 |     postCode?: string;
13 |     city?: string;
14 |     phone?: string;
15 |     email?: string;
16 |     country?: string;
17 |   };
18 | }
19 | 
20 | export interface IFormFillMenuItem {
21 |   _id?: string;
22 |   text?: string;
23 |   subtext?: string;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/interfaces/history-item.ts:
--------------------------------------------------------------------------------
 1 | export interface IHistoryItem {
 2 |   _id?: string;
 3 |   title?: string;
 4 |   url?: string;
 5 |   date?: number;
 6 |   favicon?: string;
 7 |   hovered?: boolean;
 8 | }
 9 | 
10 | export interface IVisitedItem extends IHistoryItem {
11 |   times: number;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/interfaces/history-section.ts:
--------------------------------------------------------------------------------
1 | import { IHistoryItem } from './history-item';
2 | 
3 | export interface IHistorySection {
4 |   label?: string;
5 |   items?: IHistoryItem[];
6 |   date?: Date;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/interfaces/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './bookmark';
 2 | export * from './download-item';
 3 | export * from './favicon';
 4 | export * from './history-item';
 5 | export * from './history-section';
 6 | export * from './settings';
 7 | export * from './suggestion';
 8 | export * from './theme';
 9 | export * from './weather';
10 | export * from './form-fill';
11 | export * from './storage';
12 | export * from './bounds';
13 | export * from './extensions';
14 | 


--------------------------------------------------------------------------------
/src/interfaces/news-item.ts:
--------------------------------------------------------------------------------
 1 | export interface INewsItem {
 2 |   source: {
 3 |     id: string;
 4 |     name: string;
 5 |   };
 6 |   author: string;
 7 |   title: string;
 8 |   description: string;
 9 |   url: string;
10 |   urlToImage: string;
11 |   publishedAt: string;
12 |   content: string;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/interfaces/settings.ts:
--------------------------------------------------------------------------------
 1 | export interface ISearchEngine {
 2 |   name?: string;
 3 |   url?: string;
 4 |   keywordsUrl?: string;
 5 |   keyword?: string;
 6 |   icon?: string;
 7 | }
 8 | 
 9 | export interface IStartupBehavior {
10 |   type: 'continue' | 'urls' | 'empty';
11 | }
12 | 
13 | export type TopBarVariant = 'default' | 'compact';
14 | 
15 | export interface ISettings {
16 |   theme: string;
17 |   themeAuto: boolean;
18 |   shield: boolean;
19 |   multrin: boolean;
20 |   animations: boolean;
21 |   bookmarksBar: boolean;
22 |   suggestions: boolean;
23 |   searchEngine: number;
24 |   searchEngines: ISearchEngine[];
25 |   startupBehavior: IStartupBehavior;
26 |   warnOnQuit: boolean;
27 |   version: number;
28 |   darkContents: boolean;
29 |   downloadsDialog: boolean;
30 |   downloadsPath: string;
31 |   doNotTrack: boolean;
32 |   topBarVariant: TopBarVariant;
33 |   autofill: boolean;
34 |   newtab: string;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/interfaces/startup-tab.ts:
--------------------------------------------------------------------------------
 1 | export interface IStartupTab {
 2 |   id?: number;
 3 |   windowId?: number;
 4 |   groupId?: number;
 5 |   title?: string;
 6 |   url?: string;
 7 |   favicon?: string;
 8 |   order?: number;
 9 |   pinned?: boolean;
10 |   isUserDefined?: boolean;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/interfaces/storage.ts:
--------------------------------------------------------------------------------
 1 | export interface IOperation {
 2 |   scope: string;
 3 | }
 4 | 
 5 | export interface IFindOperation extends IOperation {
 6 |   query: any;
 7 | }
 8 | 
 9 | export interface IInsertOperation extends IOperation {
10 |   item: any;
11 | }
12 | 
13 | export interface IRemoveOperation extends IFindOperation {
14 |   multi?: boolean;
15 | }
16 | 
17 | export interface IUpdateOperation extends IFindOperation, IRemoveOperation {
18 |   value: any;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/interfaces/suggestion.ts:
--------------------------------------------------------------------------------
 1 | export interface ISuggestion {
 2 |   primaryText?: string;
 3 |   secondaryText?: string;
 4 |   id?: number;
 5 |   favicon?: string;
 6 |   canSuggest?: boolean;
 7 |   isSearch?: boolean;
 8 |   hovered?: boolean;
 9 |   url?: string;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/interfaces/tabs.ts:
--------------------------------------------------------------------------------
 1 | export type TabEvent =
 2 |   | 'load-commit'
 3 |   | 'url-updated'
 4 |   | 'title-updated'
 5 |   | 'favicon-updated'
 6 |   | 'did-navigate'
 7 |   | 'loading'
 8 |   | 'pinned'
 9 |   | 'credentials'
10 |   | 'blocked-ad'
11 |   | 'zoom-updated'
12 |   | 'media-playing'
13 |   | 'media-paused'
14 |   | 'xiu-video';
15 | 


--------------------------------------------------------------------------------
/src/interfaces/theme.ts:
--------------------------------------------------------------------------------
 1 | export interface ITheme {
 2 |   'titlebar.backgroundColor': string;
 3 | 
 4 |   'addressbar.backgroundColor': string;
 5 |   'addressbar.textColor': string;
 6 | 
 7 |   'toolbar.backgroundColor': string;
 8 |   'toolbar.bottomLine.backgroundColor': string;
 9 |   'toolbar.lightForeground': boolean;
10 |   'toolbar.separator.color': string;
11 | 
12 |   'tab.textColor': string;
13 |   'tab.selected.textColor': string;
14 | 
15 |   'control.backgroundColor': string;
16 |   'control.hover.backgroundColor': string;
17 |   'control.valueColor': string;
18 |   'control.lightIcon': boolean;
19 |   'switch.backgroundColor': string;
20 | 
21 |   'dialog.separator.color': string;
22 |   'dialog.backgroundColor': string;
23 |   'dialog.textColor': string;
24 |   'dialog.lightForeground': boolean;
25 | 
26 |   'searchBox.backgroundColor': string;
27 |   'searchBox.lightForeground': boolean;
28 | 
29 |   'pages.backgroundColor': string;
30 |   'pages.lightForeground': boolean;
31 |   'pages.textColor': string;
32 |   'pages.navigationDrawer1.backgroundColor': string;
33 |   'pages.navigationDrawer2.backgroundColor': string;
34 | 
35 |   'dropdown.backgroundColor': string;
36 |   'dropdown.backgroundColor.translucent': string;
37 |   'dropdown.separator.color': string;
38 | 
39 |   backgroundColor: string;
40 |   accentColor: string;
41 | 
42 |   animations?: boolean;
43 | 
44 |   titlebarHeight?: number;
45 |   tabHeight?: number;
46 |   tabMarginTop?: number;
47 |   isCompact?: boolean;
48 | 
49 |   dark?: boolean;
50 | }
51 | 


--------------------------------------------------------------------------------
/src/interfaces/urls.ts:
--------------------------------------------------------------------------------
1 | export interface IURLSegment {
2 |   value: string;
3 |   grayOut: boolean;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/main/dialogs/add-bookmark.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | import { IBookmark } from '~/interfaces';
 5 | 
 6 | export const showAddBookmarkDialog = (
 7 |   browserWindow: BrowserWindow,
 8 |   x: number,
 9 |   y: number,
10 |   data?: {
11 |     url: string;
12 |     title: string;
13 |     bookmark?: IBookmark;
14 |     favicon?: string;
15 |   },
16 | ) => {
17 |   if (!data) {
18 |     const {
19 |       url,
20 |       title,
21 |       bookmark,
22 |       favicon,
23 |     } = Application.instance.windows.current.viewManager.selected;
24 |     data = {
25 |       url,
26 |       title,
27 |       bookmark,
28 |       favicon,
29 |     };
30 |   }
31 | 
32 |   const dialog = Application.instance.dialogs.show({
33 |     name: 'add-bookmark',
34 |     browserWindow,
35 |     getBounds: () => ({
36 |       width: 366,
37 |       height: 240,
38 |       x: x - 366 + DIALOG_MARGIN,
39 |       y: y - DIALOG_MARGIN_TOP,
40 |     }),
41 |     onWindowBoundsUpdate: () => dialog.hide(),
42 |   });
43 | 
44 |   if (!dialog) return;
45 | 
46 |   dialog.on('loaded', (e) => {
47 |     e.reply('data', data);
48 |   });
49 | };
50 | 


--------------------------------------------------------------------------------
/src/main/dialogs/auth.ts:
--------------------------------------------------------------------------------
 1 | import { VIEW_Y_OFFSET } from '~/constants/design';
 2 | import { BrowserWindow } from 'electron';
 3 | import { Application } from '../application';
 4 | 
 5 | export const requestAuth = (
 6 |   browserWindow: BrowserWindow,
 7 |   url: string,
 8 |   tabId: number,
 9 | ): Promise<{ username: string; password: string }> => {
10 |   return new Promise((resolve, reject) => {
11 |     const appWindow = Application.instance.windows.fromBrowserWindow(
12 |       browserWindow,
13 |     );
14 | 
15 |     const tab = appWindow.viewManager.views.get(tabId);
16 |     tab.requestedAuth = { url };
17 | 
18 |     const dialog = Application.instance.dialogs.show({
19 |       name: 'auth',
20 |       browserWindow,
21 |       getBounds: () => {
22 |         const { width } = browserWindow.getContentBounds();
23 |         return {
24 |           width: 400,
25 |           height: 500,
26 |           x: width / 2 - 400 / 2,
27 |           y: VIEW_Y_OFFSET,
28 |         };
29 |       },
30 |       tabAssociation: {
31 |         tabId,
32 |         getTabInfo: (tabId) => {
33 |           const tab = appWindow.viewManager.views.get(tabId);
34 |           return tab.requestedAuth;
35 |         },
36 |       },
37 |       onWindowBoundsUpdate: (disposition) => {
38 |         if (disposition === 'resize') dialog.rearrange();
39 |       },
40 |     });
41 | 
42 |     if (!dialog) return;
43 | 
44 |     dialog.on('result', (e, result) => {
45 |       resolve(result);
46 |       dialog.hide();
47 |     });
48 |   });
49 | };
50 | 


--------------------------------------------------------------------------------
/src/main/dialogs/credentials.ts:
--------------------------------------------------------------------------------
 1 | import { VIEW_Y_OFFSET } from '~/constants/design';
 2 | import { AppWindow } from '../windows';
 3 | import { Dialog } from '.';
 4 | 
 5 | const WIDTH = 350;
 6 | const HEIGHT = 271;
 7 | 
 8 | export class CredentialsDialog extends Dialog {
 9 |   public constructor(appWindow: AppWindow) {
10 |     super(appWindow, {
11 |       name: 'credentials',
12 |       bounds: {
13 |         height: HEIGHT,
14 |         width: WIDTH,
15 |         y: VIEW_Y_OFFSET,
16 |       },
17 |     });
18 |   }
19 | 
20 |   public rearrange() {
21 |     const { width } = this.appWindow.win.getContentBounds();
22 |     super.rearrange({
23 |       x: width - WIDTH,
24 |     });
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/main/dialogs/downloads.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import {
 4 |   DIALOG_MARGIN_TOP,
 5 |   DIALOG_MARGIN,
 6 |   DIALOG_TOP,
 7 | } from '~/constants/design';
 8 | 
 9 | export const showDownloadsDialog = (
10 |   browserWindow: BrowserWindow,
11 |   x: number,
12 |   y: number,
13 | ) => {
14 |   let height = 0;
15 | 
16 |   const dialog = Application.instance.dialogs.show({
17 |     name: 'downloads-dialog',
18 |     browserWindow,
19 |     getBounds: () => {
20 |       const winBounds = browserWindow.getContentBounds();
21 |       const maxHeight = winBounds.height - DIALOG_TOP - 16;
22 | 
23 |       height = Math.round(Math.min(winBounds.height, height + 28));
24 | 
25 |       dialog.browserView.webContents.send(
26 |         `max-height`,
27 |         Math.min(maxHeight, height),
28 |       );
29 | 
30 |       return {
31 |         x: x - 350 + DIALOG_MARGIN,
32 |         y: y - DIALOG_MARGIN_TOP,
33 |         width: 350,
34 |         height,
35 |       };
36 |     },
37 |     onWindowBoundsUpdate: () => dialog.hide(),
38 |   });
39 | 
40 |   if (!dialog) return;
41 | 
42 |   dialog.on('height', (e, h) => {
43 |     height = h;
44 |     dialog.rearrange();
45 |   });
46 | };
47 | 


--------------------------------------------------------------------------------
/src/main/dialogs/find.ts:
--------------------------------------------------------------------------------
 1 | import { VIEW_Y_OFFSET } from '~/constants/design';
 2 | import { BrowserWindow } from 'electron';
 3 | import { Application } from '../application';
 4 | 
 5 | export const showFindDialog = (browserWindow: BrowserWindow) => {
 6 |   const appWindow =
 7 |     Application.instance.windows.fromBrowserWindow(browserWindow);
 8 | 
 9 |   const dialog = Application.instance.dialogs.show({
10 |     name: 'find',
11 |     browserWindow,
12 |     devtools: false,
13 |     getBounds: () => {
14 |       const { width } = browserWindow.getContentBounds();
15 |       return {
16 |         width: 416,
17 |         height: 70,
18 |         x: width - 416,
19 |         y: VIEW_Y_OFFSET,
20 |       };
21 |     },
22 |     tabAssociation: {
23 |       tabId: appWindow.viewManager.selectedId,
24 |       getTabInfo: (tabId) => {
25 |         const tab = appWindow.viewManager.views.get(tabId);
26 |         return tab.findInfo;
27 |       },
28 |       setTabInfo: (tabId, info) => {
29 |         const tab = appWindow.viewManager.views.get(tabId);
30 |         tab.findInfo = info;
31 |       },
32 |     },
33 |     onWindowBoundsUpdate: (disposition) => {
34 |       if (disposition === 'resize') dialog.rearrange();
35 |     },
36 |   });
37 | };
38 | 


--------------------------------------------------------------------------------
/src/main/dialogs/form-fill.ts:
--------------------------------------------------------------------------------
 1 | import { VIEW_Y_OFFSET, DIALOG_MARGIN_TOP } from '~/constants/design';
 2 | import { Dialog } from './dialog';
 3 | import { AppWindow } from '../windows';
 4 | 
 5 | const WIDTH = 208;
 6 | const HEIGHT = 128;
 7 | 
 8 | export class FormFillDialog extends Dialog {
 9 |   public inputRect = {
10 |     width: 0,
11 |     height: 0,
12 |     x: 0,
13 |     y: 0,
14 |   };
15 | 
16 |   public constructor(appWindow: AppWindow) {
17 |     super(appWindow, {
18 |       name: 'form-fill',
19 |       bounds: {
20 |         height: HEIGHT,
21 |         width: WIDTH,
22 |       },
23 |     });
24 |   }
25 | 
26 |   public rearrange() {
27 |     super.rearrange({
28 |       x: this.inputRect.x - 8,
29 |       y:
30 |         this.inputRect.y +
31 |         this.inputRect.height +
32 |         VIEW_Y_OFFSET -
33 |         DIALOG_MARGIN_TOP +
34 |         2,
35 |     });
36 |   }
37 | 
38 |   public resize(count: number, hasSubtext = false) {
39 |     const itemHeight = hasSubtext ? 56 : 32;
40 |     super.rearrange({
41 |       width: WIDTH,
42 |       height: count * itemHeight + DIALOG_MARGIN_TOP * 2 + 16,
43 |     });
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/main/dialogs/menu.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | 
 5 | export const showMenuDialog = (
 6 |   browserWindow: BrowserWindow,
 7 |   x: number,
 8 |   y: number,
 9 | ) => {
10 |   const menuWidth = 330;
11 |   const dialog = Application.instance.dialogs.show({
12 |     name: 'menu',
13 |     browserWindow,
14 |     getBounds: () => ({
15 |       width: menuWidth,
16 |       height: 510,
17 |       x: x - menuWidth + DIALOG_MARGIN,
18 |       y: y - DIALOG_MARGIN_TOP,
19 |     }),
20 |     onWindowBoundsUpdate: () => {
21 |       dialog.hide();
22 |     },
23 |   });
24 | };
25 | 


--------------------------------------------------------------------------------
/src/main/dialogs/permissions.ts:
--------------------------------------------------------------------------------
 1 | import { VIEW_Y_OFFSET } from '~/constants/design';
 2 | import { BrowserWindow } from 'electron';
 3 | import { Application } from '../application';
 4 | 
 5 | export const requestPermission = (
 6 |   browserWindow: BrowserWindow,
 7 |   name: string,
 8 |   url: string,
 9 |   details: any,
10 |   tabId: number,
11 | ): Promise<boolean> => {
12 |   return new Promise((resolve, reject) => {
13 |     if (
14 |       name === 'unknown' ||
15 |       (name === 'media' && details.mediaTypes.length === 0) ||
16 |       name === 'midiSysex'
17 |     ) {
18 |       return reject('Unknown permission');
19 |     }
20 | 
21 |     const appWindow = Application.instance.windows.fromBrowserWindow(
22 |       browserWindow,
23 |     );
24 | 
25 |     appWindow.viewManager.selected.requestedPermission = { name, url, details };
26 | 
27 |     const dialog = Application.instance.dialogs.show({
28 |       name: 'permissions',
29 |       browserWindow,
30 |       getBounds: () => ({
31 |         width: 366,
32 |         height: 165,
33 |         x: 0,
34 |         y: VIEW_Y_OFFSET,
35 |       }),
36 |       tabAssociation: {
37 |         tabId,
38 |         getTabInfo: (tabId) => {
39 |           const tab = appWindow.viewManager.views.get(tabId);
40 |           return tab.requestedPermission;
41 |         },
42 |       },
43 |       onWindowBoundsUpdate: (disposition) => {
44 |         if (disposition === 'resize') dialog.rearrange();
45 |       },
46 |     });
47 | 
48 |     if (!dialog) return;
49 | 
50 |     dialog.on('result', (e, result) => {
51 |       resolve(result);
52 |       dialog.hide();
53 |     });
54 |   });
55 | };
56 | 


--------------------------------------------------------------------------------
/src/main/dialogs/preview.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | import { PersistentDialog } from './dialog';
 5 | import { ERROR_PROTOCOL } from '~/constants/files';
 6 | 
 7 | const HEIGHT = 256;
 8 | 
 9 | export class PreviewDialog extends PersistentDialog {
10 |   public visible = false;
11 |   public tab: { id?: number; x?: number; y?: number } = {};
12 | 
13 |   constructor() {
14 |     super({
15 |       name: 'preview',
16 |       bounds: {
17 |         height: HEIGHT,
18 |       },
19 |       hideTimeout: 150,
20 |     });
21 |   }
22 | 
23 |   public rearrange() {
24 |     const { width } = this.browserWindow.getContentBounds();
25 |     super.rearrange({ width, y: this.tab.y });
26 |   }
27 | 
28 |   public async show(browserWindow: BrowserWindow) {
29 |     super.show(browserWindow, false);
30 | 
31 |     const {
32 |       id,
33 |       url,
34 |       title,
35 |       errorURL,
36 |     } = Application.instance.windows
37 |       .fromBrowserWindow(browserWindow)
38 |       .viewManager.views.get(this.tab.id);
39 | 
40 |     this.send('visible', true, {
41 |       id,
42 |       url: url.startsWith(`${ERROR_PROTOCOL}://`) ? errorURL : url,
43 |       title,
44 |       x: this.tab.x - 8,
45 |     });
46 |   }
47 | 
48 |   public hide(bringToTop = true) {
49 |     super.hide(bringToTop);
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/main/dialogs/show-block.ts:
--------------------------------------------------------------------------------
 1 | import {BrowserWindow} from 'electron';
 2 | import {Application} from '../application';
 3 | import {DIALOG_MARGIN_TOP, DIALOG_MARGIN} from '~/constants/design';
 4 | import {IBookmark} from '~/interfaces';
 5 | 
 6 | export const showBlockDialog = (
 7 |   browserWindow: BrowserWindow,
 8 |   x: number,
 9 |   y: number,
10 |   data: {
11 |     data: [{
12 |       url: string;
13 |       filter: string;
14 |     }],
15 |     count: number
16 |   },
17 | ) => {
18 |   const dialog = Application.instance.dialogs.show({
19 |     name: 'show-block',
20 |     browserWindow,
21 |     getBounds: () => ({
22 |       width: 466,
23 |       height: 99999,
24 |       x: x - 466 + DIALOG_MARGIN,
25 |       y: y - DIALOG_MARGIN_TOP,
26 |     }),
27 |     onWindowBoundsUpdate: () => dialog.hide(),
28 |   });
29 | 
30 |   if (!dialog) return;
31 | 
32 |   dialog.on('loaded', (e) => {
33 |     e.reply('data', data);
34 |   });
35 | };
36 | 


--------------------------------------------------------------------------------
/src/main/dialogs/show-video.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | 
 5 | export const showVideoDialog = (
 6 |   browserWindow: BrowserWindow,
 7 |   x: number,
 8 |   y: number,
 9 |   data?: {
10 |     videoUrls?: string[];
11 |     tabId: number
12 |   },
13 | ) => {
14 |   if (!data) {
15 |     const {
16 |       videoUrls,
17 |       id,
18 |     } = Application.instance.windows.current.viewManager.selected;
19 |     data = {
20 |       videoUrls,
21 |       tabId: id
22 |     };
23 |   }
24 | 
25 |   const dialog = Application.instance.dialogs.show({
26 |     name: 'show-video',
27 |     browserWindow,
28 |     getBounds: () => ({
29 |       width: 144,
30 |       height: 350,
31 |       x: x - 84,
32 |       y: y - DIALOG_MARGIN_TOP,
33 |     }),
34 |     onWindowBoundsUpdate: () => dialog.hide(),
35 |   });
36 | 
37 |   if (!dialog) return;
38 | 
39 |   dialog.on('loaded', (e) => {
40 |     e.reply('data', data);
41 |   });
42 | };
43 | 


--------------------------------------------------------------------------------
/src/main/dialogs/tabgroup.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | 
 5 | export const showTabGroupDialog = (
 6 |   browserWindow: BrowserWindow,
 7 |   tabGroup: any,
 8 | ) => {
 9 |   const dialog = Application.instance.dialogs.show({
10 |     name: 'tabgroup',
11 |     browserWindow,
12 |     getBounds: () => ({
13 |       width: 266,
14 |       height: 180,
15 |       x: tabGroup.x - DIALOG_MARGIN,
16 |       y: tabGroup.y - DIALOG_MARGIN_TOP,
17 |     }),
18 |     onWindowBoundsUpdate: () => dialog.hide(),
19 |   });
20 | 
21 |   if (!dialog) return;
22 | 
23 |   dialog.handle('tabgroup', () => tabGroup);
24 | };
25 | 


--------------------------------------------------------------------------------
/src/main/dialogs/zoom.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserWindow } from 'electron';
 2 | import { Application } from '../application';
 3 | import { DIALOG_MARGIN_TOP, DIALOG_MARGIN } from '~/constants/design';
 4 | 
 5 | export const showZoomDialog = (
 6 |   browserWindow: BrowserWindow,
 7 |   x: number,
 8 |   y: number,
 9 | ) => {
10 |   const tabId = Application.instance.windows.fromBrowserWindow(browserWindow)
11 |     .viewManager.selectedId;
12 | 
13 |   const dialog = Application.instance.dialogs.show({
14 |     name: 'zoom',
15 |     browserWindow,
16 |     getBounds: () => ({
17 |       width: 280,
18 |       height: 100,
19 |       x: x - 280 + DIALOG_MARGIN,
20 |       y: y - DIALOG_MARGIN_TOP,
21 |     }),
22 |     onWindowBoundsUpdate: () => dialog.hide(),
23 |   });
24 | 
25 |   if (!dialog) return;
26 | 
27 |   dialog.handle('tab-id', () => tabId);
28 | };
29 | 


--------------------------------------------------------------------------------
/src/main/extension-service-handler.ts:
--------------------------------------------------------------------------------
 1 | import { RpcMainEvent, RpcMainHandler } from '@wexond/rpc-electron';
 2 | import { session, webContents } from 'electron';
 3 | import {
 4 |   extensionMainChannel,
 5 |   ExtensionMainService,
 6 | } from '~/common/rpc/extensions';
 7 | import { Application } from './application';
 8 | 
 9 | export class ExtensionServiceHandler
10 |   implements RpcMainHandler<ExtensionMainService> {
11 |   constructor() {
12 |     extensionMainChannel.getReceiver().handler = this;
13 |   }
14 | 
15 |   inspectBackgroundPage(e: RpcMainEvent, id: string): void {
16 |     webContents
17 |       .getAllWebContents()
18 |       .find(
19 |         (x) =>
20 |           x.session === Application.instance.sessions.view &&
21 |           new URL(x.getURL()).hostname === id,
22 |       )?.openDevTools({ mode: 'detach' });
23 |   }
24 | 
25 |   uninstall(e: RpcMainEvent, id: string): void {
26 |     Application.instance.sessions.uninstallExtension(id);
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/main/menus/common-actions.ts:
--------------------------------------------------------------------------------
 1 | import { extname } from 'path';
 2 | import { dialog } from 'electron';
 3 | import { Application } from '../application';
 4 | 
 5 | export const saveAs = async () => {
 6 |   const {
 7 |     title,
 8 |     webContents,
 9 |   } = Application.instance.windows.current.viewManager.selected;
10 | 
11 |   const { canceled, filePath } = await dialog.showSaveDialog({
12 |     defaultPath: title,
13 |     filters: [
14 |       { name: 'Webpage, Complete', extensions: ['html', 'htm'] },
15 |       { name: 'Webpage, HTML Only', extensions: ['htm', 'html'] },
16 |     ],
17 |   });
18 | 
19 |   if (canceled) return;
20 | 
21 |   const ext = extname(filePath);
22 | 
23 |   webContents.savePage(filePath, ext === '.htm' ? 'HTMLOnly' : 'HTMLComplete');
24 | };
25 | 
26 | export const viewSource = async () => {
27 |   const { viewManager } = Application.instance.windows.current;
28 | 
29 |   viewManager.create(
30 |     {
31 |       url: `view-source:${viewManager.selected.url}`,
32 |       active: true,
33 |     },
34 |     true,
35 |   );
36 | };
37 | 
38 | export const printPage = () => {
39 |   const {
40 |     webContents,
41 |   } = Application.instance.windows.current.viewManager.selected;
42 |   webContents.print();
43 | };
44 | 


--------------------------------------------------------------------------------
/src/main/network/network-service-handler.ts:
--------------------------------------------------------------------------------
 1 | import { RpcMainEvent, RpcMainHandler } from '@wexond/rpc-electron';
 2 | import { networkMainChannel, NetworkService } from '~/common/rpc/network';
 3 | import { requestURL } from './request';
 4 | 
 5 | export class NetworkServiceHandler implements RpcMainHandler<NetworkService> {
 6 |   private static instance?: NetworkServiceHandler;
 7 | 
 8 |   public static get() {
 9 |     if (!this.instance) this.instance = new NetworkServiceHandler();
10 |     return this.instance;
11 |   }
12 | 
13 |   constructor() {
14 |     networkMainChannel.getReceiver().handler = this;
15 |   }
16 | 
17 |   request(e: RpcMainEvent, url: string) {
18 |     return requestURL(url);
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/main/network/request.ts:
--------------------------------------------------------------------------------
 1 | import * as http from 'http';
 2 | import * as https from 'https';
 3 | import { parse } from 'url';
 4 | import { ResponseDetails } from '~/common/rpc/network';
 5 | 
 6 | export const requestURL = (url: string): Promise<ResponseDetails> =>
 7 |   new Promise((resolve, reject) => {
 8 |     const options = parse(url);
 9 | 
10 |     let { request } = http;
11 | 
12 |     if (options.protocol === 'https:') {
13 |       request = https.request;
14 |     }
15 | 
16 |     const req = request(options, (res) => {
17 |       let data = '';
18 |       res.setEncoding('binary');
19 | 
20 |       res.on('data', (chunk) => {
21 |         data += chunk;
22 |       });
23 | 
24 |       res.on('end', () => {
25 |         resolve({
26 |           statusCode: res.statusCode,
27 |           data,
28 |         });
29 |       });
30 | 
31 |       res.on('error', (e) => {
32 |         reject(e);
33 |       });
34 |     });
35 | 
36 |     req.on('error', (e) => {
37 |       reject(e);
38 |     });
39 | 
40 |     req.end();
41 |   });
42 | 


--------------------------------------------------------------------------------
/src/main/services/auto-updater.ts:
--------------------------------------------------------------------------------
 1 | import { ipcMain } from 'electron';
 2 | import { Application } from '../application';
 3 | 
 4 | export const runAutoUpdaterService = () => {
 5 |   let updateAvailable = false;
 6 | 
 7 |   ipcMain.handle('is-update-available', () => {
 8 |     return updateAvailable;
 9 |   });
10 | 
11 |   ipcMain.on('update-check', () => {
12 |     // todo check from cloud
13 |     // updateAvailable = true;
14 |     // for (const window of Application.instance.windows.list) {
15 |     //   window.send('update-available');
16 |     //   Application.instance.dialogs
17 |     //     .getDynamic('menu')
18 |     //     ?.browserView?.webContents?.send('update-available');
19 |     // }
20 |   });
21 | };
22 | 


--------------------------------------------------------------------------------
/src/main/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from './messaging';
2 | export * from './auto-updater';
3 | 


--------------------------------------------------------------------------------
/src/main/utils/form-fill.ts:
--------------------------------------------------------------------------------
 1 | import { parse } from 'url';
 2 | 
 3 | import { IFormFillData } from '~/interfaces';
 4 | import { getFormFillValue, getFormFillSubValue } from '~/utils/form-fill';
 5 | import { Application } from '../application';
 6 | 
 7 | const getType = (name: string) => {
 8 |   return name === 'username' || name === 'login' || name === 'password'
 9 |     ? 'password'
10 |     : 'address';
11 | };
12 | 
13 | export const getFormFillMenuItems = async (name: string, value: string) => {
14 |   const dataType = getType(name);
15 |   const { url } = Application.instance.windows.current.viewManager.selected;
16 |   const { hostname } = parse(url);
17 | 
18 |   const items = await Application.instance.storage.find<IFormFillData>({
19 |     scope: 'formfill',
20 |     query: {
21 |       type: dataType,
22 |     },
23 |   });
24 | 
25 |   return items
26 |     .map((item: IFormFillData) => {
27 |       const text = getFormFillValue(name, item, true);
28 |       const subtext = getFormFillSubValue(name, item);
29 | 
30 |       if (dataType === 'password' && item.url !== hostname) {
31 |         return null;
32 |       }
33 | 
34 |       if (
35 |         text &&
36 |         (name !== 'password' ? text.startsWith(value) : !value.length)
37 |       ) {
38 |         return {
39 |           _id: item._id,
40 |           text,
41 |           subtext,
42 |         };
43 |       }
44 | 
45 |       return null;
46 |     })
47 |     .filter((r) => r);
48 | };
49 | 


--------------------------------------------------------------------------------
/src/main/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './form-fill';
2 | 


--------------------------------------------------------------------------------
/src/main/windows/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app';
2 | 


--------------------------------------------------------------------------------
/src/models/database.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { toJS } from 'mobx';
 3 | 
 4 | interface IAction<T> {
 5 |   item?: Partial<T>;
 6 |   query?: Partial<T>;
 7 |   multi?: boolean;
 8 |   value?: Partial<T>;
 9 | }
10 | 
11 | export class Database<T> {
12 |   private scope: string;
13 | 
14 |   public constructor(scope: string) {
15 |     this.scope = scope;
16 |   }
17 | 
18 |   private async performOperation(
19 |     operation: 'get' | 'get-one' | 'update' | 'insert' | 'remove',
20 |     data: IAction<T>,
21 |   ): Promise<any> {
22 |     const res = await ipcRenderer.invoke(`storage-${operation}`, {
23 |       scope: this.scope,
24 |       ...toJS(data),
25 |     });
26 | 
27 |     return res;
28 |   }
29 | 
30 |   public async insert(item: T): Promise<T> {
31 |     return await this.performOperation('insert', { item });
32 |   }
33 | 
34 |   public async get(query: T): Promise<T[]> {
35 |     return await this.performOperation('get', { query });
36 |   }
37 | 
38 |   public async getOne(query: T): Promise<T[]> {
39 |     return await this.performOperation('get-one', { query });
40 |   }
41 | 
42 |   public async update(query: T, newValue: T, multi = false): Promise<number> {
43 |     return await this.performOperation('update', {
44 |       query,
45 |       value: newValue,
46 |       multi,
47 |     });
48 |   }
49 | 
50 |   public async remove(query: T, multi = false): Promise<T> {
51 |     return await this.performOperation('remove', { query, multi });
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/preloads/chrome-webstore.ts:
--------------------------------------------------------------------------------
 1 | export const injectChromeWebstoreInstallButton = () => {
 2 |   function check() {
 3 |     try {
 4 |       let btns = document.querySelectorAll("button");
 5 |       for (let btn of btns) {
 6 |         if(btn.innerText.includes("获取")) {
 7 |           //console.log(btn);
 8 |           btn.disabled="";
 9 |           btn.style.opacity = 1;
10 |           let pluginId = btn.id;
11 |           if(pluginId && pluginId.includes("getOrRemoveButton-")) {
12 |             pluginId = pluginId.replace("getOrRemoveButton-", "").split("-")[0];
13 |             if(pluginId.length < 10) {
14 |               pluginId = null;
15 |             }
16 |           } else {
17 |             pluginId = null;
18 |           }
19 |           if(!pluginId && location.href.includes("detail")) {
20 |             let matches = location.href.match(/\/detail\/[^/]+\/([^?]+)/);
21 |             pluginId = matches[1];
22 |             if(pluginId && pluginId.length < 10) {
23 |               pluginId = null;
24 |             }
25 |           }
26 |           if(!pluginId) {
27 |             continue;
28 |           }
29 |           btn.onclick = function() {
30 |             let newUrl = "https://edge.microsoft.com/extensionwebstorebase/v1/crx?response=redirect&acceptformat=crx3&x=id%3D" + pluginId + "%26installsource%3Dondemand%26uc";
31 |             console.log(newUrl);
32 |             window.open(newUrl, "_blank");
33 |           }
34 |           btn.children[0].innerText = "下载安装";
35 |         }
36 |       }
37 |     } catch (e) {
38 |       console.log(e);
39 |     }
40 |   }
41 |   setInterval(check, 1000);
42 | };
43 | 


--------------------------------------------------------------------------------
/src/preloads/constants/form-fill.ts:
--------------------------------------------------------------------------------
1 | export const formFieldFilters = {
2 |   type: /text|email|password/i,
3 |   name: /login|username|email|password|name|fname|mname|lname|phone|mobile|address|city|country/i,
4 |   menu: /login|username|email|password|name|mname|lname|phone|mobile|address/i,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/preloads/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './form-fill';
2 | 


--------------------------------------------------------------------------------
/src/preloads/extensions-preload.ts:
--------------------------------------------------------------------------------
1 | require('electron-extensions/preload');
2 | 


--------------------------------------------------------------------------------
/src/preloads/models/auto-complete.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | 
 3 | import { Form } from './form';
 4 | import { searchElements } from '../utils';
 5 | import { windowId } from '../view-preload';
 6 | 
 7 | export class AutoComplete {
 8 |   public forms: Form[] = [];
 9 | 
10 |   public currentForm: Form;
11 | 
12 |   public visible = false;
13 | 
14 |   public constructor() {
15 |     this.checkFormAutofill();
16 |     ipcRenderer.on(`check-form-autofill`, () => {
17 |       console.log(`check-form-autofill-${windowId}`);
18 |       this.checkFormAutofill();
19 |     });
20 |   }
21 |   
22 |   private checkFormAutofill() {
23 |     requestAnimationFrame(() => {
24 |       (async ()=>{
25 |         const item = await ipcRenderer.invoke(`find-form-fill-update-${windowId}`);
26 |         if(item) {
27 |           for (let form of this.forms) {
28 |             form.insertData(item, true);
29 |           }
30 |         }
31 |       })();
32 |     });
33 |   }
34 | 
35 |   public loadForms = () => {
36 |     try {
37 |       const forms = searchElements(document, 'form') as HTMLFormElement[];
38 |       //console.log("forms", forms);
39 | 
40 |       this.forms = forms.map((el) => new Form(el));
41 |     } catch (e) {
42 |       
43 |     }
44 |   };
45 | 
46 |   public onWindowMouseDown = () => {
47 |     this.hide();
48 |   };
49 | 
50 |   public hide() {
51 |     if (this.visible) {
52 |       this.visible = false;
53 |       ipcRenderer.send(`form-fill-hide-${windowId}`);
54 |     }
55 |   }
56 | }
57 | 
58 | export default new AutoComplete();
59 | 


--------------------------------------------------------------------------------
/src/preloads/models/index.ts:
--------------------------------------------------------------------------------
1 | export * from './form';
2 | 


--------------------------------------------------------------------------------
/src/preloads/models/ipc-event.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { hashCode } from '~/utils/string';
 3 | 
 4 | export class IpcEvent {
 5 |   private scope: string;
 6 |   private name: string;
 7 |   private callbacks: Function[] = [];
 8 |   private listener = false;
 9 | 
10 |   constructor(scope: string, name: string) {
11 |     this.name = name;
12 |     this.scope = scope;
13 | 
14 |     this.emit = this.emit.bind(this);
15 |   }
16 | 
17 |   public emit = (e: any, ...args: any[]) => {
18 |     this.callbacks.forEach((callback) => {
19 |       callback(...args);
20 |     });
21 |   };
22 | 
23 |   public addListener(callback: Function) {
24 |     this.callbacks.push(callback);
25 | 
26 |     const id = hashCode(callback.toString());
27 |     ipcRenderer.send(`api-addListener`, {
28 |       scope: this.scope,
29 |       name: this.name,
30 |       id,
31 |     });
32 | 
33 |     if (!this.listener) {
34 |       ipcRenderer.on(`api-emit-event-${this.scope}-${this.name}`, this.emit);
35 |       this.listener = true;
36 |     }
37 |   }
38 | 
39 |   public removeListener(callback: Function) {
40 |     this.callbacks = this.callbacks.filter((x) => x !== callback);
41 | 
42 |     const id = hashCode(callback.toString());
43 |     ipcRenderer.send(`api-removeListener`, {
44 |       scope: this.scope,
45 |       name: this.name,
46 |       id,
47 |     });
48 | 
49 |     if (this.callbacks.length === 0) {
50 |       ipcRenderer.removeListener(
51 |         `api-emit-event-${this.scope}-${this.name}`,
52 |         this.emit,
53 |       );
54 |       this.listener = false;
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/preloads/popup-preload.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | 
 3 | const updateBounds = () => {
 4 |   ipcRenderer.sendToHost(
 5 |     'webview-size',
 6 |     document.body.offsetWidth || document.body.scrollWidth,
 7 |     document.body.offsetHeight || document.body.scrollHeight,
 8 |   );
 9 | };
10 | 
11 | window.addEventListener('load', () => {
12 |   updateBounds();
13 | 
14 |   // @ts-ignore
15 |   const resizeObserver = new ResizeObserver(() => {
16 |     updateBounds();
17 |   });
18 | 
19 |   resizeObserver.observe(document.body);
20 | });
21 | 
22 | const close = () => {
23 |   ipcRenderer.sendToHost('webview-blur');
24 | };
25 | 
26 | window.addEventListener('blur', close);
27 | 
28 | window.close = close;
29 | 


--------------------------------------------------------------------------------
/src/preloads/utils/autofill.ts:
--------------------------------------------------------------------------------
 1 | import { IFormFillData } from '~/interfaces';
 2 | import { makeId } from '~/utils/string';
 3 | 
 4 | const passwords: Map<string, string> = new Map();
 5 | 
 6 | export const getUserPassword = (data: IFormFillData): Promise<string> => {
 7 |   return new Promise((resolve) => {
 8 |     const { url, fields } = data;
 9 |     const account = `${url}-${fields.username}`;
10 |     const password = passwords.get(account);
11 | 
12 |     if (password) return resolve(password);
13 | 
14 |     const id = makeId(32);
15 | 
16 |     window.postMessage(
17 |       {
18 |         type: 'credentials-get-password',
19 |         data: data._id,
20 |         id,
21 |       },
22 |       '*',
23 |     );
24 | 
25 |     window.addEventListener('message', (e) => {
26 |       const { data } = e;
27 | 
28 |       if (data.type === 'result' && data.id === id) {
29 |         passwords.set(account, data.result);
30 |         resolve(data.result);
31 |       }
32 |     });
33 |   });
34 | };
35 | 


--------------------------------------------------------------------------------
/src/preloads/utils/dom.ts:
--------------------------------------------------------------------------------
 1 | export const isVisible = (el: HTMLElement) => {
 2 |   return el.offsetHeight !== 0;
 3 | };
 4 | 
 5 | export const searchElements = <T>(
 6 |   el: Document | HTMLElement,
 7 |   query: string,
 8 | ) => {
 9 |   return (Array.from(el.querySelectorAll(query)) as unknown) as T[];
10 | };
11 | 


--------------------------------------------------------------------------------
/src/preloads/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dom';
2 | 


--------------------------------------------------------------------------------
/src/renderer/components/Button/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { StyledButton, StyledLabel } from './styles';
 4 | 
 5 | interface Props {
 6 |   background?: string;
 7 |   foreground?: string;
 8 |   type?: 'contained' | 'outlined';
 9 |   children?: any;
10 |   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
11 |   style?: any;
12 | }
13 | 
14 | export const Button = ({
15 |   background,
16 |   foreground,
17 |   type,
18 |   onClick,
19 |   children,
20 |   style
21 | }: Props) => (
22 |   <StyledButton
23 |     className="button"
24 |     background={background}
25 |     foreground={foreground}
26 |     type={type}
27 |     onClick={onClick}
28 |     style={style}
29 |   >
30 |     <StyledLabel>{children}</StyledLabel>
31 |   </StyledButton>
32 | );
33 | 


--------------------------------------------------------------------------------
/src/renderer/components/Button/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | interface StyledButtonProps {
 4 |   background: string;
 5 |   foreground: string;
 6 |   type?: 'contained' | 'outlined';
 7 | }
 8 | 
 9 | export const StyledButton = styled.div`
10 |   min-width: 80px;
11 |   width: fit-content;
12 |   height: 32px;
13 |   padding: 0px 12px;
14 |   display: flex;
15 |   align-items: center;
16 |   justify-content: center;
17 |   overflow: hidden;
18 |   border-radius: 4px;
19 |   position: relative;
20 |   cursor: pointer;
21 | 
22 |   &::before {
23 |     content: '';
24 |     display: block;
25 |     width: 100%;
26 |     height: 100%;
27 |     z-index: 0;
28 |     opacity: 0;
29 |     position: absolute;
30 |     will-change: opacity;
31 |     transition: 0.2s opacity;
32 |   }
33 | 
34 |   &:hover::before {
35 |     opacity: 0.12;
36 |   }
37 | 
38 |   ${({ background, foreground, type }: StyledButtonProps) => css`
39 |     color: ${foreground || '#fff'};
40 |     border: ${type === 'outlined'
41 |       ? `1px solid ${background || '#2196F3'}`
42 |       : 'unset'};
43 |     background-color: ${type === 'outlined'
44 |       ? 'transparent'
45 |       : background || '#2196F3'};
46 | 
47 |     &::before {
48 |       background-color: ${foreground || '#fff'};
49 |     }
50 |   `};
51 | `;
52 | 
53 | export const StyledLabel = styled.div`
54 |   z-index: 1;
55 |   font-size: 12px;
56 |   pointer-events: none;
57 | `;
58 | 


--------------------------------------------------------------------------------
/src/renderer/components/Checkbox/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { Label } from '../RadioButton/styles';
 4 | import { Container, StyledCheckbox, Icon } from './styles';
 5 | 
 6 | interface Props {
 7 |   children?: any;
 8 | }
 9 | 
10 | interface State {
11 |   toggled: boolean;
12 | }
13 | 
14 | export default class Checkbox extends React.PureComponent<Props, State> {
15 |   public state: State = {
16 |     toggled: false,
17 |   };
18 | 
19 |   private onClick = () => {
20 |     this.value = !this.value;
21 |   };
22 | 
23 |   public get value() {
24 |     const { toggled } = this.state;
25 |     return toggled;
26 |   }
27 | 
28 |   public set value(toggled: boolean) {
29 |     this.setState({ toggled });
30 |   }
31 | 
32 |   render() {
33 |     const { children } = this.props;
34 |     const { toggled } = this.state;
35 |     return (
36 |       <Container>
37 |         <StyledCheckbox
38 |           className="checkbox"
39 |           toggled={toggled}
40 |           onClick={this.onClick}
41 |         >
42 |           <Icon toggled={toggled} />
43 |         </StyledCheckbox>
44 |         {children && <Label>{children}</Label>}
45 |       </Container>
46 |     );
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/renderer/components/Dropdown/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import {
 4 |   EASING_FUNCTION,
 5 |   transparency,
 6 |   ICON_DROPDOWN,
 7 | } from '~/renderer/constants';
 8 | import { centerIcon } from '~/renderer/mixins';
 9 | import { ITheme } from '~/interfaces';
10 | 
11 | export const StyledDropdown = styled.div`
12 |   height: 32px;
13 |   min-width: 200px;
14 |   position: relative;
15 |   border-radius: 4px;
16 |   user-select: none;
17 |   cursor: pointer;
18 |   display: flex;
19 |   align-items: center;
20 | 
21 |   ${({ theme }: { theme: ITheme }) => css`
22 |     background-color: ${theme['control.backgroundColor']};
23 | 
24 |     &:hover {
25 |       background-color: ${theme['control.hover.backgroundColor']};
26 |     }
27 |   `}
28 | `;
29 | 
30 | export const Label = styled.div`
31 |   font-size: 13px;
32 |   margin-left: 8px;
33 |   pointer-events: none;
34 | 
35 |   ${({ theme }: { theme: ITheme }) => css`
36 |     color: ${theme['control.valueColor']};
37 |   `}
38 | `;
39 | 
40 | export const DropIcon = styled.div`
41 |   width: 24px;
42 |   height: 24px;
43 |   margin-left: auto;
44 |   margin-right: 2px;
45 |   opacity: ${transparency.icons.inactive};
46 |   background-image: url(${ICON_DROPDOWN});
47 |   transition: 0.2s ${EASING_FUNCTION} transform;
48 |   ${centerIcon(24)};
49 | 
50 |   ${({ expanded, theme }: { expanded: boolean; theme?: ITheme }) => css`
51 |     transform: ${expanded ? 'rotate(180deg)' : 'rotate(0deg)'};
52 |     filter: ${theme['control.lightIcon'] ? 'invert(100%)' : 'unset'};
53 |   `}
54 | `;
55 | 


--------------------------------------------------------------------------------
/src/renderer/components/Input/index.tsx:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { ITheme } from '~/interfaces';
 4 | import { centerIcon } from '~/renderer/mixins';
 5 | import { ICON_DROPDOWN } from '~/renderer/constants/icons';
 6 | 
 7 | export const Control = css`
 8 |   height: 32px;
 9 |   position: relative;
10 |   border: none;
11 |   outline: none;
12 |   border-radius: 4px;
13 |   display: flex;
14 |   align-items: center;
15 |   padding: 0px 8px;
16 |   font-size: 12px;
17 | 
18 |   &:focus {
19 |     box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.54);
20 |   }
21 | 
22 |   ${({ theme }: { theme: ITheme }) => css`
23 |     background-color: ${theme['control.backgroundColor']};
24 |     color: ${theme['control.valueColor']};
25 |   `}
26 | `;
27 | 
28 | export const Input = styled.input.attrs(() => ({
29 |   spellCheck: false,
30 | }))`
31 |   ${Control}
32 | `;
33 | 
34 | export const Dropdown = styled.div`
35 |   ${Control}
36 | 
37 |   &:after {
38 |     content: '';
39 |     position: absolute;
40 |     right: 4px;
41 |     height: 20px;
42 |     width: 20px;
43 |     ${centerIcon()};
44 |     background-image: url(${ICON_DROPDOWN});
45 | 
46 |     ${({ dark }: { dark: boolean }) => css`
47 |       filter: ${dark ? 'invert(100%)' : 'none'};
48 |     `}
49 |   }
50 | `;
51 | 


--------------------------------------------------------------------------------
/src/renderer/components/ListItem/index.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | 
 4 | export const ListItem = styled.div`
 5 |   display: flex;
 6 |   align-items: center;
 7 |   padding: 0 24px;
 8 |   height: 48px;
 9 |   overflow: hidden;
10 |   ${({ selected, theme }: { selected: boolean; theme?: ITheme }) => css`
11 |     background-color: ${
12 |       selected
13 |         ? theme['pages.lightForeground']
14 |           ? 'rgba(255, 255, 255, 0.12)'
15 |           : 'rgba(0, 0, 0, 0.08)'
16 |         : 'transparent'
17 |     };
18 |       color: ${theme['pages.lightForeground'] ? '#fff' : '#000'}
19 |     &:hover {
20 |       background-color: ${
21 |         theme['pages.lightForeground']
22 |           ? `rgba(255, 255, 255, ${selected ? 0.12 : 0.08})`
23 |           : `rgba(0, 0, 0, ${selected ? 0.08 : 0.04})`
24 |       };
25 |     }
26 |   `};
27 | `;
28 | 


--------------------------------------------------------------------------------
/src/renderer/components/NavigationDrawer/NavigationDrawerItem/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { StyledNavigationDrawerItem, Icon } from './style';
 5 | 
 6 | export const NavigationDrawerItem = observer(
 7 |   ({
 8 |     children,
 9 |     selected,
10 |     onClick,
11 |     icon,
12 |   }: {
13 |     children: any;
14 |     selected?: boolean;
15 |     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
16 |     icon?: string;
17 |   }) => {
18 |     return (
19 |       <StyledNavigationDrawerItem
20 |         title={children}
21 |         selected={selected}
22 |         onClick={onClick}
23 |       >
24 |         {icon && <Icon style={{ backgroundImage: `url(${icon})` }} />}
25 |         {children}
26 |       </StyledNavigationDrawerItem>
27 |     );
28 |   },
29 | );
30 | 


--------------------------------------------------------------------------------
/src/renderer/components/NavigationDrawer/NavigationDrawerItem/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { centerIcon } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | import { transparency } from '~/renderer/constants';
 6 | 
 7 | export const StyledNavigationDrawerItem = styled.div`
 8 |   padding: 4px 16px;
 9 |   display: flex;
10 |   height: 40px;
11 |   border-radius: 4px;
12 |   align-items: center;
13 |   position: relative;
14 |   cursor: pointer;
15 | 
16 |   ${({ theme, selected }: { theme?: ITheme; selected?: boolean }) => css`
17 |     &:hover {
18 |       background-color: ${theme['pages.lightForeground']
19 |         ? 'rgba(255, 255, 255, 0.06)'
20 |         : 'rgba(0, 0, 0, 0.04)'};
21 |     }
22 | 
23 |     &:before {
24 |       opacity: ${selected ? 1 : 0};
25 |       background-color: ${theme['pages.lightForeground'] ? 'white' : 'black'};
26 |     }
27 |   `};
28 | 
29 |   &:before {
30 |     content: '';
31 |     position: absolute;
32 |     left: 0;
33 |     border-radius: 2px;
34 |     width: 3px;
35 |     height: 18px;
36 |   }
37 | `;
38 | 
39 | export const Icon = styled.div`
40 |   height: 24px;
41 |   width: 24px;
42 |   min-width: 24px;
43 |   opacity: ${transparency.icons.inactive};
44 |   margin-right: 16px;
45 |   ${centerIcon(20)};
46 | 
47 |   ${({ theme }: { theme?: ITheme }) => css`
48 |     filter: ${theme['pages.lightForeground'] ? 'invert(100%)' : 'none'};
49 |   `};
50 | `;
51 | 


--------------------------------------------------------------------------------
/src/renderer/components/NavigationDrawer/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import {
 4 |   StyledNavigationDrawer,
 5 |   MenuItems,
 6 |   Search,
 7 |   Input,
 8 |   Title,
 9 |   Header,
10 | } from './style';
11 | import { NavigationDrawerItem } from './NavigationDrawerItem';
12 | 
13 | export const NavigationDrawer = ({
14 |   children,
15 |   title,
16 |   search,
17 |   onSearchInput,
18 |   style,
19 |   dense,
20 | }: {
21 |   children?: any;
22 |   title?: string;
23 |   search?: boolean;
24 |   onSearchInput?: (event: React.FormEvent<HTMLInputElement>) => void;
25 |   onBackClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
26 |   style?: any;
27 |   dense?: boolean;
28 | }) => {
29 |   return (
30 |     <StyledNavigationDrawer style={style} dense={dense}>
31 |       {title !== '' && (
32 |         <Header>
33 |           <Title>{title}</Title>
34 |         </Header>
35 |       )}
36 |       {search && (
37 |         <Search>
38 |           <Input placeholder="搜索" onInput={onSearchInput} />
39 |         </Search>
40 |       )}
41 |       <MenuItems>{children}</MenuItems>
42 |     </StyledNavigationDrawer>
43 |   );
44 | };
45 | 
46 | NavigationDrawer.Item = NavigationDrawerItem;
47 | 


--------------------------------------------------------------------------------
/src/renderer/components/Pages/index.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | export const Container = styled.div`
 4 |   display: flex;
 5 |   overflow: auto;
 6 |   height: 100vh;
 7 |   overflow: hidden;
 8 | 
 9 |   ${({ darken }: { darken?: boolean }) => css`
10 |     &:after {
11 |       opacity: ${darken ? 0.54 : 0};
12 |       pointer-events: ${darken ? 'inherit' : 'none'};
13 |     }
14 |   `}
15 | 
16 |   &:after {
17 |     content: '';
18 |     position: fixed;
19 |     z-index: 99;
20 |     left: 0;
21 |     right: 0;
22 |     top: 0;
23 |     bottom: 0;
24 |     background-color: black;
25 |     transition: 0.2s opacity;
26 |   }
27 | `;
28 | 
29 | export const Content = styled.div`
30 |   height: 100vh;
31 |   flex: 1;
32 |   overflow: auto;
33 | `;
34 | 
35 | export const LeftContent = styled.div`
36 |   position: relative;
37 |   margin: 64px;
38 |   max-width: 1024px;
39 | `;
40 | 


--------------------------------------------------------------------------------
/src/renderer/components/PasswordInput/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { Textfield, TextFieldProps } from '../Textfield';
 4 | import { ICON_INVISIBLE, ICON_VISIBLE } from '~/renderer/constants/icons';
 5 | 
 6 | interface Props extends TextFieldProps {
 7 |   style?: any;
 8 | }
 9 | 
10 | interface State {
11 |   visible: boolean;
12 | }
13 | 
14 | export class PasswordInput extends React.PureComponent<Props, State> {
15 |   public state: State = {
16 |     visible: false,
17 |   };
18 | 
19 |   private ref = React.createRef<Textfield>();
20 | 
21 |   public onIconClick = () => {
22 |     const { visible } = this.state;
23 |     this.setState({ visible: !visible });
24 |   };
25 | 
26 |   public set value(str: string) {
27 |     this.ref.current.value = str;
28 |   }
29 | 
30 |   public get value() {
31 |     return this.ref.current.value;
32 |   }
33 | 
34 |   public test() {
35 |     return this.ref.current.test((str) => str.trim().length !== 0);
36 |   }
37 | 
38 |   public clear() {
39 |     this.ref.current.clear();
40 |   }
41 | 
42 |   public render() {
43 |     const { style, dark } = this.props;
44 |     const { visible } = this.state;
45 | 
46 |     return (
47 |       <Textfield
48 |         ref={this.ref}
49 |         dark={dark}
50 |         label="Password"
51 |         inputType={visible ? 'text' : 'password'}
52 |         icon={visible ? ICON_INVISIBLE : ICON_VISIBLE}
53 |         onIconClick={this.onIconClick}
54 |         style={style}
55 |       />
56 |     );
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/renderer/components/Preloader/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { BLUE_500 } from '~/renderer/constants';
 4 | import { Path, StyledPreloader } from './style';
 5 | 
 6 | export interface Props {
 7 |   style?: any;
 8 |   color?: string;
 9 |   thickness?: number;
10 |   size?: number;
11 |   indeterminate?: boolean;
12 |   value?: number;
13 | }
14 | 
15 | export const Preloader = ({
16 |   style,
17 |   color,
18 |   size,
19 |   thickness,
20 |   value,
21 |   indeterminate,
22 | }: Props) => {
23 |   return (
24 |     <div style={style}>
25 |       <StyledPreloader indeterminate={indeterminate} size={size}>
26 |         <svg viewBox="25 25 50 50">
27 |           <Path
28 |             cx="50"
29 |             cy="50"
30 |             r="20"
31 |             fill="none"
32 |             strokeMiterlimit="10"
33 |             color={color}
34 |             thickness={thickness}
35 |             indeterminate={indeterminate}
36 |             value={value}
37 |           />
38 |         </svg>
39 |       </StyledPreloader>
40 |     </div>
41 |   );
42 | };
43 | 
44 | Preloader.defaultProps = {
45 |   thickness: 4,
46 |   size: 48,
47 |   color: BLUE_500,
48 | };
49 | 


--------------------------------------------------------------------------------
/src/renderer/components/RadioButton/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { Container, Radio, Root, Circle } from './styles';
 5 | 
 6 | interface Props {
 7 |   selected: boolean;
 8 | }
 9 | 
10 | export const RadioButton = observer(({ selected }: Props) => {
11 |   return (
12 |     <Container>
13 |       <Root>
14 |         <Radio defaultChecked={selected} />
15 |         <Circle selected={selected} />
16 |       </Root>
17 |     </Container>
18 |   );
19 | });
20 | 


--------------------------------------------------------------------------------
/src/renderer/components/RadioButtons/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | interface Props {
 4 |   defaultValue?: any;
 5 |   children?: any;
 6 | }
 7 | 
 8 | interface State {
 9 |   selectedItem: any;
10 | }
11 | 
12 | export default class RadioButtons extends React.PureComponent<Props, State> {
13 |   public state: State = {
14 |     selectedItem: null,
15 |   };
16 | 
17 |   public onSelect = (value: any) => {
18 |     this.value = value;
19 |   };
20 | 
21 |   public get value() {
22 |     const { defaultValue } = this.props;
23 |     const { selectedItem } = this.state;
24 |     return selectedItem || defaultValue;
25 |   }
26 | 
27 |   public set value(val: any) {
28 |     this.setState({ selectedItem: val });
29 |   }
30 | 
31 |   render() {
32 |     const { children } = this.props;
33 | 
34 |     return (
35 |       <>
36 |         {React.Children.map(children, (child) => {
37 |           return React.cloneElement(child, {
38 |             selected: this.value === child.props.value,
39 |             onSelect: this.onSelect,
40 |           });
41 |         })}
42 |       </>
43 |     );
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/renderer/components/Ripple/style.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | export const Root = styled.div`
 4 |   position: absolute;
 5 |   right: 0;
 6 |   bottom: 0;
 7 |   left: 0;
 8 |   top: 0;
 9 |   overflow: hidden;
10 | `;
11 | 
12 | export const StyledRipple = styled.div`
13 |   position: absolute;
14 |   border-radius: 50%;
15 |   overflow: hidden;
16 |   pointer-events: none;
17 |   will-change: transform;
18 | `;
19 | 


--------------------------------------------------------------------------------
/src/renderer/components/SelectionDialog/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { StyledSmallDialog, Title } from './style';
 5 | import { Button } from '~/renderer/components/Button';
 6 | import { ITheme } from '~/interfaces';
 7 | 
 8 | type ClickEvent = (e: React.MouseEvent<HTMLDivElement>) => void;
 9 | 
10 | export const SelectionDialog = observer(
11 |   ({
12 |     amount,
13 |     visible,
14 |     onDeleteClick,
15 |     onCancelClick,
16 |     theme,
17 |   }: {
18 |     amount: number;
19 |     visible: boolean;
20 |     onDeleteClick: ClickEvent;
21 |     onCancelClick: ClickEvent;
22 |     theme?: ITheme;
23 |   }) => {
24 |     return (
25 |       <StyledSmallDialog visible={visible}>
26 |         <Title>{amount} 已选中</Title>
27 |         <Button style={{ marginLeft: 16 }} onClick={onDeleteClick}>
28 |           删除选中
29 |         </Button>
30 |         <Button
31 |           background={
32 |             theme['dialog.lightForeground']
33 |               ? 'rgba(255, 255, 255, 0.08)'
34 |               : 'rgba(0, 0, 0, 0.08)'
35 |           }
36 |           foreground={theme['dialog.lightForeground'] ? 'white' : 'black'}
37 |           style={{ marginLeft: 8 }}
38 |           onClick={onCancelClick}
39 |         >
40 |           取消
41 |         </Button>
42 |       </StyledSmallDialog>
43 |     );
44 |   },
45 | );
46 | 


--------------------------------------------------------------------------------
/src/renderer/components/SelectionDialog/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { shadows } from '~/renderer/mixins';
 3 | import { ITheme } from '~/interfaces';
 4 | 
 5 | export const StyledSmallDialog = styled.div`
 6 |   width: fit-content;
 7 |   position: fixed;
 8 |   top: 16px;
 9 |   left: ${1024 + 320 + 64 - 16}px;
10 |   border-radius: 8px;
11 |   overflow: hidden;
12 |   display: flex;
13 |   align-items: center;
14 |   padding: 12px 12px 12px 16px;
15 |   box-shadow: ${shadows(8)};
16 |   will-change: opacity;
17 |   transform: translateX(-100%);
18 |   transition: 0.15s opacity;
19 |   z-index: 999;
20 | 
21 |   @media all and (max-width: ${1024 + 320 + 64 + 64 + 16}px) {
22 |     left: auto;
23 |     transform: translateX(0);
24 |     right: ${64 + 16 + 16}px;
25 |   }
26 | 
27 |   ${({ visible, theme }: { visible: boolean; theme?: ITheme }) => css`
28 |     opacity: ${visible ? 1 : 0};
29 |     pointer-events: ${visible ? 'inherit' : 'none'};
30 |     background-color: ${theme['dialog.backgroundColor']};
31 |   `};
32 | `;
33 | 
34 | export const Title = styled.div`
35 |   font-size: 12px;
36 |   margin-right: 4px;
37 | `;
38 | 


--------------------------------------------------------------------------------
/src/renderer/components/Switch/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { StyledSwitch, Thumb } from './styles';
 4 | import { BLUE_500 } from '~/renderer/constants';
 5 | 
 6 | interface Props {
 7 |   color?: string;
 8 |   clickable?: boolean;
 9 |   value?: boolean;
10 |   dense?: boolean;
11 |   onClick?: () => void;
12 | }
13 | 
14 | export const Switch = ({ color, clickable, value, onClick, dense }: Props) => {
15 |   return (
16 |     <StyledSwitch
17 |       activated={value}
18 |       color={color}
19 |       clickable={clickable}
20 |       dense={dense}
21 |       onClick={onClick}
22 |     >
23 |       <Thumb dense={dense} activated={value} color={color} />
24 |     </StyledSwitch>
25 |   );
26 | };
27 | 
28 | (Switch as any).defaultProps = {
29 |   color: BLUE_500,
30 |   defaultValue: false,
31 | };
32 | 


--------------------------------------------------------------------------------
/src/renderer/constants/colors.ts:
--------------------------------------------------------------------------------
 1 | export const BLUE_500 = '#21b0f3';
 2 | export const BLUE_300 = '#64B5F6';
 3 | 
 4 | export const RED_500 = '#F44336';
 5 | 
 6 | export const PINK_500 = '#E91E63';
 7 | 
 8 | export const PURPLE_500 = '#9C27B0';
 9 | 
10 | export const DEEP_PURPLE_500 = '#673AB7';
11 | 
12 | export const INDIGO_500 = '#3F51B5';
13 | 
14 | export const CYAN_500 = '#00BCD4';
15 | 
16 | export const LIGHT_BLUE_500 = '#03A9F4';
17 | 
18 | export const TEAL_500 = '#009688';
19 | 
20 | export const GREEN_500 = '#4CAF50';
21 | 
22 | export const LIGHT_GREEN_500 = '#8BC34A';
23 | 
24 | export const LIME_500 = '#CDDC39';
25 | 
26 | export const YELLOW_500 = '#FFEB3B';
27 | 
28 | export const AMBER_500 = '#FFC107';
29 | 
30 | export const ORANGE_500 = '#FF9800';
31 | 
32 | export const DEEP_ORANGE_500 = '#FF5722';
33 | 
34 | export const BLUE_GRAY_500 = '#607D8B';
35 | 


--------------------------------------------------------------------------------
/src/renderer/constants/design.ts:
--------------------------------------------------------------------------------
1 | export const EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
2 | 
3 | export const DIALOG_EASING = 'cubic-bezier(0.1, 0.9, 0.2, 1)';
4 | 
5 | export const ERROR_COLOR = '#b00020';
6 | 


--------------------------------------------------------------------------------
/src/renderer/constants/dictionary.ts:
--------------------------------------------------------------------------------
 1 | export const monthsList = [
 2 |   '一月',
 3 |   '二月',
 4 |   '三月',
 5 |   '四月',
 6 |   '五月',
 7 |   '六月',
 8 |   '七月',
 9 |   '八月',
10 |   '九月',
11 |   '十月',
12 |   '十一月',
13 |   '十二月',
14 | ];
15 | 
16 | export const daysList = [
17 |   '周日',
18 |   '周一',
19 |   '周二',
20 |   '周三',
21 |   '周四',
22 |   '周五',
23 |   '周六',
24 | ];
25 | 


--------------------------------------------------------------------------------
/src/renderer/constants/fonts.ts:
--------------------------------------------------------------------------------
1 | export const FONT_ROBOTO_REGULAR = require('~/renderer/resources/fonts/roboto-regular.woff2');
2 | export const FONT_ROBOTO_MEDIUM = require('~/renderer/resources/fonts/roboto-medium.woff2');
3 | export const FONT_ROBOTO_LIGHT = require('~/renderer/resources/fonts/roboto-light.woff2');
4 | 


--------------------------------------------------------------------------------
/src/renderer/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './fonts';
2 | export * from './transparency';
3 | export * from './dictionary';
4 | export * from './icons';
5 | export * from './themes';
6 | export * from './design';
7 | export * from './colors';
8 | 


--------------------------------------------------------------------------------
/src/renderer/constants/transparency.ts:
--------------------------------------------------------------------------------
 1 | export const transparency = {
 2 |   text: {
 3 |     high: 0.87,
 4 |     medium: 0.6,
 5 |     disabled: 0.38,
 6 |   },
 7 |   icons: {
 8 |     active: 0.87,
 9 |     inactive: 0.6,
10 |     disabled: 0.38,
11 |   },
12 |   dividers: 0.12,
13 | };
14 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/cursors.ts:
--------------------------------------------------------------------------------
 1 | import { transparency } from '../constants';
 2 | 
 3 | export const pointer = () => `
 4 |     user-select: none;
 5 |     cursor: pointer;
 6 |   `;
 7 | 
 8 | export const defaultCursor = () => `
 9 |     user-select: none;
10 |     cursor: default;
11 |   `;
12 | 
13 | export const coloredCursor = (cursorColor: string, color = 0) => `
14 |   -webkit-text-fill-color: transparent;
15 |   text-shadow: 0px 0px 0px rgba(${color}, ${color}, ${color}, ${transparency.text.high});
16 |   color: ${cursorColor};
17 | `;
18 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/default-styles.ts:
--------------------------------------------------------------------------------
 1 | import { css, createGlobalStyle } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import { body2 } from './typography';
 4 | 
 5 | export const baseStyle = css`
 6 |   body {
 7 |     user-select: none;
 8 |     cursor: default;
 9 |     margin: 0;
10 |     padding: 0;
11 |     width: 100vw;
12 |     height: 100vh;
13 |     overflow: hidden;
14 |   }
15 | 
16 |   * {
17 |     box-sizing: border-box;
18 |   }
19 | `;
20 | 
21 | export const UIStyle = createGlobalStyle`
22 |   ${baseStyle};
23 | 
24 |   body {
25 |     font-family: system-ui, sans-serif;
26 |   }
27 | `;
28 | 
29 | export const WebUIStyle = createGlobalStyle`
30 |   ${baseStyle};
31 |   
32 |   body {
33 |     overflow-y: auto;
34 |     ${body2()};
35 |     ${({ theme }: { theme?: ITheme }) => css`
36 |       background-color: ${theme['pages.backgroundColor']};
37 |       color: ${theme['pages.textColor']};
38 |     `};
39 |   }
40 | `;
41 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/dialogs.ts:
--------------------------------------------------------------------------------
 1 | import { ITheme } from '~/interfaces';
 2 | import styled, { css } from 'styled-components';
 3 | 
 4 | export const DIALOG_TRANSITION = `0.2s opacity`;
 5 | 
 6 | export const DIALOG_BOX_SHADOW =
 7 |   '0 12px 16px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.16)';
 8 | 
 9 | export const DIALOG_BORDER_RADIUS = '10';
10 | 
11 | export const DialogBaseStyle = styled.div`
12 |   margin: 16px;
13 |   margin-top: 3px;
14 |   box-shadow: ${DIALOG_BOX_SHADOW};
15 |   border-radius: ${DIALOG_BORDER_RADIUS}px;
16 |   overflow: hidden;
17 |   position: relative;
18 | 
19 |   ${({ theme }: { theme?: ITheme }) => css`
20 |     background-color: ${theme['dialog.backgroundColor']};
21 |   `}
22 | `;
23 | 
24 | export const DialogStyle = styled(DialogBaseStyle)`
25 |   @keyframes fadeIn {
26 |     0% {
27 |       opacity: 0;
28 |     }
29 |     100% {
30 |       opacity: 1;
31 |     }
32 |   }
33 | 
34 |   animation: 0.15s ease-out 0s 1 fadeIn;
35 | `;
36 | 
37 | export const PersistentDialogStyle = styled(DialogBaseStyle)`
38 |   ${({
39 |     visible,
40 |     hideTransition,
41 |   }: {
42 |     visible: boolean;
43 |     hideTransition?: boolean;
44 |   }) => css`
45 |     transition: ${!visible && !hideTransition ? 'none' : DIALOG_TRANSITION};
46 |     opacity: ${visible ? 1 : 0};
47 |   `}
48 | `;
49 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/images.ts:
--------------------------------------------------------------------------------
 1 | export const centerIcon = (size: number | 'contain' = 'contain') => {
 2 |   let s: string = size.toString();
 3 | 
 4 |   if (typeof size === 'number') s += 'px';
 5 | 
 6 |   return `
 7 |     background-size: ${s};
 8 |     background-position: center;
 9 |     background-repeat: no-repeat;
10 | `;
11 | };
12 | 
13 | export const customImage = (
14 |   width: string,
15 |   height: string,
16 |   left: string,
17 |   top: string,
18 | ) => `
19 |     background-size: ${width} ${height};
20 |     background-position: ${left} ${top};
21 |     background-repeat: no-repeat;
22 |   `;
23 | 
24 | export const coverImage = () => `
25 |     background-size: cover;
26 |     background-repeat: no-repeat;
27 |   `;
28 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/index.ts:
--------------------------------------------------------------------------------
1 | export * from './cursors';
2 | export * from './images';
3 | export * from './positioning';
4 | export * from './scroll';
5 | export * from './shadows';
6 | export * from './typography';
7 | export * from './user-selection';
8 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/positioning.ts:
--------------------------------------------------------------------------------
 1 | import { css } from 'styled-components';
 2 | 
 3 | export const centerHorizontal = () => {
 4 |   return css`
 5 |     left: 50%;
 6 |     transform: translateX(-50%);
 7 |   `;
 8 | };
 9 | 
10 | export const centerBoth = () => {
11 |   return css`
12 |     left: 50%;
13 |     top: 50%;
14 |     transform: translate(-50%, -50%);
15 |   `;
16 | };
17 | 
18 | export const centerVertical = () => {
19 |   return css`
20 |     top: 50%;
21 |     transform: translateY(-50%);
22 |   `;
23 | };
24 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/scroll.ts:
--------------------------------------------------------------------------------
 1 | export const noButtons = (
 2 |   width = '6px',
 3 |   color = 'rgba(0, 0, 0, 0.38)',
 4 |   hoverColor = 'rgba(0, 0, 0, 0.54)',
 5 | ) => `
 6 |     &::-webkit-scrollbar {
 7 |       width: ${width};
 8 |     }
 9 | 
10 |     &::-webkit-scrollbar-button {
11 |       width: 0px;
12 |       height: 0px;
13 |     }
14 | 
15 |     &::-webkit-scrollbar-thumb {
16 |       background: ${color};
17 |       border: 0px none #ffffff;
18 |       border-radius: 0px;
19 |     }
20 | 
21 |     &::-webkit-scrollbar-thumb:hover {
22 |       background: ${hoverColor};
23 |     }
24 | 
25 |     &::-webkit-scrollbar-corner {
26 |       background: transparent;
27 |     }
28 |   `;
29 | 


--------------------------------------------------------------------------------
/src/renderer/mixins/user-selection.ts:
--------------------------------------------------------------------------------
1 | export const noUserSelect = () => `
2 |   user-select: none;
3 | `;
4 | 
5 | export const noTapHighlight = () => `
6 |   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0) !important;
7 | `;
8 | 


--------------------------------------------------------------------------------
/src/renderer/pre-entry.ts:
--------------------------------------------------------------------------------
1 | import { configureRenderer } from '~/common/renderer-config';
2 | configureRenderer();
3 | 


--------------------------------------------------------------------------------
/src/renderer/resources/fonts/roboto-light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/fonts/roboto-light.woff2


--------------------------------------------------------------------------------
/src/renderer/resources/fonts/roboto-medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/fonts/roboto-medium.woff2


--------------------------------------------------------------------------------
/src/renderer/resources/fonts/roboto-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/fonts/roboto-regular.woff2


--------------------------------------------------------------------------------
/src/renderer/resources/icons/about.svg:
--------------------------------------------------------------------------------
1 | <svg t="1706241580001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
2 |      p-id="17852" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
3 |   <path
4 |     d="M512 42.666667C251.733333 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667z m0 853.333333C298.666667 896 128 725.333333 128 512S298.666667 128 512 128s384 170.666667 384 384-170.666667 384-384 384z"
5 |     ></path>
6 |   <path
7 |     d="M512 469.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666667-42.666666V512c0-25.6-17.066667-42.666667-42.666667-42.666667zM482.133333 311.466667c-8.533333 8.533333-12.8 17.066667-12.8 29.866666s4.266667 21.333333 12.8 29.866667c8.533333 8.533333 17.066667 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8c8.533333-8.533333 12.8-17.066667 12.8-29.866667s-4.266667-21.333333-12.8-29.866666c-17.066667-17.066667-42.666667-17.066667-59.733334 0z"
8 |     ></path>
9 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/add.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
3 |     <path d="M0 0h24v24H0z" fill="none"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/all.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/arrow-back.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/autofill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/back.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/bookmarks.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15 7v12.97l-4.21-1.81-.79-.34-.79.34L5 19.97V7h10m4-6H8.99C7.89 1 7 1.9 7 3h10c1.1 0 2 .9 2 2v13l2 1V3c0-1.1-.9-2-2-2zm-4 4H5c-1.1 0-2 .9-2 2v16l7-3 7 3V7c0-1.1-.9-2-2-2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/calendar.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/check.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="26" width="26" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title>Layer 1</title>
 9 |   <path id="svg_1" fill="none" d="m-0.04386,0l24,0l0,24l-24,0l0,-24z"/>
10 |   <line transform="rotate(-0.10000000149011612 13.798244476318407,11.78070259094159) " stroke="#000000" stroke-linecap="null" stroke-linejoin="null" id="svg_21" y2="16.298245" x2="9.258771" y1="7.263158" x1="18.337718" fill-opacity="null" stroke-opacity="null" stroke-width="2.1" fill="none"/>
11 |   <line stroke="#000000" stroke-linecap="null" stroke-linejoin="null" id="svg_23" y2="14.850877" x2="9.30263" y1="11.210526" x1="5.662279" fill-opacity="null" stroke-opacity="null" stroke-width="2.1" fill="none"/>
12 |  </g>
13 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/close.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3 |     <path d="M0 0h24v24H0z" fill="none"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/dashboard.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/delete.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/download.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="96.000000pt" height="96.000000pt" viewBox="0 0 96.000000 96.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,96.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M440 654 l0 -195 -75 75 c-42 42 -79 76 -83 76 -10 0 -72 -63 -72
13 | -73 0 -8 261 -267 269 -267 9 0 281 274 281 282 0 4 -14 22 -31 39 l-32 32
14 | -83 -85 -84 -85 0 198 0 199 -45 0 -45 0 0 -196z"/>
15 | <path d="M210 140 l0 -40 275 0 275 0 0 40 0 40 -275 0 -275 0 0 -40z"/>
16 | </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/renderer/resources/icons/drop-down.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,10L12,15L17,10H7Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/drop-window.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/edit.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/extensions.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.5 4.5c.28 0 .5.22.5.5v2h6v6h2c.28 0 .5.22.5.5s-.22.5-.5.5h-2v6h-2.12c-.68-1.75-2.39-3-4.38-3s-3.7 1.25-4.38 3H4v-2.12c1.75-.68 3-2.39 3-4.38 0-1.99-1.24-3.7-2.99-4.38L4 7h6V5c0-.28.22-.5.5-.5m0-2C9.12 2.5 8 3.62 8 5H4c-1.1 0-1.99.9-1.99 2v3.8h.29c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-.3c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7v.3H17c1.1 0 2-.9 2-2v-4c1.38 0 2.5-1.12 2.5-2.5S20.38 11 19 11V7c0-1.1-.9-2-2-2h-4c0-1.38-1.12-2.5-2.5-2.5z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/find.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 4h7l5 5v8.58l-1.84-1.84c1.28-1.94 1.07-4.57-.64-6.28C14.55 8.49 13.28 8 12 8c-1.28 0-2.55.49-3.53 1.46-1.95 1.95-1.95 5.11 0 7.05.97.97 2.25 1.46 3.53 1.46.96 0 1.92-.28 2.75-.83L17.6 20H6V4zm8.11 11.1c-.56.56-1.31.88-2.11.88s-1.55-.31-2.11-.88c-.56-.56-.88-1.31-.88-2.11s.31-1.55.88-2.11c.56-.57 1.31-.88 2.11-.88s1.55.31 2.11.88c.56.56.88 1.31.88 2.11s-.31 1.55-.88 2.11z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/fire.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/folder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/folder_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/folder_dark.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/folder_dark@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/folder_dark@2x.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/folder_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/folder_light.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/folder_light@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/folder_light@2x.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/forward.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/fullscreen-exit.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/history.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/invisible.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/key.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/link.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/location.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/magnify-minus.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/magnify-plus.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/more.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/new-folder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/night.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/page.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/page_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/page_dark.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/page_dark@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/page_dark@2x.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/page_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/page_light.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/page_light@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/page_light@2x.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/palette.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/pause.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/play.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/power.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,3H11V13H13V3M17.83,5.17L16.41,6.59C18.05,7.91 19,9.9 19,12A7,7 0 0,1 12,19C8.14,19 5,15.88 5,12C5,9.91 5.95,7.91 7.58,6.58L6.17,5.17C2.38,8.39 1.92,14.07 5.14,17.86C8.36,21.64 14.04,22.1 17.83,18.88C19.85,17.17 21,14.65 21,12C21,9.37 19.84,6.87 17.83,5.17Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/print.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zM8 5h8v3H8V5zm8 12v2H8v-4h8v2zm2-2v-2H6v2H4v-4c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v4h-2z"/><circle cx="18" cy="11.5" r="1"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/refresh.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
3 |     <path d="M0 0h24v24H0z" fill="none"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/save.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/search.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
3 |     <path d="M0 0h24v24H0z" fill="none"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/settings.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2 |   <path fill="none" d="M0 0h24v24H0V0z"/>
3 |   <path
4 |     d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
5 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/star-filled.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/star.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/tab.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/today.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/top-most.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/tune.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/up.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/video.svg:
--------------------------------------------------------------------------------
1 | <svg t="1706018693530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4434"
2 |      xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
3 |   <path
4 |     d="M855.75751 0H168.438062A170.229956 170.229956 0 0 0 0 168.182077v687.575433A170.229956 170.229956 0 0 0 168.438062 1023.939588h687.319448a172.789805 172.789805 0 0 0 122.104796-46.077282 172.533821 172.533821 0 0 0 46.077282-122.104796V168.182077A170.485941 170.485941 0 0 0 855.75751 0zM100.34608 848.589933V161.0145a68.091983 68.091983 0 0 1 68.091982-60.924405h687.319448a64.764179 64.764179 0 0 1 48.893116 22.270686 55.292738 55.292738 0 0 1 12.03129 45.821296v687.575433a68.091983 68.091983 0 0 1-68.091983 60.924406H161.270485a68.091983 68.091983 0 0 1-60.924405-68.091983z"
5 |     fill="#222222" p-id="4435"></path>
6 |   <path
7 |     d="M346.347565 772.818404a53.756828 53.756828 0 0 0 25.59849 6.143637 44.797357 44.797357 0 0 0 25.59849-7.167577l358.378856-215.027313a51.196979 51.196979 0 0 0 0-82.683122l-358.378856-215.283298a53.756828 53.756828 0 0 0-51.19698 0 43.261448 43.261448 0 0 0-20.478791 38.141749v436.966219a44.285387 44.285387 0 0 0 20.478791 38.909705z m69.115923-129.272373V380.393557L634.586559 511.969794z"
8 |     fill="#222222" p-id="4436"></path>
9 | </svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/visible.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/volume-high.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/volume-off.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" /></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/clear.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/few-clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/few-clouds.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/rain.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/showers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/showers.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/snow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/snow.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/day/storm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/day/storm.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/clear.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/drizzle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/drizzle.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/few-clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/few-clouds.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/rain.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/showers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/showers.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/snow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/snow.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/weather/night/storm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/resources/icons/weather/night/storm.png


--------------------------------------------------------------------------------
/src/renderer/resources/icons/week.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M21 4H3c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/resources/icons/window.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/><path fill="none" d="M0 0h24v24H0z"/></svg>


--------------------------------------------------------------------------------
/src/renderer/views/add-bookmark/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { robotoRegular } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 6 | 
 7 | export const StyledApp = styled(DialogStyle)`
 8 |   padding: 16px;
 9 | 
10 |   & .textfield,
11 |   .dropdown {
12 |     width: 255px;
13 |     margin-left: auto;
14 |   }
15 | 
16 |   ${({ theme }: { theme?: ITheme; visible: boolean }) => css`
17 |     color: ${theme['dialog.lightForeground'] ? '#fff' : '#000'};
18 |   `}
19 | `;
20 | 
21 | export const Subtitle = styled.div`
22 |   font-size: 13px;
23 |   opacity: 0.54;
24 |   margin-top: 8px;
25 | `;
26 | 
27 | export const Title = styled.div`
28 |   font-size: 16px;
29 |   margin-bottom: 16px;
30 |   ${robotoRegular()};
31 | `;
32 | 
33 | export const Row = styled.div`
34 |   width: 100%;
35 |   height: 48px;
36 |   align-items: center;
37 |   display: flex;
38 | `;
39 | 
40 | export const Label = styled.div`
41 |   font-size: 12px;
42 | `;
43 | 
44 | export const Buttons = styled.div`
45 |   width: 100%;
46 |   display: flex;
47 |   align-items: center;
48 |   justify-content: flex-end;
49 |   margin-top: 16px;
50 |   & .button:not(:last-child) {
51 |     margin-right: 8px;
52 |   }
53 | `;
54 | 


--------------------------------------------------------------------------------
/src/renderer/views/add-bookmark/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/AddressBarContainer/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | import { AddressBar } from '../AddressBar';
 4 | import { StyledAddressBarContainer } from './style';
 5 | import store from '../../store';
 6 | 
 7 | export const AddressBarContainer = observer(() => {
 8 |   return (
 9 |     <StyledAddressBarContainer
10 |       onMouseDown={() => store.inputRef.blur()}
11 |       visible={store.addressbarFocused || store.addressbarEditing}
12 |     >
13 |       <AddressBar />
14 |     </StyledAddressBarContainer>
15 |   );
16 | });
17 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/AddressBarContainer/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import { hexToRgb } from '~/utils';
 4 | 
 5 | export const StyledAddressBarContainer = styled.div`
 6 |   position: absolute;
 7 |   left: 0;
 8 |   right: 0;
 9 |   bottom: 0;
10 |   top: 0;
11 |   will-change: transform, opacity;
12 |   z-index: 999;
13 |   align-items: center;
14 |   padding-left: 72px;
15 |   padding-right: 40px;
16 |   transition: 0.1s transform, 0.1s opacity;
17 | 
18 |   ${({ visible, theme }: { visible: boolean; theme?: ITheme }) => css`
19 |     display: ${visible ? 'flex' : 'table'};
20 |     opacity: ${visible ? 1 : 0};
21 |     transform: scale(${visible ? 1 : 1.05});
22 |     pointer-events: ${visible ? 'inherit' : 'none'};
23 |     -webkit-app-region: no-drag;
24 |     background-color: ${() => {
25 |       const { r, g, b } = hexToRgb(theme['titlebar.backgroundColor']);
26 |       return `rgba(${r}, ${g}, ${b}, 0.75)`;
27 |     }};
28 |   `}
29 | `;
30 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { ITheme } from '~/interfaces';
 4 | 
 5 | export const Line = styled.div`
 6 |   height: 1px;
 7 |   width: 100%;
 8 |   z-index: 100;
 9 |   position: relative;
10 |   background-color: black;
11 | `;
12 | 
13 | export const StyledApp = styled.div`
14 |   display: flex;
15 |   flex-flow: column;
16 |   background-color: #fff;
17 | `;
18 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/BrowserAction/style.ts:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | 
3 | export const StyledBrowserAction = styled.div`
4 |   position: relative;
5 | `;
6 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/NavigationButtons/style.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | 
3 | export const StyledContainer = styled.div`
4 |   display: flex;
5 |   -webkit-app-region: no-drag;
6 |   align-items: center;
7 | `;
8 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/RightButtons/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | 
 4 | export const Buttons = styled.div`
 5 |   display: flex;
 6 |   align-items: center;
 7 |   margin-right: 4px;
 8 | `;
 9 | 
10 | export const Separator = styled.div`
11 |   height: 16px;
12 |   width: 1px;
13 |   margin-left: 4px;
14 |   margin-right: 4px;
15 | 
16 |   ${({ theme }: { theme?: ITheme }) => css`
17 |     background-color: ${theme['toolbar.separator.color']};
18 |   `};
19 | `;
20 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/TabGroup/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { ITabGroup } from '../../models';
 5 | import { StyledTabGroup, Line, Placeholder } from './style';
 6 | import { ipcRenderer } from 'electron';
 7 | import store from '../../store';
 8 | 
 9 | const onPlaceholderClick = (tabGroup: ITabGroup) => () => {
10 |   const { left, bottom } = tabGroup.ref.current.getBoundingClientRect();
11 |   ipcRenderer.send(`show-tabgroup-dialog-${store.windowId}`, {
12 |     name: tabGroup.name,
13 |     id: tabGroup.id,
14 |     x: left,
15 |     y: bottom,
16 |   });
17 | };
18 | 
19 | export const TabGroup = observer(({ tabGroup }: { tabGroup: ITabGroup }) => {
20 |   return (
21 |     <>
22 |       <StyledTabGroup ref={tabGroup.ref}>
23 |         <Placeholder
24 |           onMouseDown={onPlaceholderClick(tabGroup)}
25 |           ref={tabGroup.placeholderRef}
26 |           hasName={tabGroup.name !== ''}
27 |           style={{
28 |             backgroundColor: tabGroup.color,
29 |           }}
30 |         >
31 |           {tabGroup.name}
32 |         </Placeholder>
33 |         <Line
34 |           ref={tabGroup.lineRef}
35 |           style={{
36 |             backgroundColor: tabGroup.color,
37 |           }}
38 |         />
39 |       </StyledTabGroup>
40 |     </>
41 |   );
42 | });
43 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/TabGroup/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | export const StyledTabGroup = styled.div`
 4 |   position: absolute;
 5 |   left: 0;
 6 |   display: flex;
 7 |   align-items: center;
 8 |   height: 100%;
 9 | `;
10 | 
11 | export const Line = styled.div`
12 |   height: 2px;
13 |   left: 0;
14 |   bottom: 0;
15 |   position: absolute;
16 |   border-radius: 4px;
17 | `;
18 | 
19 | export const Placeholder = styled.div`
20 |   -webkit-app-region: no-drag;
21 |   overflow: hidden;
22 |   position: relative;
23 |   transition: 0.2s width;
24 |   color: black;
25 |   font-size: 11px;
26 | 
27 |   ${({ hasName }: { hasName: boolean }) => css`
28 |     padding: ${hasName ? 4 : 7}px;
29 |     border-radius: ${hasName ? '6px' : '50%'};
30 |   `};
31 | 
32 |   &:after {
33 |     content: '';
34 |     transition: 0.1s opacity;
35 |     opacity: 0;
36 |     background-color: white;
37 |     position: absolute;
38 |     left: 0;
39 |     top: 0;
40 |     right: 0;
41 |     bottom: 0%;
42 |   }
43 | 
44 |   &:hover {
45 |     &:after {
46 |       opacity: 0.2;
47 |     }
48 |   }
49 | `;
50 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/Tabs/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import Tab from '../Tab';
 5 | import store from '../../store';
 6 | 
 7 | export const Tabs = observer(() => {
 8 |   return (
 9 |     <React.Fragment>
10 |       {store.tabs.list.map((item) => (
11 |         <Tab key={item.id} tab={item} />
12 |       ))}
13 |     </React.Fragment>
14 |   );
15 | });
16 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/Toolbar/index.tsx:
--------------------------------------------------------------------------------
 1 | import { observer } from 'mobx-react-lite';
 2 | import * as React from 'react';
 3 | 
 4 | import { StyledToolbar } from './style';
 5 | import { NavigationButtons } from '../NavigationButtons';
 6 | 
 7 | import { AddressBar } from '../AddressBar';
 8 | import { RightButtons } from '../RightButtons';
 9 | 
10 | export const Toolbar = observer(() => {
11 |   return (
12 |     <StyledToolbar>
13 |       <NavigationButtons />
14 |       <AddressBar />
15 |       <RightButtons />
16 |     </StyledToolbar>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/components/Toolbar/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { ITheme } from '~/interfaces';
 4 | import { TOOLBAR_HEIGHT } from '~/constants/design';
 5 | 
 6 | export const StyledToolbar = styled.div`
 7 |   position: relative;
 8 |   z-index: 100;
 9 |   display: flex;
10 |   align-items: center;
11 |   flex-flow: row;
12 |   color: rgba(0, 0, 0, 0.8);
13 |   width: 100%;
14 |   height: ${TOOLBAR_HEIGHT}px;
15 |   padding-bottom: 4px;
16 | 
17 |   ${({ theme }: { theme: ITheme }) => css`
18 |     background-color: ${theme['toolbar.backgroundColor']};
19 |     border-bottom: 1px solid ${theme['toolbar.bottomLine.backgroundColor']};
20 |   `};
21 | `;
22 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/constants/api.ts:
--------------------------------------------------------------------------------
1 | export const WEATHER_API_KEY = '979e1265d1057789445790a1cda05186';
2 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/constants/dictionary.ts:
--------------------------------------------------------------------------------
1 | export const dictionary = {
2 |   shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
3 | };
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs';
2 | export * from './dictionary';
3 | export * from './api';
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/constants/tabs.ts:
--------------------------------------------------------------------------------
1 | export const TAB_MAX_WIDTH = 240;
2 | export const TAB_MIN_WIDTH = 72;
3 | export const TAB_PINNED_WIDTH = 40;
4 | export const TAB_ANIMATION_DURATION = 200;
5 | export const TABS_PADDING = 2;
6 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/index.tsx:
--------------------------------------------------------------------------------
1 | import App from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/models/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tab';
2 | export * from './tab-group';
3 | export * from './browser-action';
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/store/add-tab.ts:
--------------------------------------------------------------------------------
 1 | import store from '.';
 2 | import { observable } from 'mobx';
 3 | import { animateTab } from '../utils/tabs';
 4 | 
 5 | export class AddTabStore {
 6 |   public left = 0;
 7 | 
 8 |   public ref: HTMLDivElement;
 9 | 
10 |   public setLeft(left: number, animation: boolean) {
11 |     animateTab('translateX', left, this.ref, animation);
12 |     this.left = left;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/store/downloads.ts:
--------------------------------------------------------------------------------
 1 | import { makeObservable, observable } from 'mobx';
 2 | import { ipcRenderer } from 'electron';
 3 | 
 4 | import { IDownloadItem } from '~/interfaces';
 5 | 
 6 | export class DownloadsStore {
 7 |   public list: IDownloadItem[] = [];
 8 | 
 9 |   public constructor() {
10 |     makeObservable(this, { list: observable });
11 | 
12 |     ipcRenderer.on('download-started', (e, item: IDownloadItem) => {
13 |       this.list.push(item);
14 | 
15 |       const not = new Notification(`Downloading ${item.fileName}`, {
16 |         body: 'Open Overlay to see the downloads.',
17 |       });
18 | 
19 |       not.onclick = () => {
20 |         // TODO(sentialx): downloads notification
21 |         // store.overlay.visible = true;
22 |       };
23 |     });
24 | 
25 |     ipcRenderer.on('download-progress', (e, item: IDownloadItem) => {
26 |       const i = this.list.find((x) => x.id === item.id);
27 |       i.receivedBytes = item.receivedBytes;
28 |     });
29 | 
30 |     ipcRenderer.on('download-completed', (e, id: string) => {
31 |       const i = this.list.find((x) => x.id === id);
32 |       i.completed = true;
33 |     });
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/utils/dialogs.ts:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import store from '../store';
3 | 
4 | export const isDialogVisible = async (dialog: string) =>
5 |   await ipcRenderer.invoke(`is-dialog-visible-${store.windowId}`, dialog);
6 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/utils/tabs.ts:
--------------------------------------------------------------------------------
 1 | import anime from 'animejs';
 2 | import { TAB_ANIMATION_DURATION } from '../constants';
 3 | 
 4 | export const animateTab = (
 5 |   property: 'translateX' | 'width',
 6 |   value: number,
 7 |   domElement: any,
 8 |   animation: boolean,
 9 | ) => {
10 |   if (animation) {
11 |     anime({
12 |       targets: domElement,
13 |       [property]: value,
14 |       duration: TAB_ANIMATION_DURATION,
15 |       easing: 'easeOutCirc',
16 |     });
17 |   } else {
18 |     anime.set(domElement, {
19 |       [property]: value,
20 |     });
21 |   }
22 | };
23 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/utils/view.ts:
--------------------------------------------------------------------------------
 1 | import store from '../store';
 2 | 
 3 | export const loadURL = (url: string) => {
 4 |   const tab = store.tabs.selectedTab;
 5 | 
 6 |   if (!tab) {
 7 |     store.tabs.addTab({ url, active: true });
 8 |   } else {
 9 |     tab.url = url;
10 |     tab.callViewMethod('loadURL', url);
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/src/renderer/views/app/utils/windows.ts:
--------------------------------------------------------------------------------
 1 | import * as remote from '@electron/remote';
 2 | 
 3 | export const getCurrentWindow = () => remote.getCurrentWindow();
 4 | 
 5 | export const closeWindow = () => {
 6 |   getCurrentWindow().close();
 7 | };
 8 | 
 9 | export const minimizeWindow = () => {
10 |   getCurrentWindow().minimize();
11 | };
12 | 
13 | export const maximizeWindow = () => {
14 |   const currentWindow = getCurrentWindow();
15 | 
16 |   if (currentWindow.isMaximized()) {
17 |     currentWindow.unmaximize();
18 |   } else {
19 |     currentWindow.maximize();
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/src/renderer/views/auth/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import {
 4 |   DIALOG_BOX_SHADOW,
 5 |   DIALOG_BORDER_RADIUS,
 6 | } from '~/renderer/mixins/dialogs';
 7 | 
 8 | export const StyledApp = styled.div`
 9 |   margin: 16px;
10 |   padding: 16px;
11 |   box-shadow: ${DIALOG_BOX_SHADOW};
12 |   border-radius: ${DIALOG_BORDER_RADIUS}px;
13 |   overflow: hidden;
14 |   position: relative;
15 | 
16 |   ${({ theme }: { theme?: ITheme }) => css`
17 |     background-color: ${theme['dialog.backgroundColor']};
18 |     color: ${theme['dialog.lightForeground'] ? 'white' : 'black'};
19 |   `}
20 | `;
21 | 
22 | export const Title = styled.div`
23 |   font-size: 16px;
24 | `;
25 | 
26 | export const Subtitle = styled.div`
27 |   font-size: 13px;
28 |   opacity: 0.54;
29 |   margin-top: 8px;
30 | `;
31 | 
32 | export const Buttons = styled.div`
33 |   display: flex;
34 |   margin-top: 24px;
35 |   float: right;
36 | `;
37 | 


--------------------------------------------------------------------------------
/src/renderer/views/auth/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/auth/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { makeObservable, observable } from 'mobx';
 2 | import { DialogStore } from '~/models/dialog-store';
 3 | 
 4 | export class Store extends DialogStore {
 5 |   public url = '';
 6 | 
 7 |   public constructor() {
 8 |     super({ hideOnBlur: false, visibilityWrapper: false });
 9 | 
10 |     makeObservable(this, { url: observable });
11 | 
12 |     this.onUpdateTabInfo = (tabId, auth) => {
13 |       this.url = auth.url;
14 |     };
15 |   }
16 | }
17 | 
18 | export default new Store();
19 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/components/Bookmark/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { centerIcon } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | import { ICON_MORE } from '~/renderer/constants/icons';
 6 | 
 7 | export const More = styled.div`
 8 |   ${centerIcon(20)};
 9 |   height: 24px;
10 |   width: 24px;
11 |   cursor: pointer;
12 |   background-image: url(${ICON_MORE});
13 |   opacity: 0.54;
14 |   ${({ theme }: { theme: ITheme }) => css`
15 |     filter: ${theme['pages.lightForeground'] ? 'invert(100%)' : 'none'};
16 |   `}
17 |   &:hover {
18 |     opacity: 1;
19 |   }
20 | `;
21 | 
22 | export const Favicon = styled.div`
23 |   ${centerIcon()};
24 |   height: 16px;
25 |   width: 16px;
26 |   margin-right: 24px;
27 | `;
28 | 
29 | export const Title = styled.div`
30 |   flex: 1;
31 |   white-space: nowrap;
32 |   overflow: hidden;
33 |   text-overflow: ellipsis;
34 |   margin-right: 16px;
35 | 
36 |   ${({ theme }: { theme: ITheme }) => css`
37 |     color: ${theme['pages.lightForeground'] ? '#fff' : '#000'};
38 |   `}
39 | `;
40 | 
41 | export const Site = styled.div`
42 |   flex: 1;
43 |   opacity: 0.54;
44 |   white-space: nowrap;
45 |   overflow: hidden;
46 |   text-overflow: ellipsis;
47 | `;
48 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/components/BookmarksSection/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | 
 4 | export const EmptySection = styled.div`
 5 |   margin-top: 16px;
 6 |   padding: 8px 0px 8px 0px;
 7 |   overflow: hidden;
 8 |   border-radius: 8px;
 9 | 
10 |   &:first-child {
11 |     margin-top: 0;
12 |   }
13 | 
14 |   ${({ theme }: { theme?: ITheme }) => css`
15 |     background-color: ${theme['pages.lightForeground']
16 |       ? 'rgba(255, 255, 255, 0.05)'
17 |       : '#fafafa'};
18 |   `};
19 | `;
20 | 
21 | export const SectionTitle = styled.div`
22 |   font-size: 16px;
23 |   padding: 16px 24px;
24 |   font-weight: 500;
25 | `;
26 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/components/Tree/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import store from '../../store';
 5 | import TreeItem from '../TreeItem';
 6 | import { StyledTreeView } from './style';
 7 | 
 8 | export default observer(() => {
 9 |   return (
10 |     <StyledTreeView>
11 |       {store.list
12 |         .filter((r) => r.parent == null)
13 |         .map((item) => (
14 |           <TreeItem key={item._id} data={item} depth={0} />
15 |         ))}
16 |     </StyledTreeView>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/components/Tree/style.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | 
3 | export const StyledTreeView = styled.div`
4 |   width: 100%;
5 |   margin-top: 12px;
6 | `;
7 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/index.tsx:
--------------------------------------------------------------------------------
1 | import App from './components/App';
2 | import { renderWebUI } from '~/utils/webui-entry';
3 | renderWebUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/bookmarks/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { IBookmark } from '~/interfaces';
 2 | import store from '../store';
 3 | 
 4 | export const getBookmarkTitle = (item: IBookmark) => {
 5 |   if (!item.static) return item.title;
 6 | 
 7 |   if (item.static === 'main') {
 8 |     return '书签栏';
 9 |   }
10 | 
11 |   if (item.static === 'mobile') {
12 |     return '移动设备书签';
13 |   }
14 | 
15 |   if (item.static === 'other') {
16 |     return '其它文件夹';
17 |   }
18 | 
19 |   return item.title;
20 | };
21 | 
22 | export const addImported = async (arr: any[], parent: IBookmark = null) => {
23 |   let order = 0;
24 | 
25 |   for (const item of arr) {
26 |     if (item.nsRoot) {
27 |       let folder: IBookmark = null;
28 | 
29 |       if (item.nsRoot === 'toolbar') {
30 |         folder = store.list.find((x) => x.static === 'main');
31 |       } else {
32 |         folder = store.list.find((x) => x.static === 'other');
33 |       }
34 | 
35 |       if (folder) {
36 |         addImported(item.children, folder);
37 |       }
38 | 
39 |       return;
40 |     }
41 | 
42 |     const bookmark = await store.addItem({
43 |       isFolder: item.type === 'folder',
44 |       title: item.title,
45 |       url: item.url,
46 |       parent: parent && parent._id,
47 |       children: [],
48 |       favicon: item.icon,
49 |       order,
50 |     });
51 | 
52 |     if (parent) {
53 |       parent.children.push(bookmark._id);
54 |     }
55 | 
56 |     if (bookmark.isFolder) {
57 |       addImported(item.children, bookmark);
58 |     }
59 | 
60 |     order++;
61 |   }
62 | };
63 | 


--------------------------------------------------------------------------------
/src/renderer/views/credentials/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | export const StyledApp = styled.div`
 4 |   margin: 16px;
 5 |   padding: 16px;
 6 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 7 |   border-radius: 8px;
 8 |   background: white;
 9 | `;
10 | 
11 | export const Title = styled.div`
12 |   font-size: 16px;
13 | `;
14 | 
15 | export const Container = styled.div`
16 |   padding: 8px 0px;
17 | 
18 |   & .textfield {
19 |     margin-top: 12px;
20 |   }
21 | `;
22 | 
23 | export const Buttons = styled.div`
24 |   width: 100%;
25 |   display: flex;
26 |   margin-top: 16px;
27 |   float: right;
28 | `;
29 | 


--------------------------------------------------------------------------------
/src/renderer/views/credentials/components/List/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import store from '../../store';
 5 | import { IFormFillData } from '~/interfaces';
 6 | import { StyledItem, Username, Password, DeleteIcon } from './styles';
 7 | 
 8 | const onDelete = (data: IFormFillData) => () => {
 9 |   store.remove(data);
10 | };
11 | 
12 | const Item = ({ data }: { data: IFormFillData }) => {
13 |   const { username, passLength } = data.fields;
14 | 
15 |   return (
16 |     <StyledItem>
17 |       <Username>{username}</Username>
18 |       <Password>{'•'.repeat(passLength)}</Password>
19 |       <DeleteIcon onClick={onDelete(data)} />
20 |     </StyledItem>
21 |   );
22 | };
23 | 
24 | export default observer(() => {
25 |   return (
26 |     <div style={{ display: store.content === 'list' ? 'block' : 'none' }}>
27 |       {store.list.map((data) => (
28 |         <Item key={data._id} data={data} />
29 |       ))}
30 |     </div>
31 |   );
32 | });
33 | 


--------------------------------------------------------------------------------
/src/renderer/views/credentials/components/List/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | import { robotoRegular, centerIcon } from '~/renderer/mixins';
 4 | import { transparency, ICON_CLOSE } from '~/renderer/constants';
 5 | 
 6 | export const StyledItem = styled.div`
 7 |   display: flex;
 8 |   height: 32px;
 9 |   align-items: center;
10 | `;
11 | 
12 | export const Username = styled.div`
13 |   font-size: 13px;
14 |   color: rgba(0, 0, 0, ${transparency.text.medium});
15 |   flex: 2;
16 |   ${robotoRegular()};
17 | `;
18 | 
19 | export const Password = styled(Username)`
20 |   flex: 1;
21 | `;
22 | 
23 | export const DeleteIcon = styled.div`
24 |   width: 16px;
25 |   height: 16px;
26 |   background-image: url(${ICON_CLOSE});
27 |   opacity: ${transparency.icons.inactive};
28 |   cursor: pointer;
29 |   ${centerIcon('contain')};
30 | 
31 |   &:hover {
32 |     opacity: 1;
33 |   }
34 | `;
35 | 


--------------------------------------------------------------------------------
/src/renderer/views/credentials/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/downloads-dialog/components/App/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | import { ThemeProvider } from 'styled-components';
 4 | 
 5 | import { StyledApp } from './style';
 6 | import store from '../../store';
 7 | import { DownloadItem } from '../DownloadItem';
 8 | import { ipcRenderer } from 'electron';
 9 | import { UIStyle } from '~/renderer/mixins/default-styles';
10 | 
11 | const dialogClicked = (e: React.MouseEvent<HTMLDivElement>) => {
12 |   store.closeAllDownloadMenu();
13 | };
14 | 
15 | export const App = observer(() => {
16 |   const height =
17 |     8 +
18 |     Math.min(8, store.downloads.length) * (64 + 8) +
19 |     (store.downloads.find((x) => x.menuIsOpen === true) ? 200 : 0);
20 |   ipcRenderer.send(`height-${store.id}`, height);
21 | 
22 |   return (
23 |     <ThemeProvider theme={{ ...store.theme }}>
24 |       <StyledApp
25 |         style={{ maxHeight: store.maxHeight, overflow: 'unset' }}
26 |         visible={store.visible}
27 |         onClick={dialogClicked}
28 |       >
29 |         <UIStyle />
30 |         {store.downloads
31 |           .slice()
32 |           .reverse()
33 |           .map((item) => (
34 |             <DownloadItem item={item} key={item.id}></DownloadItem>
35 |           ))}
36 |       </StyledApp>
37 |     </ThemeProvider>
38 |   );
39 | });
40 | 


--------------------------------------------------------------------------------
/src/renderer/views/downloads-dialog/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 4 | 
 5 | export const StyledApp = styled(DialogStyle)`
 6 |   padding: 8px;
 7 |   font-size: 13px;
 8 | 
 9 |   ${({ theme }: { theme?: ITheme; visible: boolean }) => css`
10 |     &::-webkit-scrollbar {
11 |       width: 6px;
12 |       -webkit-app-region: no-drag;
13 |       background-color: transparent;
14 |     }
15 | 
16 |     &::-webkit-scrollbar-thumb {
17 |       background-color: ${theme['dialog.lightForeground']
18 |         ? 'rgba(255, 255, 255, 0.2)'
19 |         : 'rgba(0, 0, 0, 0.2)'};
20 | 
21 |       &:hover {
22 |         background-color: ${theme['dialog.lightForeground']
23 |           ? 'rgba(255, 255, 255, 0.3)'
24 |           : 'rgba(0, 0, 0, 0.3)'};
25 |       }
26 |     }
27 |     color: ${theme['dialog.lightForeground'] ? 'white' : 'black'};
28 |   `};
29 | `;
30 | 


--------------------------------------------------------------------------------
/src/renderer/views/downloads-dialog/components/DownloadItemMenu/style.tsx:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | 


--------------------------------------------------------------------------------
/src/renderer/views/downloads-dialog/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/find/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/components/App/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import List from '../List';
 5 | import { StyledApp } from './style';
 6 | import { UIStyle } from '~/renderer/mixins/default-styles';
 7 | 
 8 | export const App = observer(() => {
 9 |   return (
10 |     <StyledApp>
11 |       <UIStyle />
12 |       <List />
13 |     </StyledApp>
14 |   );
15 | });
16 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | export const StyledApp = styled.div`
 4 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 5 |   border-radius: 4px;
 6 |   background-color: white;
 7 |   margin: 8px;
 8 |   overflow: hidden;
 9 |   -webkit-app-region: no-drag;
10 | `;
11 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/components/List/index.tsx:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import * as React from 'react';
 3 | import { observer } from 'mobx-react-lite';
 4 | 
 5 | import store from '../../store';
 6 | import { IFormFillMenuItem } from '~/interfaces';
 7 | import { StyledList, StyledItem, Text, SubText } from './styles';
 8 | 
 9 | const onClick = (data: IFormFillMenuItem) => () => {
10 |   ipcRenderer.send(`form-fill-update-${store.windowId}`, data._id, true);
11 |   ipcRenderer.send(`form-fill-hide-${store.windowId}`);
12 | };
13 | 
14 | const onMouseEnter = (data: IFormFillMenuItem) => () => {
15 |   ipcRenderer.send(`form-fill-update-${store.windowId}`, data._id);
16 | };
17 | 
18 | const onMouseLeave = () => {
19 |   ipcRenderer.send(`form-fill-update-${store.windowId}`);
20 | };
21 | 
22 | const Item = observer(({ data }: { data: IFormFillMenuItem }) => {
23 |   return (
24 |     <StyledItem
25 |       subtext={!!data.subtext}
26 |       onClick={onClick(data)}
27 |       onMouseEnter={onMouseEnter(data)}
28 |       onMouseLeave={onMouseLeave}
29 |     >
30 |       <Text>{data.text}</Text>
31 |       <SubText>{data.subtext}</SubText>
32 |     </StyledItem>
33 |   );
34 | });
35 | 
36 | export default observer(() => {
37 |   return (
38 |     <StyledList>
39 |       {store.items.map((item) => (
40 |         <Item key={item._id} data={item} />
41 |       ))}
42 |     </StyledList>
43 |   );
44 | });
45 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/components/List/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { robotoRegular, noButtons } from '~/renderer/mixins';
 4 | import { transparency } from '~/renderer/constants';
 5 | 
 6 | export const StyledList = styled.div`
 7 |   width: 100%;
 8 |   height: 100%;
 9 |   padding: 8px 0px;
10 |   overflow: hidden;
11 |   ${noButtons()};
12 | `;
13 | 
14 | export const StyledItem = styled.div`
15 |   width: 100%;
16 |   display: flex;
17 |   flex-direction: column;
18 |   justify-content: center;
19 |   cursor: pointer;
20 | 
21 |   ${({ subtext }: { subtext: boolean }) => css`
22 |     height: ${subtext ? 56 : 32}px;
23 |   `}
24 | 
25 |   &:hover {
26 |     background-color: rgba(0, 0, 0, 0.04);
27 |   }
28 | `;
29 | 
30 | export const Text = styled.div`
31 |   padding: 0px 12px;
32 |   font-size: 14px;
33 |   pointer-events: none;
34 |   white-space: nowrap;
35 |   text-overflow: ellipsis;
36 |   overflow: hidden;
37 |   color: #000;
38 |   ${robotoRegular()};
39 | `;
40 | 
41 | export const SubText = styled(Text)`
42 |   margin-top: 4px;
43 |   font-size: 13px;
44 |   color: rgba(0, 0, 0, ${transparency.text.medium});
45 | `;
46 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/form-fill/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { makeObservable, observable } from 'mobx';
 3 | 
 4 | import { IFormFillMenuItem } from '~/interfaces';
 5 | import { DialogStore } from '~/models/dialog-store';
 6 | 
 7 | export class Store extends DialogStore {
 8 |   public items: IFormFillMenuItem[] = [];
 9 | 
10 |   public constructor() {
11 |     super({ hideOnBlur: false });
12 | 
13 |     makeObservable({ items: observable });
14 | 
15 |     ipcRenderer.on(`formfill-get-items`, (e, items) => {
16 |       this.items = items;
17 |     });
18 |   }
19 | }
20 | 
21 | export default new Store();
22 | 


--------------------------------------------------------------------------------
/src/renderer/views/history/components/HistoryItem/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { centerIcon } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | import { ICON_CLOSE } from '~/renderer/constants/icons';
 6 | 
 7 | export const Remove = styled.div`
 8 |   height: 16px;
 9 |   width: 16px;
10 |   cursor: pointer;
11 |   opacity: 0.54;
12 |   background-image: url(${ICON_CLOSE});
13 |   ${centerIcon()};
14 |   ${({ theme }: { theme?: ITheme }) => css`
15 |     filter: ${theme['pages.lightForeground'] ? 'invert(100%)' : 'none'};
16 |   `};
17 |   &:hover {
18 |     opacity: 1;
19 |   }
20 | `;
21 | 
22 | export const Favicon = styled.div`
23 |   ${centerIcon()};
24 |   height: 16px;
25 |   width: 16px;
26 |   margin-right: 24px;
27 | `;
28 | 
29 | export const Title = styled.a`
30 |   white-space: nowrap;
31 |   width: fit-content;
32 |   text-decoration: none;
33 |   color: inherit;
34 | 
35 |   &:hover {
36 |     cursor: pointer;
37 |     text-decoration: underline;
38 |   }
39 | `;
40 | 
41 | export const TitleContainer = styled.div`
42 |   flex: 2;
43 |   margin-right: 16px;
44 |   overflow: hidden;
45 |   text-overflow: ellipsis;
46 | `;
47 | 
48 | export const Site = styled.div`
49 |   flex: 1;
50 |   opacity: 0.54;
51 |   white-space: nowrap;
52 |   overflow: hidden;
53 |   text-overflow: ellipsis;
54 | `;
55 | 
56 | export const Time = styled.div`
57 |   opacity: 0.54;
58 |   margin-left: 16px;
59 |   margin-right: 32px;
60 | `;
61 | 


--------------------------------------------------------------------------------
/src/renderer/views/history/components/HistorySection/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import HistoryItem from '../HistoryItem';
 4 | import { IHistorySection } from '~/interfaces';
 5 | import { EmptySection, SectionTitle } from './style';
 6 | import { observer } from 'mobx-react-lite';
 7 | 
 8 | export const HistorySection = observer(
 9 |   ({ data }: { data: IHistorySection }) => {
10 |     return (
11 |       <EmptySection>
12 |         <SectionTitle>{data.label}</SectionTitle>
13 |         {data.items.map((item) => (
14 |           <HistoryItem key={item._id} data={item} />
15 |         ))}
16 |       </EmptySection>
17 |     );
18 |   },
19 | );
20 | 


--------------------------------------------------------------------------------
/src/renderer/views/history/components/HistorySection/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | 
 4 | export const EmptySection = styled.div`
 5 |   margin-top: 16px;
 6 |   padding: 0px 0px 8px 0px;
 7 |   overflow: hidden;
 8 |   border-radius: 8px;
 9 | 
10 |   &:first-child {
11 |     margin-top: 0;
12 |   }
13 | 
14 |   ${({ theme }: { theme?: ITheme }) => css`
15 |     background-color: ${theme['pages.lightForeground']
16 |       ? 'rgba(255, 255, 255, 0.05)'
17 |       : '#fafafa'};
18 |   `};
19 | `;
20 | 
21 | export const SectionTitle = styled.div`
22 |   font-size: 16px;
23 |   padding: 16px 24px;
24 |   font-weight: 500;
25 | `;
26 | 


--------------------------------------------------------------------------------
/src/renderer/views/history/index.tsx:
--------------------------------------------------------------------------------
1 | import App from './components/App';
2 | import { renderWebUI } from '~/utils/webui-entry';
3 | renderWebUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/history/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { daysList, monthsList } from '~/renderer/constants/dictionary';
 2 | 
 3 | export const compareDates = (first: Date, second: Date) => {
 4 |   return (
 5 |     first != null &&
 6 |     second != null &&
 7 |     first.getFullYear() === second.getFullYear() &&
 8 |     first.getMonth() === second.getMonth() &&
 9 |     first.getDate() === second.getDate()
10 |   );
11 | };
12 | 
13 | export const getSectionLabel = (date: Date) => {
14 |   let prefix = '';
15 |   const current = new Date();
16 | 
17 |   if (
18 |     date.getFullYear() === current.getFullYear() &&
19 |     date.getMonth() === current.getMonth()
20 |   ) {
21 |     if (current.getDate() === date.getDate()) {
22 |       prefix = '今天 - ';
23 |     } else if (current.getDate() - 1 === date.getDate()) {
24 |       prefix = '昨天 - ';
25 |     }
26 |   }
27 | 
28 |   return `${prefix}${daysList[date.getDay()]}, ${
29 |     monthsList[date.getMonth()]
30 |   } ${date.getDate()}, ${date.getFullYear()}`;
31 | };
32 | 
33 | export const formatTime = (date: Date) => {
34 |   return `${date
35 |     .getHours()
36 |     .toString()
37 |     .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
38 | };
39 | 


--------------------------------------------------------------------------------
/src/renderer/views/menu/components/App/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | import { ThemeProvider } from 'styled-components';
 4 | 
 5 | import { StyledApp } from './style';
 6 | import { QuickMenu } from '../QuickMenu';
 7 | import store from '../../store';
 8 | import { UIStyle } from '~/renderer/mixins/default-styles';
 9 | 
10 | export const App = observer(() => {
11 |   return (
12 |     <ThemeProvider
13 |       theme={{ ...store.theme, dark: store.theme['dialog.lightForeground'] }}
14 |     >
15 |       <StyledApp>
16 |         <UIStyle />
17 |         <QuickMenu />
18 |       </StyledApp>
19 |     </ThemeProvider>
20 |   );
21 | });
22 | 


--------------------------------------------------------------------------------
/src/renderer/views/menu/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 3 | 
 4 | export const StyledApp = styled(DialogStyle)``;
 5 | 
 6 | export const Title = styled.div`
 7 |   font-size: 16px;
 8 | `;
 9 | 
10 | export const Subtitle = styled.div`
11 |   font-size: 13px;
12 |   opacity: 0.54;
13 |   margin-top: 8px;
14 | `;
15 | 
16 | export const Buttons = styled.div`
17 |   display: flex;
18 |   margin-top: 16px;
19 |   float: right;
20 | `;
21 | 


--------------------------------------------------------------------------------
/src/renderer/views/menu/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/menu/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { makeObservable, observable } from 'mobx';
 3 | import { DialogStore } from '~/models/dialog-store';
 4 | import * as remote from '@electron/remote';
 5 | 
 6 | export class Store extends DialogStore {
 7 |   public alwaysOnTop = false;
 8 | 
 9 |   public updateAvailable = false;
10 | 
11 |   public constructor() {
12 |     super();
13 | 
14 |     makeObservable(this, {
15 |       alwaysOnTop: observable,
16 |       updateAvailable: observable,
17 |     });
18 | 
19 |     this.init();
20 | 
21 |     ipcRenderer.on('update-available', () => {
22 |       this.updateAvailable = true;
23 |     });
24 |   }
25 | 
26 |   public async init() {
27 |     if (remote.getCurrentWindow()) {
28 |       this.alwaysOnTop = remote.getCurrentWindow().isAlwaysOnTop();
29 |     }
30 | 
31 |     this.updateAvailable = await ipcRenderer.invoke('is-update-available');
32 |   }
33 | 
34 |   public async save() {
35 |     ipcRenderer.send('save-settings', {
36 |       settings: JSON.stringify(this.settings),
37 |     });
38 |   }
39 | }
40 | 
41 | export default new Store();
42 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/News/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { StyledNews } from './style';
 5 | import store from '../../store';
 6 | import { NewsItem } from '../NewsItem';
 7 | 
 8 | export const News = observer(() => {
 9 |   return (
10 |     <StyledNews>
11 |       {store.news.map((item, key) => {
12 |         if (!item.urlToImage) return null;
13 | 
14 |         return <NewsItem item={item} key={key}></NewsItem>;
15 |       })}
16 |     </StyledNews>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/News/style.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | export const StyledNews = styled.div`
 4 |   display: grid;
 5 |   grid-auto-flow: dense;
 6 |   justify-content: center;
 7 |   grid-template-columns: repeat(auto-fit, 300px);
 8 |   grid-auto-rows: 270px;
 9 |   grid-gap: 16px;
10 |   margin-top: 32px;
11 |   margin-bottom: 32px;
12 | `;
13 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/NewsItem/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import {
 5 |   StyledNewsItem,
 6 |   Img,
 7 |   Info,
 8 |   Title,
 9 |   Footer,
10 |   Source,
11 |   Fill,
12 |   Description,
13 | } from './style';
14 | import { INewsItem } from '~/interfaces/news-item';
15 | 
16 | export const NewsItem = observer(({ item }: { item: INewsItem }) => {
17 |   // eslint-disable-next-line prefer-const
18 |   let [img, setImg] = React.useState('');
19 | 
20 |   const image = new Image();
21 |   const src = item.urlToImage;
22 | 
23 |   image.onload = () => {
24 |     setImg(src);
25 |   };
26 |   image.src = src;
27 | 
28 |   if (image.complete) {
29 |     img = src;
30 |   }
31 | 
32 |   return (
33 |     <StyledNewsItem href={item.url}>
34 |       <Img src={img}></Img>
35 |       <Info>
36 |         <Title>{item.title}</Title>
37 |         <Description>{item.description}</Description>
38 |         <Fill />
39 |         <Footer>
40 |           <Source>{item.source.name}</Source>
41 |         </Footer>
42 |       </Info>
43 |     </StyledNewsItem>
44 |   );
45 | });
46 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/Preferences/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ContextMenuRow } from '~/renderer/components/ContextMenu';
 3 | import { IconItem } from '../App/style';
 4 | import { ITheme } from '~/interfaces';
 5 | 
 6 | export const SubTitle = styled(ContextMenuRow)`
 7 |   margin-top: 16px;
 8 |   margin-bottom: 12px;
 9 | `;
10 | 
11 | export const Title = styled.div`
12 |   height: 32px;
13 |   font-size: 16px;
14 |   font-weight: 500;
15 |   display: flex;
16 |   align-items: center;
17 | `;
18 | 
19 | export const Back = styled(IconItem)`
20 |   margin: 0 8px 0 12px;
21 |   width: 24px;
22 |   height: 24px;
23 |   filter: none;
24 | 
25 |   ${({ theme }: { theme?: ITheme }) => css`
26 |     &:after {
27 |       filter: ${theme['pages.lightForeground'] ? 'invert(100%)' : 'none'};
28 |     }
29 | 
30 |     &:hover {
31 |       background-color: ${theme['pages.lightForeground']
32 |         ? 'rgba(255, 255, 255, 0.2)'
33 |         : 'rgba(0, 0, 0, 0.1)'};
34 |       backdrop-filter: none;
35 |     }
36 |   `}
37 | `;
38 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/TopSite/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { Item, Icon, Title } from './style';
 5 | import { IHistoryItem } from '~/interfaces';
 6 | import store from '../../store';
 7 | import { ICON_PAGE } from '~/renderer/constants';
 8 | import {getWebUIURL} from "~/common/webui";
 9 | 
10 | const onClick = (url: string) => () => {
11 |   console.log("TopSite", url);
12 |   if (url != '' && url != null) {
13 |     window.location.href = url;
14 |   } else {
15 |     window.location.href = getWebUIURL('bookmarks');
16 |   }
17 | };
18 | 
19 | export const TopSite = observer(({ item }: { item?: IHistoryItem }) => {
20 |   const { title, favicon, url } = item || {};
21 |   const custom = favicon === '' || favicon == null;
22 | 
23 |   let fav = ICON_PAGE;
24 | 
25 |   if (!custom) {
26 |     fav = favicon;
27 |   } else if(url && url.startsWith("http")){
28 |     try {
29 |       fav = new URL('/favicon.ico', url).href;
30 |     } catch (e) {
31 |       console.log(e);
32 |     }
33 |   }
34 | 
35 |   return (
36 |     <Item imageSet={store.imageVisible && store.image} onClick={onClick(url)}>
37 |       <Icon
38 |         imageSet={store.imageVisible && store.image}
39 |         custom={custom}
40 |         icon={fav}
41 |         onError={"this.style.backgroundImage='url(" + ICON_PAGE + ")'"}
42 |         add={url == null || url == ''}
43 |       ></Icon>
44 |       {title && <Title>{title}</Title>}
45 |     </Item>
46 |   );
47 | });
48 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/TopSites/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { StyledTopSites, Placeholder } from './style';
 5 | import store from '../../store';
 6 | import { TopSite } from '../TopSite';
 7 | 
 8 | export const TopSites = observer(() => {
 9 |   return (
10 |     <StyledTopSites>
11 |       {store.topSites.map((item) => (
12 |         <TopSite key={item._id} item={item} />
13 |       ))}
14 |       {store.topSites.length < 8 && <TopSite item={{}}/>}
15 |       {Array(8 - Math.min(8, store.topSites.length + 1))
16 |         .fill(1)
17 |         .map((v, i) => (
18 |           <Placeholder imageSet={store.imageVisible && store.image} key={i} />
19 |         ))}
20 |     </StyledTopSites>
21 |   );
22 | });
23 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/components/TopSites/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | 
 4 | export const StyledTopSites = styled.div`
 5 |   display: grid;
 6 |   grid-auto-flow: row;
 7 |   justify-content: center;
 8 |   grid-template-columns: repeat(8, auto);
 9 |   grid-gap: 6px;
10 |   margin-top: 128px;
11 |   margin-bottom: 128px;
12 | 
13 |   @media only screen and (max-width: 1200px) {
14 |     grid-template-columns: repeat(4, auto);
15 |   }
16 | `;
17 | 
18 | export const ItemBase = styled.div`
19 |   border-radius: 6px;
20 |   width: 120px;
21 |   height: 90px;
22 | `;
23 | 
24 | export const Placeholder = styled(ItemBase)`
25 |   box-sizing: border-box;
26 | 
27 |   ${({ theme, imageSet }: { theme?: ITheme; imageSet: boolean }) => css`
28 |     border: 2px dashed
29 |       ${!imageSet && !theme['pages.lightForeground']
30 |         ? 'rgba(0, 0, 0, 0.2)'
31 |         : 'rgba(255, 255, 255, 0.3)'};
32 |   `}
33 | `;
34 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/index.tsx:
--------------------------------------------------------------------------------
1 | import App from './components/App';
2 | import { renderWebUI } from '~/utils/webui-entry';
3 | renderWebUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/newtab/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { daysList, monthsList } from '~/renderer/constants/dictionary';
 2 | 
 3 | export const compareDates = (first: Date, second: Date) => {
 4 |   return (
 5 |     first != null &&
 6 |     second != null &&
 7 |     first.getFullYear() === second.getFullYear() &&
 8 |     first.getMonth() === second.getMonth() &&
 9 |     first.getDate() === second.getDate()
10 |   );
11 | };
12 | 
13 | export const getSectionLabel = (date: Date) => {
14 |   let prefix = '';
15 |   const current = new Date();
16 | 
17 |   if (
18 |     date.getFullYear() === current.getFullYear() &&
19 |     date.getMonth() === current.getMonth()
20 |   ) {
21 |     if (current.getDate() === date.getDate()) {
22 |       prefix = 'Today - ';
23 |     } else if (current.getDate() - 1 === date.getDate()) {
24 |       prefix = 'Yesterday - ';
25 |     }
26 |   }
27 | 
28 |   return `${prefix}${daysList[date.getDay()]}, ${
29 |     monthsList[date.getMonth()]
30 |   } ${date.getDate()}, ${date.getFullYear()}`;
31 | };
32 | 
33 | export const formatTime = (date: Date) => {
34 |   return `${date
35 |     .getHours()
36 |     .toString()
37 |     .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
38 | };
39 | 


--------------------------------------------------------------------------------
/src/renderer/views/permissions/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import {
 4 |   DIALOG_BOX_SHADOW,
 5 |   DIALOG_BORDER_RADIUS,
 6 | } from '~/renderer/mixins/dialogs';
 7 | 
 8 | export const StyledApp = styled.div`
 9 |   margin: 16px;
10 |   padding: 16px;
11 |   box-shadow: ${DIALOG_BOX_SHADOW};
12 |   border-radius: ${DIALOG_BORDER_RADIUS}px;
13 |   overflow: hidden;
14 |   position: relative;
15 | 
16 |   ${({ theme }: { theme?: ITheme }) => css`
17 |     background-color: ${theme['dialog.backgroundColor']};
18 |     color: ${theme['dialog.lightForeground'] ? 'white' : 'black'};
19 |   `}
20 | `;
21 | 
22 | export const Title = styled.div`
23 |   font-size: 16px;
24 |   font-weight: 300;
25 | `;
26 | 
27 | export const Permissions = styled.div`
28 |   margin-top: 12px;
29 | `;
30 | 
31 | export const Permission = styled.div`
32 |   font-size: 13px;
33 |   margin-top: 8px;
34 | `;
35 | 
36 | export const Buttons = styled.div`
37 |   display: flex;
38 |   margin-top: 16px;
39 |   float: right;
40 | `;
41 | 


--------------------------------------------------------------------------------
/src/renderer/views/permissions/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/permissions/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { makeObservable, observable } from 'mobx';
 2 | import { ipcRenderer } from 'electron';
 3 | 
 4 | import { getDomain } from '~/utils';
 5 | import { DialogStore } from '~/models/dialog-store';
 6 | 
 7 | export class Store extends DialogStore {
 8 |   public permissions: string[] = [];
 9 | 
10 |   public domain = '';
11 | 
12 |   public constructor() {
13 |     super({ hideOnBlur: false });
14 | 
15 |     makeObservable(this, { permissions: observable, domain: observable });
16 | 
17 |     ipcRenderer.on('update-tab-info', (e, tabId, { url, name, details }) => {
18 |       this.domain = getDomain(url);
19 |       this.permissions = [];
20 | 
21 |       if (name === 'notifications' || name === 'geolocation') {
22 |         this.permissions.push(name);
23 |       } else if (name === 'media') {
24 |         if (details.mediaTypes.includes('audio')) {
25 |           this.permissions.push('microphone');
26 |         }
27 | 
28 |         if (details.mediaTypes.includes('video')) {
29 |           this.permissions.push('camera');
30 |         }
31 |       }
32 |     });
33 |   }
34 | }
35 | 
36 | export default new Store();
37 | 


--------------------------------------------------------------------------------
/src/renderer/views/preview/components/App/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | import { ThemeProvider } from 'styled-components';
 4 | 
 5 | import { StyledApp, Title, Domain } from './style';
 6 | import store from '../../store';
 7 | import { UIStyle } from '~/renderer/mixins/default-styles';
 8 | 
 9 | export const App = observer(() => {
10 |   return (
11 |     <ThemeProvider theme={{ ...store.theme }}>
12 |       <UIStyle />
13 |       <StyledApp
14 |         style={{ transform: `translate3d(${store.x}px, 0, 0)` }}
15 |         xTransition={store.xTransition}
16 |         visible={store.visible}
17 |       >
18 |         <Title>{store.title}</Title>
19 |         <Domain>{store.domain}</Domain>
20 |       </StyledApp>
21 |     </ThemeProvider>
22 |   );
23 | });
24 | 


--------------------------------------------------------------------------------
/src/renderer/views/preview/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import { maxLines } from '~/renderer/mixins';
 4 | import { TAB_MAX_WIDTH } from '~/renderer/views/app/constants/tabs';
 5 | import { PersistentDialogStyle } from '~/renderer/mixins/dialogs';
 6 | 
 7 | export const StyledApp = styled(PersistentDialogStyle)`
 8 |   margin: 0;
 9 |   padding: 12px;
10 |   font-size: 13px;
11 |   max-width: ${TAB_MAX_WIDTH}px;
12 | 
13 |   ${({ theme, xTransition }: { theme?: ITheme; xTransition: boolean }) => css`
14 |     color: ${theme['dialog.textColor']};
15 |     transition: 0.15s opacity ${xTransition ? ', 0.08s transform' : ''};
16 |   `}
17 | `;
18 | 
19 | export const Title = styled.div`
20 |   font-weight: 500;
21 |   line-height: 1.3rem;
22 |   ${maxLines(2)};
23 |   opacity: 0.87;
24 | `;
25 | 
26 | export const Domain = styled.div`
27 |   opacity: 0.7;
28 |   line-height: 1.3rem;
29 | `;
30 | 
31 | export const Subtitle = styled.div`
32 |   font-size: 13px;
33 |   opacity: 0.54;
34 |   margin-top: 8px;
35 | `;
36 | 
37 | export const Buttons = styled.div`
38 |   display: flex;
39 |   margin-top: 16px;
40 |   float: right;
41 | `;
42 | 


--------------------------------------------------------------------------------
/src/renderer/views/preview/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/search/components/Suggestions/index.tsx:
--------------------------------------------------------------------------------
 1 | import { observer } from 'mobx-react-lite';
 2 | import * as React from 'react';
 3 | 
 4 | import { StyledSuggestions } from './style';
 5 | import store from '../../store';
 6 | import { Suggestion } from '../Suggestion';
 7 | 
 8 | interface Props {
 9 |   visible: boolean;
10 | }
11 | 
12 | const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
13 |   e.stopPropagation();
14 | };
15 | 
16 | export const Suggestions = observer(({ visible }: Props) => {
17 |   return (
18 |     <StyledSuggestions visible={visible} onMouseDown={onMouseDown}>
19 |       {store.suggestions.list.map((suggestion) => (
20 |         <Suggestion suggestion={suggestion} key={suggestion.id} />
21 |       ))}
22 |     </StyledSuggestions>
23 |   );
24 | });
25 | 


--------------------------------------------------------------------------------
/src/renderer/views/search/components/Suggestions/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | export const StyledSuggestions = styled.div`
 4 |   width: 100%;
 5 |   overflow: hidden;
 6 |   ${({ visible }: { visible: boolean }) => css`
 7 |     display: ${visible ? 'block' : 'none'};
 8 |   `};
 9 | `;
10 | 


--------------------------------------------------------------------------------
/src/renderer/views/search/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/About/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import {Header, Row, Title, Control, SecondaryText} from '../App/style';
 4 | import {NormalButton} from "~/renderer/views/settings/components/App";
 5 | import store from "~/renderer/views/settings/store";
 6 | const goUrl = (url: string) => () => {
 7 |   window.location.href = url;
 8 | };
 9 | 
10 | export const About = () => {
11 |   let chromeVersion = navigator.userAgent;
12 |   try {
13 |     const chromeVersionRegex = /Chrome\/([\d\.]+)/;
14 |     const matches = navigator.userAgent.match(chromeVersionRegex);
15 |     if (matches) {
16 |       chromeVersion = matches[1];
17 |     }
18 |   } catch (e) {
19 |     console.log(e);
20 |   }
21 |   return (
22 |     <>
23 |       <Header>关于</Header>
24 |       <Row>
25 |         <div>
26 |           <Title>官方博客</Title>
27 |         </div>
28 |         <Control>
29 |           <NormalButton onClick={goUrl("https://haikuoshijie.cn")}>查看</NormalButton>
30 |         </Control>
31 |       </Row>
32 |       <Row>
33 |         <div>
34 |           <Title>新版本地址</Title>
35 |           <SecondaryText onClick={goUrl("https://haikuoshijie.cn")}>https://haikuoshijie.cn</SecondaryText>
36 |         </div>
37 |         <Control>
38 |           <NormalButton onClick={goUrl("https://www.123pan.com/s/fajA-2nyQh.html")}>查看</NormalButton>
39 |         </Control>
40 |       </Row>
41 |       <Row>
42 |         <div>
43 |           <Title>当前版本：{store.appVersion}</Title>
44 |           <SecondaryText>Chromium {chromeVersion}</SecondaryText>
45 |         </div>
46 |       </Row>
47 |     </>
48 |   );
49 | };
50 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/AddressBar/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ICON_MORE } from '~/renderer/constants';
 3 | import { IconButton } from '../App/style';
 4 | import { centerIcon } from '~/renderer/mixins';
 5 | 
 6 | export const EnginesTable = styled.div`
 7 |   display: flex;
 8 |   flex-flow: column;
 9 | `;
10 | 
11 | export const TableRow = styled.div`
12 |   margin-right: 0;
13 |   display: grid;
14 |   grid-template-columns: 4fr 3fr 3fr 38px;
15 |   line-height: 20px;
16 |   height: 36px;
17 |   align-items: center;
18 | 
19 |   ${({ bold }: { bold?: boolean }) => css`
20 |     font-weight: ${bold ? 500 : 300};
21 |   `};
22 | `;
23 | 
24 | export const TableCell = styled.div`
25 |   display: flex;
26 |   align-items: center;
27 |   line-height: 26px;
28 |   text-overflow: ellipsis;
29 |   overflow: hidden;
30 |   white-space: nowrap;
31 |   padding: 0 12px;
32 | 
33 |   &:nth-child(1) {
34 |     grid-column: 1 / auto;
35 |   }
36 | 
37 |   &:nth-child(2) {
38 |     grid-column: 2 / auto;
39 |   }
40 | 
41 |   &:nth-child(3) {
42 |     grid-column: 3 / auto;
43 |   }
44 | 
45 |   * {
46 |     text-overflow: ellipsis;
47 |     overflow: hidden;
48 |     white-space: nowrap;
49 |   }
50 | `;
51 | 
52 | export const TableHeader = styled(TableCell)`
53 |   opacity: 0.54;
54 |   margin-top: 8px;
55 | `;
56 | 
57 | export const MoreButton = styled(IconButton)`
58 |   height: 32px;
59 |   width: 32px;
60 |   background-image: url(${ICON_MORE});
61 |   grid-column: 4 / auto;
62 |   ${centerIcon(18)}
63 | `;
64 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Autofill/AddressDialog/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { Button } from '~/renderer/components/Button';
 5 | import store from '../../../store';
 6 | import { Textfield } from '~/renderer/components/Textfield';
 7 | import { Dropdown } from '~/renderer/components/Dropdown';
 8 | import { Row } from '../../App/style';
 9 | import { Dialog, Title, Content, Buttons, CloseButton } from '../../Dialog';
10 | 
11 | export default observer(() => {
12 |   return (
13 |     <Dialog
14 |       visible={store.dialogContent === 'edit-address'}
15 |       style={{ width: 344 }}
16 |     >
17 |       <Title>Edit address</Title>
18 |       <Content>
19 |         <Textfield label="名称" />
20 |         <Textfield label="街道地址" />
21 |         <Row>
22 |           <Textfield label="邮政编码" style={{ marginRight: 24 }} />
23 |           <Textfield label="城市 " />
24 |         </Row>
25 |         <Dropdown>
26 |           <Dropdown.Item value="pl">Poland</Dropdown.Item>
27 |         </Dropdown>
28 |       </Content>
29 |       <Buttons>
30 |         <CloseButton />
31 |         <Button>保存</Button>
32 |       </Buttons>
33 |     </Dialog>
34 |   );
35 | });
36 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Autofill/Addresses/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import store from '../../../store';
 5 | import { IFormFillData } from '~/interfaces';
 6 | import { Section, onMoreClick } from '../Section';
 7 | import { More } from '../Passwords/styles';
 8 | import { StyledItem } from './styles';
 9 | import { ICON_LOCATION } from '~/renderer/constants';
10 | 
11 | const Item = observer(({ data }: { data: IFormFillData }) => {
12 |   return (
13 |     <StyledItem>
14 |       {data.fields.address}
15 |       <More onClick={onMoreClick(data)} style={{ marginLeft: 'auto' }} />
16 |     </StyledItem>
17 |   );
18 | });
19 | 
20 | export const Addresses = observer(() => {
21 |   const style = {
22 |     flexDirection: 'column',
23 |     padding: '0px 16px 8px 16px',
24 |   };
25 | 
26 |   return (
27 |     <Section label="Addresses" icon={ICON_LOCATION} style={style}>
28 |       {store.autoFill.addresses.map((item) => (
29 |         <Item key={item._id} data={item} />
30 |       ))}
31 |     </Section>
32 |   );
33 | });
34 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Autofill/Addresses/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | import { transparency } from '~/renderer/constants';
 4 | 
 5 | export const StyledItem = styled.div`
 6 |   width: 100%;
 7 |   height: 48px;
 8 |   display: flex;
 9 |   align-items: center;
10 |   font-size: 13px;
11 | 
12 |   &:not(:last-child) {
13 |     border-bottom: 1px solid rgba(0, 0, 0, ${transparency.dividers});
14 |   }
15 | `;
16 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Autofill/Section/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { IFormFillData } from '~/interfaces';
 4 | import store from '../../../store';
 5 | import {
 6 |   StyledSection,
 7 |   Header,
 8 |   Icon,
 9 |   Label,
10 |   DropIcon,
11 |   Container,
12 | } from './styles';
13 | 
14 | interface Props {
15 |   label: string;
16 |   icon: any;
17 |   children?: any;
18 |   style?: any;
19 | }
20 | 
21 | export const onMoreClick = (data: IFormFillData) => (
22 |   e: React.MouseEvent<HTMLDivElement>,
23 | ) => {
24 |   e.stopPropagation();
25 | 
26 |   const { left, top } = e.currentTarget.getBoundingClientRect();
27 | 
28 |   store.autoFill.selectedItem = data;
29 |   store.autoFill.menuTop = top;
30 |   store.autoFill.menuLeft = left;
31 |   store.autoFill.menuVisible = true;
32 | };
33 | 
34 | export const Section = (props: Props) => {
35 |   const { label, icon, children, style } = props;
36 |   const [expanded, setExpanded] = React.useState(false);
37 | 
38 |   const onClick = () => {
39 |     setExpanded(!expanded);
40 |   };
41 | 
42 |   return (
43 |     <StyledSection>
44 |       <Header onClick={onClick}>
45 |         <Icon icon={icon} />
46 |         <Label>{label}</Label>
47 |         <DropIcon expanded={expanded} />
48 |       </Header>
49 |       <Container expanded={expanded} style={style}>
50 |         {children}
51 |       </Container>
52 |     </StyledSection>
53 |   );
54 | };
55 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Dialog/styles.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/src/renderer/views/settings/components/Dialog/styles.ts


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Downloads/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { Switch } from '~/renderer/components/Switch';
 4 | import { Title, Row, Control, Header, SecondaryText } from '../App/style';
 5 | import store from '../../store';
 6 | import { onSwitchChange } from '../../utils';
 7 | import { ipcRenderer } from 'electron';
 8 | import { observer } from 'mobx-react-lite';
 9 | import { NormalButton } from '../App';
10 | 
11 | const AskToggle = observer(() => {
12 |   const { downloadsDialog } = store.settings;
13 | 
14 |   return (
15 |     <Row onClick={onSwitchChange('downloadsDialog')}>
16 |       <Title>下载前询问</Title>
17 |       <Control>
18 |         <Switch value={downloadsDialog} />
19 |       </Control>
20 |     </Row>
21 |   );
22 | });
23 | 
24 | const onChangeClick = () => {
25 |   ipcRenderer.send('downloads-path-change');
26 | };
27 | 
28 | const Location = observer(() => {
29 |   return (
30 |     <Row>
31 |       <div>
32 |         <Title>下载位置</Title>
33 |         <SecondaryText>{store.settings.downloadsPath}</SecondaryText>
34 |       </div>
35 | 
36 |       <Control>
37 |         <NormalButton onClick={onChangeClick}>修改</NormalButton>
38 |       </Control>
39 |     </Row>
40 |   );
41 | });
42 | 
43 | export const Downloads = () => {
44 |   return (
45 |     <>
46 |       <Header>下载</Header>
47 |       <Location />
48 |       <AskToggle />
49 |     </>
50 |   );
51 | };
52 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/components/Privacy/BrowsingDataDialog/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { observer } from 'mobx-react-lite';
 3 | 
 4 | import { Dialog, Title, Content, Buttons, CloseButton } from '../../Dialog';
 5 | import { Button } from '~/renderer/components/Button';
 6 | import store from '../../../store';
 7 | 
 8 | const clearData = () => {
 9 |   alert("此功能开发中");
10 | }
11 | 
12 | export default observer(() => {
13 |   return (
14 |     <Dialog visible={store.dialogContent === 'privacy'} style={{ width: 344, marginLeft: "auto" }}>
15 |       <Title>清除浏览数据</Title>
16 |       <Content></Content>
17 |       <Buttons>
18 |         <CloseButton />
19 |         <Button background="transparent" foreground="#3F51B5" onClick={clearData}>
20 |           立即清除
21 |         </Button>
22 |       </Buttons>
23 |     </Dialog>
24 |   );
25 | });
26 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import App from './components/App';
2 | import { renderWebUI } from '~/utils/webui-entry';
3 | renderWebUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/style.ts:
--------------------------------------------------------------------------------
 1 | import { css } from 'styled-components';
 2 | 
 3 | import { body2 } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | 
 6 | export const Style = css`
 7 |   body {
 8 |     user-select: none;
 9 |     cursor: default;
10 |     margin: 0;
11 |     padding: 0;
12 |     width: 100vw;
13 |     height: 100vh;
14 |     overflow: hidden;
15 |     ${body2()}
16 |     ${({ theme }: { theme?: ITheme }) => css`
17 |       background-color: ${theme['pages.backgroundColor']};
18 |       color: ${theme['pages.textColor']};
19 |     `};
20 |   }
21 | 
22 |   * {
23 |     box-sizing: border-box;
24 |   }
25 | `;
26 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './settings';
2 | 


--------------------------------------------------------------------------------
/src/renderer/views/settings/utils/settings.ts:
--------------------------------------------------------------------------------
1 | import store from '../store';
2 | 
3 | export const onSwitchChange = (key: string) => () => {
4 |   (store.settings as any)[key] = !(store.settings as any)[key];
5 |   store.save();
6 | };
7 | 


--------------------------------------------------------------------------------
/src/renderer/views/show-block/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/show-block/store/index.ts:
--------------------------------------------------------------------------------
 1 | import {ipcRenderer} from 'electron';
 2 | import {makeObservable, observable} from 'mobx';
 3 | import * as React from 'react';
 4 | import {DialogStore} from '~/models/dialog-store';
 5 | 
 6 | export class Store extends DialogStore {
 7 |   public titleRef = React.createRef<HTMLInputElement>();
 8 | 
 9 |   public list: any[] = [];
10 |   public adListUrls: String = "";
11 |   public filterCount = 0;
12 | 
13 |   public constructor() {
14 |     super();
15 |     makeObservable(this, {
16 |       list: observable,
17 |       adListUrls: observable,
18 |       filterCount: observable
19 |     });
20 |     (async () => {
21 |       this.adListUrls = await ipcRenderer.invoke('get-ad-lists');
22 |       this.filterCount = await ipcRenderer.invoke('get-ad-filter-count');
23 |       console.log("get-ad-lists2");
24 |     })();
25 |     ipcRenderer.on('data', async (e, data) => {
26 |       this.list = data.data;
27 |       this.filterCount = data.count;
28 |     });
29 |   }
30 | 
31 | }
32 | 
33 | export default new Store();
34 | 


--------------------------------------------------------------------------------
/src/renderer/views/show-video/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { robotoRegular } from '~/renderer/mixins';
 4 | import { ITheme } from '~/interfaces';
 5 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 6 | 
 7 | export const StyledApp = styled(DialogStyle)`
 8 |   padding: 16px;
 9 | 
10 |   & .textfield,
11 |   .dropdown {
12 |     width: 255px;
13 |     margin-left: auto;
14 |   }
15 | 
16 |   ${({ theme }: { theme?: ITheme; visible: boolean }) => css`
17 |     color: ${theme['dialog.lightForeground'] ? '#fff' : '#000'};
18 |   `}
19 | `;
20 | 
21 | export const Subtitle = styled.div`
22 |   font-size: 13px;
23 |   opacity: 0.54;
24 |   margin-top: 8px;
25 | `;
26 | 
27 | export const Title = styled.div`
28 |   font-size: 16px;
29 |   margin-bottom: 16px;
30 |   ${robotoRegular()};
31 | `;
32 | 
33 | export const Row = styled.div`
34 |   width: 100%;
35 |   height: 48px;
36 |   align-items: center;
37 |   display: flex;
38 | `;
39 | 
40 | export const Label = styled.div`
41 |   font-size: 12px;
42 | `;
43 | 
44 | export const Buttons = styled.div`
45 |   width: 100%;
46 |   display: block;
47 |   & .button:not(:last-child) {
48 |     margin-bottom: 12px;
49 |   }
50 | `;
51 | 


--------------------------------------------------------------------------------
/src/renderer/views/show-video/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/show-video/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { makeObservable, observable } from 'mobx';
 3 | import { DialogStore } from '~/models/dialog-store';
 4 | 
 5 | export class Store extends DialogStore {
 6 |   public videoUrls: string[] = [];
 7 |   public tabId: number = 0;
 8 | 
 9 |   public constructor() {
10 |     super();
11 | 
12 |     makeObservable(this, {
13 |       videoUrls: observable,
14 |       tabId: observable,
15 |     });
16 | 
17 |     ipcRenderer.on('data', async (e, data) => {
18 |       const { videoUrls, tabId } = data;
19 |       this.videoUrls = videoUrls;
20 |       this.tabId = tabId;
21 |     });
22 |   }
23 | }
24 | 
25 | export default new Store();
26 | 


--------------------------------------------------------------------------------
/src/renderer/views/tabgroup/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | import { ITheme } from '~/interfaces';
 3 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 4 | 
 5 | export const StyledApp = styled(DialogStyle)`
 6 |   margin-top: 10px;
 7 |   padding: 16px;
 8 | `;
 9 | 
10 | export const Title = styled.div`
11 |   font-size: 16px;
12 | `;
13 | 
14 | export const Subtitle = styled.div`
15 |   font-size: 13px;
16 |   opacity: 0.54;
17 |   margin-top: 8px;
18 | `;
19 | 
20 | export const Buttons = styled.div`
21 |   display: flex;
22 |   margin-top: 16px;
23 |   float: right;
24 | `;
25 | 
26 | export const Colors = styled.div`
27 |   display: flex;
28 |   margin-top: 8px;
29 |   flex-wrap: wrap;
30 |   justify-content: center;
31 | `;
32 | 
33 | export const Color = styled.div`
34 |   min-width: 16px;
35 |   height: 16px;
36 |   cursor: pointer;
37 |   border-radius: 16px;
38 |   margin-right: 4px;
39 |   margin-left: 4px;
40 |   margin-top: 8px;
41 |   position: relative;
42 |   overflow: hidden;
43 | 
44 |   ${({ color }: { color: string }) => css`
45 |     background-color: ${color};
46 |   `}
47 | 
48 |   &:after {
49 |     content: '';
50 |     position: absolute;
51 |     left: 0;
52 |     top: 0;
53 |     right: 0;
54 |     bottom: 0;
55 |     opacity: 0;
56 |     background-color: white;
57 |   }
58 | 
59 |   &:hover {
60 |     &:after {
61 |       opacity: 0.3;
62 |     }
63 |   }
64 | `;
65 | 


--------------------------------------------------------------------------------
/src/renderer/views/tabgroup/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/tabgroup/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import * as React from 'react';
 3 | import { Textfield } from '~/renderer/components/Textfield';
 4 | import { DialogStore } from '~/models/dialog-store';
 5 | 
 6 | export class Store extends DialogStore {
 7 |   public inputRef = React.createRef<Textfield>();
 8 | 
 9 |   public tabGroupId: number;
10 | 
11 |   public constructor() {
12 |     super();
13 |     this.init();
14 |   }
15 | 
16 |   public async init() {
17 |     const tabGroup = await this.invoke('tabgroup');
18 | 
19 |     this.tabGroupId = tabGroup.id;
20 |     this.inputRef.current.inputRef.current.focus();
21 |     this.inputRef.current.inputRef.current.value = tabGroup.name;
22 |     this.inputRef.current.inputRef.current.select();
23 |   }
24 | }
25 | 
26 | export default new Store();
27 | 


--------------------------------------------------------------------------------
/src/renderer/views/zoom/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | import { ITheme } from '~/interfaces';
 4 | import { DialogStyle } from '~/renderer/mixins/dialogs';
 5 | 
 6 | export const StyledApp = styled(DialogStyle)`
 7 |   padding: 16px;
 8 | 
 9 |   ${({ theme }: { theme?: ITheme; visible: boolean }) => css`
10 |     color: ${theme['dialog.lightForeground'] ? '#fff' : '#000'};
11 |   `}
12 | `;
13 | 
14 | export const Label = styled.div`
15 |   font-size: 16px;
16 |   min-width: 45px;
17 |   text-align: center;
18 | `;
19 | 
20 | export const Spacer = styled.div`
21 |   flex-grow: 1;
22 | `;
23 | 
24 | export const Buttons = styled.div`
25 |   width: 100%;
26 |   display: flex;
27 |   align-items: center;
28 |   justify-content: flex-end;
29 |   & .button:not(:last-child) {
30 |     margin-right: 8px;
31 |   }
32 | `;
33 | 
34 | export const Container = styled.div`
35 |   width: 100%;
36 |   height: 100%;
37 | `;
38 | 


--------------------------------------------------------------------------------
/src/renderer/views/zoom/index.tsx:
--------------------------------------------------------------------------------
1 | import { App } from './components/App';
2 | import { renderUI } from '~/utils/ui-entry';
3 | renderUI(App);
4 | 


--------------------------------------------------------------------------------
/src/renderer/views/zoom/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | import { reaction, observable, makeObservable } from 'mobx';
 3 | import { DialogStore } from '~/models/dialog-store';
 4 | 
 5 | export class Store extends DialogStore {
 6 |   @observable
 7 |   public zoomFactor = 1;
 8 | 
 9 |   public timer: any = 0;
10 | 
11 |   public constructor() {
12 |     super();
13 |     makeObservable(this, { zoomFactor: observable });
14 |     this.init();
15 |   }
16 | 
17 |   public async init() {
18 |     const zoomFactorChange = reaction(
19 |       () => this.zoomFactor,
20 |       () => this.resetHideTimer(),
21 |     );
22 | 
23 |     ipcRenderer.on('zoom-factor-updated', (e, zoomFactor) => {
24 |       this.zoomFactor = zoomFactor;
25 |     });
26 | 
27 |     const tabId = await this.invoke('tab-id');
28 |     this.zoomFactor = await ipcRenderer.invoke('get-tab-zoom', tabId);
29 | 
30 |     this.resetHideTimer();
31 |   }
32 | 
33 |   public resetHideTimer() {
34 |     clearTimeout(this.timer);
35 |     this.timer = setTimeout(() => {
36 |       this.hide();
37 |     }, 1500);
38 |   }
39 | 
40 |   public stopHideTimer() {
41 |     clearTimeout(this.timer);
42 |   }
43 | }
44 | 
45 | export default new Store();
46 | 


--------------------------------------------------------------------------------
/src/utils/history.ts:
--------------------------------------------------------------------------------
 1 | import { IHistoryItem, IVisitedItem } from '~/interfaces';
 2 | 
 3 | export const countVisitedTimes = (hItems: IHistoryItem[]): IVisitedItem[] => {
 4 |   const items: IVisitedItem[] = [];
 5 |   const historyItems = hItems.slice();
 6 | 
 7 |   for (const historyItem of historyItems) {
 8 |     const itemsWithUrl = historyItems.filter(
 9 |       (x) => x.url.replace(/\//g, '') === historyItem.url.replace(/\//g, ''),
10 |     );
11 | 
12 |     const itemToPush = {
13 |       times: itemsWithUrl.length,
14 |       ...historyItem,
15 |     };
16 | 
17 |     if (
18 |       !items.find(
19 |         (x) => x.url.replace(/\//g, '') === historyItem.url.replace(/\//g, ''),
20 |       )
21 |     ) {
22 |       if (itemToPush.favicon === '') {
23 |         const item = itemsWithUrl.find((x) => x.favicon !== '');
24 |         if (item) {
25 |           itemToPush.favicon = item.favicon;
26 |         }
27 |       }
28 |       items.push(itemToPush);
29 |     }
30 |   }
31 | 
32 |   return items.sort((a, b) => b.times - a.times);
33 | };
34 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './paths';
2 | export * from './string';
3 | export * from './url';
4 | export * from './colors';
5 | 


--------------------------------------------------------------------------------
/src/utils/paths.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path';
 2 | import { remote, app } from 'electron';
 3 | 
 4 | export const getPath = (...relativePaths: string[]) => {
 5 |   let path: string;
 6 | 
 7 |   if (remote) {
 8 |     path = remote.app.getPath('userData');
 9 |   } else if (app) {
10 |     path = app.getPath('userData');
11 |   } else {
12 |     return null;
13 |   }
14 |   console.log(path);
15 | 
16 |   return resolve(path, ...relativePaths).replace(/\\/g, '/');
17 | };
18 | 


--------------------------------------------------------------------------------
/src/utils/queue.ts:
--------------------------------------------------------------------------------
 1 | export class Queue {
 2 |   private queue: {
 3 |     promise: () => Promise<any>;
 4 |     reject: any;
 5 |     resolve: any;
 6 |   }[] = [];
 7 |   private pendingPromise = false;
 8 | 
 9 |   public enqueue<T>(promise: () => Promise<T>): Promise<T> {
10 |     return new Promise((resolve, reject) => {
11 |       this.queue.push({
12 |         promise,
13 |         resolve,
14 |         reject,
15 |       });
16 | 
17 |       this.dequeue();
18 |     });
19 |   }
20 | 
21 |   public dequeue() {
22 |     if (this.pendingPromise) {
23 |       return false;
24 |     }
25 |     const item = this.queue.shift();
26 |     if (!item) {
27 |       return false;
28 |     }
29 |     try {
30 |       this.pendingPromise = true;
31 |       item
32 |         .promise()
33 |         .then((value) => {
34 |           this.pendingPromise = false;
35 |           item.resolve(value);
36 |           this.dequeue();
37 |         })
38 |         .catch((err) => {
39 |           this.pendingPromise = false;
40 |           item.reject(err);
41 |           this.dequeue();
42 |         });
43 |     } catch (err) {
44 |       this.pendingPromise = false;
45 |       item.reject(err);
46 |       this.dequeue();
47 |     }
48 |     return true;
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/utils/string.ts:
--------------------------------------------------------------------------------
 1 | export const makeId = (
 2 |   length: number,
 3 |   possible = 'abcdefghijklmnopqrstuvwxyz',
 4 | ) => {
 5 |   let id = '';
 6 |   for (let i = 0; i < length; i++) {
 7 |     id += possible.charAt(Math.floor(Math.random() * possible.length));
 8 |   }
 9 |   return id;
10 | };
11 | 
12 | export const replaceAll = (
13 |   str: string,
14 |   find: string,
15 |   replace: string,
16 |   options = 'gi',
17 | ) => {
18 |   find = find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
19 |   return str.replace(new RegExp(find, options), replace);
20 | };
21 | 
22 | export const capitalizeFirst = (str: string) => {
23 |   return str.substr(0, 1).toUpperCase() + str.substring(1).toLowerCase();
24 | };
25 | 
26 | export const hashCode = (str: string) => {
27 |   let hash = 0;
28 | 
29 |   if (str.length === 0) {
30 |     return hash;
31 |   }
32 | 
33 |   for (let i = 0; i < str.length; i++) {
34 |     const chr = str.charCodeAt(i);
35 |     hash = (hash << 5) - hash + chr;
36 |     hash |= 0;
37 |   }
38 |   return hash;
39 | };
40 | 


--------------------------------------------------------------------------------
/src/utils/themes.ts:
--------------------------------------------------------------------------------
1 | import { lightTheme, darkTheme } from '~/renderer/constants/themes';
2 | 
3 | export const getTheme = (name: string) => {
4 |   if (name === 'wexond-light') return lightTheme;
5 |   else if (name === 'wexond-dark') return darkTheme;
6 |   return lightTheme;
7 | };
8 | 


--------------------------------------------------------------------------------
/src/utils/ui-entry.ts:
--------------------------------------------------------------------------------
 1 | import * as ReactDOM from 'react-dom';
 2 | import * as React from 'react';
 3 | 
 4 | import { configureUI } from '~/common/renderer-config';
 5 | import { ipcRenderer } from 'electron';
 6 | 
 7 | export const renderUI = (Component: any) => {
 8 |   ipcRenderer.setMaxListeners(0);
 9 |   configureUI();
10 | 
11 |   ReactDOM.render(
12 |     React.createElement(Component),
13 |     document.getElementById('app'),
14 |   );
15 | };
16 | 


--------------------------------------------------------------------------------
/src/utils/url.ts:
--------------------------------------------------------------------------------
 1 | export const isURL = (input: string): boolean => {
 2 |   if(input && input.startsWith("chrome-extension://")) {
 3 |     return true;
 4 |   }
 5 |   const pattern = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/;
 6 | 
 7 |   if (pattern.test(input)) {
 8 |     return true;
 9 |   }
10 |   return pattern.test(`http://${input}`);
11 | };
12 | 
13 | export const matchesPattern = (pattern: string, url: string) => {
14 |   if (pattern === '<all_urls>') {
15 |     return true;
16 |   }
17 | 
18 |   const regexp = new RegExp(
19 |     `^${pattern.replace(/\*/g, '.*').replace('/', '\\/')}$`,
20 |   );
21 |   return url.match(regexp) != null;
22 | };
23 | 
24 | export const getDomain = (url: string): string => {
25 |   let hostname = url;
26 | 
27 |   if (hostname.includes('http://') || hostname.includes('https://')) {
28 |     hostname = hostname.split('://')[1];
29 |   }
30 | 
31 |   if (hostname.includes('?')) {
32 |     hostname = hostname.split('?')[0];
33 |   }
34 | 
35 |   if (hostname.includes('://')) {
36 |     hostname = `${hostname.split('://')[0]}://${hostname.split('/')[2]}`;
37 |   } else {
38 |     hostname = hostname.split('/')[0];
39 |   }
40 | 
41 |   return hostname;
42 | };
43 | 
44 | export const prefixHttp = (url: string): string => {
45 |   url = url.trim();
46 |   return url.includes('://') ? url : `http://${url}`;
47 | };
48 | 


--------------------------------------------------------------------------------
/src/utils/view.ts:
--------------------------------------------------------------------------------
 1 | import { ipcRenderer } from 'electron';
 2 | 
 3 | export const callViewMethod = async (
 4 |   id: number,
 5 |   method: string,
 6 |   ...args: any[]
 7 | ): Promise<any> => {
 8 |   return await ipcRenderer.invoke(`web-contents-call`, {
 9 |     args,
10 |     method,
11 |     webContentsId: id,
12 |   });
13 | };
14 | 


--------------------------------------------------------------------------------
/src/utils/webui-entry.ts:
--------------------------------------------------------------------------------
 1 | import * as ReactDOM from 'react-dom';
 2 | import * as React from 'react';
 3 | import { injectFonts } from '~/renderer/mixins';
 4 | import { configureUI } from '~/common/renderer-config';
 5 | 
 6 | export const renderWebUI = (Component: any) => {
 7 |   injectFonts();
 8 |   configureUI();
 9 | 
10 |   ReactDOM.render(
11 |     React.createElement(Component),
12 |     document.getElementById('app'),
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/src/utils/zip.ts:
--------------------------------------------------------------------------------
 1 | import { loadAsync } from 'jszip';
 2 | import { join, dirname } from 'path';
 3 | import { promises } from 'fs';
 4 | 
 5 | export const extractZip = async (zipBuf: Buffer, destination: string) => {
 6 |   const zip = await loadAsync(zipBuf);
 7 |   const zipFileKeys = Object.keys(zip.files);
 8 | 
 9 |   return Promise.all(
10 |     zipFileKeys.map((filename: string) => {
11 |       const isFile = !zip.files[filename].dir;
12 |       const fullPath = join(destination, filename);
13 |       const directory = (isFile && dirname(fullPath)) || fullPath;
14 |       const content = zip.files[filename].async('nodebuffer');
15 | 
16 |       return promises
17 |         .mkdir(directory, { recursive: true })
18 |         .then(async () => {
19 |           return isFile ? await content : false;
20 |         })
21 |         .then(async (data: any) => {
22 |           return data ? await promises.writeFile(fullPath, data) : true;
23 |         });
24 |     }),
25 |   );
26 | };
27 | 


--------------------------------------------------------------------------------
/static/icons/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/icons/icon.icns


--------------------------------------------------------------------------------
/static/icons/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/icons/icon.ico


--------------------------------------------------------------------------------
/static/icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/icons/icon.png


--------------------------------------------------------------------------------
/static/nightly-icons/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/nightly-icons/icon.icns


--------------------------------------------------------------------------------
/static/nightly-icons/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/nightly-icons/icon.ico


--------------------------------------------------------------------------------
/static/nightly-icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/static/nightly-icons/icon.png


--------------------------------------------------------------------------------
/static/pages/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="color-scheme" content="dark light" />
 6 |   </head>
 7 | 
 8 |   <body>
 9 |     <div id="app"></div>
10 | 
11 |     <div style="-webkit-app-region: no-drag"></div>
12 | 
13 |     <!-- prettier-ignore -->
14 |     <script> </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/static/pages/extension-popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="color-scheme" content="dark light" />
 6 | 
 7 |     <style>
 8 |       body {
 9 |         user-select: none;
10 |         cursor: default;
11 |         margin: 0;
12 |         padding: 0;
13 |         height: 100vh;
14 |         width: 100vw;
15 |         overflow: hidden;
16 |       }
17 | 
18 |       * {
19 |         box-sizing: border-box;
20 |       }
21 | 
22 |       .app {
23 |         margin: 3px 16px 16px 16px;
24 |         max-height: 500px;
25 |         box-shadow: 0 12px 16px rgba(0, 0, 0, 0.12),
26 |           0 8px 10px rgba(0, 0, 0, 0.16);
27 |         position: relative;
28 |         overflow: auto;
29 |         border-radius: 8px;
30 |         transition: 0.3s opacity;
31 |         background-color: white;
32 |         opacity: 0;
33 |       }
34 |       /* 滚动条的样式 */
35 |       .app::-webkit-scrollbar {
36 |         width: 10px;
37 |         height: 10px;
38 |       }
39 | 
40 |       .app::-webkit-scrollbar-thumb {
41 |         background-color: #aaa;
42 |         border-radius: 5px;
43 |       }
44 |       
45 |       #container {
46 |         height: 100%;
47 |         overflow: hidden;
48 |       }
49 | 
50 |       .visible {
51 |         opacity: 1;
52 |       }
53 |     </style>
54 |   </head>
55 | 
56 |   <body>
57 |     <div id="app" class="app">
58 |       <div id="container"></div>
59 |     </div>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "./build/",
 4 |     "noImplicitAny": true,
 5 |     "noImplicitReturns": true,
 6 |     "noImplicitThis": true,
 7 |     "alwaysStrict": true,
 8 |     "skipLibCheck": true,
 9 |     "module": "None",
10 |     "target": "es2017",
11 |     "jsx": "react",
12 |     "allowJs": true,
13 |     "sourceMap": true,
14 |     "moduleResolution": "node",
15 |     "allowSyntheticDefaultImports": true,
16 |     "lib": ["dom", "esnext"],
17 |     "experimentalDecorators": true,
18 |     "baseUrl": "./",
19 |     "paths": {
20 |       "~/*": ["./src/*"]
21 |     }
22 |   },
23 |   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
24 | }
25 | 


--------------------------------------------------------------------------------
/web.koodoreader.com/assets/label.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/web.koodoreader.com/assets/label.png


--------------------------------------------------------------------------------
/web.koodoreader.com/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/web.koodoreader.com/favicon.png


--------------------------------------------------------------------------------
/web.koodoreader.com/static/media/icomoon.07265ef087078c194d79.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiusunshine/browser-base-master/b6f26f6ce9be8acbaa15a8a52fd228f5aeb9445e/web.koodoreader.com/static/media/icomoon.07265ef087078c194d79.ttf


--------------------------------------------------------------------------------