B2G/gecko/browser/devtools/responsivedesign/responsivedesign.jsm
/**
   * Build the toolbar and the resizers.
   *
   * <vbox class="browserContainer"> From tabbrowser.xml
   *  <toolbar class="devtools-toolbar devtools-responsiveui-toolbar">
   *    <menulist class="devtools-menulist"/> // presets
   *    <toolbarbutton tabindex="0" class="devtools-toolbarbutton" label="rotate"/> // rotate
   *  </toolbar>
   *  <stack class="browserStack"> From tabbrowser.xml
   *    <browser/>
   *    <box class="devtools-responsiveui-resizehandle" bottom="0" right="0"/>
   *    <box class="devtools-responsiveui-resizebar" top="0" right="0"/>
   *  </stack>
   * </vbox>
   */
Build the toolbar and the resizers.
Build the toolbar and the resizers .
function RUI_buildUI() {
    this.toolbar = this.chromeDoc.createElement("toolbar");
    this.toolbar.className = "devtools-toolbar devtools-responsiveui-toolbar";
    this.menulist = this.chromeDoc.createElement("menulist");
    this.menulist.className = "devtools-menulist";
    this.menulist.addEventListener("select", this.bound_presetSelected, true);
    this.menuitems = new Map();
    let menupopup = this.chromeDoc.createElement("menupopup");
    this.registerPresets(menupopup);
    this.menulist.appendChild(menupopup);
    this.addbutton = this.chromeDoc.createElement("menuitem");
    this.addbutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.addPreset"));
    this.addbutton.addEventListener("command", this.bound_addPreset, true);
    this.removebutton = this.chromeDoc.createElement("menuitem");
    this.removebutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.removePreset"));
    this.removebutton.addEventListener("command", this.bound_removePreset, true);
    menupopup.appendChild(this.chromeDoc.createElement("menuseparator"));
    menupopup.appendChild(this.addbutton);
    menupopup.appendChild(this.removebutton);
    this.rotatebutton = this.chromeDoc.createElement("toolbarbutton");
    this.rotatebutton.setAttribute("tabindex", "0");
    this.rotatebutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.rotate"));
    this.rotatebutton.className = "devtools-toolbarbutton";
    this.rotatebutton.addEventListener("command", this.bound_rotate, true);
    this.toolbar.appendChild(this.menulist);
    this.toolbar.appendChild(this.rotatebutton);
    this.resizer = this.chromeDoc.createElement("box");
    this.resizer.className = "devtools-responsiveui-resizehandle";
    this.resizer.setAttribute("right", "0");
    this.resizer.setAttribute("bottom", "0");
    this.resizer.onmousedown = this.bound_startResizing;
    this.resizeBar =  this.chromeDoc.createElement("box");
    this.resizeBar.className = "devtools-responsiveui-resizebar";
    this.resizeBar.setAttribute("top", "0");
    this.resizeBar.setAttribute("right", "0");
    this.resizeBar.onmousedown = this.bound_startResizing;
    this.container.insertBefore(this.toolbar, this.stack);
    this.stack.appendChild(this.resizer);
    this.stack.appendChild(this.resizeBar);
  }
function RUI_buildUI ( ) { this . toolbar = this . chromeDoc . createElement ( "toolbar" ) ; this . toolbar . className = "devtools-toolbar devtools-responsiveui-toolbar" ; this . menulist = this . chromeDoc . createElement ( "menulist" ) ; this . menulist . className = "devtools-menulist" ; this . menulist . addEventListener ( "select" , this . bound_presetSelected , true ) ; this . menuitems = new Map ( ) ; let menupopup = this . chromeDoc . createElement ( "menupopup" ) ; this . registerPresets ( menupopup ) ; this . menulist . appendChild ( menupopup ) ; this . addbutton = this . chromeDoc . createElement ( "menuitem" ) ; this . addbutton . setAttribute ( "label" , this . strings . GetStringFromName ( "responsiveUI.addPreset" ) ) ; this . addbutton . addEventListener ( "command" , this . bound_addPreset , true ) ; this . removebutton = this . chromeDoc . createElement ( "menuitem" ) ; this . removebutton . setAttribute ( "label" , this . strings . GetStringFromName ( "responsiveUI.removePreset" ) ) ; this . removebutton . addEventListener ( "command" , this . bound_removePreset , true ) ; menupopup . appendChild ( this . chromeDoc . createElement ( "menuseparator" ) ) ; menupopup . appendChild ( this . addbutton ) ; menupopup . appendChild ( this . removebutton ) ; this . rotatebutton = this . chromeDoc . createElement ( "toolbarbutton" ) ; this . rotatebutton . setAttribute ( "tabindex" , "0" ) ; this . rotatebutton . setAttribute ( "label" , this . strings . GetStringFromName ( "responsiveUI.rotate" ) ) ; this . rotatebutton . className = "devtools-toolbarbutton" ; this . rotatebutton . addEventListener ( "command" , this . bound_rotate , true ) ; this . toolbar . appendChild ( this . menulist ) ; this . toolbar . appendChild ( this . rotatebutton ) ; this . resizer = this . chromeDoc . createElement ( "box" ) ; this . resizer . className = "devtools-responsiveui-resizehandle" ; this . resizer . setAttribute ( "right" , "0" ) ; this . resizer . setAttribute ( "bottom" , "0" ) ; this . resizer . onmousedown = this . bound_startResizing ; this . resizeBar = this . chromeDoc . createElement ( "box" ) ; this . resizeBar . className = "devtools-responsiveui-resizebar" ; this . resizeBar . setAttribute ( "top" , "0" ) ; this . resizeBar . setAttribute ( "right" , "0" ) ; this . resizeBar . onmousedown = this . bound_startResizing ; this . container . insertBefore ( this . toolbar , this . stack ) ; this . stack . appendChild ( this . resizer ) ; this . stack . appendChild ( this . resizeBar ) ; }
Build the toolbar and the resizers.
Build the toolbar and the resizers .
// Toolbar // Resizers