Brave-browser: The UI should allow for advanced customization

[bsclifton]

Carried over from https://github.com/brave/browser-laptop/issues/246

The idea would be to allow users to customize the location of features like the URL bar, bookmarks toolbar, tabs, etc.

Original issue details:

The concept of Brave looks like it will be a real browser for power users again. Would be nice to have advanced customization features aka a full status bar or being able to combine urlbar elements with the tabs if possible, or more advanced elements movement in the UI.

Thanks for considering :)

Some other requested functionality:

• Change size of tabs
• Change font used in tabs
• Customization similar to Atom; a simple doc you can edit

[Brave-Matt]

+1 from reddit:
https://www.reddit.com/r/brave_browser/comments/bkgmyp/say_hello_to_several_new_folks_who_just_jumped/emjklqf?utm_source=share&utm_medium=web2x

[Sa-Ja-Di]

Will there ever be progress - as you see many users show interest in features like that or do you plan to stay a generic simple user only browser?

At least you could make the black theme fully covering all UI elements, also the right-mouse context menu or the Brave settings menu - Even Chrome is able to do that in the meantime.

Or at least to be able to put the tab row beyond the address/url bar - that are very limited basic functionalities, which should at least be considered.

[Brave-Matt]

Several +1's from Community -- 4 different users requesting in following thread:
https://community.brave.com/t/is-there-a-way-to-move-the-bookmarks-button-to-where-it-is-in-chrome/48785/4

[Sa-Ja-Di]

Several +1's from Community -- 4 different users requesting in following thread:
https://community.brave.com/t/is-there-a-way-to-move-the-bookmarks-button-to-where-it-is-in-chrome/48785/4

What would also be nice - and fits to this topic as it belongs to advanced customization - would be an optional REAL status/menu bar - Vivaldi features both. Same like a side-bar.

Almost no other Chromium browser features this, would be great if Brave would follow Vivaldi in that way, would also bring over many frustrated(ex-) Firefox power-users towards Brave. I personally use Brave as backup browser after i dumped recently Chromium because of the upcoming Google plan to restrict ads-blocking capability.

Would be for sure nice to use Brave a little bit more often, but in that bare-bone kind of way - this makes it impossible for me to do. And there are for sure other potential Brave users which are driven in the end away because of this very same reasoning.

So, it would be great if you guys could put stuff like that a little bit under higher priority - and why? Because it benefits in the kind of way that your user number is only growing more :)

[Arandhras]

I don't know if the info contained in the issue referenced by the OP is still relevant, but if Brave's UI is still largely HTML/CSS/JS code, it should be easy to allow for some heavy customization. Alternatively it would make sense for me to give at least some degree of flexibility to the power user.

It would not have to be "easy to use", as most regular user wouldn't care for it anyway, but it should be still accessible if one has the time and patience to hack it a bit. I miss the possibility to make my browser truly my own, like it was possible to do with older versions of Firefox.

[bsclifton]

