Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move Vertical tab settings to brave://settings #18146

Merged
merged 1 commit into from
Apr 21, 2023
Merged

Conversation

sangwoo108
Copy link
Contributor

@sangwoo108 sangwoo108 commented Apr 19, 2023

  • Create a Tab section in brave://settings#appearance
  • Make a vertical tab related settings
  • Move other tab related settings to the same section
  • Remove context menus related to vertical tabs

image

This doesn't satisfy our latest design. But it would require to fix others altogether. So this PR just makes the tab section go well with others, such as "Sidebar" section.

Resolves brave/brave-browser#29843

Submitter Checklist:

  • I confirm that no security/privacy review is needed, or that I have requested one
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

  • En/Disable Vertical tab strip flag
  • Go to brave://settings/appearance
  • Depending on the flag's value, vertical tab strip related settings should be visible/invisible respectively.
  • Also changing them should work as expected across all platforms(Win, Mac, and Linux)

* Create a Tab section in brave://settings#appearance
* Make a vertical tab related settings
* Move other tab related settings to the same section
* Remove context menus related to vertical tabs
@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Apr 19, 2023
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@sangwoo108 sangwoo108 marked this pull request as ready for review April 20, 2023 00:07
@sangwoo108 sangwoo108 requested a review from a team as a code owner April 20, 2023 00:07
Copy link
Collaborator

@mkarolin mkarolin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

strings ++

Copy link
Contributor

@fallaciousreasoning fallaciousreasoning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM @sangwoo108!

@@ -315,6 +317,18 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
// NFT pinning pref
(*s_brave_allowlist)[kAutoPinEnabled] =
settings_api::PrefType::PREF_TYPE_BOOLEAN;

#if defined(TOOLKIT_VIEWS)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double checking we need the TOOLKIT_VIEWS check here - this file is in extensions, so it might only exist on desktop 😆

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm not sure about it. @simonhong , what do you think about this? kSidebarShowOption is guarded with TOOLKIT_VIEWS too, though it seems to be replacement of ENABLE_SIDEBAR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm.. I picked TOOLKIT_VIEWS to mark sidebar is desktop UI feature.
Previously, ENABLE_SIDEBAR was used but realized that both are defined with same condition.
So, redundant ENABLE_SIDEBAR is removed and all things outside of views is replaced with TOOLKIT_VIEWS.

Actually, removing this will work but I want to use it here because this file brave_prefs_util.cc is not guarded by toolkit_views in the gn file. If this file is guarded by toolkit_views in gn, I think we don't need to use this flag.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, unless we have assert(tookit_views) in browser/extensions/BUILD.gn, it'd be safer to have TOOLKIT_VIEWS in sources like this. FYI, the BUILD.gn also has conditional with toolkit_views.

  if (toolkit_views) {
    deps += [ "//brave/components/sidebar" ]
  }

So, we might want to check if assert(toolkit_views) is better, but I think we can deal with it in a separate issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Filed an issue for it : brave/brave-browser#29918

@@ -141,6 +142,11 @@ void BraveSettingsUI::AddResources(content::WebUIDataSource* html_source,

html_source->AddBoolean("extensionsManifestV2Feature",
base::FeatureList::IsEnabled(kExtensionsManifestV2));
#if defined(TOOLKIT_VIEWS)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double checking we need this check - I think most webui pages aren't included on android (but some are 😆 )

Copy link
Contributor Author

@sangwoo108 sangwoo108 Apr 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should keep this as long as we include the tabs section from the toolbar.html file only when it's toolkit_views. But Android doesn't seem to have brave://settings page, so we might be able to remove the guard in the toolbar.html together?

@simonhong, I'm wondering your opinion.

Copy link
Member

@simonhong simonhong Apr 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. When we're confusing something like this, I think we could sync with gn's configuration. :)

@stephendonner
Copy link
Contributor

❤️

@kjozwiak
Copy link
Member

Verification PASSED on Win x64 using the following build(s):

