White-Flash und andere Probleme mit NelliTab

Ich nutzte schon immer gerne Google Chrome. Für mich als Programmierer überwogen trotz der Diskussion rund um Datenschutz immer die praktischen Gründe bei der Entwicklung. Doch dann kam das neue Design “Refresh” was mir gar nicht gefällt. Ich probierte für eine Zeit Firefox aus. Da ich jedoch gerne meine hier vorgestellte Erweiterung NelliTab nutze und es mit Veröffentlichung dieses Artikels in Firefox nicht möglich ist eine Erweiterung zuverlässig als Startseite zu laden, war Firefox dann doch keine Alternative für mich.

Unabhängig von den persönlichen Präferenzen war das eigentliche Problem Dark Themes in Webextensions wie NelliTab. Beim Öffnen von Tabs wird man stets “fotografiert”. Bevor der Inhalt im neuen Tab geladen wird ist die Seite kurz weiß. Jedoch gibt es keine (einfache) Option für User oder Entwickler dies zu ändern. User Stylesheets wurden in Chrome abgeschafft und die userChrome.css von Firefox hilft hier auch nicht weiter, sie wird einfach zu spät geladen.

NelliTab im Vivaldi-Browser

Ich probierte auch Vivaldi aus und siehe da, kein White Flash. Zwar keine Lösung für Firefox und Chrome, aber ich kann bei Supportanfragenn wenigsten eine Alternative anbieten. Ich selbst hatte endlich wieder einen neuen “Lieblings-Browser”, Chrome basiert, weniger Datenschutzbedenken, keine Probleme mit meiner Erweiterung und kann alles anpassen wie ich es möchte. Aus Spass stellte ich auch “meine” gewohnten Tabs wieder her.

Für das White-Flash-Problem reicht einfach die Wahl eines Dark Themes in Vivaldi aus, weil hier automatisch die Hintergrundfarbe anders als in Chrome und Firefox die Farbe des Themes bekommt. Wer aber noch die Tabs samt Toolbar anpassen möchte, kann folgendes probieren. Zuerst einfach ein Custom-Theme mit folgenden oder ähnlichen Farben anlegen. Bitte auch die gezeigten “Theme Präferenzen” beachten.

Custom Theme Einstellung

Anschließend die custom.css mit folgenden Beispiel-Code ergänzen.

:root {
  --ideaweb-bg-default: #242424;
  --ideaweb-bg-private: #3f0069;
  --ideaweb-tab-bg: #242424;
  --ideaweb-tab-inactive: #383838;
  --ideaweb-tab-progress: #1A73E7;
  --ideaweb-addressfield-bg: white;
  --ideaweb-addressfield-border: rgba(0,0,0,0.2);
  --ideaweb-addressfield-font: black;
  --ideaweb-addressfield-private-bg: #3F0069;
  --ideaweb-addressfield-private-font: white;
  --ideaweb-dialog-bg: #2a2a2a;
  --ideaweb-dialog-border: #1b1b1b;
}

/* Window */
#browser.mac .window-buttongroup {
  margin-left: 10px;
}

/* Addressbar */
button.button-addressfield:hover {
  border-color: transparent !important;
  background-color: transparent !important;
}
.addressfield,
.searchfield {
  background-color: var(--ideaweb-addressfield-bg) !important;
  border-color: var(--ideaweb-addressfield-border) !important;
}
button.button-addressfield:active,
button.button-addressfield.is-dialog-open {
  background-color: transparent !important;
}
.addressfield > div.private-window-indicator {
  background-color: var(--ideaweb-addressfield-private-bg) !important;
}
.addressfield > div.private-window-indicator * {
  fill: var(--ideaweb-addressfield-private-font) !important;
  color: var(--ideaweb-addressfield-private-font) !important;
}
.addressfield > *:not(.addressfield-popup-container),
.addressfield > *:not(.addressfield-popup-container) *,
.button-addressfield.bookmark svg .bookmark-outline {
  fill: var(--ideaweb-addressfield-font) !important;
  color: var(--ideaweb-addressfield-font) !important;
}
.addressfield .pageload:not(.unstarted).progressing,
.addressfield .pageload:not(.unstarted).progress-done {
  opacity: 0.25;
}

.toolbar-addressbar .button-toolbar.browserAction-button.popup-visible,
.toolbar-mailbar .button-toolbar.browserAction-button.popup-visible,
.addressfield .urlSearch {
  background-color: var(--colorAccentBg) !important;
}
.addressfield .urlSearch,
.addressfield .urlSearch * {
  border-color: var(--colorAccentBg) !important;
  color: var(--colorAccentFg) !important;
}

/* Extensions */
.extension-popup.top:before,
.extension-popup.top:after {
  border-bottom-color: var(--colorAccentBg);
}
.extension-popup {
  box-shadow: 0 0 0 1px var(--colorAccentBg), 0 2px 8px rgba(0,0,0, calc(var(--shadowOpacity) * 0.25));
}

