Tło w menu i shadow-root problem

[OSH]

Nie ustępuję w wysiłkach doprowadzenia wyglądu TB do takiego, jak chcę. Wgryzam się coraz mocniej w Inspectora i generalnie całkiem nieźle mi to idzie, ale cytując klasyka „ciągle się uczę”. Stanąłem jednak przed problemem, którego zrozumieć nie mogę.

Chcę sobie ustawić tło we wszystkich menu jako czarne. Wyłapałem w inspectorze, że za to odpowiada taki fragment kodu:

Kod: Zaznacz cały

:is(panel, menupopup)::part(content) {
  display: flex;
  box-sizing: border-box;
  padding: var(--panel-padding);
  color: var(--panel-color);
  background: var(--panel-background);
  border-radius: var(--panel-border-radius);
  border: 1px solid var(--panel-border-color);
  width: var(--panel-width);
  min-width: 0;
  min-height: 0;

  /* Makes popup constraints work */
  max-height: calc(100% - 2 * var(--panel-shadow-margin));
  max-width: calc(100% - 2 * var(--panel-shadow-margin));

  box-shadow: var(--panel-shadow);
  margin: var(--panel-shadow-margin);
}

Siedzi to tu:
chrome://global/skin/popup.css

wystarczy zmienić

background: var(--panel-background);

na

background: black !important;

i mamy piękne czarne tło. Tyle, że to działa tylko w Inspectorze. Jeżeli potem wstawię to do Userchrome.css, to tło znowu jest szare. Ten fragment kodu znalazłem w czymś co wygląda tak:

#shadow-root (open)

a głębiej jest
<arrowscrollbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="menupopup-arrowscrollbox" part="arrowscrollbox content" exportparts="scrollbox: arrowscrollbox-scrollbox" flex="1" orient="vertical" smoothscroll="false" scrolledtoend="true" scrolledtostart="true"><html:slot xmlns:html="http://www.w3.org/1999/xhtml"></html:slot></arrowscrollbox>

Co ja robię źle? Próbuję już dwa dni dojść, co temu głąbowi nie pasuje. Zaraz oszaleję.

I dlaczego do diabła mój adres IP jest zablokowany i nie moge pisać postów?

[krystian3w]

Shadow Root może jest odporny na takie coś - wymienił "skiekierkowy" XUL (XML) stryjek na (x)HTML5 "kijek".

https://developer.mozilla.org/en-US/doc ... shadow_DOM
https://developer.mozilla.org/en-US/doc ... ShadowRoot
https://developer.mozilla.org/en-US/docs/Web/CSS/::part

IP możesz mieć zbyt często zmienne i trafiłeś na takie co jest w bazie spamerów w całym Internecie - ja zazwyczaj resetuję router lub na potrzeby postu używam darmowego limitu w AdGuard VPN (jak też nie dostali się na ban listę).

[dexter]

Jest taki otwarty bug 1575507, może tam znajdziesz jakieś podpowiedzi.

PS. Ja też czasem muszę pisać przez VPN-a, bo mnie nie wpuszcza.

[dexter]

Czemu nie po prostu tak?

Kod: Zaznacz cały

panel, menupopup {
      background: black !important;
    }

[OSH]

Czemu nie po prostu tak?

Kod: Zaznacz cały

panel, menupopup {
      background: black !important;
    }

Bo to zmienia tylko kolor ramki wokół menu. A w zasadzie masz rację, ale to wygląda tak, jakby na jeden panel był nałożony ten właściwy panel. I Twój kod zmienia tylko kolor tego panelu pod spodem. Popatrz:

https://i.imgur.com/nYTmxON.png (niestety, nie moge inaczej dodać obrazka)


Za to wpadłem na pomysł rewolucyjny: zamiast zmieniać kolorki w poszczególnych modułach można pójść po bandzie i pozmieniać wartości zmiennych na początku. Przykładowo, w /mail/themes/shared/mail/layout.css jest takie coś:

Kod: Zaznacz cały

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://messenger/skin/colors.css");

/* This file defines the colors used for the main layout of the application.
 * Colors that define a containers for content or their text color should go
 *  here. Colors that define widgets or content should not */

/* Background 0 should be used for the main content or page background */
/* Background 1 should be used for center panes and secondary sidebars */
/* Background 2 should be used for primary sidebars */
/* Background 3 should be used for blocks of content inside the main content */
/* Background 4 should be used for elements inside the main content */

/* Color 0 should be used when the text needs more emphasis */
/* Color 1 should be used for the main text color */
/* Color 2 should be used when the text needs less emphasis */
/* Color 3 should be used when the text need even less emphasis */

/* Border 0 should be used for separation from main layout sections */
/* Border 1 should be used when the separation is part of the element */

:host,
:root {
  --layout-background-0: light-dark(var(--color-white), var(--color-gray-90));
  --layout-background-1: light-dark(var(--color-gray-05), var(--color-gray-80));
  --layout-background-2: light-dark(var(--color-gray-10), var(--color-gray-70));
  --layout-background-3: light-dark(var(--color-gray-20), var(--color-gray-60));
  --layout-background-4: light-dark(var(--color-gray-30), var(--color-gray-50));

  --layout-color-0: light-dark(var(--color-black), var(--color-white));
  --layout-color-1: light-dark(var(--color-gray-90), var(--color-gray-10));
  --layout-color-2: light-dark(var(--color-gray-70), var(--color-gray-30));
  --layout-color-3: var(--color-gray-50);

  --layout-border-0: light-dark(var(--color-gray-30), var(--color-gray-70));
  --layout-border-1: light-dark(var(--color-gray-40), var(--color-gray-60));
  --layout-border-2: var(--color-gray-50);
}

@media (prefers-contrast) {
  :host,
  :root:not([lwtheme]) {
    --layout-background-0: Window;
    --layout-background-1: -moz-Dialog;
    --layout-background-2: transparent;
    --layout-background-3: transparent;
    --layout-background-4: transparent;

    --layout-color-0: WindowText;
    --layout-color-1: -moz-DialogText;
    --layout-color-2: currentColor;
    --layout-color-3: currentColor;

    --layout-border-0: currentColor;
    --layout-border-1: currentColor;
    --layout-border-2: currentColor;
  }
}

a w tym cholernym shadow-root/arrowscrollbox jest takie coś:

Kod: Zaznacz cały

/* menupopup/panel */
:is(panel, menupopup)::part(content) {
  --panel-color: var(--layout-color-1);
  --panel-background: var(--layout-background-1);
  --panel-border-color: var(--layout-border-1);
}

Teraz wystarczy zmienić wartość w wyżej wymienionym root na --layout-background-1: black i wszystkie menu będą miały czarne tło, bo wszystkie korzystają z tej samej zmiennej. Ale Twój sposób jest o tyle ciekawy, że umożliwiłby zmianę dla każdego tła menu osobno...

EDIT:
Wychodzi na to, że miałem rację:

Kod: Zaznacz cały

panel, menupopup {
      background: aqua !important;
    }

To zmienia tło panelu

Kod: Zaznacz cały

panel, menupopup ::part(content) {
  display: flex;
  box-sizing: border-box;
  padding: 1px;
  color: var(--panel-color);
  background: red !important;
  border-radius: var(--panel-border-radius);
  border: 1px solid var(--panel-border-color);
  width: var(--panel-width);
  min-width: 0;
  min-height: 0;}

A to zmienia kolor panelu burger menu.


A propos zmiany IP - ten numer nie przejdzie, bo jestem w sieci uniwersyteckiej i adres IP jest stały. Napisałem do administratora, ale wiadomo,. że zanim się uda coś zrobić...