New Compact Design

[batata]

The latest controversial proton redesign added new two lines tabs, however it haven't been put to great use.

I think we can do better and at the same time bring back the compact mode by merging the search bar and the tab bar.

While we put the url directly into the tabs, other icons could go in the tool bar, making a better use of the window surface.

The url is a clickable text area

and expands to show the full search bar when we start typing.

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

UPDATE 1

To elaborate a bit more on my original idea

• We could put the hamburger button on the left because it looks a bit weird next to the reduce button (at least on windows)
• The same way the download icon is hidden unless we're downloading we could hide the back and forward buttons unless there's something in the history
• The refresh and fav button could be on the tab (and visible only on hover maybe ?)
• The many icons that can appear on the left of the address bar could be fused all together in one single tabbed panel. The displayed icon would change based on priority :
  
  (btw the Extension label could be removed and only show the extension name)

Which gives an even slicker look :

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

UPDATE 2

With larger active tab and refresh/fav icons.

With many tabs it could look like this :

I also added the sound indicator icon instead of the "Playing" text (this icon is already used on pinned tabs).

And since the Lock icon is not always visible with my unique icon idea I talked earlier I though we could color code the domain, green = secured, red = not secured. 🤔

[Anonymous]

@batata @steel835 @brochard Hi ... how are you guys? So ... This is the concept for compact bookmarks. What do you think of this idea?

Concept

• Navigation is in this symbol '>'
• By clicking on this symbol '>' - You access the input field
• By default all Bookmark is saved automatically
• By default you can only remove if you click on the X icon
• If you want to call the Favorites Manager you must click the Maximize the screen icon.
• I tried to unite these 3 concepts: "WYSIWYG- What You See Is What You Get", "KISS(Keep it Simple, Stupid)" and "Less is more".

The report of the design and user experience

1. The main advantage of this Bookmark interface is minimalism and productivity.
2. There is a view that the user does not need to fill in all the bookmark fields in the compact design as a report here.
3. By default the 'name' field is auto filled based on the HTML metatag called 'title'
4. And the bookmark 'tag' field is auto filled with the HTML target tag with the name attribute = "keywords" and with the content attribute
5. The bookmark 'type' field is populated based on the link, for example if you save a bookmark with a link.mp3 this is the audio type - By default the browser interprets the links of the type: documents, video, audio or general links or links No tags or links without notes or links without keyword.
6. The only field that the user fills if you want these fields: Color, Keyword, Collection, Note.
7. By default these fields such as: name, tag, location, type, note that I have already said are filled automatically, what little life and user time to fill something manual.
8. I created the color field to identify custom links, it is very common in programs like raindrop you create links with colors to identify certain links that do not have field like tag, location, type, collection, keyword.
9. The 'collection' field serves to identify multiple determined links, would be like a folder / subfolder - the crucial difference of this I think is very important is that it works with a tag system too, but it would be close to what you use in things like Gmail
10. One thing I thought is that you do not need a button to save Bookmarks in Mozilla Firefox, my idea would be that bookmarks would be saved automatically ... so there is no save bookmarks field.
11. Another differential in this interface would be that you can expand the Bookmark window this basically serves for you to call the library window that has all the links you want to access.
12. If you want to delete a link is easy, just click on the star icon and you remove or add the bookmark ... this can be as good and so easy ... in my view maybe this helps the community of Mozilla Firefox users.
13. In total are 8 text type input fields, the fields are these: Name, Tags, Location, Type, Collection, Color, Note, Keyword. Each field explained above the proposing and because it exists. I hope to help the community of Mozilla Firefox with the compact bookmarks interface inspired by the concept of compact design.
14. I forgot to talk about the location field, before there was a treeview - a tree list of folders where the user selects where Bookmark will be saved. I find a mistake and an error use a folder system, a tag system is much freer and better. So both the Location field and the Collection field functions as a tag system, the difference between the two Collection and Location fields, is that the Location field is for you to save the links like the Gmail Label system, where you have folders and subfolders, but this is represented as tag.
15. Example: Let's assume you want to save a link in the following folder: Google / Link ... That would be the same as typing 'Google, Search' - Did you see the folder system like Label? This is the interesting point and my productive view of design and user experience. The concept of Gmail labels does not make it possible to have folders with the same name or better it is not possible to have labels with the same name. So the Collection type field was created that allows the user to create how many collections you want with equal or different names.

Notes

1. The links I add here in the post are for bibliographic reference, I am not being paid or promoted by any company.

References

1. Link ... from the graphical interface of Mozilla Firefox, where I inspired and created the Compact B...
2. https://en.wikipedia.org/wiki/WYSIWYG
3. https://en.wikipedia.org/wiki/KISS_principle
4. https://www.houzz.com/magazine/less-is-more-6-principles-of-minimalist-design-stsetivw-vs~447394
5. https://www.red-dot-design-museum.org/essen/exhibitions/detail/596/less-is-more-aspects-of-minimal-d...
6. https://blog.alexdevero.com/less-is-more/
7. https://designshack.net/articles/layouts/minimal-design-how-to-design-more-with-less/
8. https://www.tutorialspoint.com/html/html_meta_tags.htm
9. https://www.w3schools.com/tags/tag_meta.asp
10. https://support.google.com/mail/answer/118708
11. https://www.gmass.co/blog/gmail-labels/
12. https://medium.com/reviewmonster/raindrop-a-beautiful-all-in-one-bookmark-manager-fcfc5783d6ed

