theme expérimentation

Type Object

Obligatoire Non

Exemple

Type	`Object`
Obligatoire	Non
Exemple	json `"theme_experiment": { "stylesheet": "style.css", "colors": { "popup_affordance": "--arrowpanel-dimmed" }, "images": { "theme_toolbar": "--toolbar-bgimage" }, "properties": { "toolbar_image_alignment": "--toolbar-bgalignment" } }`

json


"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "popup_affordance": "--arrowpanel-dimmed"
  },
  "images": {
    "theme_toolbar": "--toolbar-bgimage"
  },
  "properties": {
    "toolbar_image_alignment":
    "--toolbar-bgalignment"
  }
}

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

créer une feuille de style qui définit les correspondances entre les sélecteurs CSS internes pour les éléments d'interface utilisateur Firefox et les variables CSS arbitraires. Les variables CSS sont ensuite mappées dans les objets colors, images, et properties avec les nouvelles propriétés de clé de theme.
(sans feuille de style) en utilisant colors, images, et properties pour mapper les sélecteurs CSS internes de Firefox, tels que --arrowpanel-dimmed vers les nouvelles propriétés de clé de theme key properties. Cette option limite l'expérimentation aux composants d'interface utilisateur associés à une variable CSS intégrée.

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

Note : Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

Attention : Cette fonctionnalité est expérimentale et peut être sujette à modification.

Syntaxe

La clé theme_experiment est un objet qui prend les propriétés suivantes :

Nom	Type	Description
`stylesheet`	`String`	Facultatif Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.
`images`	`Object`	Facultatif Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la `stylesheet`) aux noms de propriétés `images` à utiliser dans la clé `theme`.
`colors`	`Object`	Facultatif Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la `stylesheet`) aux noms de propriétés `colors` à utiliser dans la clé `theme`.
`properties`	`Object`	Facultatif Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la `stylesheet`) aux noms de propriétés `properties` à utiliser dans la clé `theme`.

Exemples

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

La feuille de style définit :

css

#reload-button {
  fill: var(--reload-button-color);
}

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et --reload-button-color est un nom arbitraire..

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

json

"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "reload_button": "--reload-button-color"
  }
}

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

json

"theme": {
  "colors": {
    "reload_button": "orange"
  }
}

Ceci a pour effet de rendre l'icône de recharge orange.

Cette propriété peut également être utilisée dans browser.theme.update(). images et properties travaillent de la même manière que colors.

Compatibilité des navigateurs

BCD tables only load in the browser