Ergonomic Add Bookmark Popup Dialog V2.0 CSS Mod

[dude99]

This CSS mod enhance the top position Add Bookmark Popup Dialog with various improvements, updated for v5.4:

• Replace Bookmarked button color with theme's highlight color.

• Extend popup dialog's max-height from 65vh to 99vh.

• Auto height adjustment base on window's height, improve accessibility of Bookmark popup dialog for various window height.

• Always single row compact header, kept only Selected folder title.

• Combine compact folder/SD tab & Searchbox into single row.

• Add option for Folder Selection List on TOP, relocate the list above bookmark FORM for easier folder selection (disabled by default).

• Big DONE button, fill entire width of the popup dialog.

• Anchor REMOVE button on top right corner for easy bookmark deletion, & improve dark theme readability.

• Small height window compact mode, hide DONE button for extra vertical spaces & made content into scrollable 2 pages.

  

- fix popup dialog position bug during small width window, keep the entire popup within the window by centered it when window's width is smaller than 545px, .

---

ReadMe

1. Pls enable chrome://flags/#enable-experimental-web-platform-features for this mod to work properly.

2. This CSS mod only affect the top position Add Bookmark popup dialog (Addressbar on top). Some minor enhancements will function in bottom position layout.

3. If you are using non English GUI, then you might need to adjust the Compact header selected folder's title in line 5. text-indent will move the text placement, decreasing -22px value to move title leftward; clip-path will clip/hide the text, decreasing -7px value to clip more text from the left side.

4. If you prefer to have the Folder selection list above of the FORM (title, URL, nickname, & description), then remove both /* & */ before/after order:1; in line 7.

---

CSS Code v5.4 (20 August 2022)

/* ADD BOOKMARK DIALOG */
.BookmarkButton svg > g > path.bookmark-animated-fill {fill: var(--colorHighlightBg) !important;} /* Added bookmark button hightlight */

.address-top .button-popup:has(.BookmarkPopup) {max-height: 99vh; margin-top: 7px; z-index: 99;} /* enable full height popup dialog */

.address-top .BookmarkPopup > header > h1 {font-size:0;} /* hide header */
.address-top .BookmarkPopup > header > p {text-indent: -22px; clip-path: inset(0 0 0 -7px);} /* adjust selected folder title, might need adjustment for non-English language GUI */

.BookmarkPopup-TextInputWrapper {gap: 3px; /* order:1; */} /* compact bookmark form, u can relocate FORM to bottom by enabled "order:1;" */

.BookmarkLocationSelector-ToggleButtonGroup-Button {font-size: 0; padding: 9px 6px 10px;} /* no text compact folder/SD selection tabs */
.BookmarkLocationSelector-ToggleButtonGroup-Button svg {margin-left: 6px;} /* tab icon adjustment */
.BookmarkLocationSelector-ToggleButtonGroup-Button:is(:hover, :focus-within) svg.folder-icon .fill-override {fill: var(--colorHighlightBg); transform-origin: center; transform: scale(1.2);} /* improved tab icon hover/focus effect */
.BookmarkLocationSelector-ToggleButtonGroup-Button:not(.BookmarkLocationSelector-ToggleButtonGroup-Button--Pressed) {box-shadow: unset !important;} /* fix: confusing focus effect */

.BookmarkLocationSelector-SearchInput {transform: translateY(-46px); padding: 0; margin: 0 9px 0 85px;} /* compact searchbox */
.BookmarkLocationSelector-FolderList {margin-top: -48px;} /* tree list adjustment */

@media only screen and (min-height: 450px) {
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 330px);} /* extend folder selection list */
}

.theme-dark .BookmarkPopup > footer > input.danger {color: coral; border-color: coral;} /* fix: dark theme REMOVE button color */
.address-top .button-popup.button-popup-enter-done .BookmarkPopup > footer > input.danger {position: absolute; right: 0; transform: translateY(calc(-100vh + 128px)) scale(0.8);} /* REMOVE button on top */
.address-top .BookmarkPopup > footer > input[type="submit"] {width:100%;} /* big DONE button */