Brave | 1.52.72 Chromium: 113.0.5672.53 (Official Build) nightly (64-bit)
-- | --
Revision | 12f5dac35d12e8f4e72d7dd11df557ef93bc046f-refs/branch-heads/5672@{#703}
OS | Windows 11 Version 22H2 (Build 22621.1555)

Using the STR/Cases outlined via brave/brave-browser#29843 & #18207 (comment), went through the following:

  • ensured that only Use vertical tabs is present via the right click context menu
  • ensured that you can enable vertical tabs without any issues via the right click context menu
    • ensured that Show title bar & Float on mouseover or not visible/available via the context menu
  • ensured that you can enable/disable Use vertical tabs via brave://settings/appearance without any issues
    • ensured that the change is also updated via the context menu (should be in the same state)
  • ensured that enabling/disabling Show title bar & Float on mouseover doesn't cause any obvious issues/crashes
  • ensured that Show title bar & Float on mouseover are only visible via brave://settings/appearance when vertical tabs are enabled
  • ensured that the correct state is preserved when restarting the browser
Example Example Example Example
1 2 3 4

kjozwiak pushed a commit that referenced this pull request Apr 27, 2023
…8183)

* Uplift of #18146 (squashed) to beta

* Resurrect "Use vertical tabs" Context menu

Base on our latest design guide, we need "Use vertical tabs" menu.

* Build fix trial

---------

Co-authored-by: sangwoo.ko <sangwoo108@gmail.com>
@tradewatcher
Copy link

tradewatcher commented Apr 27, 2023

#464

My notes about the most relevant prosumer settings:

Tab appearance

Select a Tab Layout:

[Radiobutton] Standard Tabstrip

[Radiobutton] Multirow Tabstrip [Auto],[1-5]

[Radiobutton] Vertical Tree Tabstrip

The 3 typical tab layouts that cover all needs.

Tab behaviour

Confirm before closing multiple tabs.

Prevent media files from starting until the tab get focus.

When you open a link in a new tab, switch to it immediately.

Move pinned tabs to the bottom of sidebar.

Tab groups

Use isolated file and cookie container for every [Tab],[Tab Group].

Hide Tabs outside selected Tab group.

Keep assigned group of pinned Tabs.

Think about the opportunity to create standard groups with icons (which exist permanently) like Firefox and the opportunity to route every group through a different connection.

Tab colorization and size

Tab colorization for:  Background Color Font Color
New Tab [Color Picker] [Color Picker]
Actual Tab [Color Picker] [Color Picker]
Unread Tab [Color Picker] [Color Picker]
Read Tab [Color Picker] [Color Picker]
Application Tab [Color Picker] [Color Picker]
Pinned Tab [Color Picker] [Color Picker]
Bookmarked Tab [Color Picker] [Color Picker]
Readlist Tab [Color Picker] [Color Picker]
Discarded Tab [Color Picker] [Color Picker]
Unloaded Tab [Color Picker] [Color Picker]
Media Tab [Color Picker] [Color Picker]

Tab size ratio: [100%]

The ability to automatically change the color of a tab provides a better overview and helps to find the relevant tab faster. It also provides a sense of time if you spend too much time researching a specific topic and realize that the first tabs are already in saving mode. The "Tab size Ratio" setting provides the user with a simple solution for scaling tab size to accommodate more tabs/icons without relying on external extensions or manually trying out individual acceptable pixel sizes.

Memory Configuration

Hibernate tabs in background after [15] minutes.

Unload tab in background after [45] minutes

Merge open tabs with same link if they are discarded/hibernated

Ignore pinned tabs and tabs in different Tab groups before merging

Enable smart memory clean up when RAM usage reaches [1-64GB]

Dealing with multiple tabs requires a significant amount of memory, and when a browser consumes more than average memory, it is perceived as a disadvantage, despite the fact that the increasing memory consumption is naturally linked to progress. Providing users with more options related to memory saving can give them the impression that efficiency is being prioritized, while new features that immediately catch the user's attention justify the use of more memory. Brave aims to establish itself alongside Chrome, but it is filled with features that not everyone may find useful. Therefore, it is important to assure users that efficiency is not being overlooked. Chrome was able to persuade its users of the increased memory demand by delivering noticeable improvements in the user interface experience beside performance gains.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CI/storybook-url Deploy storybook and provide a unique URL for each build
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Move advanced vertical tab settings into brave://settings/appearance
8 participants