[batata]

To elaborate a bit more on my original idea

• We could put the hamburger button on the left because it looks a bit weird next to the reduce button (at least on windows)
• The same way the download icon is hidden unless we're downloading we could hide the back and forward buttons unless there's something in the history
• The refresh and fav button could be on the tab (and visible only on hover maybe ?)
• The many icons that can appear on the left of the address bar could be fused all together in one single tabbed panel. The displayed icon would change based on priority :
  
  (btw the Extension label could be removed and only show the extension name)

Which gives an even slicker look :

 

[waroper]

Whoever thought it was a good idea to REDUCE the availability of Bookmarks by making the Bookmarks pane disappear has done MORE to destroy the utility of the browser than anything else I have seen. 

If this is NOT repaired, I am switching browsers.  What a disaster!

[Anonymous]

@batata @steel835 @brochard Hi all! How are you guys? Here an idea ^^

An idea

My mockup based on idea

My idea and mockup real

Reference

1. https://dribbble.com/shots/2429767-FireFox-Browser-Redesign/attachments/9296159?mode=media
2. https://dribbble.com/shots/9133684-FF-UI-Redesign-Update/attachments/1191318?mode=media

[Anonymous]

idea: Firefox with Compact Design 2023

Reference

1. https://dribbble.com/shots/5201249-Firefox-logo-concept

[steel835]

@AnonymousI think this concept is a bit overloaded with buttons, but it made me think - what if we indeed use the Safari concept, like on your picture (if I understood you correctly) - if the tab is active, show a slightly-wider-than-tab addressbar instead of it. (No need to make address bar too wide, because we still want to show tabs and people tend to have many of them opened) Many address bar buttons can be collapsed into one, like firefox already does if the window is too narrow:

Buttons like menu, downloads, back and refresh I'd move to the side of tab area anyway. Btw, I think that your idea with bookmarks should be posted as a separate idea, here we discuss only the compact mode for Firefox

@batata

---

@batata wrote:

The refresh and fav button could be on the tab (and visible only on hover maybe ?)

---

I think that bookmark and refresh buttons on tabs aren't really user friendly - they are too small and when there are too many tabs, they are squished so much that these buttons will overlap all the text on the tab.

---

@batata wrote:

We could put the hamburger button on the left because it looks a bit weird next to the reduce button (at least on windows)

---

Agree, but I don't mind it being near Minimize button. And I don't mind it being on the left (sort of like where the File menu is, and the icon can be a Firefox logo instead of hamburger) - though I guess there can be other buttons that fit there better (like vertical tabs btn for example, like in Edge). I think we can show a user profile pic instead of a hamburger if it's on the right - it is a pretty well-known UX and doesn't look as weird.

[Jon]

Hey all,

Here with an exciting update…

Your idea has quickly received a great deal of votes (kudos) and support here in the Mozilla Connect community, so we are upgrading the status to “Trending idea.” This means it’s now one step closer to reaching our internal teams for review—learn more about The Idea Journey here.

Please keep the conversation going and stay tuned for updates 😃

-The Community Team

[batata]

@steel835if the active tab has a fixed width we can add more stuff in it (+ if they're only visible on hover it's not a big deal).

With many tabs it could look like this :

I also added the sound indicator icon instead of the "Playing" text (this icon is already used on pinned tabs).

And since the Lock icon is not always visible with my unique icon idea I talked earlier I though we could color code the domain, green = secured, red = not secured. 🤔

[Anonymous]

Hi! @batata "And since the Lock icon is not always visible with my unique icon idea I talked earlier I though we could color code the domain, green = secured, red = not secured."  Was it something like you thought?

Here:

I thought about it, about this idea

[slemmy]

I want an option to make the toolbar more compact. There was one before the redesign, but now I only have the option to make it bigger. I prefer how Firefox looked before the redesign.

[wally314garcia]

Please vote for the idea "Allow resizing of the UI" that has made it to 'In Review' so the developers see that there is demand for it.

https://connect.mozilla.org/t5/ideas/idb-p/ideas/status-key/investigating

[jscher2000]

There is a secret hidden way to add "Compact" back to the Density selector. More info:

• https://support.mozilla.org/kb/compact-mode-workaround-firefox 
• https://www.userchrome.org/firefox-89-styling-proton-ui.html#compactmode

But something more discoverable certainly would be welcome.

[DP]

Bookmark toolbar beautification

The drop-down list of the bookmark toolbar can reduce the font and line spacing, so that it looks more compact and intuitive, and there is no need to search with the mouse wheel when there are many favorite addresses.

[jimjams91]

Please:

>Add the option merge the tab bar and back/forward/reload/address/search bar in to one (similar to the "compact" view in macOS Safari

>Make compact view official again.

Thanks

[jimjams91]

OMG this is amazing, just like macOS Safari "Compact tabs".