@Arandhras unfortunately the UI is not HTML/CSS/JS anymore- it's all C++ using Chromium views. It's quite a bit harder to edit, but definitely doable (we want to do it- work hasn't been prioritized, as far as I know).

[Sa-Ja-Di]

@Arandhras unfortunately the UI is not HTML/CSS/JS anymore- it's all C++ using Chromium views. It's quite a bit harder to edit, but definitely doable (we want to do it- work hasn't been prioritized, as far as I know).

@bsclifton Why not making a compromise and delivering priority in a fair share to all elements Brave related?

A real menu or full status bar would be good for a start ;)

[Arandhras]

@bsclifton It could be worked out like what wxWidgets does with its XRC system ( https://docs.wxwidgets.org/3.0/overview_xrc.html ): the whole UI is defined as a set of scripts (in Wx's case, XML... but it could be anything) that each describe a hierarchy of panes, dialogs and widgets. You don't have to redefine behavior, just size, positioning, color etc.

Once you have this system in place, all you need is to modify such scripts. Using non-executable file formats such as XML or JSON has the benefit of not allowing potentially malicious stuff being run in the user's browser.

[crawlgsx]

Yes please for the love of all let us move or remove the bookmark button! Terrible placement!

[Leon0402]

@Arandhras unfortunately the UI is not HTML/CSS/JS anymore- it's all C++ using Chromium views. It's quite a bit harder to edit, but definitely doable (we want to do it- work hasn't been prioritized, as far as I know).

Really, where do I find the ui code? There is an ui repo with reusable elements, which is written in typescript ... and in brave-core I find js, css and html code in the ui folder https://github.com/brave/brave-core/tree/master/ui
It seems like I have not understand completely how you structure the project? At least to me all seems a little bit messy (for example having like 300 branches)

By the way, is it possible (or do you appreciate) help from the community like pull request regarding new ui features/changes. And if so, is there a guide to get started showing things like the project structure etc.

[bsclifton]

@Leon0402 the parts that are in JavaScript/TypeScript are part of the Brave UI library. These are basically used on Web UI pages (settings, rewards, etc)
https://github.com/brave/brave-ui

For the browser chrome itself (back/forward/refresh buttons, etc), you'll have to go through the code to find the appropriate view to edit. A good example to look at is how @petemill and @mkarolin did the Lion and Rewards icons inside the omnibox:

• https://github.com/brave/brave-core/pull/343
• https://github.com/brave/brave-core/pull/431

There are some advanced command-line options you can use like --enable-ui-devtools that let you inspect the view structure visually. More info here (article may be dated, but process should be similar still):
https://www.chromium.org/developers/how-tos/inspecting-ash

I created a task a while back to setup proper documentation for onboarding new developers. I'll try my best to make some progress on this over the weekend 😄
https://github.com/brave/brave-browser/issues/108

Help is DEFINITELY appreciated and welcome from the community 😄 Apologies that I or others haven't gotten to write much past what is in the wiki:
https://github.com/brave/brave-browser/wiki

[Leon0402]

@bsclifton thanks for your answer! To be honest, I haven't really realised yet that settings, rewards etc. are web ui pages. Is there any reason for this? Don't know much about this, but I guess consistency is always a good thing and therefore everything should be created in C++?

It's great that you want the community to help with the project! I guess, setting up a wiki post is a good first start :) Furthermore it would be of course great to have something like a Telegram group, irc channel, mailing list ... for questions. Because as far as I can see, the forum is more user-oriented and not for developers.
And another idea: The kde project has a site, where it lists feature requests, bugs etc. and how hard they will be to fix/implement (presumably). That's also a good way for new devs to slowly get started with developing for the project. Would be great to have something like this in the (far) future.

Brave personally seems a very good project to invest some of my time in. Although I'm not sure if I'm experienced enough for this as I never worked with the chrome ui, but with qt instead (and also do not have 20 years of experience in programming). But everyone has to start somewhere ;)

[geekley]

Yes please for the love of all let us move or remove the bookmark button! Terrible placement!

Yes! There's a reason for this! Location matters! We subconsciously expect UI concepts like buttons to be grouped by some sort of category.
The way I see it, it's logical to expect browser buttons to be arranged like this:

browser-menu TABS... tab-handling other-browser-buttons
navigation [page-security/privacy URL page-specific-actions] more-actions page-menu

All other buttons before the address bar are NAVIGATION buttons. This makes the bookmark button out of place there. Also, having less than 4 buttons together is better to make you immediately find what you want, since those are the most important buttons in a browser.
Having the bookmark inside the address bar is better because it's an action that applies to that specific page. And you won't click it that often.

Note that I would even go further and split up the menu into browser-menu and page-menu.
Then you'd have all page-independent actions in the tabs row, and keep only page-specific actions in the page row. Think about it. Having less together is better to find things, and splitting things up in a logical way is even better. Having 2 menus may not seem intuitive at first, but it actually makes more sense because "the page" is a concept very different from "the browser/window/session".

So, even if you don't allow customization, at least this would be a way better layout.
In fact, I have used Opera for years without bothering with the lack of customization - until they added a stupid out-of-place "easy settings" buttons in the page row that I can't disable.
Also, I liked when some page-specific extensions could be inside the address bar, but now they can't anymore...

[Brave-Matt]

+1 from Community:
https://community.brave.com/t/can-i-hide-the-bookmark-this-tab-button-on-the-toolbar/98140/4

[bsclifton]

+1 from @mohistmen via https://github.com/brave/brave-browser/issues/7386

The buttons should be customizable

Well, what I want to do is just hide the "Bookmark this tab" button between the "Home" button and the address bar. Actually I almost don't use bookmark functions. I just need the "Home" button besides the address bar, without any buttons between them. Thanks

[Sa-Ja-Di]

You see, quite a lot of people want more customization abilities. So the question is, will you guys implement them or will you ignore this request?

[mohistmen]

Nope, I will never ignore it.

------------------ 原始邮件 ------------------
发件人: "Sajadi"<[email protected]>;
发送时间: 2020年1月17日(星期五) 凌晨1:15
收件人: "brave/brave-browser"<[email protected]>;
抄送: "496173298"<[email protected]>; "Mention"<[email protected]>;
主题: Re: [brave/brave-browser] The UI should allow for advanced customization (#774)

You see, quite a lot of people want more customization abilities. So the question is, will you guys implement them or will you ignore this request?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[Sa-Ja-Di]

When is Brave finally starting to deliver customization features which are meant for power users? So far Brave serves only the simple users.

[eljuno]

+1 from Community

https://community.brave.com/t/edit-brave-toolbar-remove-spaces/129594/3?u=eljuno

[paulwaldmann]

Just need to be able to get rid of that Bookmark icon, it's driving me nuts, so many times I've accidentally bookmarked a page instead of just returning to Home which I actually wanted to click. I bet I'm not the only one thinking that way 😄

[TheOddGarlic]

I actually like where the bookmar button is, I just want it in the url bar next to the http/s lock icon. Obviously more customization is better 😃

[zenkarsha]

Just escape from Chrome => Brave, the position of bookmark button makes me unfit.

[geekley]

For those that haven't noticed, the bookmark button position is less annoying when the address bar is not expanded, because at least it's separate from the navigation buttons.
But yeah, still a bad place. And I don't like having to expand the address bar, because that makes me expect symmetry between the buttons on the left and the extensions on the right, and, without that symmetry, it's ugly.

[beatschubser]

+1 for the possibility to remove the bookmark icon. I'm a new user, and that's the only thing that bothers me.

[sam-spain]

Hoping the bookmark icon can be hidden. I don't plan on using the browser specific bookmark solution so unless it could integrate with something like Raindrop it's just wasting a small amount of space.

[bsclifton]

Thanks for the feedback RE: the bookmark button - maybe this is something we can change or make configurable 😄
cc: @rebron

[rafakob]

So I've started using Brave couple of weeks ago and the one thing that I hate is the Bookmark This button on toolbar. I keep mislicking it when I want to click Home or Refresh. A simple toggle switch in Appearence settings would enough (no need for full customization of toolbar).