/* compact mode for small height window */
@media only screen and (max-height: 450px) { 
.address-top .DialogContent.BookmarkPopup-Content {overflow: auto; max-height: calc(100vh - 110px);} /* transform popup to scrollable */
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 114px);} /* optional: limit scrollable content to 2 pages */
.address-top .BookmarkPopup {grid-template-rows: auto auto 0;} /* exclude footer height from popup dialog */
.address-top .BookmarkPopup > footer {visibility: hidden; margin-top: -63px;} /* hide footer */
.address-top .button-popup.button-popup-enter-done .BookmarkPopup > footer > input.danger {visibility: visible;} /* adjust REMOVE button when hide footer */
}

No Footer & hidden DONE button version is in the 2nd post!

---

Enjoy.

[dude99]

No Footer & hidden DONE button version:

1. U still can access the hidden DONE button via TAB key, or simply hit ESC key to close the popup dialog.

2. The scrollable popup dialog is simplified to 2 pages height, it's now much easier to use during small height window.

---

CSS Code v5.4 (20 August 2022)

/* ADD BOOKMARK DIALOG */
.BookmarkButton svg > g > path.bookmark-animated-fill {fill: var(--colorHighlightBg) !important;} /* Added bookmark button hightlight */
.address-top .button-popup:has(.BookmarkPopup) {max-height: 99vh; margin-top: 7px; z-index: 99;} /* enable full height popup dialog */
.address-top .BookmarkPopup > header {height: 41px;}
.address-top .BookmarkPopup > header > h1 {font-size:0;} /* hide header */
.address-top .BookmarkPopup > header > p {text-indent: -22px; clip-path: inset(0 0 0 -7px);} /* adjust selected folder title, might need adjustment for non-English language GUI */
.BookmarkPopup-TextInputWrapper {gap: 3px; /* order:1; */} /* compact bookmark form, u can relocate FORM to bottom by enabled "order:1;" */
.BookmarkLocationSelector-ToggleButtonGroup-Button {font-size: 0; padding: 9px 6px 10px;} /* no text compact folder/SD selection tabs */
.BookmarkLocationSelector-ToggleButtonGroup-Button svg {margin-left: 6px;} /* tab icon adjustment */
.BookmarkLocationSelector-ToggleButtonGroup-Button:is(:hover, :focus-within) svg.folder-icon .fill-override {fill: var(--colorHighlightBg); transform-origin: center; transform: scale(1.2);} /* improved tab icon hover/focus effect */
.BookmarkLocationSelector-ToggleButtonGroup-Button:not(.BookmarkLocationSelector-ToggleButtonGroup-Button--Pressed) {box-shadow: unset !important;} /* fix: confusing focus effect */
.BookmarkLocationSelector-SearchInput {transform: translateY(-46px); padding: 0; margin: 0 9px 0 85px;} /* compact searchbox */
.BookmarkLocationSelector-FolderList {margin-top: -48px;} /* tree list adjustment */

.address-top .BookmarkPopup {grid-template-rows: 0 auto auto;} /* exclude footer height from popup dialog & hide it */
.address-top .BookmarkPopup > footer {order:-1;} /* move footer to top */
.theme-dark .BookmarkPopup > footer > input.danger {color: coral; border-color: coral;} /* fix: dark theme REMOVE button color */
.address-top .button-popup .BookmarkPopup > footer > input[type="submit"]:not(:focus-within) + input.danger {position: absolute; right: 0; transform: translateY(-4px) scale(0.8);} /* REMOVE button on top, hidden when DONE button is focused */
.address-top .BookmarkPopup > footer > input[type="submit"]:focus-within {position: absolute; right: 0; transform: translate(-2px, -4px) scale(0.8);} /* only show DONE button when focused */

@media only screen and (min-height: 450px) {
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 280px);} /* extend folder selection list */
}
/* compact mode for small height window */
@media only screen and (max-height: 450px) { 
.address-top .DialogContent.BookmarkPopup-Content {overflow: auto; max-height: calc(100vh - 110px);} /* transform popup to scrollable */
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 114px);} /* optional: limit scrollable content to 2 pages */
}

[dude99]

Update: It seems there will be a major revamp of Add bookmark dialog for v3.8, so this CSS mod probably will break when v3.8 stable released... :face_with_cold_sweat:

