Ver 7.0.0 Feedback Thread #511

black7375 · 2022-11-21T01:18:27Z

Describe the PR

As mentioned in #453 , The purpose is to implement various UI.

Tab #326

userChrome.tab.bar_separator
userChrome.tab.bottom_rounded_corner.all
userChrome.tab.bottom_rounded_corner.australis
userChrome.tab.bottom_rounded_corner.edge
userChrome.tab.bottom_rounded_corner.chrome
userChrome.tab.bottom_rounded_corner.chrome_legacy
userChrome.tab.bottom_rounded_corner.wave
userChrome.tab.close_button_at_hover.with_selected

Tab Bar

userChrome.tabbar.fill_width" Support for tabs filling available width #458
userChrome.tabbar.multi_row I'd like to use multirow from MrOtherGuy with Lepton #315
userChrome.tabbar.unscroll

URL Bar & View

userChrome.hidden.urlbar_iconbox.label_only
userChrome.rounding.square_urlView_item
userChrome.urlbar.iconbox_with_separator
userChrome.urlView.as_commandbar
userChrome.urlView.full_width_padding
userChrome.urlView.focus_item_border

Photon like components #399

userChrome.decoration.panel_button_separator
userChrome.decoration.panel_arrow

Counter

userChrome.counter.tab
userChrome.counter.bookmark_menu

Combined

userChrome.combined.nav_button
userChrome.combined.nav_button.home_button
userChrome.combined.urlbar.nav_button
userChrome.combined.urlbar.home_button
userChrome.combined.urlbar.reload_button
userChrome.combined.sub_button.none_background
userChrome.combined.sub_button.as_normal

Others

userChrome.padding.toolbar_button.compact
userChrome.navbar.as_sidebar
userChrome.bookmarkbar.multi_row
userChrome.findbar.floating_on_top
userChrome.hidden.titlebar_container Feature request: Add option to hide “Minimize”, “Maximize” and “Close” buttons #550

It is not yet stabilized API, and there may be changes before merging.

Setup - Please refer Wiki:Installation Guide

## First user ##################################################################
# At <FIREFOX_PROFILE_DIRECTORY>

# Original dev version
git clone https://github.com/black7375/Firefox-UI-Fix -b dev

# Photon style dev version
git clone https://github.com/black7375/Firefox-UI-Fix  chrome -b photon-style-dev

# Proton style dev version
git clone https://github.com/black7375/Firefox-UI-Fix chrome -b proton-style-dev

## Existing user ###############################################################
# At <FIREFOX_PROFILE_DIRECTORY>/chrome

# Original dev version
git checkout dev
git pull

# Proton style dev version
git checkout photon-style-dev
git pull

# Proton style dev version
git checkout proton-style-dev
git pull

Screenshots

I'd like to show you some use cases.

Keyboard browsing

Inspired by qutebrowser.

You can browse only with the keyboard using the Vim shortcut and Caret Browsing.

keyboard_browsing.mp4

If you want Status Bar, use Waterfox

Theme: Matte Black (Green)
Addon: Vim Vixen
- Or Tridactyl, Vimium-FF, Saka Key, Surfingkeys

user.js

// ** Browser Options **********************************************************
user_pref("browser.uidensity",                            1); // and urlbar spacing. The possible values are 0=normal, 1=compact, 2=touch.
user_pref("browser.tabs.inTitlebar",                      0); // no (0), yes (1), or default (2), which is true everywhere except Linux.
user_pref("accessibility.browsewithcaret",             true);

