Pins toolbar

[Anonymous]

Product: Mozilla Firefox

1. For Community Mozilla: (Feature Description): I wish there was a sidebar as there is a sidebar for bookmarks, it would be interesting that there was a sidebar for Pins. The reason is simple: If you have many websites to access at the same time, a sidebar of Pins could help you quickly find the site you want to access. Currently, the Pins are on the main Firefox browser page. With this feature, users could use Firefox very productively.
2. For software engineers: (Functional requirements):

• Open all registered Pins
• Add Pins on the toolbar
• Option to show or not show the pin toolbar.
• Scrolling pins

1. For Designers: (user stories): As a user, I would like to have a pins toolbar, where I could see the sites I access the most or want to access. Idea:

Reference

1. https://support.mozilla.org/en-US/kb/pinned-tabs-keep-favorite-websites-open

For webdesigners, frontenders or developers

<div class="MuiBox-root css-16t5uud">
<div class="MuiTabs-root css-orq8zk">
<div class="MuiButtonBase-root MuiTabScrollButton-root MuiTabScrollButton-horizontal MuiTabs-scrollButtons MuiTabs-scrollButtonsHideMobile css-1q0ig8p">
<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1k33q06" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowLeftIcon">
<path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
</svg>
<span class="MuiTouchRipple-root css-w0pj6f"></span>
</div>
<div style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;" class="MuiTabs-scrollableX MuiTabs-hideScrollbar css-oqr85h"></div>
<div class="MuiTabs-scroller MuiTabs-hideScrollbar MuiTabs-scrollableX css-12qnib" style="margin-bottom: 0px;">
<div aria-label="scrollable auto tabs example" class="MuiTabs-flexContainer css-k008qs" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Google.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Gmail.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Firefox.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-1q2h7u5" tabindex="0" type="button" role="tab" aria-selected="true">
Item Four<span class="MuiTouchRipple-root css-w0pj6f"></span>
</button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Facebook.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Instagram.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">Youtube.com<span class="MuiTouchRipple-root css-w0pj6f"></span></button>
</div>
<span class="MuiTabs-indicator css-ttwr4n" style="left: 353.083px; width: 106.717px;"></span>
</div>
<div class="MuiButtonBase-root MuiTabScrollButton-root MuiTabScrollButton-horizontal MuiTabs-scrollButtons MuiTabs-scrollButtonsHideMobile css-1q0ig8p">
<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1k33q06" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
</svg>
<span class="MuiTouchRipple-root css-w0pj6f"></span>
</div>
</div>
</div>

References

1. The most accessed sites are on toolbar, pin
2. Scrollable tabs - https://mui.com/material-ui/react-menu/#icon-menu
3. https://superuser.com/questions/1323820/how-to-implement-scrollable-tab-bar-in-chrome-like-in-firefo...
4. https://bugs.chromium.org/p/chromium/issues/detail?id=188
5. https://www.askvg.com/tip-enable-hidden-secret-stacked-tabs-feature-in-google-chrome/

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.