Interieur de l'Inspecteur DOM

Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur inspector.xul. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.

En dehors de l'interface principale de l'Inspecteur DOM, il y a quelques autres inspecteurs haut-niveau qui diffèrent légèrement (l'inspecteur d'objets et le panneau latéral de l'Inspecteur DOM utilisé dans SeaMonkey). Nous allons d'abord nous concentrer sur inspector.xul et son point d'entrée, puis nous allons ensuite expliquer comment ces autres inspecteurs diffèrent.

L'Inspecteur DOM d'un point de vue haut niveau

L'interface utilisateur principale de l'Inspecteur DOM est composée de barres d'outils et d'un "panelset." Le panelset contient deux panneaux. Un qui réagit aux changements occurrents dans le document inspecté. Et un qui réagit aux changements dans la sélection du premier panneau. Il s'agit respectivement du panneau document et du panneau objet.

Le but d'un panneau est de gérer les "viewers" disponibles. En haut de chaque panneau, se trouve une barre d'outils qui contient :un bouton menu permettant de choisir quel viewer afficher parmi la viewer list, une étiquette affichant le nom du viewer actuel, et un autre bouton permettant d'effectuer des actions spécifiques au viewer.

Les viewers sont chargés dynamiquement. Lorsqu'un panneau reçoit l'ordre de changer de viewer, l'ancien viewer est détruit et le nouveau est chargé à la place. Ainsi le panelset et les panneaux fonctionnent comme des frameset et frames. Cette comparaison s'avère très proche de la réalité, car chaque panneau contient en réalité un browser anonyme, et, car chaque viewer existe dans un document séparé chargé dans le navigateur. Cette séparation permet aux viewers d'être indépendants, aec un XUL de viewer défini dans son propre document et chargé dans sa propre portée, cela sans crainte de collisions entre le XUL, le CSS ou le JS. Une autre conséquence est qu’en utilisant un profil de développement correctement configuré, alors la plupart des changements développés sont visibles uniquement en changeant de viewer puis en revenant sur le viewer précédant.

Sachant comment les viewers sont écrits, il est maintenant possible de jeter un oeil à l'organisation du code source de l'Inspecteur DOM.d

Organisation du code source

Le contenu du dossier racine de l'Inspecteur DOM devrait ressembler à ceci :

• base/
  • js/
    • inspector-cmdline.js
    • Makefile.in
• build/
  • install.js
  • Makefile.in
• resources/
  • content/
    • …
  • locale/
    • …
  • skin/
    • …
  • Makefile.in
• install.rdf
• jar.mn
• Makefile.in
• makefiles.sh

Pratiquement toute la partie intéressante se trouve dans le dossier resources/content/. Son contenu devrait ressembler à ceci :

• extensions/
  • …
• jsutil/
  • …
• prefs/
  • …
• res/
  • …
• tests/
  • …
• viewers/
  • …
• browserOverlay.xul
• commandOverlay.xul
• editingOverlay.xul
• Flasher.js
• hooks.js
• inspector.css
• inspector.js
• inspectorOverlay.xul
• inspector.xml
• inspector.xul
• keysetOverlay.xul
• object.js
• object.xul
• popupOverlay.xul
• sidebar.js
• sidebar.xul
• statusbarOverlay.xul
• tasksOverlay-cz.xul
• tasksOverlay-ff.xul
• tasksOverlay-mobile.xul
• tasksOverlay-sb.xul
• tasksOverlay-tb.xul
• tasksOverlay.xul
• toolboxOverlay.xul
• utils.js
• venkmanOverlay.xul
• ViewerRegistry.js

Superpositions (Overlays)

Il y a de nombreux overlays. Certains overlays peuvent être décrits comme des overlays d'intégration hôte, et d'autres comme des overlays à structure partagée.

Overlays d'intégration hôte

L'Inspecteur DOM est une extension à utilité générique, adaptée à une utilisation avec n'importe quel toolkit d'application hôte de Mozilla. Afin que l'Inspecteur DOM soit utile avec son application hôte, il doit obligatoirement y avoir un moyen de lancer l'Inspecteur DOM depuis l'intérieur de l'application. Soit l'application fournit ces moyens eux-mêmes (généralement en intégrant l'Inspecteur DOM dans l'application), soit l'Inspecteur DOM doit explicitement supporter l'application en ayant ses propres options de menus et/ou raccourcis clavier avec des overlays d'intégration hôte.

L'Inspecteur DOM supporte explicitement plusieurs applications Mozilla en fournissant des overlays d'intégration hôte. Ces overlays sont :

• browserOverlay.xul
• tasksOverlay-cz.xul
• tasksOverlay-ff.xul
• tasksOverlay-mobile.xul
• tasksOverlay-sb.xul
• tasksOverlay-tb.xul
• tasksOverlay.xul
• venkmanOverlay.xul
• prefs/prefsOverlay.xul

Un examen plus approfondi du manifeste chrome révèlera que l'Inspecteur DOM utilise également des overlays conditionnels dans sa fenêtre principale :

overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}

overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}

Ces overlays fournis par l'hôte permettent à l'Inspecteur DOM d'adopter une apparence et des sensations similaires à l'application hôte. (Au-dessus, respectivement SeaMonkey et Firefox).

Il y a plusieurs overlays dans le dossier "resources/contents/" qui ne font pas partie de cette catégorie d'overlays d'intégration hôte. En effet, l'Inspecteur DOM utilise également des overlays partagés pour construire sa propre interface utilisateur.

Overlays à structure partagée