// Waterfox only
user_pref("browser.statusbar.enabled",                 true);
user_pref("browser.statusbar.appendStatusText",        true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",              true); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",            true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.theme.monospace",                     true);

user_pref("userChrome.hidden.navbar",                       true);

user_pref("userChrome.counter.tab",                         true);
user_pref("userChrome.counter.bookmark_menu",               true);

user_pref("userChrome.tabbar.fill_width",                   true);

// -- User Content -------------------------------------------------------------
user_pref("userContent.page.monospace",                     true);

Photon with multirow

Photon style to support multirow.

photon_with_multirow.mp4

user.js

// ** Browser Options **********************************************************
user_pref("browser.search.widget.inNavBar",            true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",        true); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",           true); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",               false); // Original, Proton
user_pref("userChrome.icon.panel_photon",              true); // Photon

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",    true);
user_pref("userChrome.rounding.square_tab",            true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.decoration.panel_button_separator",   true);
user_pref("userChrome.decoration.panel_arrow",              true);

user_pref("userChrome.combined.nav_button",                 true);
user_pref("userChrome.combined.sub_button.as_normal",       true);

user_pref("userChrome.padding.urlView_expanding",           true);
user_pref("userChrome.padding.urlView_result",              true);
user_pref("userChrome.padding.toolbar_button.compact",      true);

user_pref("userChrome.urlView.always_show_page_actions",    true);
user_pref("userChrome.urlView.move_icon_to_left",           true);

user_pref("userChrome.rounding.square_panel",               true);
user_pref("userChrome.rounding.square_panelitem",           true);

user_pref("userChrome.panel.full_width_separator",          true);
user_pref("userChrome.panel.full_width_padding",            true);

user_pref("userChrome.tabbar.multi_row",                    true);
user_pref("userChrome.bookmarkbar.multi_row",               true);

Australis like theme

Set up combined UI like Australis.
At the same time, it applies a gaming feeling like Opera GX.

australis_like_theme.mp4

Theme: Beautiful Opera GX Fucsia

user.js

// ** Browser Options **********************************************************
user_pref("browser.tabs.inTitlebar",                      1); // no (0), yes (1), or default (2), which is true everywhere except Linux.
user_pref("browser.search.widget.inNavBar",            true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",             false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.autohide.forward_button",             true);

user_pref("userChrome.combined.urlbar.nav_button",          true);
user_pref("userChrome.combined.urlbar.reload_button",       true);

user_pref("userChrome.tab.bottom_rounded_corner.all",       true);
user_pref("userChrome.tab.bottom_rounded_corner.australis", true);

user_pref("userChrome.urlbar.iconbox_with_separator",       true);

// Option
// user_pref("userChrome.combined.urlbar.home_button",         true);

userChrome.css

/* Original:
At :root
  --toolbar-field-focus-border-color: rgba(0, 0, 0, 0);
  --buttons-destructive-active-bgcolor: #810220;
  --toolbar-field-background-color: rgba(0, 0, 0, 0);
  --arrowpanel-background: rgba(28, 23, 38, 0.9959999918937683);

At #navigator-toolbox
  --lwt-tabs-border-color: rgba(208, 26, 67, 0.6669999957084656);

At #TabsToolbar, Need hardcoded
  --lwt-tab-line-color: rgb(208, 26, 67);
  */

#nav-bar {
  --toolbar-field-focus-border-color: var(--buttons-destructive-active-bgcolor);
  --toolbar-field-background-color: var(--arrowpanel-background);
  --lwt-tabs-border-color: rgb(208, 26, 67);
}

Chrome like theme

Minimal settings to get a look and fill for Chrome.

chrome_like_theme.mp4

Theme: Google Chrome Dark
- Or Google Chrome Light, Chrome Just Black

user.js

// ** Browser Options **********************************************************
user_pref("browser.tabs.inTitlebar",                      1); // no (0), yes (1), or default (2), which is true everywhere except Linux.

// Experimental settings for `userChrome.tabbar.unscroll`
user_pref("layout.css.container-queries.enabled",      true);
user_pref("layout.css.overflow-moz-hidden-unscrollable.enabled", true);
user_pref("browser.tabs.tabMinWidth",                     0);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",             false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.rounding.square_urlView_item",        true);

user_pref("userChrome.urlView.full_width_padding",          true);
user_pref("userChrome.urlView.focus_item_border",           true);

user_pref("userChrome.tab.bottom_rounded_corner.all",       true);
user_pref("userChrome.tab.bottom_rounded_corner.chrome",    true);

user_pref("userChrome.tabbar.unscroll",                     true);

user_pref("userChrome.urlbar.iconbox_with_separator",       true);

user_pref("userChrome.findbar.floating_on_top",             true);

Arc Browser like theme

Concept of proof for UI similar to Arc Browser.

arc_browser_like_theme.mp4

First, Open Customize toolbar, then activate Title Bar or Menu Bar.

Addon: Sidebar Tabs
- Or Tree Style Tab, Tab Center Reborn

Configs

userChrome.hidden.tabbar to true
userChrome.hidden.urlbar_iconbox to true
userChrome.hidden.urlbar_iconbox.label_only to true
userChrome.navbar.as_sidebar to true
userChrome.urlView.as_commandbar to true

Additional context

You can suggest compatibility issues, option names, etc.

This reverts commit be059f2.

roland-5 · 2022-11-24T15:12:33Z

Thanks, I understand now. I tested it and... looks very nice! It's nice addition to tridactyl. I use sway with hidden bar so it blends now even better.

