Merge pull request #43 from fiji-flo/unslugging-pt-pt

Unslugging pt pt

1 files changed, 63 insertions, 0 deletions

diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html
new file mode 100644
index 0000000000..ffd1b942af
--- /dev/null
+++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html
@@ -0,0 +1,63 @@
+---
+title: Painéis  das ferramentas de desenvolvimento
+slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
+tags:
+  - Extensões da Web
+  - Guía
+  - Interface do Utilizador
+  - Principiante
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
+original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="note">
+<p>Esta funcionalidade está disponível desde o Firefox 54.</p>
+</div>
+
+<p>Quando uma extensão fornece ferramentas que são úteis para os programadores, é possível adicionar uma IU para as mesmas para as ferramentas de desenvolvimento do navegador como um novo painel.</p>
+
+<p><img alt='Simple example showing the addition of "My panel" to the Developer Tools tabs.' src="https://mdn.mozillademos.org/files/15035/devtools_panel_example.png" style="height: 352px; width: 1192px;"></p>
+
+<h2 id="Especificar_um_painel_de_ferramentas_de_desenvolvimento">Especificar um painel de ferramentas de desenvolvimento</h2>
+
+<p>Um painél das ferramentas de desenvovlimento é adicionado utilizando a API <code><a href="/pt-PT/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code>, que precisa de ser executada a partir de uma página de <em>devtools</em> especial.</p>
+
+<p>Adicione a páginas de devtools, incluindo a chave <code><a href="/pt-PT/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> na extensão de <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> e forneça a localização do ficheiro HTML da página na extensão:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre>
+
+<p>From the devtools page, call a script that will add the devtools panel:</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;script src="devtools.js"&gt;&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>In the script, create the devtools panel by specifying the panel's title, icon, and HTML file that provides the panel's content:</p>
+
+<pre class="brush: js">function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",           // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html"          // content
+).then((newPanel) =&gt; {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});</pre>
+
+<p>The extension can now run code in the inspected window using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> or by injecting a content script via the background script by passing a message. You can find more details on how to do this in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools.</a></p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use devtools panels:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> use devtools panels:</li>
+</ul>