Jetter un oeil au contenu du fichier inspector.xul de l'interface utilisateur principale de l'Inspecteur DOM révélera qu'il ne contient quasiment aucun élément visible. Au moment présent, il a une boite à outils contenant un menubar vide et une barre d'outils vide, ainsi qu'une vbox vide :

  <toolbox id="tbxInsToolbox">
    <menubar id="mbrInspectorMain"/>
    <toolbar id="tbInspectorPrimary"/>
  </toolbox>

  <vbox id="bxInspectorMain" flex="1"/>

Il n'y a aucun menu, barres d'outils, etc. définies ici. Même la plupart des éléments qui ne sont pas visibles tels que key- et commandset, ne sont pas définis dans inspector.xul. Ils sont tirés d'une série d'overlays, afin que le XUL définissant l'interface de l’Inspecteur DOM puisse être organisé en unités discrètes. inspector.xul en lui-même n'est qu'un squelette définissant la structure et la disposition basique de la fenêtre principale de l'Inspecteur DOM, laissant ainsi la plupart de son contenu être ajouté par les overlays.

En utilisant des overlays modulaires permet également au XUL commun d'être partagé à travers les différents documents qui composent l'interface de l'Inspectreur DOM, même si toutes les overlays ne sont pas partagées par plusieurs utilisateurs. Il existe des overlays sur mesure uniquement pour des organisations.

Dans certains cas, les overlays sont surchargées par d'autres overlays. Si nous imaginons une structure d'arbre obtenue en connectant les overlays en tant qu'enfants des fichiers qu'elles "overlayent" tout en ignorant les overlays utilisées pour l'intégration hôte, nous pouvons alors visualiser l'arbre d'overlays pour un fichier donné. Voici l'arbre d'overlay étendu ne prenant pas en compte les overlays d'hôte pour inspector.xul :

• chrome://inspector/content/inspector.xul
  • chrome://inspector/content/inspectorOverlay.xul
  • chrome://inspector/content/toolboxOverlay.xul
  • chrome://inspector/content/popupOverlay.xul
    • chrome://inspector/content/editingOverlay.xul
    • chrome://inspector/content/viewers/d...pupOverlay.xul
    • chrome://inspector/content/viewers/s...pupOverlay.xul
  • chrome://inspector/content/commandOverlay.xul
    • chrome://inspector/content/viewers/d...andOverlay.xul
  • chrome://inspector/content/keysetOverlay.xul
    • chrome://inspector/content/viewers/d...setOverlay.xul
  • chrome://inspector/content/statusbarOverlay.xul
  • chrome://global/content/globalOverlay.xul

(Il est à noter que les overlays des sous dossiers du viewer —viewers/dom et viewers/styleRules— sont chargés à la suite des directives d'overlay dans le manifeste chrome de l'Inspecteur DOM, au lieu d'être simplement importé explicitement en utilisant une instruction de processus xul-overlay dans l'overlay surchargée)

inspectorOverlay.xul

Ce fichier importe les scripts supérieurs, dont l'Inspecteur à besoin (cela inclut les dépendances). De plus, il définit le contenu du corps principal de la fenêtre de l'Inspecteur DOM c'est à dire : le panelset, les viewers documents et objets et le document du panneau du navigateur. (Le panneau du navigateur n'est pas un panneau viewer dans le sens ou les viewer document et objets eux le sont. C'est-à-dire les sortes de panneaux définis précédemment en relation avec le panelset. "panneau" est ici utilisé en fonction du panneau du navigateur dans un sens large pour décrire la mixture d'interface générique)

toolboxOverlay.xul

Cette overlay, remplit la boite à outils de l'Inspecteur, incluant les boutons de la barre d'outils et la "location bar" avec son bouton "inspect". toolboxOverlay.xul définit également la structure de menubar, sans pour autant définir le contenu des menus eux-mêmes.

popupOverlay.xul

Cette iverlay définit la plupart de la structure statique des menus dans le menubar, avec quelques exceptions. Pour des raisons évidentes, le contenu des menus dynamiques n’est pas défini ici. Les menus dynamiques comprennent les pop-up du menu Inspecter ("Inspect Content Document" et "Inspect Chrome Document") du menu fichier, et les menus "Document Viewer" et "Object Viewer" du menu View. La préférence menuitems dans le menu View qui affecte uniquement le viewer de noeuds DOM ("Blink Selected Element", etc..) sont ajouté par l'overlay de pop-up de ce viewer (resources/content/viewers/dom/popupOverlay.xul). C'est également vrai pour les menuitems Find et le menuitem "Select Element By Click" dans le menu Edit, car aucun viewer à part le viewer de noeuds DOM ne supporte ces features.

Les autres objets du menu Edit sont également utilisés dans plusieurs menus contextuels de viewers. Pour cette raison, seuls les id des menuitems sont référencés ici, et les difinitions complètes sont importées depuis editingOverlay.xul. Les viewers qui incluent un ou plus de ces menuitems dans leu contexte suivent la même pratique.

Le tooltip utilisé pour les menus Inspect—Celui utilisé pour afficher le titre d'un document et son URI pour un menuitme donné--est également défini ici.

commandOverlay.xul

Les menuitems fournis par popupOverlay.xul qui délèguent à des éléments de command externe ont leurs commandes définies ici.

keysetOverlay.xul

Certains menutimes fournis par popupOverlay.xul ont leurs keys définis ici. Au moment présent, toutes les clés qui correspondent aux objets du menu Edit sont dans editingOverlay sans aucune bonne raison.

statusbarOverlay.xul

Ce fichier définit le contenu de la barre de statuts de l'Inspecteur DOM. L'Inspecteur DOM n'ayant pas de barre de statut, ce fichier est complètement inutile.