…serChrome.combined.nav_button.normal`

The anti-aliasing of the SVG stroke is insufficient.

Remove `-moz-document` warning to make other warnings visible. sass/sass#3182 (comment) There is also some improvement of compilation time by reducing the output.

black7375 added 30 commits September 4, 2022 20:42

Add: Tabbar - Fill width #458

4beeab6

Add: Tab - Counter

81c1a2e

Fix: Tab - Counter inline

bca287e

Merge branch 'master' into v7

9f6b349

Add: Counter - Bookmark menu

6edb942

Add: Combined - Urlbar with reload

f68fe01

Add: Combined - Back, Forward with urlbar

09285cc

Clean: Combined -> URL Bar

bc39e2b

Fix: URL Bar - Reload button padding

79fdf73

Add: URL Bar - Combined Home button

9a0aa09

Merge branch 'master' into v7

33445a3

Fix: Build - #468

94aaace

Fix: URL Bar - Works separated combine options

42d5758

Fix: Combined - Interaction each combined options

acddc37

Clean: URL Bar -> Combined

fdbca94

Add: Tab Bar - Multi row #315

cfa94d4

Fix: Tab Bar - New button compatibility for Multirow #315

d111490

Add: Bookmark Bar - Multirow #315

1a4eed6

Add: Combined - None forward background option #399

fc892fa

Add: Decoration - Panel UI Button Separator #399

237a9eb

Add: Decoration - Panel arrow #399

0103a32

Fix: Build fix

cea08cb

Add: Bottom Rounded Corner - For all tabs

a1a1b9e

Fix: Tab Bar - New tab button's separator vertical algin #315

891029a

Merge branch 'master' into dev

703e9e5

Merge branch 'master' into dev

c63e0b3

Fix: Bottom Rounded Corner - selected's color

9cc874b

Fix: Tab - Change position of bottom rounded corner and separator

487a537

Fix: Tab Bar - Phenomenon of decreasing size at FFv108

e804ca6

Revert "Fix: Tab - Compatibility for dynamic separator #479"

efc89eb

This reverts commit be059f2.

black7375 force-pushed the master branch from 0203275 to 6187d01 Compare November 26, 2022 13:44

black7375 added 2 commits November 28, 2022 23:48

Fix: Findbar - border radius, width

33d5886

Fix: Findbar - Hide animation

4fa6ec2

black7375 mentioned this pull request Dec 4, 2022

Curve tabs like Photon?? #523

Closed

black7375 added 16 commits December 7, 2022 11:56

Merge branch 'master' into dev

529baec

Fix: Combined - none_forward_background -> none_background

25d2de6

Fix: Combined - First toolbar button padding

54e2556

Clean: Code - style

e45321c

Fix: Combined - userChrome.combined.nav_button.normal_forward -> `u…

51e234a

…serChrome.combined.nav_button.normal`

Fix: Combined - Home button background size

26e0f1e

Clean: SASS - Warning

0f01c5d

Fix: Combined - API to sub_button

72c7521

Clean: Tab - Box shadow

ce55d26

Fix: Tab - Boxshadow -> Dropshadow

e10db8d

The anti-aliasing of the SVG stroke is insufficient.

Merge branch 'master' into dev

5997aa3

Clean: Code - SCSS -moz-document warning

300d3d9

Remove `-moz-document` warning to make other warnings visible. sass/sass#3182 (comment) There is also some improvement of compilation time by reducing the output.

Doc: Restrictions - SCSS warning

6eb1709

Add: Option - and

d0d545a

Fix: Combined - Backbutton normal

af1f03d

Fix: CSS - Validate

ea9525e

black7375 force-pushed the dev branch from 0203495 to ea9525e Compare December 30, 2022 17:34

black7375 added 2 commits December 31, 2022 03:01

Add: Hidden - titlebar container #550

c8c7589

Merge branch 'master' into dev

1d324d3

black7375 merged commit 15d386e into master Dec 31, 2022

black7375 deleted the dev branch December 31, 2022 11:35

black7375 mentioned this pull request Feb 26, 2023

Feature request: Add square corners support for the address bar entries #642

Closed

ryenyuku mentioned this pull request Mar 25, 2023

Photon-styled navigation button doesn't work #671

Closed

9 tasks

black7375 added Issue::Enhancement New feature or request Priority::High Solve and focus on it first labels Apr 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ver 7.0.0 Feedback Thread #511

Ver 7.0.0 Feedback Thread #511

black7375 commented Nov 21, 2022 •

edited

Loading

roland-5 commented Nov 24, 2022

Ver 7.0.0 Feedback Thread #511

Ver 7.0.0 Feedback Thread #511

Conversation

black7375 commented Nov 21, 2022 • edited Loading

roland-5 commented Nov 24, 2022

black7375 commented Nov 21, 2022 •

edited

Loading