Add bookmark text size setting

requested in #236

Author: Christoph142

Chromium (.crx)/_locales/de/messages.json

@@ -60,6 +60,7 @@
 	"bookmarks_only" : 					{ "message" : "Lesezeichen anzeigen" },
 	"all_headings" : 					{ "message" : "Lesezeichen und Überschriften" },
 	"bookmark_text_color" :				{ "message" : "Text-Farbe" },
+	"bookmark_text_size" :				{ "message" : "Text-Größe" },
 	"buttons" : 						{ "message" : "Scroll-Buttons" },
 	"show_buttons" : 					{ "message" : "Scroll-Buttons zum Seiten-Anfang und -Ende anzeigen" },
 	"button_width" : 					{ "message" : "Breite" },

Chromium (.crx)/_locales/en/messages.json

@@ -60,6 +60,7 @@
 	"bookmarks_only" : 					{ "message" : "Show bookmarks" },
 	"all_headings" : 					{ "message" : "Bookmarks and Headings" },
 	"bookmark_text_color" :				{ "message" : "Text color" },
+	"bookmark_text_size" :				{ "message" : "Text size" },
 	"buttons" : 						{ "message" : "Scroll buttons" },
 	"show_buttons" : 					{ "message" : "Show buttons for scrolling to the top/bottom of the page" },
 	"button_width" : 					{ "message" : "Width" },

Chromium (.crx)/includes/modern_scroll.js

@@ -68,6 +68,7 @@ async function load_prefs() {
 		superbar_opacity:		"70",
 
 		bookmark_text_color:	"#FFFFFF",
+		bookmark_text_size:		"16",
 		show_bookmarks:			"2", // 1 = none, 2 = bookmarks, 3 = all headings
 
 		show_buttons:			"1", // 1 = no, 2 = only fullscreen, 3 = yes
@@ -311,12 +312,12 @@ function inject_css()
 		 #ms_v_container #ms_vbar:hover, #ms_h_container #ms_hbar:hover, #ms_upbutton:hover, #ms_downbutton:hover, #ms_v_container .bookmarkIndicator:hover{ opacity:"+((parseInt(w.opacity)+20)/100)+"; transition:opacity 0.1s 0s; }\n\
 		 #ms_superbar:hover{ opacity:"+w.superbar_opacity/100+"; transition:opacity 0.25s 0s; }\n\
 		\n\
-		 .bookmarkIndicator { line-height:20px; height: 20px; color: var(--bookmark_text_color); position: absolute; "+(w.vbar_at_left==="1"?"left:":"right:")+(parseInt(w.hover_size)+7)+"px; padding: 3px 5px; display: block; text-decoration:none; z-index: var(--z); cursor: pointer; }\n\
+		 .bookmarkIndicator { line-height: "+(parseInt(w.bookmark_text_size)+4)+"px; height: "+(parseInt(w.bookmark_text_size)+4)+"px; color: var(--bookmark_text_color); font-size: "+w.bookmark_text_size+"px; position: absolute; "+(w.vbar_at_left==="1"?"left:":"right:")+(parseInt(w.hover_size)+7)+"px; padding: 3px 5px; display: block; text-decoration:none; z-index: var(--z); cursor: pointer; }\n\
 		 .bookmarkIndicator > span { white-space: nowrap; max-width: 20em; overflow: hidden; text-overflow: ellipsis; display: block; }\n\
 		 .bookmarkIndicator br, .bookmarkIndicator br::after { content: ' / '; }\n\
-		 .bookmarkIndicator::before, .bookmarkIndicator::after { content: ''; position: absolute; border-style: solid; }\n\
-		 .bookmarkIndicator::before { "+(w.vbar_at_left==="1"?"right":"left")+":100%; top: 6px; border-top: 6px solid transparent; border-"+(w.vbar_at_left==="1"?"right":"left")+": 6px solid var(--border_color); border-bottom: 6px solid transparent; border-"+(w.vbar_at_left==="1"?"left":"right")+": none; }\n\
-		 .bookmarkIndicator::after { "+(w.vbar_at_left==="1"?"right":"left")+":calc(100% - "+w.border_width+"px); top: 6px; border-top: 6px solid transparent; border-"+(w.vbar_at_left==="1"?"right":"left")+": 6px solid var(--color); border-bottom: 6px solid transparent; border-"+(w.vbar_at_left==="1"?"left":"right")+": none; }\n\
+		 .bookmarkIndicator::before, .bookmarkIndicator::after { content: ''; position: absolute; border-style: solid; top: "+(Math.floor(w.bookmark_text_size/2)-1)+"px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }\n\
+		 .bookmarkIndicator::before { "+(w.vbar_at_left==="1"?"right":"left")+":100%; border-"+(w.vbar_at_left==="1"?"right":"left")+": 6px solid var(--border_color); border-"+(w.vbar_at_left==="1"?"left":"right")+": none; }\n\
+		 .bookmarkIndicator::after { "+(w.vbar_at_left==="1"?"right":"left")+":calc(100% - "+w.border_width+"px); border-"+(w.vbar_at_left==="1"?"right":"left")+": 6px solid var(--color); border-"+(w.vbar_at_left==="1"?"left":"right")+": none; }\n\
 		 .bookmarkIndicator:hover { z-index: 7; }\n\
 		 #ms_v_container #ms_bookmarks{ opacity: 0; transition:opacity 0.5s "+w.show_how_long+"ms; }\n\
 		 #ms_v_container:hover #ms_bookmarks{ opacity: 1; transition: opacity 0.1s; }\n\
@@ -723,7 +724,7 @@ async function update_bookmarks()
 			bookmarkIndicator.addEventListener("click", () => bookmark.scrollIntoView());
 		}
 		bookmarkIndicator.className = "bookmarkIndicator";
