aboutsummaryrefslogtreecommitdiff
path: root/files/fr/orphaned/tools/add-ons
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/orphaned/tools/add-ons
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/orphaned/tools/add-ons')
-rw-r--r--files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html59
-rw-r--r--files/fr/orphaned/tools/add-ons/dom_inspector/index.html70
-rw-r--r--files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html242
-rw-r--r--files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html96
-rw-r--r--files/fr/orphaned/tools/add-ons/index.html13
5 files changed, 480 insertions, 0 deletions
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html
new file mode 100644
index 0000000000..1ba15a6767
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html
@@ -0,0 +1,59 @@
+---
+title: FAQ de l'Inspecteur DOM
+slug: Inspecteur_DOM/DOM_Inspector_FAQ
+tags:
+ - DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cet outil est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<h2 id="Comment_faire_pour_inspecter_une_pagefenêtre_web">Comment faire pour inspecter une page/fenêtre web ?</h2>
+
+<p>Le menu "File" permet différentes manières d'inspecter un document :</p>
+
+<dl>
+ <dt>Inspect Content Document</dt>
+ <dd>Inspecte un contenu non privilégié présent dans l'onglet choisi.</dd>
+ <dt>Inspect Chrome Document</dt>
+ <dd>Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.</dd>
+ <dt>Inspect a URL</dt>
+ <dd>Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "<strong>Inspect Chrome Document"</strong>.</dd>
+</dl>
+
+<h2 id="Pourquoi_certains_nœuds_dans_le_panneau_DOM_nodes_apparaissent_en_rouge">Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?</h2>
+
+<p>Ces nœuds sont des <a href="/fr/XBL/XBL_1.0_Reference#Anonymous_Content" title="en/XBL/XBL_1.0_Reference#Anonymous_Content">nœuds à contenu anonyme</a>. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.</p>
+
+<h2 id="Comment_faire_pour_cacher_ces_nœuds_anonymes">Comment faire pour cacher ces nœuds anonymes ?</h2>
+
+<p>Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option <strong>"Show Anonymous Content"</strong> dans le menu menu <strong>"View"</strong>.</p>
+
+<h2 id="Il_y_beaucoup_de_nœuds_text_vides_que_je_ne_vois_pas_dans_le_document_d'origine._Que_sont-ils_pourquoi_sont_ils_là_et_comment_s'en_débarrasser">Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?</h2>
+
+<p>Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le {{ Bug(26179) }}.</p>
+
+<p>En revanche, il est possible de cacher ces <a href="/fr/Whitespace_in_the_DOM" title="en/Whitespace_in_the_DOM">nœuds d'espaces</a> dans l'inspecteur en décochant l'option<strong> "Show Whitespace Nodes</strong>" dans le menu <strong>"View"</strong>. Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.</p>
+
+<h2 id="Il_est_parfois_difficile_de_trouver_un_nœud_en_particulier_dans_l'arbre_DOM._Existe-t-il_une_manière_plus_rapide_pour_le_trouver_et_naviguer_dans_l'arbre">Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?</h2>
+
+<p>Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur<strong> "Find Nodes..." </strong>dans le menu <strong>"Edit"</strong> (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les<a href="/fr/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5 Reference/Global_Objects/RegExp"> RegExps JavaScript</a> pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour <a href="/fr/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a> et <a href="/fr/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> en plus de <a href="/fr/XUL/tab" title="en/XUL/tab">tab</a>. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont <em>exactement</em> "tab".</p>
+
+<p>Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu <strong>"Edit"</strong> inclut également une option <strong>"Select Element by Click"</strong>.</p>
+
+<h2 id="Comment_inspecter_les_pseudo-classes_et_les_pseudo-éléments_dans_la_vue_des_règles_CSS">Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?</h2>
+
+<p>L'Inspecteur DOM permet de forcer les pseudo-classes <a href="/fr/CSS/:hover" title="CSS/:hover">:hover</a>, <a href="/fr/CSS/:active" title="en/CSS/:active">:active</a>, et <a href="/fr/CSS/:focus" title="en/CSS/:focus">:focus</a> à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option <strong>Set Pseudo-classes</strong> qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.</p>
+
+<p>Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le <strong>"Style Sheets viewer"</strong> dans le panneau document, puis de la localiser dans le <strong>"CSS Rules viewer"</strong> du panneau <strong>"object".</strong></p>
+
+<div class="originaldocinfo">
+<h2 id="Informations_sur_le_document_d'origine">Informations sur le document d'origine</h2>
+
+<ul>
+ <li>Autheur(s) : Christopher Aillon</li>
+ <li>Dernière mise à jour: November 11, 2003</li>
+ <li>Informations de copyright : Des portions de contenu sont © 1998–2007 par des contributeurs mozilla.org individuels. Le contenu est disponible sous licence Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Détails</a>.</li>
+</ul>
+</div>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html
new file mode 100644
index 0000000000..bb280fc286
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html
@@ -0,0 +1,70 @@
+---
+title: Inspecteur DOM
+slug: Inspecteur_DOM
+tags:
+ - DOM
+ - 'DOM:Tools'
+ - DOM_Inspector
+ - Extensions
+ - 'Extensions:Tools'
+ - Themes
+ - 'Themes:Tools'
+ - Tools
+ - Web Development
+ - 'Web Development:Tools'
+ - XUL
+ - 'XUL:Tools'
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Cet outil est un module complémentaire pour les applications bassées sur XUL tels que Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documention pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<p><strong>L'inspecteur DOM</strong> (également connu sous l'appellation <strong>DOMi</strong>) est un outil de Mozilla servant à inspecter, parcourir et modifier le <a href="/fr/docs/Web/API/Document_Object_Model">modèle objet de document</a> des documents - habituellement des pages Web ou des fenêtres <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.<br>
+ Il est possible de naviguer dans la  hiérarchie DOM en utilisant une fenêtre à deux panneau qui permet une visibilitée du document et de tout les noeuds qu'il contient.</p>
+
+<h2 id="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/fr/DOM_Inspector/Introduction_to_DOM_Inspector" title="Introduction à l'Inspecteur DOM">Introduction à l'Inspecteur DOM</a></dt>
+ <dd>Un tutoriel guidé qui aide à démarrer avec l'Inspecteur DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/DOM_Inspector/DOM_Inspector_FAQ" title="FAQ de l'Inspecteur DOM">FAQ de l'Inspecteur DOM</a></dt>
+ <dd>Questions courantes sur l'Inspecteur DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">Page sur de MozillaZine sur l'Inspecteur DOM</a></dt>
+ <dd>Des informations complémentaires sur l'Inspecteur DOM.</dd>
+ <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">Comment compiler l'Inspecteur DOM.</a></dt>
+ <dd>Article de blog sur comment compiler l'Inspecteur DOM.</dd>
+</dl>
+
+<h2 id="Obtenir_l'Inspecteur_DOM.">Obtenir l'Inspecteur DOM.</h2>
+
+<dl>
+ <dt>Firefox et Thunderbird</dt>
+ <dd>Il faut télécharger et installer <a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/6622" title="L'Inspector DOM">L'Inspector DOM</a> depuis le site web AMO. Les utilisateurs de Thunderbird naviguant dans AMO dans Firefox doivent sauvegarder le lien de l'installation, ou visiter la page <a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/addon/6622" title="Inspecteur DOM pour Thunderbird">Inspecteur DOM pour Thunderbird</a>.</dd>
+</dl>
+
+<dl>
+ <dt>Thunderbird 2</dt>
+ <dd><a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/addon/1806">L'Inspecteur DOM pour Thunderbird 2</a> est disponible dans les <a class="link-https" href="https://addons.mozilla.org/fr/thunderbird/">modules complémentaires de Thunderbird</a>. Il est également possible de compiler Thunderbird vous-même avec les options suivantes :</dd>
+</dl>
+
+<pre>ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+</pre>
+
+<dl>
+ <dt>Mozilla Suite et SeaMonkey</dt>
+ <dd>Selectioner Outils &gt; Development Web &gt; Inspecteut DOM. Vous pouvez installer le panneau latéral via Éditer &gt; Préferences &gt; Avancé &gt; Inspecteur DOM, puis en ouvrant le panneau de l'inspecteur et en visitant un site web.</dd>
+</dl>
+
+<h2 id="Reporter_un_bug_dans_l'Inspecteur_DOM">Reporter un bug dans l'Inspecteur DOM</h2>
+
+<p>Utilisez le "component" <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&amp;product=Other%20Applications&amp;component=DOM%20Inspector">"DOM Inspector" dans Bugzilla</a>.</p>
+
+<p>Pour trouver qui a des connaissances sur <a href="https://hg.mozilla.org/dom-inspector" title="le code de l'Inspecteur DOM">le code de l'Inspecteur DOM</a> ainsi que le pays dans lequel il se trouve, regardez  <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="liste des modules">dans la liste des modules</a>.</p>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html
new file mode 100644
index 0000000000..d817bd62cf
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html
@@ -0,0 +1,242 @@
+---
+title: Interieur de l'Inspecteur DOM
+slug: Inspecteur_DOM/Internals
+translation_of: Tools/Add-ons/DOM_Inspector/Internals
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>L'Inspecteur DOM est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur</a>.</p>
+</div>
+
+<p>Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur <code>inspector.xul</code>. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.</p>
+
+<p><img alt="DOM Inspector primary UI inspecting browser.xul" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>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 <code>inspector.xul</code> et son point d'entrée, puis nous allons ensuite expliquer comment ces autres inspecteurs diffèrent.</p>
+
+<h2 id="L'Inspecteur_DOM_d'un_point_de_vue_haut_niveau">L'Inspecteur DOM d'un point de vue haut niveau</h2>
+
+<p>L'interface utilisateur principale de l'Inspecteur DOM est composée de barres d'outils et d'un "<strong>panelset</strong>." 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.</p>
+
+<p>Le but d'un panneau est de gérer les <strong>"viewers</strong>" 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 <strong>viewer list</strong>, une étiquette affichant le nom du viewer actuel, et un autre bouton permettant d'effectuer des actions spécifiques au viewer.</p>
+
+<p>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 <code><a href="/fr/XUL/browser" title="en/XUL/browser">browser</a></code> 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 <a href="/fr/Setting_up_an_extension_development_environment" title="en/Setting up an extension development environment">profil de développement</a> 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.</p>
+
+<p>Sachant comment les viewers sont écrits, il est maintenant possible de jeter un oeil à l'organisation du code source de l'Inspecteur DOM.d</p>
+
+<h2 id="Organisation_du_code_source">Organisation du code source</h2>
+
+<p>Le contenu du dossier racine de l'Inspecteur DOM devrait ressembler à ceci :</p>
+
+<ul>
+ <li>base/
+ <ul>
+ <li>js/
+ <ul>
+ <li>inspector-cmdline.js</li>
+ <li>Makefile.in</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>build/
+ <ul>
+ <li>install.js</li>
+ <li>Makefile.in</li>
+ </ul>
+ </li>
+ <li>resources/
+ <ul>
+ <li>content/
+ <ul>
+ <li><var>…</var></li>
+ </ul>
+ </li>
+ <li>locale/
+ <ul>
+ <li><var>…</var></li>
+ </ul>
+ </li>
+ <li>skin/
+ <ul>
+ <li><var>…</var></li>
+ </ul>
+ </li>
+ <li>Makefile.in</li>
+ </ul>
+ </li>
+ <li>install.rdf</li>
+ <li>jar.mn</li>
+ <li>Makefile.in</li>
+ <li>makefiles.sh</li>
+</ul>
+
+<p>Pratiquement toute la partie intéressante se trouve dans le dossier resources/content/. Son contenu devrait ressembler à ceci :</p>
+
+<ul>
+ <li>extensions/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>jsutil/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>prefs/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>res/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>tests/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>viewers/
+ <ul>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>browserOverlay.xul</li>
+ <li>commandOverlay.xul</li>
+ <li>editingOverlay.xul</li>
+ <li>Flasher.js</li>
+ <li>hooks.js</li>
+ <li>inspector.css</li>
+ <li>inspector.js</li>
+ <li>inspectorOverlay.xul</li>
+ <li>inspector.xml</li>
+ <li>inspector.xul</li>
+ <li>keysetOverlay.xul</li>
+ <li>object.js</li>
+ <li>object.xul</li>
+ <li>popupOverlay.xul</li>
+ <li>sidebar.js</li>
+ <li>sidebar.xul</li>
+ <li>statusbarOverlay.xul</li>
+ <li>tasksOverlay-cz.xul</li>
+ <li>tasksOverlay-ff.xul</li>
+ <li>tasksOverlay-mobile.xul</li>
+ <li>tasksOverlay-sb.xul</li>
+ <li>tasksOverlay-tb.xul</li>
+ <li>tasksOverlay.xul</li>
+ <li>toolboxOverlay.xul</li>
+ <li>utils.js</li>
+ <li>venkmanOverlay.xul</li>
+ <li>ViewerRegistry.js</li>
+</ul>
+
+<h3 id="Superpositions_(Overlays)">Superpositions (Overlays)</h3>
+
+<p>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.</p>
+
+<h4 id="Overlays_d'intégration_hôte">Overlays d'intégration hôte</h4>
+
+<p>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.</p>
+
+<p>L'Inspecteur DOM supporte explicitement plusieurs applications Mozilla en fournissant des overlays d'intégration hôte. Ces overlays sont :</p>
+
+<ul>
+ <li>browserOverlay.xul</li>
+ <li>tasksOverlay-cz.xul</li>
+ <li>tasksOverlay-ff.xul</li>
+ <li>tasksOverlay-mobile.xul</li>
+ <li>tasksOverlay-sb.xul</li>
+ <li>tasksOverlay-tb.xul</li>
+ <li>tasksOverlay.xul</li>
+ <li>venkmanOverlay.xul</li>
+ <li>prefs/prefsOverlay.xul</li>
+</ul>
+
+<p>Un examen plus approfondi du <a href="/fr/chrome.manifest" title="en/chrome.manifest">manifeste chrome</a> révèlera que l'Inspecteur DOM utilise également des overlays conditionnels dans sa fenêtre principale :</p>
+
+<pre><code>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}</code>
+</pre>
+
+<pre><code>overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}</code>
+</pre>
+
+<p>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).</p>
+
+<p>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.</p>
+
+<h4 id="Overlays_à_structure_partagée">Overlays à structure partagée</h4>
+
+<p>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 <code><a href="/fr/XUL/toolbox" title="en/XUL/toolbox">boite à outils</a></code> contenant un <code><a href="/fr/XUL/menubar" title="en/XUL/menubar">menubar</a></code> vide et une <code><a href="/fr/XUL/toolbar" title="en/XUL/toolbar">barre d'outils</a></code> vide, ainsi qu'une <code><a href="/fr/XUL/vbox" title="en/XUL/vbox">vbox</a></code> vide :</p>
+
+<pre><code>  &lt;toolbox id="tbxInsToolbox"&gt;
+    &lt;menubar id="mbrInspectorMain"/&gt;
+    &lt;toolbar id="tbInspectorPrimary"/&gt;
+  &lt;/toolbox&gt;
+
+  &lt;vbox id="bxInspectorMain" flex="1"/&gt;</code>
+</pre>
+
+<p>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 <code><a href="/fr/XUL/keyset" title="en/XUL/keyset">key</a></code>- et <code><a href="/fr/XUL/commandset" title="en/XUL/commandset">commandset</a></code>, 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.</p>
+
+<p>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.</p>
+
+<p>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 :</p>
+
+<ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/inspector.xul</a>
+
+ <ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/inspectorOverlay.xul</a></li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/toolboxOverlay.xul</a></li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/popupOverlay.xul</a>
+ <ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/editingOverlay.xul</a></li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...pupOverlay.xul</a></li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/viewers/s...pupOverlay.xul</a></li>
+ </ul>
+ </li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/commandOverlay.xul</a>
+ <ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...andOverlay.xul</a></li>
+ </ul>
+ </li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/keysetOverlay.xul</a>
+ <ul>
+ <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...setOverlay.xul</a></li>
+ </ul>
+ </li>
+ <li><a class="external" rel="freelink">chrome://inspector/content/statusbarOverlay.xul</a></li>
+ <li><a class="external" rel="freelink">chrome://global/content/globalOverlay.xul</a></li>
+ </ul>
+ </li>
+</ul>
+
+<p>(Il est à noter que les overlays des sous dossiers du viewer —viewers/dom et viewers/styleRules— sont chargés à la suite des <a href="/fr/Chrome_Registration#overlay" title="/en/chrome.manifest#overlay"><code>directives d'overlay</code></a> dans le manifeste chrome de l'Inspecteur DOM, au lieu d'être simplement importé explicitement en utilisant une instruction de processus <code>xul-overlay</code> dans l'overlay surchargée)</p>
+
+<dl>
+ <dt>inspectorOverlay.xul</dt>
+ <dd>
+ <p>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)</p>
+ </dd>
+ <dt>toolboxOverlay.xul</dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+ <dt>popupOverlay.xul</dt>
+ <dd>
+ <p>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.</p>
+
+ <p>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.</p>
+
+ <p>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.</p>
+ </dd>
+ <dt>commandOverlay.xul</dt>
+ <dd>Les menuitems fournis par popupOverlay.xul qui délèguent à des éléments de <code><a href="/fr/XUL/command" title="en/XUL/command">command</a></code> externe ont leurs commandes définies ici.</dd>
+ <dt>keysetOverlay.xul</dt>
+ <dd>Certains menutimes fournis par popupOverlay.xul ont leurs <code><a href="/fr/XUL/key" title="en/XUL/key">keys</a></code> 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.</dd>
+ <dt>statusbarOverlay.xul</dt>
+ <dd>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.</dd>
+</dl>
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
new file mode 100644
index 0000000000..6e31978549
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
@@ -0,0 +1,96 @@
+---
+title: Introduction à l'Inspecteur DOM
+slug: Inspecteur_DOM/Introduction_to_DOM_Inspector
+tags:
+ - DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>L'Inspecteur DOM est une extension Mozilla qui est accéssible depuis le menu <strong>Tools &gt; Web Development</strong> dans SeaMonkey, ou en sélectionant "DOM Inspector" depuis le menu Developpement web de Firefox ou Thunderbird. L'Inspecteur DOM est un programe standalone qui supporte toutes les applications toolkit, et il est également possible de l'inclure dans votre propre application XUL. L'Inspecteur DOM peut servir à vérifier la qualitée et l'état du <a href="/en/DOM" title="en/DOM">DOM</a>, ou peut être utilisé pour manipuler le DOM à la main si besoin est.</p>
+
+<div class="note"><strong>Note:</strong> Depuis Firefox 3, l'Inspecteur DOM n'est pas inclut par défaut dans Firefox. Il est alors nécessaire de le <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622"> télécharger et de l’installer</a> depuis le site des modules complémentaires de Mozilla. (Note lien mort)</div>
+
+<p>Au lancement de l'Inspecteur DOM, une application à deux panneaux apparait. L'Inspecteur DOM possède une barre d'adresse, et quelques menus comme ceux de Firefox. Dans SeaMonkey, des menus globaux sont présents en plus.</p>
+
+<p><img alt="domi.png" class="default internal" src="/@api/deki/files/4684/=domi.png"></p>
+
+<h2 id="Inspecter_un_Document">Inspecter un Document</h2>
+
+<p>Lors de l'ouverture de l'Inspecteur DOM, il est possible qu'un document associé ait été chargé. Cela dépend de l'application hôte. Si l'Inspecteur n'a pas automatiquement chargé un document ou a chargé un document différent de celui voulu, il existe plusieurs manières de sélectionner le document voulu.</p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecter les Content Documents</h3>
+
+<p>L'option "Inspect Content Document" est accessible depuis le menu "File" et liste tous les content documents actuellement chargés. Dans les navigateurs Firefox et SeaMonkey, il s'agit des pages webs ouverts dans les onglets. Dans Thunderbird et SeaMonkey Mail and News, il s'agit des messages actuellement vus.<img alt="domi-inspect-content-popup.png" class="default internal" src="/@api/deki/files/4690/=domi-inspect-content-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecter les Chrome Documents</h3>
+
+<p>L'option "Inspect Content Document" est accessible depuis le menu "File" , et liste toutes les fenêtres et sous documents chrome. Une fenêtre du navigateur et l'Inspecteur DOM ont de grandes chances d'être déjà affichés dans cette liste. L'inspecteur DOM garde la trace de toutes les fenêtres ouvertes. Ainsi pour inspecter le DOM d'une fenêtre en particulier, il suffit simplement accéder normalement à cette fenêtre puis de sélectionner son titre dans la liste mise à jour dynamiquement.</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4689/=domi-inspect-chrome-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">Inspecter arbitrairement des URLS</h3>
+
+<p>Il est également possible d'inspecter arbitrairement le DOM d'URLS en utilisant l'option "Inspect and URL", ou simplement en utilisant la barre d'adresse de L'inspecteur DOM. Par exemple, il est possible de rentrer dans cette barre l'url <a class="external" href="http://www.mozilla.org" rel="freelink">http://www.mozilla.org</a>, d'appuyer sur entrée puis de voir la structure DOM de la page d'accueil de mozilla.org.</p>
+
+<p>Il est extrêmement déconseillé d'utiliser cette approche pour inspecter des chrome documents. À la place, il faut s'assurer que le document se charge bien par les moyens normaux puis utiliser la méthode "Inspect Chrome Document".</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4693/=domi-inspecting-mozilla.org.png"></p>
+
+<p>Lors d'une inspection de page web via URL, un panneau navigateur affichant la page apparaitra en bas de l'Inspecteur DOM. Cela permet d'utiliser l'Inspecteur DOM sans avoir à utiliser un navigateur séparé et sans avoir à intégrer un navigateur dans votre application. Si le panneau navigateur prend trop place pour votre confort, il est possible de le fermer, mais alors, il sera impossible voir les conséquences de vos changements.</p>
+
+<h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">Utiliser l'Inspecteur DOM</h2>
+
+<p>Une fois que le document voulu est ouvert, il est possible de voir que l'Inspecteur DOM charge le viewer "Document - DOM nodes" panneau document et le viewer "Object - DOM Nodes" dans le panneau objet. Le panneau document affiche alors une vue structurée et hiérarchisée du DOM. En cliquant, dans le panneau document, le panneau Objet est automatiquement mis à jour pour afficher les informations du noeud actuellement sélectionné. Ces viewers sont dits viewers liés et sont un aspect important à avoir en tête lors de l'apprentissage de l'utilisation de l'Inspecteur DOM.</p>
+
+<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">Les viewers de l'Inspecteur DOM</h3>
+
+<p>Il est à noter que les deux viewer précédemment mentionnés ne sont que deux viewers fournis par défaut. Il est possible d'utiliser d'autres viewers, mais pour l'instant, il convient de continuer à les décrire.</p>
+
+<p>Le viewer de noeuds DOM dans le panneau document permet de chercher et de trouver et d'inspecter des noeuds DOM. Un des plus grands avantages que cela apporte au développement web, est qu'il est possible de trouver le markup et les noeuds dans lesquels la partie intéressante se trouve. Une utilisation ordinaire de l'Inspecteur DOM est de trouver le nom et la position d'une icône en particulier utilisée dans l'interface utilisateur. Dans le cas de l'inspection d'un chrome document, la sélection d'un noeud DOM dans le viewer, la version rendue de ce noeud est mise en surbrillance dans l'interface utilisateur elle-même. (Il est à noter qu'il existe des bugs qui empêche de le flasher de l'API de l'Inspecteur DOM de fonctionner correctement sur certaines plateformes) .</p>
+
+<p>Par exemple lors de l'inspection de la fenêtre principale du navigateur et de la sélection d'un noeud dans le viewer (noeud possédant une UI visible), de nombreuses parties de l'interface du navigateur seront mises en surbrillance par une bordure rouge clignotante. Il est possible de rentrer dans cette structure pour trouver des noeuds plus spécifiques tels que l'icône du bouton de la barre recherche.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>Une fois, un noeud sélectionné, il est possible de choisir n'importe lequel des viewers disponibles pour afficher les informations du noeud dans le panneau objet. Ces viewers sont tous disponibles dans la liste déroulante accessible depuis le bouton en haut à gauche du panneau objet :</p>
+
+<p><img alt="domi-object-viewers.png" class="default internal" src="/@api/deki/files/4692/=domi-object-viewers.png"></p>
+
+<p>Dans le cas de la sélection d'une icône, pour trouver le nom du fichier utilisé, il est nécessaire de sélectionner le viewer "CSS Rules" et de chercher parmi les règles CSS, la règle qui définit l'image.</p>
+
+<p>La liste des viewers disponible donne une idée des possibilités d'extensibilité de l'Inspecteur DOM. Les descriptions suivantes fournissent une vue d'ensemble des viewers disponibles :</p>
+
+<p>Le viewer DOM Node affiche les informations du noeud sélectionné. Il permet également de modifier les attributs ou le contenu textuel du noeud.</p>
+
+<p>Le viewer Box Model affiche des informations variées sur les éléments XUL et HTML, incluant le placement et la taille de ces éléments.</p>
+
+<p>Le viewer XBL Bindings liste tous les bindings XBL attachés aux éléments.</p>
+
+<p>Le viewer CSS Rules affiche les règles CSS appliquées au noeud sélectionné. Lors d'une utilisation conjointe avec le viewer Style Sheets, ce viewer liste toutes les règles reconnues de la style sheet sélectionné dans l'ordre. Les propriétés CSS peuvent être modifiées. Les règles s'appliquant aux pseudo-éléments n'apparaissent pas.</p>
+
+<p>Le viewer JavaScript Object affiche un arbre hiérarchisé du sujet du panneau objet. Ce viewer permet également d'évaluer du JavaScript en sélectionnant l'option appropriée dans le menu contextuel.</p>
+
+<h3 id="Actions_de_base_du_viewer_DOM_Nodes">Actions de base du viewer DOM Nodes</h3>
+
+<h4 id="Sélectioner_des_éléments_au_clic">Sélectioner des éléments au clic</h4>
+
+<p>Une autre fonctionnalité interactive de l'Inspecteur DOm est que lorsque l'Inspecteur DOM est ouvert et que cette fonctionnalité a été activée en choisissant <strong style="font-weight: bold;">Edit</strong><strong> &gt; Select Element by Click</strong> ou en cliquant sur l'icône en forme de loupe dans le coin en haut à gauche de l'Inspecteur DOM, il est alors possible de cliquer n'importe ou dans la page et l'élément cliqué aura son noeud DOM correspondant dans L'Inspecteur sélectionné.</p>
+
+<h4 id="Chercher_des_noeuds_dans_le_DOM">Chercher des noeuds dans le DOM</h4>
+
+<p>Une autre façon d'inspecter le DOM est de chercher un élément particulier via son ID, sa class ou un de ses attributs. Cliquer sur <strong>Edit &gt; Find Nodes...</strong> ou utiliser le raccourci <code>Ctrl + F</code>, affichera une pop-up qui permet de rechercher de différentes manières.</p>
+
+<p><img alt="domi-find-appcontent.png" class="default internal" src="/@api/deki/files/4687/=domi-find-appcontent.png"></p>
+
+<h4 id="Mettre_à_jour_le_DOM_dynamiquement">Mettre à jour le DOM dynamiquement</h4>
+
+<p>Chaque noeud peut être édité, et le DOM sera mis à jour automatiquement. Les viewers dans le panneau objet permettent également de modifier le DOM. La plupart des modifications se font via les options du menu contextuel.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>Cette interactivité permet par exemple de grossir/réduire la taille des éléments, changer des icônes, et plein d'autres choses. Tout cela sans avoir besoin de modifier les fichiers sources.</p>
+
+<p>Aimer l'Inspecteur</p>
+
+<p>L'Inspecteur DOM peut prendre du temps à prend en main, mais une fois maitrisé, vous viendrez peut être à penser que les fonctionnalités de l'Inspecteur sont exactement ce qui manquait au développement d'applications web. L'Inspecteur DOM ne fait pas que présenter des informations sur les pages de manière claire et structurée, il donner également la possibilité de chercher dans cette structure et de la mettre à jour dynamiquement. Utiliser l'Inspecteur DOM avec d'autres outils Mozilla comme<a class="external" href="http://www.mozilla.org/projects/venkman"> Venkman</a>, le JavaScript debugger et le DOM Inspector peut véritablement vous donner une vue <em>complète</em> de n'importe quelle page web ou application basée sur une interface DOM</p>
diff --git a/files/fr/orphaned/tools/add-ons/index.html b/files/fr/orphaned/tools/add-ons/index.html
new file mode 100644
index 0000000000..77d2801897
--- /dev/null
+++ b/files/fr/orphaned/tools/add-ons/index.html
@@ -0,0 +1,13 @@
+---
+title: Modules complémentaires
+slug: Outils/Add-ons
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Il s'agit des outils de développement qui ne sont pas directement intégrés à Firefox, mais disponibles en tant que module complémentaire.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/fr/firefox/addon/websocket-monitor/">WebSocket Monitor </a> {{obsolete_inline}}</dt>
+ <dd>Permet d'examiner les données échangées via une connexion WebSocket. Ce module complémentaire n'est plus disponible car il nécessite des versions de Firefox trop anciennes. <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff">WebSocket Sniffer</a> est une alternative, il n'est pas aussi détaillé mais peut aider.</dd>
+</dl>