/* Tabs */
.mac #tabs-container.top {
  padding-left: 80px;
}
#tabs-container.top {
  padding-top: 11px;
}
#browser:not(.mac) #tabs-container.top {
  padding-left: 45px;
}
#browser:not(.mac) .topmenu + #tabs-container.top {
  padding-left: 12px;
}
#browser .tab-position .tab:not(.active) {
  background: var(--ideaweb-tab-inactive) !important;
}
#tabs-container {
  background-color: var(--ideaweb-tab-bg) !important;
}
div.tab:not(.active) > .tab-header .title {
  color: white;
}
div.tab::before,
div.tab::after {
  content: '';
  display: block;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  z-index: -1;
  position: absolute;
  border-bottom: 28px solid var(--ideaweb-tab-inactive);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
div.tab.active::before,
div.tab.active::after {
  border-bottom-color: var(--colorAccentBg) !important;
}
div.tab::before {
  left: -12px;
}
div.tab:not(.active)::before {
  filter: drop-shadow(0 -1px 1px var(--ideaweb-tab-bg));
}
.tab-strip > span + span div.tab::before {
  left: -2px;
}
div.tab::after {
  right: -11px;
}
div#tabs-container {
  height: 28px !important;
}
.tab-position .tab .tab-header {
  flex: 0 0 28px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
}
.tab-position .tab .title {
  -webkit-mask-image: -webkit-linear-gradient(180deg, transparent 0, #fff 45px);
}
.tab-strip > span + span div.tab {
  margin-left: 10px;
}
.toolbar-addressbar.toolbar {
  height: 38px;
}
.toolbar-addressbar.toolbar > .toolbar,
.toolbar-addressbar.toolbar > .extensions-wrapper {
  margin-top: 2px;
}

#browser.mac .tab-header .favicon,
#browser.mac .tab-header .close {
  display: block !important;
}

#browser.mac .tab-header .close {
  order: 1 !important;
  margin-right: 5px;
  background-color: transparent;
  margin-top: 1px;
  margin-right: 0;
  border-radius: 50%;
}
#browser.mac .tab-header .close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.tab-position .tab .progress-indicator {
  background-color: var(--ideaweb-tab-progress);
  bottom: 3px;
  left: calc(var(--padding) - 2px);
  right: calc(var(--padding) - 2px);
}

/* Icons */
button.button-tabbar.newtab {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY29udGV4dC1maWxsIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5Ij4KICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTE0IDdIOVYyYTEgMSAwIDAgMC0yIDB2NUgyYTEgMSAwIDAgMCAwIDJoNXY1YTEgMSAwIDAgMCAyIDBWOWg1YTEgMSAwIDAgMCAwLTJ6Ii8+Cjwvc3ZnPg==') 50% 50% / 14px 14px no-repeat;
  margin-left: 5px;
}
.toolbar .dialog-add-bookmark .cb-image,
button.button-tabbar.newtab svg,
button.button-tabbar.toggle-trash {
  display: none;
}

/* Hide Unread Indicator */
.tab-position .tab.unread {
  background: none;
}

/* Body Background */
#browser #main > .inner {
  background-color: var(--ideaweb-bg-default) !important;
}
#browser.private #main > .inner {
  background-color: var(--ideaweb-bg-private) !important;
}

/* Misc */
.isblurred .toolbar-addressbar .extensions-wrapper .browserAction-button img,
.isblurred .toolbar-mailbar .extensions-wrapper .browserAction-button img {
  opacity: 1;
}

Doch leider werden die Styles mit jedem Update überschrieben. Also habe ich als macOS Benutzer die Styles in ein Shell Script gepackt und was mehrmals am Tag ausgeführt wird.

#!/bin/bash

FILE=$(find /Applications/Vivaldi.app/Contents/Versions/ -type f -name common.css -exec echo {} \;);
MARKER="Custom Theme for NelliTab"

if [[ -f $FILE ]]; then
  MATCH=$(grep -n " $MARKER " "$FILE" | cut -f1 -d:);

  if [ "$MATCH" != "" ]; then
    
    LINE=$(expr $MATCH - 1);
    
    sed $LINE',$d' "$FILE" > "$FILE".bak
    mv "$FILE".bak "$FILE"
  fi
  
  cat <<EOF >> "$FILE"

  /*** $MARKER ***/
  
 :root {
    --ideaweb-tab-bg [...]

EOF

fi 

Wichtig ist nur, dass die Stylesheets zwischen dem Marker und EOF eingefügt werden, weil sonst wird die original custom.css verhunzt. Das Skript sollte mit kleinen Anpassungen auch unter Linux funktionieren. Für Windows habe ich (noch) keines parat.