在Firefox非疊加擴展中，如何向瀏覽器工具欄圖標添加文本？

Question

如何將文本添加到您的加載項的瀏覽器工具欄按鈕？

我感興趣的東西完全一樣，下載管理器按鈕如何顯示上方的進度條「2h」的文字，當兩個小時剩餘下載所需的文件（S）。

甚至有可能做到這一點，而不訴諸於包括文字在內的大量預製圖像？

Answer 1

當你有一個已知的工作示例時，一種方法來弄清楚如何在DOM中實現這種類型的東西（整個瀏覽器窗口是一個DOM）是安裝add-onDOM Inspector並用它來調查內容的DOM看起來像。你可能也想要，Element Inspector加載項，這是一個非常有用的添加到DOM Inspector（shift-right-click打開DOM Inspector到單擊的元素）。您也許會發現Stacked Inspector有幫助。

在這種情況下，下載按鈕從<toolbarbutton/>開始。具體做法是：

<toolbarbutton id="downloads-button" 
    class="toolbarbutton-1 chromeclass-toolbar-additional" 
    key="key_openDownloads" oncommand="DownloadsIndicatorView.onCommand(event);" 
    ondrop="DownloadsIndicatorView.onDrop(event);" 
    ondragover="DownloadsIndicatorView.onDragOver(event);" 
    ondragenter="DownloadsIndicatorView.onDragOver(event);" 
    label="Downloads" removable="true" cui-areatype="toolbar" 
    tooltip="dynamic-shortcut-tooltip"/> 

一旦下載開始結構被改變爲：

<toolbarbutton id="downloads-button" 
    class="toolbarbutton-1 chromeclass-toolbar-additional" 
    key="key_openDownloads" oncommand="DownloadsIndicatorView.onCommand(event);" 
    ondrop="DownloadsIndicatorView.onDrop(event);" 
    ondragover="DownloadsIndicatorView.onDragOver(event);" 
    ondragenter="DownloadsIndicatorView.onDragOver(event);" 
    label="Downloads" removable="true" cui-areatype="toolbar" 
    tooltip="dynamic-shortcut-tooltip" 
    indicator="true" progress="true" counter="true"> 
     <stack id="downloads-indicator-anchor" class="toolbarbutton-icon"> 
      <vbox id="downloads-indicator-progress-area" pack="center"> 
       <description id="downloads-indicator-counter" value="6h"/> 
       <progressmeter id="downloads-indicator-progress" class="plain" 
        min="0" max="100" value="3.484329371737533"/> 
      </vbox> 
      <vbox id="downloads-indicator-icon"/> 
     </stack> 
</toolbarbutton> 

上述結構變化被包含在chrome://browser/content/downloads/indicatorOverlay.xul其上裝載作爲覆蓋到主瀏覽器文檔上。

控制指標的代碼是chrome://browser/content/downloads/indicator.js。實際加載覆蓋圖的代碼是ensureOverlayLoaded()，其格式爲chrome://browser/content/downloads/downloads.js。

使不使用XUL覆蓋
既然你是想這是一個覆蓋擴展的變化，你可能不希望使用一個XUL Overlay。因此，您需要遍歷按鈕所在的所有位置，並對每個結構進行更改。但是，此時您可能正在處理通過CustomizableUI添加的按鈕。通過CustomizableUI，您不會通過打開的窗口運行，而是通過它提供給您的節點運行。有必要這樣做，因爲用戶許多人已將自己感興趣的按鈕放在自定義托盤中，而不是放在工具欄中。如果是這種情況，試圖通過使用瀏覽器窗口document找到document.getElementById()的按鈕將失敗。通過這些使用CustomizableUI界面運行，你可以使用類似以下內容：

function loadUi() { 
    if (window === null || typeof window !== "object") { 
     //If you do not already have a window reference, you need to obtain one: 
     // Add a "/" to un-comment the code appropriate for your add-on type. 
     /* Add-on SDK: 
     var window = require('sdk/window/utils').getMostRecentBrowserWindow(); 
     //*/ 
     /* Overlay and bootstrap (from almost any context/scope): 
     var window=Components.classes["@mozilla.org/appshell/window-mediator;1"] 
          .getService(Components.interfaces.nsIWindowMediator) 
          .getMostRecentWindow("navigator:browser"); 
     //*/ 
    } 

    forEachCustomizableUiById("downloads-button", loadIntoButton, window); 
} 

function forEachCustomizableUiById(buttonId ,func, myWindow) { 
    let groupWidgetWrap = myWindow.CustomizableUI.getWidget(buttonId); 
    groupWidgetWrap.instances.forEach(function(perWindowUiWidget) { 
     //For each button do the load task. 
     func(perWindowUiWidget.node); 
    }); 
} 

function loadIntoButton(buttonElement) { 
    //Make whatever changes to the button you want to here. 
    //You may need to save some information about the original state 
    // of the button. 
} 