Fortunately, @sjudenim have already started something similar over here: https://forum.vivaldi.net/post/468458

I might update this CSS mod later, but it will take some time, so I recommend u guys to take a look at his fabulous CSS mod... until I made the better one! LOL

[dude99]

code updated for v4:

• rewrite everything... LOL

• Pls read OP for new features.

[dude99]

another minor update:

• fix popup dialog position bug during small window width by centered the popup dialog when window width is smaller than 545px.

[rrx]

Beautiful. Thank you.

May I request the Done button at the bottom to be removed? It's redundant when you think about it.

[dude99]

@rrx Here is the no footer & hidden DONE button version, I rework the code a bit & extended the folder selection list to made use of the extra space.

https://forum.vivaldi.net/post/465227

[dude99]

Minor code update on both versions, this probably will be the last update... until it broke in the future!

---

This is extra code for those who prefer to rebuild the single row compact folder/SD selection tabs + searchbox "properly" with CSS grid system; or you simply curious about how CSS grid works. Remember to remove all related "hacky version" code for each element listed below before apply these code:

.BookmarkPopup-Content {
	gap: 4px 6px;
}

.BookmarkLocationSelector {
	grid-template-columns: [header] 80px [search content footer] auto;
	grid-template-rows: [header] 32px [search] 2px [content] auto [footer] auto;
}

.BookmarkLocationSelector-Header {
	box-shadow: unset;
}

.BookmarkLocationSelector-SearchInput {
	grid-row-start: header;
	grid-column-end: none;
	padding: 0 12px 0 6px;
}

.BookmarkLocationSelector-FolderList {
	grid-column-start: header;
	grid-column-end: none;
}

Personally I preferred the hacky version cuz it looks nicer. LOL

[rrx]

Thanks again for your work!

[dude99]

updated no footer version for v5.

• fixed missing REMOVE button due to V team decided to remove all .enter-done animation effects

• enforce header to 41px to make bookmarking state effects uniform.

[MarcThulander]

Thanks for this, fixes such an annoying problem!

Especially for those of us who favorite Extensively (my directory tree for them make the standard dialog incredibly annoying to use).

[dude99]

OP & NO footer version's code have been updated for v5.4:

• remove fix for auto center during small width window, cuz v team have finally fixed it.

• update line 2 cuz new update broke it. Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

• Add margin-top & z-index in line 2 to temporary fix the slight misplacement of .button-popup, they kinda broked it with this new update... LOL

That's all folks!

[Muc360]

Thank you very much for this great improvement.

My request is that is there any way to display all bookmark folders collapsed when adding new bookmarks or editing. Like opera browser's adding new bookmark functionality.

[dude99]

@Muc360 Sorry it can't be done with CSS mod, AFAIK the content inside the list is control by JS. I can't do JS so I can't help you with this.
But you can try made your request in a new topic in Modification forum & see if any JS guru interested in produce this mod.

[pasu11]

Really nice scripts!
I have been trying to find a solution to extend the bookmark popup but it was beyond my ability. Your script solves my problem!
Thanks!!

[TheHighHorse]

Another great script. Thank you @dude99 !!

[g_bartsch]

@dude99 Really nice work; thank you!

[g_bartsch]

@Muc360 said in Ergonomic Add Bookmark Popup Dialog V2.0 CSS Mod:

My request is that is there any way to display all bookmark folders collapsed when adding new bookmarks or editing.

This has been my wish too since I had been using a previous bookmark drop-down customization. It would be nice to be able to drill down and not have to scroll one's entire bookmark tree (if one cannot remember the desired folder name) to find the appropriate folder.

[Dancer18]

@g_bartsch said in Ergonomic Add Bookmark Popup Dialog V2.0 CSS Mod:

This has been my wish too since I had been using a previous bookmark drop-down customization. It would be nice to be able to drill down and not have to scroll one's entire bookmark tree (if one cannot remember the desired folder name) to find the appropriate folder.

Me too. I badly want to have back that feature that disappeared with 3.7 (or so).

[RadekPilich]

@Dancer18 & @g_bartsch I have learned today from @Pesala that you can collapse the folder tree by clicking into it and pressing the "\" key.