-		bookmarkIndicator.style.top = "calc(" + ((bounds.top + window.scrollY) / document.body.scrollHeight * 100) + "vh - 10px)";
+		bookmarkIndicator.style.top = "calc(" + ((bounds.top + window.scrollY) / document.body.scrollHeight * 100) + "vh - "+Math.round(parseInt(w.bookmark_text_size)/2)+"px)";
 		bookmarkIndicator.style.setProperty("--z", 7 - parseInt(bookmark.tagName[1]));
 		bookmarkTitle.innerText = bookmark.innerText.replace("\n", " ").replace("  ", " ").trim();
 		bookmarkIndicator.appendChild(bookmarkTitle);

Chromium (.crx)/options/options.css

@@ -1,5 +1,5 @@
 html			{ width:100%; min-width:400px; background:#DDD; }
-body			{ font:13px/24px "helvetica neue",arial,sans-serif; cursor:default; max-width:800px;
+body			{ font:13px/24px sans-serif; cursor:default; max-width:800px;
   				  background:#FFF; color:#1e3853; margin:15px auto; padding:0 50px; box-shadow:0 0 10px #98b0c9; direction: __MSG_@@bidi_dir__; }
 header			{ display:block; text-align:center; margin-bottom:2em; padding:3em 0 1em 0;
 				  border-bottom:0.2rem solid #1e3853; }

Chromium (.crx)/options/options.html

@@ -181,6 +181,10 @@ <h4 id="bookmarks" data-i18n="bookmarks"></h4>
             <td><label for="bookmark_text_color" data-i18n="bookmark_text_color" value="#FFFFFF"></label>:</td>
             <td />
             <td><input type="color" id="bookmark_text_color" name="bookmark_text_color"></td>
+        </tr><tr>
+            <td><label for="bookmark_text_size" data-i18n="bookmark_text_size"></label>:</td>
+            <td />
+            <td><input type="number" min="6" max="26" id="bookmark_text_size" name="bookmark_text_size" value="16"></td>
         </tr>
     </table>
     <br>

Chromium (.crx)/options/prefs.js

@@ -129,6 +129,7 @@ async function restorePrefs() {
 		superbar_opacity:		"70",
 
 		bookmark_text_color:	"#FFFFFF",
+		bookmark_text_size:		"16",
 		show_bookmarks:			"2", // 1 = none, 2 = bookmarks, 3 = all headings
 
 		show_buttons:			"1", // 1 = no, 2 = only fullscreen, 3 = yes