mirror of
https://github.com/Alex313031/thorium.git
synced 2025-01-09 11:27:32 -03:00
91 lines
6.5 KiB
Markdown
91 lines
6.5 KiB
Markdown
## About Thorium 2024 UI
|
|
|
|
Google started an initiative to refresh and redesign the UI of Chromium/Chrome
|
|
at the end of 2022 with [this commit](https://source.chromium.org/chromium/chromium/src/+/9bebadaa2a460012b124ba795587b1603bb3f6a2).
|
|
The previous redesign of the UI that occured in 2017 with M70 was called GM2.
|
|
This new design was given the codename Chrome Refresh 2023. It is also sometimes
|
|
referred to in the code and comments as Cr23, CR23, or GM3 (meaning sucessor to GM2).
|
|
See more about Chrome Refresh 2023 [Here](ss).
|
|
|
|
It made a really ugly, harder to use UI. Everything is super rounded, and spaced out.
|
|
Tabs are shorter, the bookmarks bar is larger, menus are so large as to become
|
|
annoying to use, plus [many more complaints](https://github.com/Alex313031/thorium/releases/tag/M126.0.6478.246#readme). And I wasn't the only one to notice or think this, see [this](https://www.tomshardware.com/software/i-hate-chrome-browsers-new-design-with-a-burning-passion-heres-how-to-revert-to-the-classic-one).
|
|
So I started an initiative after the M126 release (M126 was so
|
|
bad looking and annoying to use that it was the only Thorium release where Chrome
|
|
Refresh 2023 was the default and Th24 wasn't an option yet.) tentatively called Th24.
|
|
It aims to restore the look and feel of Chromium/Thorium to the way it was before Cr23,
|
|
while not completely restoring all code paths (the amount of code changed and removed is
|
|
too geat for one person to restore and maintain). It uses existing codepaths when possible,
|
|
to allow for easier rebasing work. It doesn't restore most icons or chrome:// WebUI pages,
|
|
but colors, shapes, layouts, metrics, and sizing of tabs, the top bar, menus, dialogs, and
|
|
buttons should all be back to the way they were before.
|
|
|
|
It is enabled with the chrome://flags flag `chrome://flags#thorium-2024`. You can also
|
|
enable it in the Thorium Experiments i.e. "Chrome Labs" menu accessible with the
|
|
"laboratory flask" (actually an Erlenmeyer flask) button, then turning __Enable Thorium
|
|
2024 UI__ to "Enabled". You can also enable it with the command line flag `--th24`.
|
|
|
|
Rather than try to explain everything in text, the rest of this document contains
|
|
screenshots comparing stock Thorium (with Cr23) to Thorium when the Th24 flag is enabled, along
|
|
with a description. Normal Cr23 Thorium is always the first image or the image on the left,
|
|
Th24 Thorium is always the second image or one on the right.
|
|
|
|
----------------------------------------------------------------------------------------------
|
|
|
|
First, the browsers in their entirety, on the New Tab Page. (Right click and open each image in a separate tab
|
|
to make it easier to view the differences, or even better, download the two images, and then open
|
|
them fullscreen or maximized and use Alt + Tab to switch back and forth between the two windows).
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_full_browser.png" width="49.3%"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_full_browser.png" width="49.3%">
|
|
|
|
Menus: <sup>(Note that Cr23 menus are rounded, while Th24 menus are square).</sup>
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_menu.png"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_menu.png">
|
|
|
|
Tabs:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_tabs.png" width="80%">
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_tabs.png" width="80%">
|
|
|
|
Top Bar:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_top_bar.png" width="100%">
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_top_bar.png" width="100%">
|
|
|
|
Tabstrip Buttons/Omnibox Left Side Area:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_left_buttons.png" width="350px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_left_buttons.png" width="350px">
|
|
|
|
Tabstrip Buttons/Omnibox Right Side Area:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_right_buttons.png" width="350px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_right_buttons.png" width="350px">
|
|
|
|
Dialogs:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_dialog.png" width="320px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_dialog.png" width="320px">
|
|
|
|
Buttons:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_button.png" width="232px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_button.png" width="232px">
|
|
|
|
Toggle Switches:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_toggle.png" width="72px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_toggle.png" width="72px">
|
|
|
|
Folder Icons:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_bookmark_folder.png" width="32px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_bookmark_folder.png" width="32px">
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_folder.png" width="32px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_folder.png" width="32px">
|
|
|
|
<!-- Side Panel Resize Handle: -->
|
|
|
|
<!-- <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_bookmark_folder.png" width="32px"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_bookmark_folder.png" width="32px"> -->
|
|
|
|
Text Fields/Comboboxes:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_textfield.png"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_textfield.png">
|
|
|
|
Colors:
|
|
|
|
<img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/cr23_color.png"> <img src="https://raw.githubusercontent.com/Alex313031/thorium/refs/heads/main/docs/imgs/th24_color.png">
|