顯然，卸載只是裝載的反向：

function unloadUi() { 
    if (window === null || typeof window !== "object") { 
     //If you do not already have a window reference, you need to obtain one: 
     // Add a "/" to un-comment the code appropriate for your add-on type. 
     /* Add-on SDK: 
     var window = require('sdk/window/utils').getMostRecentBrowserWindow(); 
     //*/ 
     /* Overlay and bootstrap (from almost any context/scope): 
     var window=Components.classes["@mozilla.org/appshell/window-mediator;1"] 
          .getService(Components.interfaces.nsIWindowMediator) 
          .getMostRecentWindow("navigator:browser"); 
     //*/ 
    } 

    forEachCustomizableUiById("downloads-button", unloadFromButton, window); 
} 

function unloadFromButton(buttonElement) { 
    //Return the button to its original state 
} 

在改變按鈕的具體實例其下載狀態你可能可以做到以下幾點：

function loadIntoButton(buttonElement) { 
    buttonElement.setAttribute("indicator","true"); 
    buttonElement.setAttribute("progress","true"); 
    buttonElement.setAttribute("counter","true"); 
    let additional = '' 
     + '<stack id="downloads-indicator-anchor" class="toolbarbutton-icon">' 
     + ' <vbox id="downloads-indicator-progress-area" pack="center">' 
     + '  <description id="downloads-indicator-counter" value="6h"/>' 
     + '  <progressmeter id="downloads-indicator-progress" class="plain"' 
     + '   min="0" max="100" value="3.484329371737533"/>' 
     + ' </vbox>' 
     + ' <vbox id="downloads-indicator-icon"/>' 
     + '</stack>'; 
    buttonElement.insertAdjacentHTML("beforeend",additional); 
} 

function unloadFromButton(buttonElement) { 
    buttonElement.removeAttribute("indicator","true"); 
    buttonElement.removeAttribute("progress","true"); 
    buttonElement.removeAttribute("counter","true"); 
    buttonElement.removeChild(buttonElement.getElementsByTagName("stack")[0]); 
} 

我還沒有機會測試上面的代碼，所以可能會有一些問題UE的。

從頭開始創建一個複雜CustomizableUI部件：
如果你是想從一開始就創建更復雜的東西，那麼你應該使用CustomizableUI並創建一個custom部件。該CustomizableUI.jsm page at MDN有一個"simple" example of a complex widget是：

CustomizableUI.createWidget({ 
    //Must run createWidget before windowListener.register because the register 
    // function needs the button added first. 
     id: 'navigator-throbber', 
     type: 'custom', 
     defaultArea: CustomizableUI.AREA_NAVBAR, 
     onBuild: function(aDocument) { 
      var toolbaritem = aDocument.createElementNS(
       'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 
       'toolbaritem'); 
      var image = aDocument.createElementNS(
       'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 
       'image'); 
      var props = { 
       id: 'navigator-throbber', 
       title: 'Activity Indicator', 
       align: 'center', 
       pack: 'center', 
       mousethrough: 'always', 
       removable: 'true', 
       sdkstylewidget: 'true', 
       overflows: false 
      }; 
      for (var p in props) { 
       toolbaritem.setAttribute(p, props[p]); 
      } 

      toolbaritem.appendChild(image); 
      return toolbaritem; 
     } 
    }); 

作爲一個更復雜的例子，Noitidart提供了瀏覽器使用的用於它的自定義插件的代碼的總結的變焦控制和編輯控制面板英寸它可在此要點：https://gist.github.com/Noitidart/10902477

自定義CSS和XML綁定Firefox的下載按鈕： 要充分實現自己的下載按鈕，你還需要的版本CSS和由Mozilla使用的自定義XML綁定。

CSS的下載按鈕（從chrome://browser/content/browser.css：

#downloads-button { 
    -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton"); 
} 

/*** Visibility of downloads indicator controls ***/ 

/* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel, 
    and just show the icon. This is a hack to side-step very weird layout bugs that 
    seem to be caused by the indicator stack interacting with the menu panel. */ 
#downloads-button[indicator]:not([cui-areatype="menu-panel"]) > image.toolbarbutton-icon, 
#downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor { 
    display: none; 
} 

toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > image.toolbarbutton-icon { 
    display: -moz-box; 
} 

toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon { 
    display: none; 
} 

#downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon, 
#downloads-button:not(:-moz-any([progress], [counter], [paused])) 
                #downloads-indicator-progress-area 
{ 
    visibility: hidden; 
} 

/* Hacks for toolbar full and text modes, until bug 573329 removes them */ 

toolbar[mode="text"] > #downloads-button { 
    display: -moz-box; 
    -moz-box-orient: vertical; 
    -moz-box-pack: center; 
} 

toolbar[mode="text"] > #downloads-button > .toolbarbutton-text { 
    -moz-box-ordinal-group: 1; 
} 

toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon { 
    display: -moz-box; 
    -moz-box-ordinal-group: 2; 
    visibility: collapse; 
} 

自定義下載按鈕XML綁定（從chrome://browser/content/downloads/download.xml）：

<?xml version="1.0"?> 
<!-- -*- Mode: HTML; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- --> 
<!-- vim: set ts=2 et sw=2 tw=80: --> 

<!-- This Source Code Form is subject to the terms of the Mozilla Public 
    - License, v. 2.0. If a copy of the MPL was not distributed with this file, 
    - You can obtain one at http://mozilla.org/MPL/2.0/. --> 

<!DOCTYPE bindings SYSTEM "chrome://browser/locale/downloads/downloads.dtd"> 

<bindings id="downloadBindings" 
      xmlns="http://www.mozilla.org/xbl" 
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
      xmlns:xbl="http://www.mozilla.org/xbl"> 

    <binding id="download" 
      extends="chrome://global/content/bindings/richlistbox.xml#richlistitem"> 
    <content orient="horizontal" 
      align="center" 
      onclick="DownloadsView.onDownloadClick(event);"> 
     <xul:image class="downloadTypeIcon" 
       validate="always" 
       xbl:inherits="src=image"/> 
     <xul:image class="downloadTypeIcon blockedIcon"/> 
     <xul:vbox pack="center" 
       flex="1" 
       class="downloadContainer" 
       style="width: &downloadDetails.width;"> 
     <!-- We're letting localizers put a min-width in here primarily 
      because of the downloads summary at the bottom of the list of 
      download items. An element in the summary has the same min-width 
      on a description, and we don't want the panel to change size if the 
      summary isn't being displayed, so we ensure that items share the 
      same minimum width. 
      --> 
     <xul:description class="downloadTarget" 
         crop="center" 
         style="min-width: &downloadsSummary.minWidth2;" 
         xbl:inherits="value=target,tooltiptext=target"/> 
     <xul:progressmeter anonid="progressmeter" 
          class="downloadProgress" 
          min="0" 
          max="100" 
          xbl:inherits="mode=progressmode,value=progress"/> 
     <xul:description class="downloadDetails" 
         crop="end" 
         xbl:inherits="value=status,tooltiptext=statusTip"/> 
     </xul:vbox> 
     <xul:stack> 
     <xul:button class="downloadButton downloadCancel" 
        tooltiptext="&cmd.cancel.label;" 
        oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_cancel');"/> 
     <xul:button class="downloadButton downloadRetry" 
        tooltiptext="&cmd.retry.label;" 
        oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_retry');"/> 
     <xul:button class="downloadButton downloadShow" 
        tooltiptext="&cmd.show.label;" 
        oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_show');"/> 
     </xul:stack> 
    </content> 
    </binding> 

    <binding id="download-full-ui" 
      extends="chrome://global/content/bindings/richlistbox.xml#richlistitem"> 
    <resources> 
     <stylesheet src="chrome://browser/content/downloads/download.css"/> 
    </resources> 

    <content orient="horizontal" align="center"> 
     <xul:image class="downloadTypeIcon" 
       validate="always" 
       xbl:inherits="src=image"/> 
     <xul:image class="downloadTypeIcon blockedIcon"/> 
     <xul:vbox pack="center" flex="1"> 
     <xul:description class="downloadTarget" 
         crop="center" 
         xbl:inherits="value=displayName,tooltiptext=displayName"/> 
     <xul:progressmeter anonid="progressmeter" 
          class="downloadProgress" 
          min="0" 
          max="100" 
          xbl:inherits="mode=progressmode,value=progress"/> 
     <xul:description class="downloadDetails" 
         style="width: &downloadDetails.width;" 
         crop="end" 
         xbl:inherits="value=status,tooltiptext=statusTip"/> 
     </xul:vbox> 

     <xul:button class="downloadButton downloadCancel" 
        tooltiptext="&cmd.cancel.label;" 
        oncommand="goDoCommand('downloadsCmd_cancel')"/> 
     <xul:button class="downloadButton downloadRetry" 
        tooltiptext="&cmd.retry.label;" 
        oncommand="goDoCommand('downloadsCmd_retry')"/> 
     <xul:button class="downloadButton downloadShow" 
        tooltiptext="&cmd.show.label;" 
        oncommand="goDoCommand('downloadsCmd_show')"/> 

    </content> 
    </binding> 

    <binding id="download-toolbarbutton" 
      extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton"> 
    <content> 
     <children /> 
     <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/> 
     <xul:label class="toolbarbutton-text" crop="right" flex="1" 
       xbl:inherits="value=label,accesskey,crop,wrap"/> 
     <xul:label class="toolbarbutton-multiline-text" flex="1" 
       xbl:inherits="xbl:text=label,accesskey,wrap"/> 
    </content> 
    </binding> 
</bindings>