ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Horstmann

Ich habe das mal etwas reduziert, scheint soweit zu funktionieren.
Icons in shadow-root könnte man damit im Prinzip auch ändern mit einem relativen Pfad, dazu habe ich aber keine komplett überzeugende Lösung gefunden.

Der Unterschied zum Original ist, dass man nur das JS Script benötigt, in das man die ::part Veränderungen direkt einträgt, ohne zusätzliche CSS Datei.

JavaScript

// shadow_edit.uc.js
// Based on script by BrokenHeart ==>
// https://www.camp-firefox.de/forum/thema/132865-shadowroot-neue-aufruf-methode-fuer-css-regeln/
// After script changes, restart with Clear StartUp Cache => about:support

(function() {
  if (!window.gBrowser) return;
  
    const css = `

    /* Hamburger Menü */

    #appMenu-popup::part(content) {
        padding: 20px !important;
        border-width: 4px !important;
        border-color: red !important;
    }

    /* Scrollbuttons(Pfeile links und rechts) in Tableiste umranden */

    #tabbrowser-arrowscrollbox::part(scrollbutton-up),
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
        outline: 2px solid red !important;
        outline-offset: -2px !important;
    }

    /* Rahmen um Lesezeichen-Hinzufügen-Dialog */

    #editBookmarkPanel::part(content) {
      border: 3px solid red !important;
      filter: drop-shadow(1px 1px 2px rgba(16,16,16,0.66)) !important;
    }

    `;

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

Alles anzeigen

Sören Hentzschel

Das sehe ich aber eher als Nachteil, denn dadurch geht das Syntax Highlighting im Editor komplett verloren, was die Wartbarkeit erschwert und die Fehlerwahrscheinlichkeit erhöht. Es ist schon gut, wenn man CSS in CSS-Dateien hat.

Mitleser

Horstmann
Wenn ich keine CSS-Hervorhebung im jeweiligen Editor möchte, kann ich das CSS einfach nur in js einbinden (auch shadowroot funzt damit). Genauso war es in der Zeit vor diesem wirklich nützlichen Script.

Zitat von Horstmann

Icons in shadow-root könnte man damit im Prinzip auch ändern mit einem relativen Pfad, dazu habe ich aber keine komplett überzeugende Lösung gefunden

Ich mach das so (In dieser Datei befindet sich lediglich der relative Pfad auf das Icon; fill usw. nicht):

JavaScript

// userChromeShadowIcons.css.uc.js
(function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
IconPath1 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons', 'ff_svg')), // Pfad zum 1.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
IconPath2 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum 2.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

   const sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
   const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
	#tabbrowser-arrowscrollbox::part(scrollbutton-up),
	#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
		list-style-image: url("${IconPath2}/arrow-left.svg") !important;
	}

	#tabbrowser-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
	#tabbrowser-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
    	list-style-image: url("${IconPath2}/arrow-right.svg") !important;
	}
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

Alles anzeigen

Hier die dazugehörige userChromeShadow.css:

CSS

/* userChromeShadow.css*/
/*■■■■■■■■■■■■■■■■scrollbuttons tableiste■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
	appearance: none !important;
	background-color: gray !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	overflow: hidden !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
	appearance: none !important;
	background-color: lightgray !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
	--arrowscrollbox-scrollicon-hover-background-color: unset !important;
	--arrowscrollbox-scrollicon-active-background-color: unset !important;
   }
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
	fill: green !important;
	fill-opacity: 1.0 !important;
}
#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
	fill: white !important;
	fill-opacity: 1.0 !important;
}
#tabbrowser-arrowscrollbox[scrolledtostart]::part(scrollbutton-up),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(scrollbutton-down) {
	fill: red !important;
	fill-opacity: 1.0 !important;
	opacity: 1.0 !important;
	background-color: gray !important;
}
#tabbrowser-arrowscrollbox[scrolledtostart]::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox[scrolledtoend]::part(scrollbutton-down):hover {
	fill: red !important;
	fill-opacity: 0.6 !important;
	opacity: 1.0 !important;
}

Alles anzeigen

Horstmann

Ich bin 100% pro Separierung von CSS und JS!
Auch wegen der Darstellung im Editor, und des einfachen Live Bearbeiten in den Browser Werkzeugen.
Beim Bauen und Testen von JS Scripts benutze ich solange es geht separate CSS Dateien, oder benutze ein CSS Editor Fenster zur Fehlersuche im CSS Teil.

Aber versucht das mal den Leuten zu verkaufen.
Abgesehen von diesem hier, fällt mir kein JS Script ein, das kein integriertes CSS benutzt, und nicht versucht möglichst alle User Einstellungen oben zu sammeln.

In diesem speziellen Fall fand ich es nur praktisch alles in einer Datei zu haben; vermutlich sind die meisten ::part Modifikationen eher übersichtlich.

shadow-root scheint generell in JS Scripts zu funktionieren, wenn man etwa sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET); statt ....AGENT_SHEET benutzt.