Onde encontro as folhas de estilo dos temas das ferramentas de desenvolvimento do Mozilla firefox?

Question

As ferramentas para desenvolvedores do mozilla firefox têm dois temas diferentes, um claro e um escuro. O escuro é o tema padrão para o desenvolvedor do Firefox, a luz é o tema padrão para o Firefox normal.

Eu gostaria de encontrar as folhas de estilo reais (supondo que elas sejam estilizadas com folhas de estilo) para editá-las. Eu estou no Windows atualmente e suponho que desde que eu não posso encontrá-los em appData que eles devem estar dentro de algum .exe ou.dll que eu possa acessar usando recurso hacker.

    

Answer 1

Os estilos para DevTools no Mozilla estão no arquivo omni.ja zipado. Existem dois arquivos omni.ja:
não este: "C: \ Arquivos de Programas \ Mozilla Firefox \ omni.ja"
este aqui: "C: \ Arquivos de Programas \ Mozilla Firefox \ browser \ omni.ja"

não há necessidade de hackers, são arquivos css.

Deixe-me mostrar um exemplo de como personalizar um dos dois (no momento) temas incorporados.
Eu costumava procurar regras de CSS no DevTools Inspector, mas estou mais interessado em regras para "This Element". Eu muitas vezes não percebo quando eu rolar passar as seções "Herdado ...".

Parameajudaravermelhorocabeçalhodaseção,altereiseuestilo.

• Encontreoseletordeestiloresponsável

Vocêpodetentar&métododeerroatravésdeváriosarquivoscssemomni.ja,
masháumaótimaferramentanoFirefoxapenasparaessepropósito. Caixa de ferramentas do navegador - como ativá-lo e usá-lo.

Você pode usar o DevTools no DevTools para inspecionar o Inspetor:

Lávocêpodever,éoseletor.ruleview-header,queédefinidonoarquivorules.css.Vocêpoderealmenteclicarnorules.cssparaverseuconteúdodiretamentenoFF.
Agoravocêpodeusar:

.ruleview-header{background:#905252!important;color:white!important;}

ouparaseguiromesmoestilousadopelosarquivosdetema,éissoqueeuusei:

/*CSSVariablesspecifictothispanelthataren'tdefinedbythethemes*/:root{--rule-header-color:var(--theme-toolbar-color);/*tokeeplightthemeasitwas*/}:root.theme-dark{/*was:--rule-header-background-color:#222225;*/--rule-header-background-color:#905252!important;--rule-header-color:white;/*added*/}/*RuleViewContainer*/.ruleview-header{/*was:color:var(--theme-toolbar-color);*/color:var(--rule-header-color)!important;}/*expandableheaderswillfollowthestyleof.ruleview-header,buthereitcanbystyledseparately*/.ruleview-expandable-header{/*background-color:YOUR_COLOR!important;*/}.ruleview-expandable-header:hover{/*was:background-color:var(--theme-toolbar-background-hover);*/}

• Ondecolocar

  1. Vocêpodeeditaroarquivorules.cssrealecompactá-lonoarquivoomni.ja,masapósaatualizaçãodoFF,suasalteraçõesserãoperdidas.
  2. EditeoarquivouserChrome.csseadicione onde deveria ser. Lembre-se de usar! Importante neste caso em todas as regras de sobrescrita.
  3. Use uma extensão, como Stylus
  4. crie sua própria extensão

• A estrutura dos arquivos de tema em omni.ja:

arquivos na pasta de skin, por exemplo:
\ cromo \ devtools \ skin \ dark-theme.css
para abrir somente leitura no Firefox: chrome: //devtools/skin/dark-theme.css

e arquivos na pasta de temas, por exemplo:
\ cromo \ devtools \ modules \ devtools \ client \ themes \ variables.css
resource: //devtools/client/themes/variables.css
(nota: "recurso:" em vez de "chrome:")

• Para mais leitura. Perguntas semelhantes:
  link
  link
  link
  link
  link