Les outils pour les développeurs Chrome prennent désormais en charge les éléments de la couche supérieure, ce qui permet aux développeurs de déboguer plus facilement leur code utilisant ces éléments.
Cet article décrit les éléments de la couche supérieure, explique comment les outils de développement permettent de visualiser le contenu de la couche supérieure pour comprendre et déboguer la structure DOM qui contient les éléments de la couche supérieure. Il explique également comment la prise en charge de la couche supérieure est prise en charge.
Quels sont les éléments de la couche supérieure et de la couche supérieure ?
Que se passe-t-il exactement en interne lorsque vous ouvrez un <dialog> en tant que modal ? 🤔
Il est placé dans une couche supérieure. Le contenu de la couche supérieure s'affiche au-dessus du reste du contenu. Par exemple, une boîte de dialogue modale doit apparaître au-dessus de tout autre contenu DOM pour que le navigateur affiche automatiquement cet élément dans une "couche supérieure". au lieu d'obliger les auteurs à combattre manuellement le z-index. Un élément de couche supérieure apparaît au-dessus d'un élément, même avec le z-index le plus élevé.
La couche supérieure peut être décrite comme la "couche empilable la plus élevée". Chaque document est associé à une seule fenêtre d'affichage et, par conséquent, à une seule couche supérieure. Le calque supérieur peut contenir plusieurs éléments en même temps. Lorsque cela se produit, ils s'empilent les uns sur les autres, le dernier au-dessus. En d'autres termes, tous les éléments de la couche supérieure sont placés dans une pile LIFO (dernier entré, premier sorti) de la couche supérieure.
L'élément <dialog> n'est pas le seul élément que le navigateur affiche dans une couche supérieure. Actuellement, les éléments de la couche supérieure sont les suivants:
Fenêtres pop-up, boîtes de dialogue modales et éléments en mode plein écran
Examinez l'implémentation de la boîte de dialogue suivante:
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>
Voici une démonstration avec deux boîtes de dialogue dont le fond est appliqué à l'arrière-plan (les fonds sont décrits ci-dessous):
Qu'est-ce qu'un fond d'écran ?
Heureusement, il existe un moyen de personnaliser le contenu sous l'élément de la couche supérieure.
Chaque élément de la couche supérieure possède un pseudo-élément CSS appelé backdrop.
Backdrop est une zone de la taille de la fenêtre d'affichage qui s'affiche immédiatement en dessous de n'importe quel élément de couche supérieure. Le pseudo-élément ::backdrop permet d'obscurcir, de styliser ou de masquer complètement tout ce qui se trouve sous l'élément lorsqu'il est tout en haut du calque supérieur.
Lorsque vous rendez plusieurs éléments modals, le navigateur affiche l'arrière-plan juste en dessous de ces éléments et au-dessus des autres éléments en plein écran.
Voici comment appliquer un style à un fond:
/* The browser displays the backdrop only when the dialog.showModal() function opens the dialog.*/
dialog::backdrop {
background: rgba(255,0,0,.25);
}
Comment n'afficher que le premier fond d'écran ?
Chaque élément du calque supérieur possède un fond qui appartient à une pile de calques supérieurs. Ces fonds d'écran sont conçus pour se chevaucher. Par conséquent, si l'opacité d'un fond n'est pas de 100%, les fonds situés en dessous sont visibles.
Si seul le premier fond doit être visible, vous pouvez effectuer le suivi des identifiants d'éléments dans la pile de la couche supérieure.
Si l'élément ajouté n'est pas le premier de la couche supérieure, la fonction appelée lorsque l'élément est placé dans la couche supérieure applique une classe hiddenBackdrop à ::backdrop. Cette classe est supprimée lorsque l'élément est supprimé de la couche supérieure.
Consultez le code de cet exemple de démonstration:
Conception de la prise en charge de la couche supérieure dans les outils de développement
La compatibilité des outils de développement avec la couche supérieure aide les développeurs à comprendre le concept de la couche supérieure et à visualiser comment son contenu change. Ces fonctionnalités aident les développeurs à identifier les éléments suivants:
- Éléments de la couche supérieure à tout moment, dans leur ordre.
- Élément situé tout en haut de la pile.
De plus, la prise en charge de la couche supérieure des outils de développement permet de visualiser la position du pseudo-élément Backdrop dans la pile de la couche supérieure. Même s'il ne s'agit pas d'un élément d'arborescence, il joue un rôle important dans le fonctionnement de la couche supérieure et peut être utile aux développeurs.
Grâce aux fonctionnalités de la couche supérieure, vous pouvez:
- Observez à tout moment quels éléments se trouvent dans la pile de la couche supérieure. La pile de représentation de la couche supérieure change de façon dynamique à mesure que des éléments sont ajoutés à la couche supérieure ou supprimés de celle-ci.
- Affichez la position de l'élément dans la pile de calques supérieure.
- Passer du ou des éléments de la couche supérieure pseudo-élément Backdrop dans l'arborescence à l'élément ou au pseudo-élément Backdrop dans le conteneur de représentation de la couche supérieure, puis à l'arrière.
Voyons comment utiliser ces fonctionnalités.
Conteneur de la couche supérieure
Pour faciliter la visualisation des éléments de la couche supérieure, les outils de développement ajoutent un conteneur de la couche supérieure à l'arborescence des éléments. Il se trouve après la balise de fermeture </html>.
Ce conteneur vous permet d'observer les éléments de la pile de couches supérieure à tout moment. Le conteneur de la couche supérieure est une liste de liens vers les éléments de la couche supérieure et leurs arrière-plans. La pile de représentation de la couche supérieure change de façon dynamique à mesure que des éléments sont ajoutés à la couche supérieure ou supprimés de celle-ci.
Pour trouver les éléments de la couche supérieure dans l'arborescence des éléments ou dans le conteneur de la couche supérieure, cliquez sur les liens de la représentation des éléments de la couche supérieure dans le conteneur de la couche supérieure vers le même élément dans l'arborescence des éléments, puis à l'arrière.
Pour passer de l'élément de conteneur de la couche supérieure à l'élément d'arborescence de la couche supérieure, cliquez sur le bouton afficher à côté de l'élément dans le conteneur de la couche supérieure.
Pour passer de l'arborescence de la couche supérieure au lien dans le conteneur de la couche supérieure, cliquez sur le badge de la couche supérieure à côté de l'élément.
Vous pouvez désactiver n'importe quel badge, y compris celui de la couche supérieure. Pour désactiver les badges, effectuez un clic droit sur un badge, sélectionnez Paramètres des badges et décochez les cases à côté des badges que vous souhaitez masquer.
Ordre des éléments dans la pile de la couche supérieure
Le conteneur de la couche supérieure affiche les éléments tels qu'ils apparaissent dans la pile, mais dans l'ordre inverse. La partie supérieure de l'élément de pile est le dernier élément de la liste des éléments du conteneur de la couche supérieure. Cela signifie que le dernier élément de la liste des conteneurs de la couche supérieure est celui avec lequel vous pouvez actuellement interagir dans le document.
Les badges situés à côté des éléments de l'arborescence indiquent si les éléments appartiennent à la couche supérieure et contiennent le numéro de position d'un élément dans la pile.
Sur cette capture d'écran, la pile de couches supérieure est composée de deux éléments, le second se trouvant en haut de la pile. Si vous supprimez le deuxième élément, le premier se déplace vers le haut.
Arrière-plans dans le conteneur de la couche supérieure
Comme indiqué ci-dessus, chaque élément de la couche supérieure possède un pseudo-élément CSS appelé "Backdrop". Vous pouvez styliser cet élément. Il est donc utile de l'inspecter et de voir sa représentation.
Dans l'arborescence des éléments, un élément Backdrop se trouve avant la balise de fermeture de l'élément auquel il appartient. Toutefois, dans le conteneur de la couche supérieure, un lien Backdrop est listé juste au-dessus de l'élément de couche supérieure auquel il appartient.
Modifications apportées à l'arborescence DOM
ElementsTreeElement, la classe chargée de créer et de gérer les éléments individuels de l'arborescence DOM dans les outils de développement, n'était pas suffisante pour implémenter un conteneur de couche supérieure.
Pour afficher le conteneur de la couche supérieure en tant que nœud dans l'arborescence, nous avons ajouté une classe qui crée des nœuds d'éléments d'arborescence DevTools. Auparavant, la classe responsable de la création de l'arborescence des éléments de développement était initialisée chaque TreeElement avec un DOMNode, qui est une classe avec un backendNodeId et d'autres propriétés liées au backend. backendNodeId, à son tour, est attribué sur le backend.
Le nœud de conteneur de la couche supérieure, qui contient une liste de liens vers les éléments de la couche supérieure, devait se comporter comme un nœud d'élément d'arborescence standard. Cependant, ce nœud n'est pas un "vrai" le nœud DOM et le backend n'ont pas besoin de créer le nœud de conteneur de la couche supérieure.
Pour créer un nœud de frontend représentant la couche supérieure, nous avons ajouté un nouveau type de nœud de frontend créé sans DOMNode. Cet élément de conteneur de la couche supérieure est le premier nœud de frontend qui n'a pas de DOMNode, ce qui signifie qu'il n'existe que sur l'interface et que le backend ne le "connaît" pas à ce sujet. Pour avoir le même comportement que les autres nœuds, nous avons créé une classe TopLayerContainer qui étend la classe UI.TreeOutline.TreeElement responsable du comportement des nœuds de frontend.
Pour obtenir l'emplacement souhaité, la classe qui affiche un élément associe TopLayerContainer en tant que frère suivant de la balise <html>.
Un nouveau badge de couche supérieure indique que l'élément se trouve dans la couche supérieure et sert de lien vers le raccourci de cet élément dans l'élément TopLayerContainer.
Conception initiale
Au début, le projet consistait à dupliquer les éléments de la couche supérieure dans le conteneur de la couche supérieure au lieu de créer une liste de liens vers ces éléments. Nous n'avons pas implémenté cette solution en raison du fonctionnement de l'extraction des enfants de l'élément dans les outils de développement. Chaque élément a un pointeur parent utilisé pour extraire les enfants, et il est impossible d'avoir plusieurs pointeurs. Par conséquent, nous ne pouvons pas avoir un nœud qui se développe correctement et contienne tous les enfants à plusieurs endroits de l'arborescence. En général, le système n'a pas été créé avec des sous-arborescences en double en tête.
La compromission à laquelle nous sommes parvenus a été de créer des liens vers les nœuds DOM frontend au lieu de dupliquer ces nœuds. La classe chargée de créer des liens vers les éléments des outils de développement est ShortcutTreeElement, qui étend UI.TreeOutline.TreeElement. ShortcutTreeElement a le même comportement que les autres éléments de l'arborescence DOM des outils de développement, mais ne dispose pas de nœud correspondant sur le backend et d'un bouton associé à un ElementsTreeElement.
Chaque ShortcutTreeElement du nœud de la couche supérieure a un ShortcutTreeElement enfant qui est lié à la représentation d'un pseudo-élément ::backdrop dans l'arborescence DOM des outils de développement.
Conception initiale:
Modifications apportées au protocole CDP (Chrome DevTools Protocol)
Pour intégrer la couche supérieure, vous devez apporter des modifications au protocole CPP (Chrome DevTools Protocol). CDP sert de protocole de communication entre les outils de développement et Chromium.
Nous devons ajouter les éléments suivants:
- Une commande à appeler à partir de l'interface à tout moment.
- Événement à déclencher sur l'interface côté backend.
CDP: commande DOM.getTopLayerElements
Pour afficher les éléments actuels de la couche supérieure, nous avons besoin d'une nouvelle commande CDP expérimentale qui renvoie une liste des ID de nœud des éléments qui se trouvent dans la couche supérieure. Les outils de développement appelle cette commande chaque fois que les outils de développement sont ouverts ou lorsque les éléments de la couche supérieure changent. La commande se présente comme suit :
# Returns NodeIds of the current top layer elements.
# Top layer renders closest to the user within a viewport, therefore, its elements always
# appear on top of all other content.
experimental command getTopLayerElements
returns
# NodeIds of the top layer elements.
array of NodeId nodeIds
CDP: événement DOM.topLayerElementsUpdated
Pour obtenir la liste à jour des éléments de la couche supérieure, nous avons besoin de chaque modification apportée aux éléments de la couche supérieure pour déclencher un événement CDP expérimental. Cet événement informe l'interface de la modification, qui appelle ensuite la commande DOM.getTopLayerElements et reçoit la nouvelle liste d'éléments.
L'événement ressemble à ceci :
# Called by the change of the top layer elements.
experimental event topLayerElementsUpdated
Remarques concernant la CDP
Il y avait plusieurs options pour la prise en charge CDP de la couche supérieure. Nous avons également envisagé de créer un événement qui renverrait la liste des éléments de la couche supérieure au lieu d'informer le frontal de l'ajout ou de la suppression d'un élément de la couche supérieure.
Nous pourrions également créer deux événements au lieu de la commande: topLayerElementAdded et topLayerElementRemoved. Dans ce cas, nous recevrons un élément et devrions gérer le tableau des éléments de la couche supérieure sur l'interface.
Actuellement, un événement de frontend appelle la commande getTopLayerElements pour obtenir la liste des éléments mis à jour. Si nous devions envoyer une liste d'éléments ou un élément spécifique ayant causé la modification chaque fois qu'un événement est déclenché, nous pourrions éviter une étape d'appel de la commande.
Toutefois, dans ce cas, l'interface perdrait le contrôle des éléments transférés.
Nous l'avons implémenté de cette manière, car, à notre avis, il est préférable que l'interface décide quand demander les nœuds de couche supérieure. Par exemple, si la couche supérieure est réduite dans l'interface utilisateur ou si l'utilisateur utilise un panneau des outils de développement qui ne contient pas l'arborescence des éléments, il n'est pas nécessaire d'obtenir les nœuds supplémentaires qui pourraient se trouver plus profondément dans l'arborescence.