B2G/gecko/browser/devtools/highlighter/highlighter.jsm
/**
   * Build the node Infobar.
   *
   * <box id="highlighter-nodeinfobar-container">
   *   <box id="Highlighter-nodeinfobar-arrow-top"/>
   *   <hbox id="highlighter-nodeinfobar">
   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-inspectbutton"/>
   *     <hbox id="highlighter-nodeinfobar-text">
   *       <xhtml:span id="highlighter-nodeinfobar-tagname"/>
   *       <xhtml:span id="highlighter-nodeinfobar-id"/>
   *       <xhtml:span id="highlighter-nodeinfobar-classes"/>
   *       <xhtml:span id="highlighter-nodeinfobar-pseudo-classes"/>
   *     </hbox>
   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-menu"/>
   *   </hbox>
   *   <box id="Highlighter-nodeinfobar-arrow-bottom"/>
   * </box>
   *
   * @param nsIDOMElement aParent
   *        The container of the infobar.
   */
Build the node Infobar.

@param nsIDOMElement aParent
The container of the infobar.
Build the node Infobar . @param nsIDOMElement aParent The container of the infobar .
function Highlighter_buildInfobar(aParent)
  {
    let container = this.chromeDoc.createElement("box");
    container.id = "highlighter-nodeinfobar-container";
    container.setAttribute("position", "top");
    container.setAttribute("disabled", "true");
    let nodeInfobar = this.chromeDoc.createElement("hbox");
    nodeInfobar.id = "highlighter-nodeinfobar";
    nodeInfobar.addEventListener("mousedown", function(aEvent) {
      this.emitEvent("nodeselected");
    }.bind(this), true);
    let arrowBoxTop = this.chromeDoc.createElement("box");
    arrowBoxTop.className = "highlighter-nodeinfobar-arrow";
    arrowBoxTop.id = "highlighter-nodeinfobar-arrow-top";
    let arrowBoxBottom = this.chromeDoc.createElement("box");
    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
    arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
    let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    tagNameLabel.id = "highlighter-nodeinfobar-tagname";
    let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    idLabel.id = "highlighter-nodeinfobar-id";
    let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    classesBox.id = "highlighter-nodeinfobar-classes";
    let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    pseudoClassesBox.id = "highlighter-nodeinfobar-pseudo-classes";
    pseudoClassesBox.textContent = "&nbsp;";
    let inspect = this.chromeDoc.createElement("toolbarbutton");
    inspect.id = "highlighter-nodeinfobar-inspectbutton";
    inspect.className = "highlighter-nodeinfobar-button"
    let toolbarInspectButton =
      this.chromeDoc.getElementById("inspector-inspect-toolbutton");
    inspect.setAttribute("tooltiptext",
                         toolbarInspectButton.getAttribute("tooltiptext"));
    inspect.setAttribute("command", "Inspector:Inspect");
    let nodemenu = this.chromeDoc.createElement("toolbarbutton");
    nodemenu.setAttribute("type", "menu");
    nodemenu.id = "highlighter-nodeinfobar-menu";
    nodemenu.className = "highlighter-nodeinfobar-button"
    nodemenu.setAttribute("tooltiptext",
                          this.strings.GetStringFromName("nodeMenu.tooltiptext"));
    let menu = this.chromeDoc.getElementById("inspector-node-popup");
    menu = menu.cloneNode(true);
    menu.id = "highlighter-node-menu";
    let separator = this.chromeDoc.createElement("menuseparator");
    menu.appendChild(separator);
    menu.addEventListener("popupshowing", function() {
      let items = menu.getElementsByClassName("highlighter-pseudo-class-menuitem");
      let i = items.length;
      while (i--) {
        menu.removeChild(items[i]);
      }
      let fragment = this.buildPseudoClassMenu();
      menu.appendChild(fragment);
    }.bind(this), true);
    nodemenu.appendChild(menu);
    let texthbox = this.chromeDoc.createElement("hbox");
    texthbox.id = "highlighter-nodeinfobar-text";
    texthbox.setAttribute("align", "center");
    texthbox.setAttribute("flex", "1");
    texthbox.appendChild(tagNameLabel);
    texthbox.appendChild(idLabel);
    texthbox.appendChild(classesBox);
    texthbox.appendChild(pseudoClassesBox);
    nodeInfobar.appendChild(inspect);
    nodeInfobar.appendChild(texthbox);
    nodeInfobar.appendChild(nodemenu);
    container.appendChild(arrowBoxTop);
    container.appendChild(nodeInfobar);
    container.appendChild(arrowBoxBottom);
    aParent.appendChild(container);
    let barHeight = container.getBoundingClientRect().height;
    this.nodeInfo = {
      tagNameLabel: tagNameLabel,
      idLabel: idLabel,
      classesBox: classesBox,
      pseudoClassesBox: pseudoClassesBox,
      container: container,
      barHeight: barHeight,
    };
  }
function Highlighter_buildInfobar ( aParent ) { let container = this . chromeDoc . createElement ( "box" ) ; container . id = "highlighter-nodeinfobar-container" ; container . setAttribute ( "position" , "top" ) ; container . setAttribute ( "disabled" , "true" ) ; let nodeInfobar = this . chromeDoc . createElement ( "hbox" ) ; nodeInfobar . id = "highlighter-nodeinfobar" ; nodeInfobar . addEventListener ( "mousedown" , function ( aEvent ) { this . emitEvent ( "nodeselected" ) ; } . bind ( this ) , true ) ; let arrowBoxTop = this . chromeDoc . createElement ( "box" ) ; arrowBoxTop . className = "highlighter-nodeinfobar-arrow" ; arrowBoxTop . id = "highlighter-nodeinfobar-arrow-top" ; let arrowBoxBottom = this . chromeDoc . createElement ( "box" ) ; arrowBoxBottom . className = "highlighter-nodeinfobar-arrow" ; arrowBoxBottom . id = "highlighter-nodeinfobar-arrow-bottom" ; let tagNameLabel = this . chromeDoc . createElementNS ( "http://www.w3.org/1999/xhtml" , "span" ) ; tagNameLabel . id = "highlighter-nodeinfobar-tagname" ; let idLabel = this . chromeDoc . createElementNS ( "http://www.w3.org/1999/xhtml" , "span" ) ; idLabel . id = "highlighter-nodeinfobar-id" ; let classesBox = this . chromeDoc . createElementNS ( "http://www.w3.org/1999/xhtml" , "span" ) ; classesBox . id = "highlighter-nodeinfobar-classes" ; let pseudoClassesBox = this . chromeDoc . createElementNS ( "http://www.w3.org/1999/xhtml" , "span" ) ; pseudoClassesBox . id = "highlighter-nodeinfobar-pseudo-classes" ; pseudoClassesBox . textContent = "&nbsp;" ; let inspect = this . chromeDoc . createElement ( "toolbarbutton" ) ; inspect . id = "highlighter-nodeinfobar-inspectbutton" ; inspect . className = "highlighter-nodeinfobar-button" let toolbarInspectButton = this . chromeDoc . getElementById ( "inspector-inspect-toolbutton" ) ; inspect . setAttribute ( "tooltiptext" , toolbarInspectButton . getAttribute ( "tooltiptext" ) ) ; inspect . setAttribute ( "command" , "Inspector:Inspect" ) ; let nodemenu = this . chromeDoc . createElement ( "toolbarbutton" ) ; nodemenu . setAttribute ( "type" , "menu" ) ; nodemenu . id = "highlighter-nodeinfobar-menu" ; nodemenu . className = "highlighter-nodeinfobar-button" nodemenu . setAttribute ( "tooltiptext" , this . strings . GetStringFromName ( "nodeMenu.tooltiptext" ) ) ; let menu = this . chromeDoc . getElementById ( "inspector-node-popup" ) ; menu = menu . cloneNode ( true ) ; menu . id = "highlighter-node-menu" ; let separator = this . chromeDoc . createElement ( "menuseparator" ) ; menu . appendChild ( separator ) ; menu . addEventListener ( "popupshowing" , function ( ) { let items = menu . getElementsByClassName ( "highlighter-pseudo-class-menuitem" ) ; let i = items . length ; while ( i -- ) { menu . removeChild ( items [ i ] ) ; } let fragment = this . buildPseudoClassMenu ( ) ; menu . appendChild ( fragment ) ; } . bind ( this ) , true ) ; nodemenu . appendChild ( menu ) ; let texthbox = this . chromeDoc . createElement ( "hbox" ) ; texthbox . id = "highlighter-nodeinfobar-text" ; texthbox . setAttribute ( "align" , "center" ) ; texthbox . setAttribute ( "flex" , "1" ) ; texthbox . appendChild ( tagNameLabel ) ; texthbox . appendChild ( idLabel ) ; texthbox . appendChild ( classesBox ) ; texthbox . appendChild ( pseudoClassesBox ) ; nodeInfobar . appendChild ( inspect ) ; nodeInfobar . appendChild ( texthbox ) ; nodeInfobar . appendChild ( nodemenu ) ; container . appendChild ( arrowBoxTop ) ; container . appendChild ( nodeInfobar ) ; container . appendChild ( arrowBoxBottom ) ; aParent . appendChild ( container ) ; let barHeight = container . getBoundingClientRect ( ) . height ; this . nodeInfo = { tagNameLabel : tagNameLabel , idLabel : idLabel , classesBox : classesBox , pseudoClassesBox : pseudoClassesBox , container : container , barHeight : barHeight , } ; }
Build the node Infobar.
Build the node Infobar .
// Add some content to force a better boundingClientRect down below. // Create buttons // <hbox id="highlighter-nodeinfobar-text"/>