From aceff510e667f12e780d2d78461d7ba1069dab1b Mon Sep 17 00:00:00 2001
From: Joe Walker <jwalker@mozilla.com>
Date: Thu, 22 Nov 2012 21:35:19 +0000
Subject: [PATCH 1/8] =?UTF-8?q?Bug=20788977=20-=20[toolbox]=20Land=20the?=
 =?UTF-8?q?=20developer=20tools=20window;=20r=3Dharth,jwalker,mikeratcliff?=
 =?UTF-8?q?e,paul,d=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/app/profile/firefox.js                |   28 +-
 browser/base/content/browser-appmenu.inc      |   33 +-
 browser/base/content/browser-doctype.inc      |    2 -
 browser/base/content/browser-menubar.inc      |   40 +-
 browser/base/content/browser-sets.inc         |   87 +-
 browser/base/content/browser.css              |   14 +-
 browser/base/content/browser.js               |  105 +-
 browser/base/content/browser.xul              |  106 +-
 browser/base/content/highlighter.css          |   71 +-
 browser/base/content/nsContextMenu.js         |   16 +-
 browser/devtools/Makefile.in                  |    3 +-
 browser/devtools/commandline/CmdBreak.jsm     |   48 +-
 browser/devtools/commandline/CmdCalllog.jsm   |   12 +-
 .../devtools/commandline/CmdCalllogChrome.jsm |   11 +-
 browser/devtools/commandline/CmdConsole.jsm   |   14 +-
 browser/devtools/commandline/CmdDbg.jsm       |   66 +-
 browser/devtools/commandline/Commands.jsm     |    1 +
 .../commandline/test/browser_dbg_cmd.js       |  111 +-
 .../commandline/test/browser_dbg_cmd_break.js |  136 +-
 browser/devtools/debugger/DebuggerPanel.jsm   |  144 +
 .../devtools/debugger/debugger-controller.js  |   49 +-
 browser/devtools/debugger/debugger-toolbar.js |   15 -
 browser/devtools/debugger/debugger.xul        |   10 -
 browser/devtools/debugger/test/Makefile.in    |    8 +-
 .../debugger/test/browser_dbg_bfcache.js      |    2 +-
 .../test/browser_dbg_breakpoint-new-script.js |    2 +-
 ...rowser_dbg_bug723069_editor-breakpoints.js |   12 +-
 ...r_dbg_bug723071_editor-breakpoints-pane.js |   10 +-
 ...wser_dbg_bug727429_watch-expressions-01.js |    2 +-
 ...wser_dbg_bug727429_watch-expressions-02.js |    2 +-
 ...rowser_dbg_bug731394_editor-contextmenu.js |    2 +-
 ...er_dbg_bug737803_editor_actual_location.js |   10 +-
 ...bg_bug740825_conditional-breakpoints-01.js |    4 +-
 ...bg_bug740825_conditional-breakpoints-02.js |    4 +-
 .../browser_dbg_bug786070_hide_nonenums.js    |    2 +-
 .../debugger/test/browser_dbg_clean-exit.js   |    2 +-
 .../debugger/test/browser_dbg_createRemote.js |    2 +-
 .../debugger/test/browser_dbg_displayName.js  |    2 +-
 .../debugger/test/browser_dbg_iframes.js      |    5 +-
 .../debugger/test/browser_dbg_leaktest.js     |    2 +-
 .../browser_dbg_location-changes-blank.js     |    2 +-
 .../test/browser_dbg_location-changes-new.js  |    2 +-
 .../test/browser_dbg_location-changes.js      |    2 +-
 .../test/browser_dbg_pane-collapse.js         |    2 +-
 .../test/browser_dbg_panesize-inner.js        |   97 +-
 .../debugger/test/browser_dbg_panesize.js     |   55 -
 .../test/browser_dbg_pause-exceptions.js      |    8 +-
 .../debugger/test/browser_dbg_pause-resume.js |    2 +-
 .../test/browser_dbg_progress-listener-bug.js |    2 +-
 .../test/browser_dbg_propertyview-01.js       |    2 +-
 .../test/browser_dbg_propertyview-02.js       |    2 +-
 .../test/browser_dbg_propertyview-03.js       |    2 +-
 .../test/browser_dbg_propertyview-04.js       |    2 +-
 .../test/browser_dbg_propertyview-05.js       |    2 +-
 .../test/browser_dbg_propertyview-06.js       |    2 +-
 .../test/browser_dbg_propertyview-07.js       |    2 +-
 .../test/browser_dbg_propertyview-08.js       |    2 +-
 .../test/browser_dbg_propertyview-09.js       |    2 +-
 .../test/browser_dbg_propertyview-10.js       |    2 +-
 .../test/browser_dbg_propertyview-data.js     |    2 +-
 .../test/browser_dbg_propertyview-edit.js     |    2 +-
 .../browser_dbg_propertyview-filter-01.js     |    2 +-
 .../browser_dbg_propertyview-filter-02.js     |    2 +-
 .../browser_dbg_propertyview-filter-03.js     |    2 +-
 .../browser_dbg_propertyview-filter-04.js     |    2 +-
 .../browser_dbg_propertyview-filter-05.js     |    2 +-
 .../browser_dbg_propertyview-filter-06.js     |    2 +-
 .../browser_dbg_propertyview-filter-07.js     |    2 +-
 .../browser_dbg_propertyview-filter-08.js     |    2 +-
 .../test/browser_dbg_propertyview-reexpand.js |    2 +-
 .../test/browser_dbg_reload-same-script.js    |    2 +-
 .../test/browser_dbg_script-switching.js      |    2 +-
 .../test/browser_dbg_scripts-searching-01.js  |    2 +-
 .../test/browser_dbg_scripts-searching-02.js  |    2 +-
 .../test/browser_dbg_scripts-searching-03.js  |    2 +-
 .../test/browser_dbg_scripts-searching-04.js  |    2 +-
 .../test/browser_dbg_scripts-searching-05.js  |    2 +-
 .../test/browser_dbg_scripts-searching-06.js  |    2 +-
 .../test/browser_dbg_scripts-searching-07.js  |    2 +-
 .../test/browser_dbg_scripts-searching-08.js  |    2 +-
 .../browser_dbg_scripts-searching-popup.js    |    2 +-
 .../test/browser_dbg_scripts-sorting.js       |    2 +-
 .../debugger/test/browser_dbg_select-line.js  |    2 +-
 .../debugger/test/browser_dbg_stack-01.js     |    2 +-
 .../debugger/test/browser_dbg_stack-02.js     |    2 +-
 .../debugger/test/browser_dbg_stack-03.js     |    2 +-
 .../debugger/test/browser_dbg_stack-04.js     |    2 +-
 .../debugger/test/browser_dbg_stack-05.js     |    2 +-
 .../test/browser_dbg_update-editor-mode.js    |    2 +-
 browser/devtools/debugger/test/head.js        |   92 +-
 .../{highlighter => framework}/Makefile.in    |   10 +-
 browser/devtools/framework/Sidebar.jsm        |  191 ++
 browser/devtools/framework/Target.jsm         |  385 +++
 .../devtools/framework/ToolDefinitions.jsm    |   19 +
 browser/devtools/framework/Toolbox.jsm        |  523 ++++
 browser/devtools/framework/ToolboxHosts.jsm   |  208 ++
 .../devtools/framework/connect/connect.css    |   87 +
 browser/devtools/framework/connect/connect.js |  100 +
 .../devtools/framework/connect/connect.xhtml  |   45 +
 browser/devtools/framework/gDevTools.jsm      |  543 ++++
 browser/devtools/framework/test/Makefile.in   |   26 +
 .../framework/test/browser_devtools_api.js    |  137 +
 .../test/browser_new_activation_workflow.js   |   64 +
 .../framework/test/browser_target_events.js   |   58 +
 .../browser_toolbox_dynamic_registration.js   |  112 +
 .../framework/test/browser_toolbox_hosts.js   |  135 +
 .../framework/test/browser_toolbox_ready.js   |   56 +
 .../test/browser_toolbox_select_event.js      |   97 +
 .../framework/test/browser_toolbox_sidebar.js |  132 +
 .../test/browser_toolbox_tool_ready.js        |   72 +
 browser/devtools/framework/test/head.js       |   36 +
 browser/devtools/framework/toolbox-window.xul |   33 +
 browser/devtools/framework/toolbox.css        |   10 +
 browser/devtools/framework/toolbox.xul        |   27 +
 browser/devtools/highlighter/CmdInspect.jsm   |   29 -
 browser/devtools/highlighter/inspector.jsm    | 2414 -----------------
 ...r_inspector_bug_566084_location_changed.js |  120 -
 .../test/browser_inspector_bug_690361.js      |  107 -
 ..._inspector_bug_699308_iframe_navigation.js |   77 -
 .../test/browser_inspector_changes.js         |  124 -
 .../browser_inspector_highlighter_autohide.js |   59 -
 .../test/browser_inspector_initialization.js  |  191 --
 .../test/browser_inspector_invalidate.js      |   56 -
 .../test/browser_inspector_keybindings.js     |   78 -
 .../browser_inspector_pseudoClass_menu.js     |   87 -
 .../test/browser_inspector_ruleviewstore.js   |  105 -
 .../test/browser_inspector_sidebarstate.js    |   73 -
 .../test/browser_inspector_tab_switch.js      |  247 --
 .../test/browser_inspector_treeSelection.js   |   84 -
 browser/devtools/inspector/Breadcrumbs.jsm    |  593 ++++
 browser/devtools/inspector/CmdInspect.jsm     |   48 +
 .../Highlighter.jsm}                          |  433 ++-
 .../inspector/InspectorDefinition.jsm         |   45 +
 browser/devtools/inspector/InspectorPanel.jsm |  536 ++++
 browser/devtools/inspector/Makefile.in        |   18 +
 browser/devtools/inspector/Selection.jsm      |  230 ++
 browser/devtools/inspector/inspector.css      |   11 +
 browser/devtools/inspector/inspector.xul      |   71 +
 .../test/Makefile.in                          |   25 +-
 .../test/browser_inspector_breadcrumbs.html   |    0
 .../test/browser_inspector_breadcrumbs.js     |   37 +-
 ...r_inspector_bug_566084_location_changed.js |  131 +
 .../test/browser_inspector_bug_665880.js      |   28 +-
 ...inspector_bug_672902_keyboard_shortcuts.js |   55 +-
 .../test/browser_inspector_bug_674871.js      |   32 +-
 ..._inspector_bug_699308_iframe_navigation.js |   65 +
 .../test/browser_inspector_changes.js         |  112 +
 .../test/browser_inspector_cmd_inspect.html   |    0
 .../test/browser_inspector_cmd_inspect.js     |    2 +-
 .../browser_inspector_destroyselection.html   |    0
 .../browser_inspector_destroyselection.js     |   30 +-
 .../test/browser_inspector_highlighter.js     |   48 +-
 .../browser_inspector_highlighter_autohide.js |   46 +
 .../test/browser_inspector_iframeTest.js      |   33 +-
 .../test/browser_inspector_infobar.js         |   35 +-
 .../test/browser_inspector_initialization.js  |  147 +
 .../test/browser_inspector_invalidate.js      |   50 +
 .../test/browser_inspector_menu.js            |   43 +-
 .../browser_inspector_pseudoClass_menu.js     |   71 +
 .../browser_inspector_pseudoclass_lock.js     |   87 +-
 .../test/browser_inspector_scrolling.js       |   26 +-
 .../test/browser_inspector_sidebarstate.js    |   77 +
 .../test/browser_inspector_tree_height.js     |    0
 .../{highlighter => inspector}/test/head.js   |   39 +-
 .../test/helpers.js                           |    0
 browser/devtools/jar.mn                       |   13 +-
 browser/devtools/layoutview/LayoutView.jsm    |  368 ---
 browser/devtools/layoutview/Makefile.in       |    3 -
 .../layoutview/test/browser_layoutview.js     |   55 +-
 browser/devtools/layoutview/view.css          |    4 -
 browser/devtools/layoutview/view.js           |  248 ++
 browser/devtools/layoutview/view.xhtml        |   18 +-
 browser/devtools/markupview/MarkupView.jsm    |   61 +-
 .../test/browser_inspector_markup_edit.js     |  262 +-
 .../test/browser_inspector_markup_mutation.js |   28 +-
 .../browser_inspector_markup_navigation.html  |    4 +-
 .../browser_inspector_markup_navigation.js    |   35 +-
 browser/devtools/markupview/test/head.js      |    6 +
 .../devtools/responsivedesign/CmdResize.jsm   |    2 +
 .../responsivedesign/responsivedesign.jsm     |   14 +-
 .../test/browser_responsivecomputedview.js    |   27 +-
 .../test/browser_responsiveruleview.js        |   27 +-
 .../devtools/responsivedesign/test/head.js    |   21 +
 browser/devtools/scratchpad/CmdScratchpad.jsm |   21 +
 browser/devtools/scratchpad/scratchpad.js     |    7 +-
 browser/devtools/scratchpad/scratchpad.xul    |    4 -
 browser/devtools/shared/DeveloperToolbar.jsm  |  100 +-
 browser/devtools/shared/EventEmitter.jsm      |   25 +-
 .../shared/test/browser_eventemitter_basic.js |   18 +-
 .../shared/test/browser_toolbar_basic.js      |  111 +-
 ...browser_toolbar_webconsole_errors_count.js |   17 +-
 browser/devtools/shared/test/head.js          |    6 +
 browser/devtools/shared/test/leakhunt.js      |  155 +-
 browser/devtools/styleeditor/StyleEditor.jsm  |  137 +-
 .../styleeditor/StyleEditorChrome.jsm         |   63 +-
 .../styleeditor/StyleEditorDefinition.jsm     |   56 +
 .../devtools/styleeditor/StyleEditorPanel.jsm |  109 +
 browser/devtools/styleeditor/styleeditor.xul  |  188 +-
 browser/devtools/styleeditor/test/Makefile.in |    4 +-
 .../test/browser_styleeditor_init.js          |    8 -
 .../test/browser_styleeditor_loading.js       |   41 +-
 .../test/browser_styleeditor_passedinsheet.js |   83 +-
 .../test/browser_styleeditor_private.js       |   32 +-
 .../test/browser_styleeditor_reopen.js        |  189 +-
 browser/devtools/styleeditor/test/head.js     |   35 +-
 .../devtools/styleinspector/CssHtmlTree.jsm   |  141 +-
 .../styleinspector/StyleInspector.jsm         |  232 +-
 .../devtools/styleinspector/csshtmltree.xul   |   15 +-
 .../devtools/styleinspector/cssruleview.xul   |   14 +-
 .../devtools/styleinspector/test/Makefile.in  |   12 +-
 .../test/browser_bug589375_keybindings.js     |   47 +-
 .../styleinspector/test/browser_bug683672.js  |   47 +-
 ...r_bug722196_property_view_media_queries.js |   24 +-
 .../test/browser_bug_692400_element_style.js  |   27 +-
 ...r_computedview_734259_style_editor_link.js |   80 +-
 ...mputedview_bug_703643_context_menu_copy.js |   52 +-
 ...owser_ruleview_734259_style_editor_link.js |   92 +-
 ...r_ruleview_bug_703643_context_menu_copy.js |   74 +-
 .../test/browser_ruleview_focus.js            |   40 +-
 .../test/browser_styleinspector.js            |   32 +-
 ...styleinspector_bug_672744_search_filter.js |   54 +-
 ...tyleinspector_bug_672746_default_styles.js |   39 +-
 ...ector_bug_689759_no_results_placeholder.js |   52 +-
 browser/devtools/styleinspector/test/head.js  |  289 +-
 browser/devtools/tilt/CmdTilt.jsm             |   56 +-
 browser/devtools/tilt/Tilt.jsm                |  165 +-
 browser/devtools/tilt/TiltVisualizer.jsm      |  171 +-
 browser/devtools/tilt/test/Makefile.in        |    1 -
 .../tilt/test/browser_tilt_03_tab_switch.js   |   77 -
 .../browser_tilt_04_initialization-key.js     |   82 -
 .../test/browser_tilt_04_initialization.js    |    4 -
 .../test/browser_tilt_05_destruction-esc.js   |    3 -
 .../tilt/test/browser_tilt_05_destruction.js  |    2 +-
 .../browser_tilt_arcball-reset-typeahead.js   |    2 +-
 .../tilt/test/browser_tilt_arcball-reset.js   |    2 +-
 .../tilt/test/browser_tilt_picking.js         |    2 +-
 .../tilt/test/browser_tilt_picking_delete.js  |    2 +-
 .../browser_tilt_picking_highlight01-offs.js  |    2 +-
 .../test/browser_tilt_picking_highlight01.js  |    2 +-
 .../test/browser_tilt_picking_highlight02.js  |    2 +-
 .../test/browser_tilt_picking_highlight03.js  |    2 +-
 .../tilt/test/browser_tilt_picking_miv.js     |    2 +-
 .../tilt/test/browser_tilt_visualizer.js      |    3 +-
 .../devtools/tilt/test/browser_tilt_zoom.js   |   10 +-
 browser/devtools/tilt/test/head.js            |   50 +-
 browser/devtools/webconsole/HUDService.jsm    |  567 +---
 browser/devtools/webconsole/Makefile.in       |    1 +
 .../devtools/webconsole/WebConsolePanel.jsm   |  102 +
 browser/devtools/webconsole/test/Makefile.in  |   18 +-
 ...wser_webconsole_bug_581231_close_button.js |   37 -
 ...eactivateHUDForContext_unfocused_window.js |   20 +-
 ...r_webconsole_bug_601909_remember_height.js |  107 -
 ...bconsole_bug_602572_log_bodies_checkbox.js |    2 -
 ...ebconsole_bug_622303_persistent_filters.js |    9 +-
 ...e_bug_653531_highlighter_console_helper.js |   34 +-
 ...owser_webconsole_bug_660806_history_nav.js |    8 +-
 ...owser_webconsole_bug_663443_panel_title.js |   57 -
 ...le_bug_782653_CSS_links_in_Style_Editor.js |  140 +-
 .../test/browser_webconsole_menustatus.js     |   33 -
 .../test/browser_webconsole_position_ui.js    |  207 --
 .../test/browser_webconsole_window_zombie.js  |   42 -
 browser/devtools/webconsole/test/head.js      |   80 +-
 browser/devtools/webconsole/webconsole.js     |  135 +-
 browser/devtools/webconsole/webconsole.xul    |   25 -
 .../locales/en-US/chrome/browser/browser.dtd  |   48 +-
 .../browser/devtools/connection-screen.dtd    |   15 +
 .../browser/devtools/debugger.properties      |   13 +
 .../chrome/browser/devtools/inspector.dtd     |   10 +
 .../browser/devtools/inspector.properties     |   32 +-
 .../chrome/browser/devtools/layoutview.dtd    |    1 +
 .../chrome/browser/devtools/scratchpad.dtd    |    6 -
 .../browser/devtools/styleeditor.properties   |   12 +
 .../browser/devtools/styleinspector.dtd       |    4 +
 .../devtools/styleinspector.properties        |   13 -
 .../en-US/chrome/browser/devtools/toolbox.dtd |    7 +
 .../chrome/browser/devtools/webConsole.dtd    |   21 -
 .../browser/devtools/webconsole.properties    |    8 +
 browser/locales/jar.mn                        |    3 +
 browser/makefiles.sh                          |    4 +-
 browser/themes/gnomestripe/browser.css        |  344 +--
 .../devtools/command-responsivemode.png       |  Bin 0 -> 1083 bytes
 .../devtools/command-scratchpad.png           |  Bin 0 -> 584 bytes
 .../gnomestripe/devtools/command-tilt.png     |  Bin 0 -> 1668 bytes
 .../themes/gnomestripe/devtools/common.css    |   59 +
 .../gnomestripe/devtools/dock-bottom.png      |  Bin 0 -> 487 bytes
 .../themes/gnomestripe/devtools/dock-side.png |  Bin 0 -> 536 bytes
 .../gnomestripe/devtools/dock-window.png      |  Bin 0 -> 806 bytes
 .../themes/gnomestripe/devtools/inspector.css |  214 ++
 .../devtools/layout-background.png            |  Bin 981 -> 0 bytes
 .../gnomestripe/devtools/layout-buttons.png   |  Bin 447 -> 0 bytes
 .../gnomestripe/devtools/layoutview.css       |   16 +-
 .../themes/gnomestripe/devtools/toolbox.css   |   99 +
 .../gnomestripe/devtools/treepanel-button.png |  Bin 805 -> 0 bytes
 browser/themes/gnomestripe/jar.mn             |   11 +-
 browser/themes/pinstripe/browser.css          |  341 +--
 .../devtools/command-responsivemode.png       |  Bin 0 -> 1083 bytes
 .../pinstripe/devtools/command-scratchpad.png |  Bin 0 -> 584 bytes
 .../pinstripe/devtools/command-tilt.png       |  Bin 0 -> 1668 bytes
 browser/themes/pinstripe/devtools/common.css  |   54 +
 .../themes/pinstripe/devtools/dock-bottom.png |  Bin 0 -> 487 bytes
 .../themes/pinstripe/devtools/dock-side.png   |  Bin 0 -> 536 bytes
 .../themes/pinstripe/devtools/dock-window.png |  Bin 0 -> 806 bytes
 .../themes/pinstripe/devtools/inspector.css   |  229 ++
 .../pinstripe/devtools/layout-background.png  |  Bin 981 -> 0 bytes
 .../pinstripe/devtools/layout-buttons.png     |  Bin 447 -> 0 bytes
 .../themes/pinstripe/devtools/layoutview.css  |   16 +-
 browser/themes/pinstripe/devtools/toolbox.css |   99 +
 .../pinstripe/devtools/treepanel-button.png   |  Bin 805 -> 0 bytes
 browser/themes/pinstripe/jar.mn               |   11 +-
 browser/themes/winstripe/browser.css          |  343 +--
 .../devtools/command-responsivemode.png       |  Bin 0 -> 1083 bytes
 .../winstripe/devtools/command-scratchpad.png |  Bin 0 -> 584 bytes
 .../winstripe/devtools/command-tilt.png       |  Bin 0 -> 1668 bytes
 browser/themes/winstripe/devtools/common.css  |   59 +
 .../themes/winstripe/devtools/dock-bottom.png |  Bin 0 -> 487 bytes
 .../themes/winstripe/devtools/dock-side.png   |  Bin 0 -> 536 bytes
 .../themes/winstripe/devtools/dock-window.png |  Bin 0 -> 806 bytes
 .../themes/winstripe/devtools/inspector.css   |  218 ++
 .../winstripe/devtools/layout-background.png  |  Bin 981 -> 0 bytes
 .../winstripe/devtools/layout-buttons.png     |  Bin 447 -> 0 bytes
 .../themes/winstripe/devtools/layoutview.css  |   16 +-
 browser/themes/winstripe/devtools/toolbox.css |  103 +
 .../winstripe/devtools/treepanel-button.png   |  Bin 805 -> 0 bytes
 browser/themes/winstripe/jar.mn               |   26 +-
 .../devtools/webconsole/WebConsoleUtils.jsm   |   13 +-
 325 files changed, 10297 insertions(+), 10105 deletions(-)
 create mode 100644 browser/devtools/debugger/DebuggerPanel.jsm
 delete mode 100644 browser/devtools/debugger/test/browser_dbg_panesize.js
 rename browser/devtools/{highlighter => framework}/Makefile.in (68%)
 create mode 100644 browser/devtools/framework/Sidebar.jsm
 create mode 100644 browser/devtools/framework/Target.jsm
 create mode 100644 browser/devtools/framework/ToolDefinitions.jsm
 create mode 100644 browser/devtools/framework/Toolbox.jsm
 create mode 100644 browser/devtools/framework/ToolboxHosts.jsm
 create mode 100644 browser/devtools/framework/connect/connect.css
 create mode 100644 browser/devtools/framework/connect/connect.js
 create mode 100644 browser/devtools/framework/connect/connect.xhtml
 create mode 100644 browser/devtools/framework/gDevTools.jsm
 create mode 100644 browser/devtools/framework/test/Makefile.in
 create mode 100644 browser/devtools/framework/test/browser_devtools_api.js
 create mode 100644 browser/devtools/framework/test/browser_new_activation_workflow.js
 create mode 100644 browser/devtools/framework/test/browser_target_events.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_hosts.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_ready.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_select_event.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_sidebar.js
 create mode 100644 browser/devtools/framework/test/browser_toolbox_tool_ready.js
 create mode 100644 browser/devtools/framework/test/head.js
 create mode 100644 browser/devtools/framework/toolbox-window.xul
 create mode 100644 browser/devtools/framework/toolbox.css
 create mode 100644 browser/devtools/framework/toolbox.xul
 delete mode 100644 browser/devtools/highlighter/CmdInspect.jsm
 delete mode 100644 browser/devtools/highlighter/inspector.jsm
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_690361.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_changes.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_initialization.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_invalidate.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_keybindings.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_tab_switch.js
 delete mode 100644 browser/devtools/highlighter/test/browser_inspector_treeSelection.js
 create mode 100644 browser/devtools/inspector/Breadcrumbs.jsm
 create mode 100644 browser/devtools/inspector/CmdInspect.jsm
 rename browser/devtools/{highlighter/highlighter.jsm => inspector/Highlighter.jsm} (64%)
 create mode 100644 browser/devtools/inspector/InspectorDefinition.jsm
 create mode 100644 browser/devtools/inspector/InspectorPanel.jsm
 create mode 100644 browser/devtools/inspector/Makefile.in
 create mode 100644 browser/devtools/inspector/Selection.jsm
 create mode 100644 browser/devtools/inspector/inspector.css
 create mode 100644 browser/devtools/inspector/inspector.xul
 rename browser/devtools/{highlighter => inspector}/test/Makefile.in (88%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_breadcrumbs.html (100%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_breadcrumbs.js (68%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_bug_665880.js (52%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_bug_672902_keyboard_shortcuts.js (51%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_bug_674871.js (68%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
 create mode 100644 browser/devtools/inspector/test/browser_inspector_changes.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_cmd_inspect.html (100%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_cmd_inspect.js (97%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_destroyselection.html (100%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_destroyselection.js (55%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_highlighter.js (78%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_iframeTest.js (72%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_infobar.js (72%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_initialization.js
 create mode 100644 browser/devtools/inspector/test/browser_inspector_invalidate.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_menu.js (62%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_pseudoclass_lock.js (59%)
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_scrolling.js (76%)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_sidebarstate.js
 rename browser/devtools/{highlighter => inspector}/test/browser_inspector_tree_height.js (100%)
 rename browser/devtools/{highlighter => inspector}/test/head.js (64%)
 rename browser/devtools/{highlighter => inspector}/test/helpers.js (100%)
 delete mode 100644 browser/devtools/layoutview/LayoutView.jsm
 create mode 100644 browser/devtools/layoutview/view.js
 create mode 100644 browser/devtools/scratchpad/CmdScratchpad.jsm
 create mode 100644 browser/devtools/styleeditor/StyleEditorDefinition.jsm
 create mode 100644 browser/devtools/styleeditor/StyleEditorPanel.jsm
 delete mode 100644 browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
 create mode 100644 browser/devtools/webconsole/WebConsolePanel.jsm
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_menustatus.js
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_position_ui.js
 delete mode 100644 browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/inspector.dtd
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
 create mode 100644 browser/themes/gnomestripe/devtools/command-responsivemode.png
 create mode 100644 browser/themes/gnomestripe/devtools/command-scratchpad.png
 create mode 100644 browser/themes/gnomestripe/devtools/command-tilt.png
 create mode 100644 browser/themes/gnomestripe/devtools/dock-bottom.png
 create mode 100644 browser/themes/gnomestripe/devtools/dock-side.png
 create mode 100644 browser/themes/gnomestripe/devtools/dock-window.png
 create mode 100644 browser/themes/gnomestripe/devtools/inspector.css
 delete mode 100644 browser/themes/gnomestripe/devtools/layout-background.png
 delete mode 100644 browser/themes/gnomestripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/gnomestripe/devtools/toolbox.css
 delete mode 100644 browser/themes/gnomestripe/devtools/treepanel-button.png
 create mode 100644 browser/themes/pinstripe/devtools/command-responsivemode.png
 create mode 100644 browser/themes/pinstripe/devtools/command-scratchpad.png
 create mode 100644 browser/themes/pinstripe/devtools/command-tilt.png
 create mode 100644 browser/themes/pinstripe/devtools/dock-bottom.png
 create mode 100644 browser/themes/pinstripe/devtools/dock-side.png
 create mode 100644 browser/themes/pinstripe/devtools/dock-window.png
 create mode 100644 browser/themes/pinstripe/devtools/inspector.css
 delete mode 100644 browser/themes/pinstripe/devtools/layout-background.png
 delete mode 100644 browser/themes/pinstripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/pinstripe/devtools/toolbox.css
 delete mode 100644 browser/themes/pinstripe/devtools/treepanel-button.png
 create mode 100644 browser/themes/winstripe/devtools/command-responsivemode.png
 create mode 100644 browser/themes/winstripe/devtools/command-scratchpad.png
 create mode 100644 browser/themes/winstripe/devtools/command-tilt.png
 create mode 100644 browser/themes/winstripe/devtools/dock-bottom.png
 create mode 100644 browser/themes/winstripe/devtools/dock-side.png
 create mode 100644 browser/themes/winstripe/devtools/dock-window.png
 create mode 100644 browser/themes/winstripe/devtools/inspector.css
 delete mode 100644 browser/themes/winstripe/devtools/layout-background.png
 delete mode 100644 browser/themes/winstripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/winstripe/devtools/toolbox.css
 delete mode 100644 browser/themes/winstripe/devtools/treepanel-button.png

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index 677e9637829..e84052b863c 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1010,11 +1010,16 @@ pref("devtools.toolbar.visible", false);
 pref("devtools.gcli.allowSet", false);
 pref("devtools.commands.dir", "");
 
+// Toolbox preferences
+pref("devtools.toolbox.footer.height", 250);
+pref("devtools.toolbox.sidebar.width", 500);
+pref("devtools.toolbox.host", "bottom");
+pref("devtools.toolbox.selectedTool", "webconsole");
+pref("devtools.toolbox.toolbarSpec", '["tilt toggle","scratchpad","resize toggle"]');
+pref("devtools.toolbox.sideEnabled", false);
+
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);
-pref("devtools.inspector.htmlHeight", 112);
-pref("devtools.inspector.htmlPanelOpen", false);
-pref("devtools.inspector.sidebarOpen", false);
 pref("devtools.inspector.activeSidebar", "ruleview");
 pref("devtools.inspector.markupPreview", false);
 
@@ -1046,17 +1051,11 @@ pref("devtools.debugger.ui.variables-sorting-enabled", true);
 pref("devtools.debugger.ui.variables-non-enum-visible", true);
 pref("devtools.debugger.ui.variables-searchbox-visible", false);
 
-// Enable the style inspector
-pref("devtools.styleinspector.enabled", true);
-
 // Enable the Tilt inspector
 pref("devtools.tilt.enabled", true);
 pref("devtools.tilt.intro_transition", true);
 pref("devtools.tilt.outro_transition", true);
 
-// Enable the rules view
-pref("devtools.ruleview.enabled", true);
-
 // Enable the Scratchpad tool.
 pref("devtools.scratchpad.enabled", true);
 
@@ -1081,17 +1080,6 @@ pref("devtools.gcli.eagerHelper", 2);
 // Do we allow the 'pref set' command
 pref("devtools.gcli.allowSet", false);
 
-// The last Web Console height. This is initially 0 which means that the Web
-// Console will use the default height next time it shows.
-// Change to -1 if you do not want the Web Console to remember its last height.
-pref("devtools.hud.height", 0);
-
-// Remember the Web Console position. Possible values:
-//   above - above the web page,
-//   below - below the web page,
-//   window - in a separate window/popup panel.
-pref("devtools.webconsole.position", "below");
-
 // Remember the Web Console filters
 pref("devtools.webconsole.filter.network", true);
 pref("devtools.webconsole.filter.networkinfo", true);
diff --git a/browser/base/content/browser-appmenu.inc b/browser/base/content/browser-appmenu.inc
index a195f180838..479b542941d 100644
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -150,20 +150,27 @@
       <menu id="appmenu_webDeveloper"
             label="&appMenuWebDeveloper.label;">
         <menupopup id="appmenu_webDeveloper_popup">
-          <menuitem id="appmenu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar"/>
-          <menuitem id="appmenu_webConsole" observes="devtoolsMenuBroadcaster_WebConsole"/>
-          <menuitem id="appmenu_remoteWebConsole" observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
-          <menuitem id="appmenu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect"/>
-          <menuitem id="appmenu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
-          <menuitem id="appmenu_debugger" observes="devtoolsMenuBroadcaster_Debugger"/>
-          <menuitem id="appmenu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
-          <menuitem id="appmenu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
-          <menuitem id="appmenu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad"/>
-          <menuitem id="appmenu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor"/>
-          <menuitem id="appmenu_pageSource" observes="devtoolsMenuBroadcaster_PageSource"/>
-          <menuitem id="appmenu_errorConsole" observes="devtoolsMenuBroadcaster_ErrorConsole"/>
+          <menuitem id="appmenu_devToolbox"
+                    observes="devtoolsMenuBroadcaster_DevToolbox"/>
+          <menuseparator id="appmenu_devtools_separator"/>
+          <menuitem id="appmenu_devToolbar"
+                    observes="devtoolsMenuBroadcaster_DevToolbar"/>
+          <menuitem id="appmenu_remoteWebConsole"
+                    observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
+          <menuitem id="appmenu_responsiveUI"
+                    observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
+          <menuitem id="appmenu_scratchpad"
+                    observes="devtoolsMenuBroadcaster_Scratchpad"/>
+          <menuitem id="appmenu_pageSource"
+                    observes="devtoolsMenuBroadcaster_PageSource"/>
+          <menuitem id="appmenu_errorConsole"
+                    observes="devtoolsMenuBroadcaster_ErrorConsole"/>
+          <menuseparator id="appmenu_devToolsConnectSeparator"/>
+          <menuitem id="appmenu_devtools_connect"
+                    observes="devtoolsMenuBroadcaster_connect"/>
           <menuseparator id="appmenu_devToolsEndSeparator"/>
-          <menuitem id="appmenu_getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools"/>
+          <menuitem id="appmenu_getMoreDevtools"
+                    observes="devtoolsMenuBroadcaster_GetMoreTools"/>
           <menuseparator/>
 #define ID_PREFIX appmenu_developer_
 #define OMIT_ACCESSKEYS
diff --git a/browser/base/content/browser-doctype.inc b/browser/base/content/browser-doctype.inc
index 17c1e45f982..cacd4d3a58c 100644
--- a/browser/base/content/browser-doctype.inc
+++ b/browser/base/content/browser-doctype.inc
@@ -19,7 +19,5 @@
 #endif
 <!ENTITY % aboutHomeDTD SYSTEM "chrome://browser/locale/aboutHome.dtd">
 %aboutHomeDTD;
-<!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/debugger.dtd">
-%debuggerDTD;
 ]>
 
diff --git a/browser/base/content/browser-menubar.inc b/browser/base/content/browser-menubar.inc
index a57e55c7ff7..3c968849df1 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -557,20 +557,34 @@
                     label="&webDeveloperMenu.label;"
                     accesskey="&webDeveloperMenu.accesskey;">
                 <menupopup id="menuWebDeveloperPopup">
-                  <menuitem id="menu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar" accesskey="&devToolbarMenu.accesskey;"/>
-                  <menuitem id="webConsole" observes="devtoolsMenuBroadcaster_WebConsole" accesskey="&webConsoleCmd.accesskey;"/>
-                  <menuitem id="menu_remoteWebConsole" observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
-                  <menuitem id="menu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect" accesskey="&inspectMenu.accesskey;"/>
-                  <menuitem id="menu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI" accesskey="&responsiveDesignTool.accesskey;"/>
-                  <menuitem id="menu_debugger" observes="devtoolsMenuBroadcaster_Debugger" accesskey="&debuggerMenu.accesskey;"/>
-                  <menuitem id="menu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
-                  <menuitem id="menu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
-                  <menuitem id="menu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad" accesskey="&scratchpad.accesskey;"/>
-                  <menuitem id="menu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor" accesskey="&styleeditor.accesskey;"/>
-                  <menuitem id="menu_pageSource" observes="devtoolsMenuBroadcaster_PageSource" accesskey="&pageSourceCmd.accesskey;"/>
-                  <menuitem id="javascriptConsole" observes="devtoolsMenuBroadcaster_ErrorConsole" accesskey="&errorConsoleCmd.accesskey;"/>
+                  <menuitem id="menu_devToolbox"
+                            observes="devtoolsMenuBroadcaster_DevToolbox"
+                            accesskey="&devToolbox.accesskey;"/>
+                  <menuseparator id="menu_devtools_separator"/>
+                  <menuitem id="menu_devToolbar"
+                            observes="devtoolsMenuBroadcaster_DevToolbar"
+                            accesskey="&devToolbarMenu.accesskey;"/>
+                  <menuitem id="menu_remoteWebConsole"
+                            observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
+                  <menuitem id="menu_responsiveUI"
+                            observes="devtoolsMenuBroadcaster_ResponsiveUI"
+                            accesskey="&responsiveDesignTool.accesskey;"/>
+                  <menuitem id="menu_scratchpad"
+                            observes="devtoolsMenuBroadcaster_Scratchpad"
+                            accesskey="&scratchpad.accesskey;"/>
+                  <menuitem id="menu_pageSource"
+                            observes="devtoolsMenuBroadcaster_PageSource"
+                            accesskey="&pageSourceCmd.accesskey;"/>
+                  <menuitem id="javascriptConsole"
+                            observes="devtoolsMenuBroadcaster_ErrorConsole"
+                            accesskey="&errorConsoleCmd.accesskey;"/>
+                  <menuseparator id="menu_devToolsConnectSeparator"/>
+                  <menuitem id="menu_devtools_connect"
+                            observes="devtoolsMenuBroadcaster_connect"/>
                   <menuseparator id="devToolsEndSeparator"/>
-                  <menuitem id="getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools" accesskey="&getMoreDevtoolsCmd.accesskey;"/>
+                  <menuitem id="getMoreDevtools"
+                            observes="devtoolsMenuBroadcaster_GetMoreTools"
+                            accesskey="&getMoreDevtoolsCmd.accesskey;"/>
                 </menupopup>
               </menu>
               <menuitem id="menu_pageInfo"
diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index 46c6f192df6..ba917712b72 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -88,19 +88,15 @@
 
     <command id="Tools:Search" oncommand="BrowserSearch.webSearch();"/>
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
+    <command id="Tools:DevToolbox" oncommand="gDevTools.toggleToolboxCommand(gBrowser);"/>
     <command id="Tools:DevToolbar" oncommand="DeveloperToolbar.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:DevToolbarFocus" oncommand="DeveloperToolbar.focusToggle();" disabled="true"/>
-    <command id="Tools:WebConsole" oncommand="HUDConsoleUI.toggleHUD();"/>
     <command id="Tools:RemoteWebConsole" oncommand="HUDConsoleUI.toggleRemoteHUD();" disabled="true" hidden="true"/>
-    <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();"/>
-    <command id="Tools:Debugger" oncommand="DebuggerUI.toggleDebugger();" disabled="true" hidden="true"/>
-    <command id="Tools:RemoteDebugger" oncommand="DebuggerUI.toggleRemoteDebugger();" disabled="true" hidden="true"/>
-    <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true" hidden="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true" hidden="true"/>
-    <command id="Tools:StyleEditor" oncommand="StyleEditor.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:ErrorConsole" oncommand="toJavaScriptConsole()" disabled="true" hidden="true"/>
+    <command id="Tools:DevToolsConnect" oncommand="DevToolsXULCommands.openConnectScreen(gBrowser)"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
     <command id="Tools:PrivateBrowsing"
@@ -127,27 +123,6 @@
              oncommand="PlacesCommandHook.showPlacesOrganizer('History');"/>
   </commandset>
 
-  <commandset id="inspectorCommands">
-    <command id="Inspector:Inspect"
-             oncommand="InspectorUI.toggleInspection();"/>
-    <command id="Inspector:Sidebar"
-             oncommand="InspectorUI.toggleSidebar();"/>
-    <command id="Inspector:Tilt"
-             oncommand="Tilt.initialize();"/>
-    <command id="Inspector:HTMLPanel"
-             oncommand="InspectorUI.toggleHTMLPanel();"/>
-    <command id="Inspector:CopyInner"
-             oncommand="InspectorUI.copyInnerHTML();"/>
-    <command id="Inspector:CopyOuter"
-             oncommand="InspectorUI.copyOuterHTML();"/>
-    <command id="Inspector:DeleteNode"
-             oncommand="InspectorUI.deleteNode();"/>
-    <command id="Inspector:ToggleVeil"
-             oncommand="InspectorUI.toggleVeil();"/>
-    <command id="Inspector:ToggleInfobar"
-             oncommand="InspectorUI.toggleInfobar();"/>
-  </commandset>
-
   <broadcasterset id="mainBroadcasterSet">
     <broadcaster id="viewBookmarksSidebar" autoCheck="false" label="&bookmarksButton.label;"
                  type="checkbox" group="sidebar" sidebarurl="chrome://browser/content/bookmarks/bookmarksPanel.xul"
@@ -195,45 +170,23 @@
     <broadcaster id="socialSidebarBroadcaster" hidden="true"/>
 
     <!-- DevTools broadcasters -->
+    <broadcaster id="devtoolsMenuBroadcaster_DevToolbox"
+                 label="&devToolbarToolsButton.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:DevToolbox"/>
     <broadcaster id="devtoolsMenuBroadcaster_DevToolbar"
                  label="&devToolbarMenu.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:DevToolbar"
                  key="key_devToolbar"/>
-    <broadcaster id="devtoolsMenuBroadcaster_WebConsole"
-                 label="&webConsoleCmd.label;"
-                 type="checkbox" autocheck="false"
-                 key="key_webConsole"
-                 command="Tools:WebConsole"/>
     <broadcaster id="devtoolsMenuBroadcaster_RemoteWebConsole"
                  label="&remoteWebConsoleCmd.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:RemoteWebConsole"/>
-    <broadcaster id="devtoolsMenuBroadcaster_Inspect"
-                 label="&inspectMenu.label;"
-                 type="checkbox" autocheck="false"
-                 command="Tools:Inspect"
-                 key="key_inspect"/>
-    <broadcaster id="devtoolsMenuBroadcaster_Debugger"
-                 label="&debuggerMenu.label2;"
-                 type="checkbox" autocheck="false"
-                 command="Tools:Debugger"
-                 key="key_debugger"/>
-    <broadcaster id="devtoolsMenuBroadcaster_RemoteDebugger"
-                 label="&remoteDebuggerMenu.label;"
-                 command="Tools:RemoteDebugger"/>
-    <broadcaster id="devtoolsMenuBroadcaster_ChromeDebugger"
-                 label="&chromeDebuggerMenu.label;"
-                 command="Tools:ChromeDebugger"/>
     <broadcaster id="devtoolsMenuBroadcaster_Scratchpad"
                  label="&scratchpad.label;"
                  command="Tools:Scratchpad"
                  key="key_scratchpad"/>
-    <broadcaster id="devtoolsMenuBroadcaster_StyleEditor"
-                 label="&styleeditor.label;"
-                 type="checkbox" autocheck="false"
-                 command="Tools:StyleEditor"
-                 key="key_styleeditor"/>
     <broadcaster id="devtoolsMenuBroadcaster_ResponsiveUI"
                  label="&responsiveDesignTool.label;"
                  type="checkbox" autocheck="false"
@@ -250,6 +203,9 @@
     <broadcaster id="devtoolsMenuBroadcaster_GetMoreTools"
                  label="&getMoreDevtoolsCmd.label;"
                  oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
+    <broadcaster id="devtoolsMenuBroadcaster_connect"
+                 label="&devtoolsConnect.label;"
+                 command="Tools:DevToolsConnect"/>
 
     <!-- SocialAPI broadcasters -->
     <broadcaster id="socialBroadcaster_userDetails"
@@ -271,7 +227,7 @@
 
 #
 # Search Command Key Logic works like this:
-# 
+#
 # Unix: Ctrl+K (cross platform binding)
 #       Ctrl+J (in case of emacs Ctrl-K conflict)
 # Mac:  Cmd+K (cross platform binding)
@@ -303,27 +259,6 @@
     <key id="key_errorConsole" key="&errorConsoleCmd.commandkey;" command="Tools:ErrorConsole" modifiers="accel,shift"/>
     <key id="key_devToolbar" keycode="&devToolbar.keycode;" modifiers="shift"
          keytext="&devToolbar.keytext;" command="Tools:DevToolbarFocus"/>
-    <key id="key_webConsole" key="&webConsoleCmd.commandkey;" oncommand="HUDConsoleUI.toggleHUD();"
-#ifdef XP_MACOSX
-        modifiers="accel,alt"
-#else
-        modifiers="accel,shift"
-#endif
-    />
-    <key id="key_debugger" key="&debuggerMenu.commandkey;" command="Tools:Debugger"
-#ifdef XP_MACOSX
-        modifiers="accel,alt"
-#else
-        modifiers="accel,shift"
-#endif
-    />
-    <key id="key_inspect" key="&inspectMenu.commandkey;" command="Inspector:Inspect"
-#ifdef XP_MACOSX
-        modifiers="accel,alt"
-#else
-        modifiers="accel,shift"
-#endif
-    />
     <key id="key_responsiveUI" key="&responsiveDesignTool.commandkey;" command="Tools:ResponsiveUI"
 #ifdef XP_MACOSX
         modifiers="accel,alt"
@@ -333,8 +268,6 @@
     />
     <key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
          keytext="&scratchpad.keytext;" command="Tools:Scratchpad"/>
-    <key id="key_styleeditor" keycode="&styleeditor.keycode;" modifiers="shift"
-         keytext="&styleeditor.keytext;" command="Tools:StyleEditor"/>
     <key id="openFileKb" key="&openFileCmd.commandkey;" command="Browser:OpenFile"  modifiers="accel"/>
     <key id="key_savePage" key="&savePageCmd.commandkey;" command="Browser:SavePage" modifiers="accel"/>
     <key id="printKb" key="&printCmd.commandkey;" command="cmd_print"  modifiers="accel"/>
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 1e59706185b..66521667481 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -562,10 +562,6 @@ statuspanel[inactive][previoustype=overLink] {
   -moz-box-align: end;
 }
 
-.styleInspector {
-  min-width: 350px;
-}
-
 .panel-inner-arrowcontentfooter[footertype="promobox"] {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
 }
@@ -593,22 +589,16 @@ html|*#gcli-output-frame,
   direction: ltr;
 }
 
-#developer-toolbar-webconsole[error-count] > .toolbarbutton-icon {
+#developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
   display: none;
 }
 
-#developer-toolbar-webconsole[error-count]:before {
+#developer-toolbar-toolbox-button[error-count]:before {
   content: attr(error-count);
   display: -moz-box;
   -moz-box-pack: center;
 }
 
-/* We don't show the Style Editor button in the developer toolbar for now.
-   See bug 771203 */
-#developer-toolbar-styleeditor {
-  display: none;
-}
-
 /* Responsive Mode */
 
 .browserContainer[responsivemode] {
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index e34523e7744..8bc54889932 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -118,24 +118,6 @@ XPCOMUtils.defineLazyGetter(this, "DeveloperToolbar", function() {
   return new tmp.DeveloperToolbar(window, document.getElementById("developer-toolbar"));
 });
 
-XPCOMUtils.defineLazyGetter(this, "InspectorUI", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/inspector.jsm", tmp);
-  return new tmp.InspectorUI(window);
-});
-
-XPCOMUtils.defineLazyGetter(this, "DebuggerUI", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/DebuggerUI.jsm", tmp);
-  return new tmp.DebuggerUI(window);
-});
-
-XPCOMUtils.defineLazyGetter(this, "Tilt", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/Tilt.jsm", tmp);
-  return new tmp.Tilt(window);
-});
-
 XPCOMUtils.defineLazyGetter(this, "Social", function() {
   let tmp = {};
   Cu.import("resource:///modules/Social.jsm", tmp);
@@ -1436,36 +1418,6 @@ var gBrowserInit = {
       }
     }
 
-    // Enable Debugger?
-    let enabled = gPrefService.getBoolPref("devtools.debugger.enabled");
-    if (enabled) {
-      let cmd = document.getElementById("Tools:Debugger");
-      cmd.removeAttribute("disabled");
-      cmd.removeAttribute("hidden");
-    }
-
-    // Enable Remote Debugger?
-    let enabled = gPrefService.getBoolPref("devtools.debugger.remote-enabled");
-    if (enabled) {
-      let cmd = document.getElementById("Tools:RemoteDebugger");
-      cmd.removeAttribute("disabled");
-      cmd.removeAttribute("hidden");
-
-      cmd = document.getElementById("Tools:RemoteWebConsole");
-      cmd.removeAttribute("disabled");
-      cmd.removeAttribute("hidden");
-    }
-
-    // Enable Chrome Debugger?
-    let enabled = gPrefService.getBoolPref("devtools.chrome.enabled") &&
-                  gPrefService.getBoolPref("devtools.debugger.chrome-enabled") &&
-                  gPrefService.getBoolPref("devtools.debugger.remote-enabled");
-    if (enabled) {
-      let cmd = document.getElementById("Tools:ChromeDebugger");
-      cmd.removeAttribute("disabled");
-      cmd.removeAttribute("hidden");
-    }
-
     // Enable Error Console?
     // Temporarily enabled. See bug 798925.
     let consoleEnabled = true || gPrefService.getBoolPref("devtools.errorconsole.enabled") ||
@@ -1484,14 +1436,6 @@ var gBrowserInit = {
       cmd.removeAttribute("hidden");
     }
 
-    // Enable Style Editor?
-    let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
-    if (styleEditorEnabled) {
-      let cmd = document.getElementById("Tools:StyleEditor");
-      cmd.removeAttribute("disabled");
-      cmd.removeAttribute("hidden");
-    }
-
 #ifdef MENUBAR_CAN_AUTOHIDE
     // If the user (or the locale) hasn't enabled the top-level "Character
     // Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
@@ -1509,6 +1453,9 @@ var gBrowserInit = {
       cmd.removeAttribute("hidden");
     }
 
+    // Add Devtools menuitems and listeners
+    gDevTools.registerBrowserWindow(window);
+
     let appMenuButton = document.getElementById("appmenu-button");
     let appMenuPopup = document.getElementById("appmenu-popup");
     if (appMenuButton && appMenuPopup) {
@@ -1551,8 +1498,7 @@ var gBrowserInit = {
     if (!gStartupRan)
       return;
 
-    if (!__lookupGetter__("InspectorUI"))
-      InspectorUI.destroy();
+    gDevTools.forgetBrowserWindow(window);
 
     // First clean up services initialized in gBrowserInit.onLoad (or those whose
     // uninit methods don't depend on the services having been initialized).
@@ -1650,7 +1596,7 @@ var gBrowserInit = {
                          'viewToolbarsMenu', 'viewSidebarMenuMenu', 'Browser:Reload',
                          'viewFullZoomMenu', 'pageStyleMenu', 'charsetMenu', 'View:PageSource', 'View:FullScreen',
                          'viewHistorySidebar', 'Browser:AddBookmarkAs', 'Browser:BookmarkAllTabs',
-                         'View:PageInfo', 'Tasks:InspectPage', 'Browser:ToggleTabView', 'Browser:ToggleAddonBar'];
+                         'View:PageInfo', 'Browser:ToggleTabView', 'Browser:ToggleAddonBar'];
     var element;
 
     for (let disabledItem of disabledItems) {
@@ -7456,6 +7402,12 @@ var TabContextMenu = {
   }
 };
 
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "DevToolsXULCommands",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+
 XPCOMUtils.defineLazyGetter(this, "HUDConsoleUI", function () {
   let tempScope = {};
   Cu.import("resource:///modules/HUDService.jsm", tempScope);
@@ -7551,41 +7503,6 @@ XPCOMUtils.defineLazyGetter(ResponsiveUI, "ResponsiveUIManager", function() {
   return tmp.ResponsiveUIManager;
 });
 
-var StyleEditor = {
-  prefEnabledName: "devtools.styleeditor.enabled",
-  /**
-   * Opens the style editor. If the UI is already open, it will be focused.
-   *
-   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
-   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
-   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
-   */
-  openChrome: function SE_openChrome(aSelectedStyleSheet, aLine, aCol)
-  {
-    let contentWindow = gBrowser.selectedBrowser.contentWindow;
-    let win = this.StyleEditorManager.getEditorForWindow(contentWindow);
-    if (win) {
-      this.StyleEditorManager.selectEditor(win);
-      return win;
-    } else {
-      return this.StyleEditorManager.newEditor(contentWindow, window,
-                                               aSelectedStyleSheet, aLine, aCol);
-    }
-  },
-
-  toggle: function SE_toggle()
-  {
-    this.StyleEditorManager.toggleEditor(gBrowser.contentWindow, window);
-  }
-};
-
-XPCOMUtils.defineLazyGetter(StyleEditor, "StyleEditorManager", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/StyleEditor.jsm", tmp);
-  return new tmp.StyleEditorManager(window);
-});
-
-
 XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
 #ifdef XP_WIN
   // Only show resizers on Windows 2000 and XP
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 38d9462e564..e49cf24da6e 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -278,22 +278,6 @@
            noautofocus="true"
            position="topcenter topright"/>
 
-    <menupopup id="inspector-node-popup">
-      <menuitem id="inspectorHTMLCopyInner"
-                label="&inspectorHTMLCopyInner.label;"
-                accesskey="&inspectorHTMLCopyInner.accesskey;"
-                command="Inspector:CopyInner"/>
-      <menuitem id="inspectorHTMLCopyOuter"
-                label="&inspectorHTMLCopyOuter.label;"
-                accesskey="&inspectorHTMLCopyOuter.accesskey;"
-                command="Inspector:CopyOuter"/>
-      <menuseparator/>
-      <menuitem id="inspectorHTMLDelete"
-                label="&inspectorHTMLDelete.label;"
-                accesskey="&inspectorHTMLDelete.accesskey;"
-                command="Inspector:DeleteNode"/>
-    </menupopup>
-
     <menupopup id="toolbar-context-menu"
                onpopupshowing="onViewToolbarsPopupShowing(event);">
       <menuseparator/>
@@ -1064,19 +1048,6 @@
       <chatbar id="pinnedchats" layer="true" mousethrough="always" hidden="true"/>
       <statuspanel id="statusbar-display" inactive="true"/>
     </vbox>
-    <splitter id="devtools-side-splitter" hidden="true"/>
-    <vbox id="devtools-sidebar-box" hidden="true"
-          style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
-      <toolbar id="devtools-sidebar-toolbar"
-               class="devtools-toolbar"
-               nowindowdrag="true">
-        <spacer flex="1"/>
-        <toolbarbutton tooltiptext="&inspectSidebarCloseButton.tooltiptext;"
-                       class="devtools-closebutton"
-                       command="Inspector:Sidebar"/>
-      </toolbar>
-      <deck id="devtools-sidebar-deck" flex="1"/>
-    </vbox>
     <splitter id="social-sidebar-splitter"
               class="chromeclass-extrachrome sidebar-splitter"
               observes="socialSidebarBroadcaster"/>
@@ -1115,52 +1086,6 @@
   </hbox>
 
   <vbox id="browser-bottombox" layer="true">
-    <toolbar id="inspector-toolbar"
-             class="devtools-toolbar"
-             nowindowdrag="true"
-             hidden="true">
-#ifdef XP_MACOSX
-      <toolbarbutton id="highlighter-closebutton"
-                     class="devtools-closebutton"
-                     oncommand="InspectorUI.closeInspectorUI(false);"
-                     tooltiptext="&inspectCloseButton.tooltiptext;"/>
-#endif
-      <toolbarbutton id="inspector-inspect-toolbutton"
-                     class="devtools-toolbarbutton"
-                     command="Inspector:Inspect"/>
-      <toolbarbutton id="inspector-treepanel-toolbutton"
-                     class="devtools-toolbarbutton"
-                     tabindex="0"
-                     aria-label="&markupButton.arialabel;"
-                     accesskey="&markupButton.accesskey;"
-                     command="Inspector:HTMLPanel"/>
-      <arrowscrollbox id="inspector-breadcrumbs"
-                      flex="1" orient="horizontal"
-                      clicktoscroll="true"/>
-      <hbox id="inspector-tools">
-        <toolbarbutton id="inspector-3D-button"
-                       class="devtools-toolbarbutton"
-                       hidden="true"
-                       label="&inspect3DViewButton.label;"
-                       accesskey="&inspect3DViewButton.accesskey;"
-                       tabindex="0"
-                       command="Inspector:Tilt"/>
-        <toolbarbutton id="inspector-style-button"
-                       class="devtools-toolbarbutton"
-                       label="&inspectStyleButton.label;"
-                       accesskey="&inspectStyleButton.accesskey;"
-                       tabindex="0"
-                       command="Inspector:Sidebar"/>
-        <!-- registered tools go here -->
-      </hbox>
-#ifndef XP_MACOSX
-      <toolbarbutton id="highlighter-closebutton"
-                     class="devtools-closebutton"
-                     oncommand="InspectorUI.closeInspectorUI(false);"
-                     tooltiptext="&inspectCloseButton.tooltiptext;"/>
-#endif
-    </toolbar>
-
     <toolbar id="developer-toolbar"
              class="devtools-toolbar"
              hidden="true">
@@ -1177,36 +1102,9 @@
             <hbox class="gclitoolbar-complete-node"/>
             <textbox class="gclitoolbar-input-node" rows="1"/>
           </stack>
-          <toolbarbutton id="developer-toolbar-webconsole"
+          <toolbarbutton id="developer-toolbar-toolbox-button"
                          class="developer-toolbar-button"
-                         observes="devtoolsMenuBroadcaster_WebConsole"/>
-          <toolbarbutton id="developer-toolbar-inspector"
-                         class="developer-toolbar-button"
-                         observes="devtoolsMenuBroadcaster_Inspect"/>
-          <toolbarbutton id="developer-toolbar-styleeditor"
-                         class="developer-toolbar-button"
-                         observes="devtoolsMenuBroadcaster_StyleEditor"/>
-          <toolbarbutton id="developer-toolbar-debugger"
-                         class="developer-toolbar-button"
-                         observes="devtoolsMenuBroadcaster_Debugger"/>
-          <toolbarbutton id="developer-toolbar-other-tools"
-                         type="menu"
-                         class="developer-toolbar-button"
-                         label="&devToolbarOtherToolsButton.label;">
-            <menupopup position="before_end">
-               <menuitem observes="devtoolsMenuBroadcaster_DevToolbar"/>
-               <menuitem observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
-               <menuitem observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
-               <menuitem observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
-               <menuitem observes="devtoolsMenuBroadcaster_Scratchpad"/>
-               <menuitem observes="devtoolsMenuBroadcaster_StyleEditor"/>
-               <menuitem observes="devtoolsMenuBroadcaster_PageSource"/>
-               <menuitem observes="devtoolsMenuBroadcaster_ErrorConsole"/>
-               <menuseparator/>
-               <menuitem observes="devtoolsMenuBroadcaster_GetMoreTools"/>
-            </menupopup>
-          </toolbarbutton>
-
+                         observes="devtoolsMenuBroadcaster_DevToolbox"/>
 #ifndef XP_MACOSX
           <toolbarbutton id="developer-toolbar-closebutton"
                          class="devtools-closebutton"
diff --git a/browser/base/content/highlighter.css b/browser/base/content/highlighter.css
index 574060d5ca3..0992a877a5b 100644
--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@@ -2,64 +2,60 @@
  * 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/. */
  
-#highlighter-container {
+.highlighter-container {
   pointer-events: none;
 }
 
-#highlighter-controls {
+.highlighter-controls {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-#highlighter-outline-container {
+.highlighter-outline-container {
   overflow: hidden;
   position: relative;
 }
 
-#highlighter-outline {
+.highlighter-outline {
   position: absolute;
 }
 
-#highlighter-outline[hidden] {
+.highlighter-outline[hidden] {
   opacity: 0;
   pointer-events: none;
   display: -moz-box;
 }
 
-#highlighter-outline:not([disable-transitions]) {
+.highlighter-outline:not([disable-transitions]) {
   transition-property: opacity, top, left, width, height;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
-.inspector-breadcrumbs-button {
-  direction: ltr;
-}
-
 /*
  * Node Infobar
  */
 
-#highlighter-nodeinfobar-container {
+.highlighter-nodeinfobar-container {
   position: absolute;
   max-width: 95%;
 }
 
-#highlighter-nodeinfobar-container[hidden] {
+.highlighter-nodeinfobar-container[hidden] {
   opacity: 0;
   pointer-events: none;
   display: -moz-box;
 }
 
-#highlighter-nodeinfobar-container:not([disable-transitions]),
-#highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
+.highlighter-nodeinfobar-container:not([disable-transitions]),
+.highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
   transition-property: transform, opacity, top, left;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
-#highlighter-nodeinfobar-text {
+.highlighter-nodeinfobar-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -70,19 +66,19 @@
   display: none;
 }
 
-#highlighter-nodeinfobar-container:not([locked]):not(:hover) > #highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
+.highlighter-nodeinfobar-container:not([locked]):not(:hover) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
   visibility: hidden;
 }
 
-#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar,
-#highlighter-nodeinfobar-container:not([locked]):hover > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[locked] > .highlighter-nodeinfobar,
+.highlighter-nodeinfobar-container:not([locked]):hover > .highlighter-nodeinfobar {
   pointer-events: auto;
 }
 
-html|*#highlighter-nodeinfobar-id,
-html|*#highlighter-nodeinfobar-classes,
-html|*#highlighter-nodeinfobar-pseudo-classes,
-html|*#highlighter-nodeinfobar-tagname {
+html|*.highlighter-nodeinfobar-id,
+html|*.highlighter-nodeinfobar-classes,
+html|*.highlighter-nodeinfobar-pseudo-classes,
+html|*.highlighter-nodeinfobar-tagname {
   -moz-user-select: text;
   cursor: text;
 }
@@ -91,41 +87,18 @@ html|*#highlighter-nodeinfobar-tagname {
   display: none;
 }
 
-#highlighter-nodeinfobar-container[position="top"]:not([hide-arrow]) > #highlighter-nodeinfobar-arrow-bottom {
+.highlighter-nodeinfobar-container[position="top"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-bottom {
   display: block;
 }
 
-#highlighter-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > #highlighter-nodeinfobar-arrow-top {
+.highlighter-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-top {
   display: block;
 }
 
-#highlighter-nodeinfobar-container[disabled] {
+.highlighter-nodeinfobar-container[disabled] {
   visibility: hidden;
 }
 
-html|*#highlighter-nodeinfobar-tagname {
+html|*.highlighter-nodeinfobar-tagname {
   text-transform: lowercase;
 }
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-#inspector-option-toolbarbutton > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
-#inspector-layoutview-container > iframe {
-  /* header size */
-  height: 28px;
-}
-
-#inspector-layoutview-container:not([disable-transitions]) > iframe {
-  transition-property: height;
-  transition-duration: 0.2s;
-}
-
-#inspector-layoutview-container > iframe[open] {
-  /* header size + layout view size: 28px + 145px */
-  height: 173px;
-}
diff --git a/browser/base/content/nsContextMenu.js b/browser/base/content/nsContextMenu.js
index 397aad3bd1f..29c015ed16d 100644
--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@@ -412,11 +412,19 @@ nsContextMenu.prototype = {
   },
 
   inspectNode: function CM_inspectNode() {
-    if (InspectorUI.isTreePanelOpen) {
-      InspectorUI.inspectNode(this.target);
-      InspectorUI.stopInspecting();
+    let gBrowser = this.browser.ownerDocument.defaultView.gBrowser;
+    let imported = {};
+    Cu.import("resource:///modules/devtools/Target.jsm", imported);
+    var target = imported.TargetFactory.forTab(gBrowser.selectedTab);
+    let inspector = gDevTools.getPanelForTarget("inspector", target);
+    if (inspector && inspector.isReady) {
+      inspector.selection.setNode(this.target);
     } else {
-      InspectorUI.openInspectorUI(this.target);
+      let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+      toolbox.once("inspector-ready", function(event, panel) {
+        let inspector = gDevTools.getPanelForTarget("inspector", target);
+        inspector.selection.setNode(this.target, "browser-context-menu");
+      }.bind(this));
     }
   },
 
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index 5a40eafa26a..9823172f2f6 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -13,7 +13,7 @@ include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/config.mk
 
 DIRS = \
-  highlighter \
+  inspector \
   markupview \
   webconsole \
   commandline \
@@ -26,6 +26,7 @@ DIRS = \
   layoutview \
   shared \
   responsivedesign \
+  framework \
   $(NULL)
 
 include $(topsrcdir)/config/rules.mk
diff --git a/browser/devtools/commandline/CmdBreak.jsm b/browser/devtools/commandline/CmdBreak.jsm
index 819e7002b25..e132ec25913 100644
--- a/browser/devtools/commandline/CmdBreak.jsm
+++ b/browser/devtools/commandline/CmdBreak.jsm
@@ -12,6 +12,12 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
                                   "resource:///modules/HUDService.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+
 /**
  * 'break' command
  */
@@ -30,12 +36,15 @@ gcli.addCommand({
   description: gcli.lookup("breaklistDesc"),
   returnType: "html",
   exec: function(args, context) {
-    let win = HUDService.currentContext();
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
-    let breakpoints = dbg.breakpoints;
+
+    let breakpoints = dbg.getAllBreakpoints();
 
     if (Object.keys(breakpoints).length === 0) {
       return gcli.lookup("breaklistNone");
@@ -76,11 +85,13 @@ gcli.addCommand({
       type: {
         name: "selection",
         data: function() {
-          let win = HUDService.currentContext();
-          let dbg = win.DebuggerUI.getDebugger();
+          let gBrowser = HUDService.currentContext().gBrowser;
+          let target = TargetFactory.forTab(gBrowser.selectedTab);
+          let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+
           let files = [];
           if (dbg) {
-            let sourcesView = dbg.contentWindow.DebuggerView.Sources;
+            let sourcesView = dbg.panelWin.DebuggerView.Sources;
             for (let item in sourcesView) {
               files.push(item.value);
             }
@@ -99,8 +110,11 @@ gcli.addCommand({
   returnType: "html",
   exec: function(args, context) {
     args.type = "line";
-    let win = HUDService.currentContext();
-    let dbg = win.DebuggerUI.getDebugger();
+
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
@@ -131,12 +145,14 @@ gcli.addCommand({
         name: "number",
         min: 0,
         max: function() {
-          let win = HUDService.currentContext();
-          let dbg = win.DebuggerUI.getDebugger();
+          let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+          let target = TargetFactory.forTab(gBrowser.selectedTab);
+          let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+
           if (!dbg) {
             return gcli.lookup("breakaddDebuggerStopped");
           }
-          return Object.keys(dbg.breakpoints).length - 1;
+          return Object.keys(dbg.getAllBreakpoints()).length - 1;
         },
       },
       description: gcli.lookup("breakdelBreakidDesc")
@@ -144,14 +160,16 @@ gcli.addCommand({
   ],
   returnType: "html",
   exec: function(args, context) {
-    let win = HUDService.currentContext();
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
 
-    let breakpoints = dbg.breakpoints;
-    let id = Object.keys(dbg.breakpoints)[args.breakid];
+    let breakpoints = dbg.getAllBreakpoints();
+    let id = Object.keys(breakpoints)[args.breakid];
     if (!id || !(id in breakpoints)) {
       return gcli.lookup("breakNotFound");
     }
diff --git a/browser/devtools/commandline/CmdCalllog.jsm b/browser/devtools/commandline/CmdCalllog.jsm
index d143a4b2a69..ef60785a72f 100644
--- a/browser/devtools/commandline/CmdCalllog.jsm
+++ b/browser/devtools/commandline/CmdCalllog.jsm
@@ -9,8 +9,8 @@ this.EXPORTED_SYMBOLS = [ ];
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
-                                  "resource:///modules/HUDService.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   let JsDebugger = {};
@@ -22,6 +22,9 @@ XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   return global.Debugger;
 });
 
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
+
 let debuggers = [];
 
 /**
@@ -50,8 +53,9 @@ gcli.addCommand({
 
     debuggers.push(dbg);
 
-    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab;
-    HUDService.activateHUDForContext(tab);
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.openToolboxForTab(target, "webconsole");
 
     return gcli.lookup("calllogStartReply");
   },
diff --git a/browser/devtools/commandline/CmdCalllogChrome.jsm b/browser/devtools/commandline/CmdCalllogChrome.jsm
index 80aa141155c..60545fe8a1c 100644
--- a/browser/devtools/commandline/CmdCalllogChrome.jsm
+++ b/browser/devtools/commandline/CmdCalllogChrome.jsm
@@ -10,8 +10,10 @@ const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
-                                  "resource:///modules/HUDService.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   let JsDebugger = {};
@@ -108,8 +110,9 @@ gcli.addCommand({
                                 ": " + this.callDescription(frame));
     }.bind(this);
 
-    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab;
-    HUDService.activateHUDForContext(tab);
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.openToolboxForTab(target, "webconsole");
 
     return gcli.lookup("calllogChromeStartReply");
   },
diff --git a/browser/devtools/commandline/CmdConsole.jsm b/browser/devtools/commandline/CmdConsole.jsm
index 391ced0b7be..4a602b6a4c7 100644
--- a/browser/devtools/commandline/CmdConsole.jsm
+++ b/browser/devtools/commandline/CmdConsole.jsm
@@ -11,6 +11,10 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
                                   "resource:///modules/HUDService.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
 
 /**
  * 'console' command
@@ -44,8 +48,9 @@ gcli.addCommand({
   name: "console close",
   description: gcli.lookup("consolecloseDesc"),
   exec: function Command_consoleClose(args, context) {
-    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab
-    HUDService.deactivateHUDForContext(tab);
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
   }
 });
 
@@ -56,7 +61,8 @@ gcli.addCommand({
   name: "console open",
   description: gcli.lookup("consoleopenDesc"),
   exec: function Command_consoleOpen(args, context) {
-    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab
-    HUDService.activateHUDForContext(tab);
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.openToolboxForTab(target, "webconsole");
   }
 });
diff --git a/browser/devtools/commandline/CmdDbg.jsm b/browser/devtools/commandline/CmdDbg.jsm
index 257efd2afc2..c0dc1b30b85 100644
--- a/browser/devtools/commandline/CmdDbg.jsm
+++ b/browser/devtools/commandline/CmdDbg.jsm
@@ -9,6 +9,11 @@ this.EXPORTED_SYMBOLS = [ ];
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
+
 /**
  * 'dbg' command
  */
@@ -26,19 +31,9 @@ gcli.addCommand({
   description: gcli.lookup("dbgOpen"),
   params: [],
   exec: function (args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let tab = win.gBrowser.selectedTab;
-    let dbg = win.DebuggerUI.findDebugger();
-
-    if (dbg) {
-      if (dbg.ownerTab !== tab) {
-        win.DebuggerUI.toggleDebugger();
-      }
-
-      return;
-    }
-
-    win.DebuggerUI.toggleDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.openToolboxForTab(target, "jsdebugger");
   }
 });
 
@@ -50,12 +45,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgClose"),
   params: [],
   exec: function (args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let tab = win.gBrowser.selectedTab;
-    let dbg = win.DebuggerUI.findDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
-    if (dbg) {
-      dbg.close();
+    if (dbg /* FIXME: and debugger panel is currently active */) {
+      gDevTools.closeToolbox(target);
     }
   }
 });
@@ -68,11 +63,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgInterrupt"),
   params: [],
   exec: function(args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
     if (dbg) {
-      let controller = dbg.contentWindow.DebuggerController;
+      let controller = dbg._controller;
       let thread = controller.activeThread;
       if (!thread.paused) {
         thread.interrupt();
@@ -89,11 +85,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgContinue"),
   params: [],
   exec: function(args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
     if (dbg) {
-      let controller = dbg.contentWindow.DebuggerController;
+      let controller = dbg._controller;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.resume();
@@ -121,11 +118,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepOverDesc"),
   params: [],
   exec: function(args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
     if (dbg) {
-      let controller = dbg.contentWindow.DebuggerController;
+      let controller = dbg._controller;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepOver();
@@ -142,11 +140,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepInDesc"),
   params: [],
   exec: function(args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
     if (dbg) {
-      let controller = dbg.contentWindow.DebuggerController;
+      let controller = dbg._controller;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepIn();
@@ -163,11 +162,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepOutDesc"),
   params: [],
   exec: function(args, context) {
-    let win = context.environment.chromeDocument.defaultView;
-    let dbg = win.DebuggerUI.getDebugger();
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
 
     if (dbg) {
-      let controller = dbg.contentWindow.DebuggerController;
+      let controller = dbg._controller;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepOut();
diff --git a/browser/devtools/commandline/Commands.jsm b/browser/devtools/commandline/Commands.jsm
index c1ca7dd0ffa..452f2778912 100644
--- a/browser/devtools/commandline/Commands.jsm
+++ b/browser/devtools/commandline/Commands.jsm
@@ -24,3 +24,4 @@ Cu.import("resource:///modules/devtools/CmdResize.jsm");
 Cu.import("resource:///modules/devtools/CmdRestart.jsm");
 Cu.import("resource:///modules/devtools/CmdScreenshot.jsm");
 Cu.import("resource:///modules/devtools/CmdTilt.jsm");
+Cu.import("resource:///modules/devtools/CmdScratchpad.jsm");
diff --git a/browser/devtools/commandline/test/browser_dbg_cmd.js b/browser/devtools/commandline/test/browser_dbg_cmd.js
index d6e6f4cffc6..bb950d87760 100644
--- a/browser/devtools/commandline/test/browser_dbg_cmd.js
+++ b/browser/devtools/commandline/test/browser_dbg_cmd.js
@@ -1,3 +1,11 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 function test() {
   const TEST_URI = "http://example.com/browser/browser/devtools/commandline/" +
                    "test/browser_dbg_cmd.html";
@@ -7,54 +15,40 @@ function test() {
   });
 }
 
-function testDbgCmd() {
-  DeveloperToolbarTest.exec({
-    typed: "dbg open",
-    blankOutput: true
-  });
+function testCommands(dbg, cmd) {
+  // Wait for the initial resume...
+  dbg._controller.activeThread.addOneTimeListener("resumed", function () {
+    info("Starting tests.");
 
-  let pane = DebuggerUI.findDebugger();
-  ok(pane, "Debugger was opened.");
-  let frame = pane._frame;
+    let contentDoc = content.window.document;
+    let output = contentDoc.querySelector("input[type=text]");
+    let btnDoit = contentDoc.querySelector("input[type=button]");
 
-  frame.addEventListener("Debugger:Connected", function dbgConnected(aEvent) {
-    frame.removeEventListener("Debugger:Connected", dbgConnected, true);
-
-    // Wait for the initial resume...
-    aEvent.target.ownerDocument.defaultView.gClient
-        .addOneTimeListener("resumed", function() {
-
-      info("Starting tests.");
-
-      let contentDoc = content.window.document;
-      let output = contentDoc.querySelector("input[type=text]");
-      let btnDoit = contentDoc.querySelector("input[type=button]");
-
-      cmd("dbg interrupt", function() {
-        ok(true, "debugger is paused");
-        pane.contentWindow.gClient.addOneTimeListener("resumed", function() {
-          ok(true, "debugger continued");
-          pane.contentWindow.gClient.addOneTimeListener("paused", function() {
+    cmd("dbg interrupt", function() {
+      ok(true, "debugger is paused");
+      dbg._controller.activeThread.addOneTimeListener("resumed", function () {
+        ok(true, "debugger continued");
+        dbg._controller.activeThread.addOneTimeListener("paused", function() {
+          cmd("dbg step in", function() {
             cmd("dbg step in", function() {
               cmd("dbg step in", function() {
-                cmd("dbg step in", function() {
-                  is(output.value, "step in", "debugger stepped in");
-                  cmd("dbg step over", function() {
-                    is(output.value, "step over", "debugger stepped over");
-                    cmd("dbg step out", function() {
-                      is(output.value, "step out", "debugger stepped out");
+                is(output.value, "step in", "debugger stepped in");
+                cmd("dbg step over", function() {
+                  is(output.value, "step over", "debugger stepped over");
+                  cmd("dbg step out", function() {
+                    is(output.value, "step out", "debugger stepped out");
+                    cmd("dbg continue", function() {
                       cmd("dbg continue", function() {
-                        cmd("dbg continue", function() {
-                          is(output.value, "dbg continue", "debugger continued");
-                          DeveloperToolbarTest.exec({
-                            typed: "dbg close",
-                            blankOutput: true
-                          });
-
-                          let dbg = DebuggerUI.findDebugger();
-                          ok(!dbg, "Debugger was closed.");
-                          finish();
+                        is(output.value, "dbg continue", "debugger continued");
+                        DeveloperToolbarTest.exec({
+                          typed: "dbg close",
+                          blankOutput: true
                         });
+
+                        let target = TargetFactory.forTab(gBrowser.selectedTab);
+                        ok(!gDevTools.getToolboxForTarget(target),
+                          "Debugger was closed.");
+                        finish();
                       });
                     });
                   });
@@ -62,21 +56,42 @@ function testDbgCmd() {
               });
             });
           });
-          EventUtils.sendMouseEvent({type:"click"}, btnDoit);
-        });
-        DeveloperToolbarTest.exec({
-          typed: "dbg continue",
-          blankOutput: true
         });
+        EventUtils.sendMouseEvent({type:"click"}, btnDoit);
+      });
+      DeveloperToolbarTest.exec({
+        typed: "dbg continue",
+        blankOutput: true
       });
     });
+  });
+}
+
+function testDbgCmd() {
+  DeveloperToolbarTest.exec({
+    typed: "dbg open",
+    blankOutput: true
+  });
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.getToolboxForTarget(target);
+
+  toolbox.once("jsdebugger-ready", function dbgReady() {
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    ok(dbg, "DebuggerPanel exists");
 
     function cmd(aTyped, aCallback) {
-      pane.contentWindow.gClient.addOneTimeListener("paused", aCallback);
+      dbg._controller.activeThread.addOneTimeListener("paused", aCallback);
       DeveloperToolbarTest.exec({
         typed: aTyped,
         blankOutput: true
       });
     }
+
+    if (dbg._controller.activeThread) {
+      testCommands(dbg, cmd);
+    } else {
+      dbg.once("connected", testCommands.bind(null, dbg, cmd));
+    }
   });
 }
diff --git a/browser/devtools/commandline/test/browser_dbg_cmd_break.js b/browser/devtools/commandline/test/browser_dbg_cmd_break.js
index f3299f4c2e3..9d66767b034 100644
--- a/browser/devtools/commandline/test/browser_dbg_cmd_break.js
+++ b/browser/devtools/commandline/test/browser_dbg_cmd_break.js
@@ -6,6 +6,10 @@
 const TEST_URI = "http://example.com/browser/browser/devtools/commandline/" +
                  "test/browser_dbg_cmd_break.html";
 
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 function test() {
   DeveloperToolbarTest.test(TEST_URI, [ testBreakCommands ]);
 }
@@ -35,86 +39,84 @@ function testBreakCommands() {
     status: 'ERROR'
   });
 
-  let pane = DebuggerUI.toggleDebugger();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.openToolboxForTab(target, "jsdebugger");
+  toolbox.once("jsdebugger-ready", function dbgReady() {
+    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    ok(dbg, "DebuggerPanel exists");
+    dbg.once("connected", function() {
+      // Wait for the initial resume...
+      dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
+        dbg._view.Variables.lazyEmpty = false;
 
-  var dbgConnected = DeveloperToolbarTest.checkCalled(function() {
-    pane._frame.removeEventListener("Debugger:Connected", dbgConnected, true);
-
-    // Wait for the initial resume.
-    let client = pane.contentWindow.gClient;
-
-    var resumed = DeveloperToolbarTest.checkCalled(function() {
-
-      var framesAdded = DeveloperToolbarTest.checkCalled(function() {
-        helpers.setInput('break add line ' + TEST_URI + ' ' + content.wrappedJSObject.line0);
-        helpers.check({
-          hints: '',
-          status: 'VALID',
-          args: {
-            file: { value: TEST_URI },
-            line: { value: content.wrappedJSObject.line0 },
-          }
-        });
-
-        DeveloperToolbarTest.exec({
-          args: {
-            type: 'line',
-            file: TEST_URI,
-            line: content.wrappedJSObject.line0
-          },
-          completed: false
-        });
-
-        helpers.setInput('break list');
-        helpers.check({
-          input:  'break list',
-          hints:            '',
-          markup: 'VVVVVVVVVV',
-          status: 'VALID'
-        });
-
-        DeveloperToolbarTest.exec();
-
-        var cleanup = DeveloperToolbarTest.checkCalled(function() {
-          helpers.setInput('break del 9');
+        var client = dbg.panelWin.gClient;
+        var framesAdded = DeveloperToolbarTest.checkCalled(function() {
+          helpers.setInput('break add line ' + TEST_URI + ' ' + content.wrappedJSObject.line0);
           helpers.check({
-            input:  'break del 9',
-            hints:             '',
-            markup: 'VVVVVVVVVVE',
-            status: 'ERROR',
-            args: {
-              breakid: { status: 'ERROR', message: '9 is greater than maximum allowed: 0.' },
-            }
-          });
-
-          helpers.setInput('break del 0');
-          helpers.check({
-            input:  'break del 0',
-            hints:             '',
-            markup: 'VVVVVVVVVVV',
+            hints: '',
             status: 'VALID',
             args: {
-              breakid: { value: 0 },
+              file: { value: TEST_URI },
+              line: { value: content.wrappedJSObject.line0 },
             }
           });
 
           DeveloperToolbarTest.exec({
-            args: { breakid: 0 },
+            args: {
+              type: 'line',
+              file: TEST_URI,
+              line: content.wrappedJSObject.line0
+            },
             completed: false
           });
+
+          helpers.setInput('break list');
+          helpers.check({
+            input:  'break list',
+            hints:            '',
+            markup: 'VVVVVVVVVV',
+            status: 'VALID'
+          });
+
+          DeveloperToolbarTest.exec();
+
+          var cleanup = DeveloperToolbarTest.checkCalled(function() {
+            helpers.setInput('break del 9');
+            helpers.check({
+              input:  'break del 9',
+              hints:             '',
+              markup: 'VVVVVVVVVVE',
+              status: 'ERROR',
+              args: {
+                breakid: { status: 'ERROR', message: '9 is greater than maximum allowed: 0.' },
+              }
+            });
+
+            helpers.setInput('break del 0');
+            helpers.check({
+              input:  'break del 0',
+              hints:             '',
+              markup: 'VVVVVVVVVVV',
+              status: 'VALID',
+              args: {
+                breakid: { value: 0 },
+              }
+            });
+
+            DeveloperToolbarTest.exec({
+              args: { breakid: 0 },
+              completed: false
+            });
+          });
+
+          client.activeThread.resume(cleanup);
         });
 
-        client.activeThread.resume(cleanup);
+        client.activeThread.addOneTimeListener("framesadded", framesAdded);
+
+        // Trigger newScript notifications using eval.
+        content.wrappedJSObject.firstCall();
       });
-
-      client.activeThread.addOneTimeListener("framesadded", framesAdded);
-
-      // Trigger newScript notifications using eval.
-      content.wrappedJSObject.firstCall();
     });
-
-    client.addOneTimeListener("resumed", resumed);
   });
-
-  pane._frame.addEventListener("Debugger:Connected", dbgConnected, true);
 }
diff --git a/browser/devtools/debugger/DebuggerPanel.jsm b/browser/devtools/debugger/DebuggerPanel.jsm
new file mode 100644
index 00000000000..ec60045741f
--- /dev/null
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@@ -0,0 +1,144 @@
+/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+"use strict";
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+this.EXPORTED_SYMBOLS = ["DebuggerDefinition"];
+
+const STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "Services",
+                                  "resource://gre/modules/Services.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
+                                  "resource:///modules/devtools/EventEmitter.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
+                                  "resource://gre/modules/devtools/dbg-server.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyGetter(this, "_strings",
+  function() Services.strings.createBundle(STRINGS_URI));
+
+XPCOMUtils.defineLazyGetter(this, "osString", function() {
+  return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
+});
+
+this.DebuggerDefinition = {
+  id: "jsdebugger",
+  key: l10n("open.commandkey"),
+  accesskey: l10n("debuggerMenu.accesskey"),
+  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
+  ordinal: 1,
+  killswitch: "devtools.debugger.enabled",
+  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
+  url: "chrome://browser/content/debugger.xul",
+  label: l10n("ToolboxDebugger.label"),
+
+  isTargetSupported: function(target) {
+    return true;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new DebuggerPanel(iframeWindow, toolbox);
+  }
+};
+
+
+function DebuggerPanel(iframeWindow, toolbox) {
+  this._toolbox = toolbox;
+  this._controller = iframeWindow.DebuggerController;
+  this._view = iframeWindow.DebuggerView;
+  this._controller._target = this.target;
+  this._bkp = this._controller.Breakpoints;
+  this.panelWin = iframeWindow;
+
+  this._ensureOnlyOneRunningDebugger();
+  if (!this.target.isRemote) {
+    if (!DebuggerServer.initialized) {
+      DebuggerServer.init();
+      DebuggerServer.addBrowserActors();
+    }
+  }
+
+  let onDebuggerLoaded = function () {
+    iframeWindow.removeEventListener("Debugger:Loaded", onDebuggerLoaded, true);
+    this.setReady();
+  }.bind(this);
+
+  let onDebuggerConnected = function () {
+    iframeWindow.removeEventListener("Debugger:Connected",
+      onDebuggerConnected, true);
+    this.emit("connected");
+  }.bind(this);
+
+  iframeWindow.addEventListener("Debugger:Loaded", onDebuggerLoaded, true);
+  iframeWindow.addEventListener("Debugger:Connected",
+    onDebuggerConnected, true);
+
+  new EventEmitter(this);
+}
+
+DebuggerPanel.prototype = {
+  // DevToolPanel API
+  get target() this._toolbox.target,
+
+  get isReady() this._isReady,
+
+  setReady: function() {
+    this._isReady = true;
+    this.emit("ready");
+  },
+
+  destroy: function() {
+    delete this._toolbox;
+    delete this._target;
+    delete this._controller;
+    delete this._view;
+    delete this._bkp;
+    delete this.panelWin;
+  },
+
+  // DebuggerPanel API
+
+  addBreakpoint: function() {
+    this._bkp.addBreakpoint.apply(this._bkp, arguments);
+  },
+
+  removeBreakpoint: function() {
+    this._bkp.removeBreakpoint.apply(this._bkp, arguments);
+  },
+
+  getBreakpoint: function() {
+    return this._bkp.getBreakpoint.apply(this._bkp, arguments);
+  },
+
+  getAllBreakpoints: function() {
+    return this._bkp.store;
+  },
+
+  // Private
+
+  _ensureOnlyOneRunningDebugger: function() {
+    // FIXME
+  },
+};
+
+/**
+ * Lookup l10n string from a string bundle.
+ * @param {string} aName The key to lookup.
+ * @returns A localized version of the given key.
+ */
+function l10n(aName)
+{
+  try {
+    return _strings.GetStringFromName(aName);
+  } catch (ex) {
+    Services.console.logStringMessage("Error reading '" + aName + "'");
+    throw new Error("l10n error with " + aName);
+  }
+}
diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js
index 110d872834e..aaa1e18ebe6 100644
--- a/browser/devtools/debugger/debugger-controller.js
+++ b/browser/devtools/debugger/debugger-controller.js
@@ -48,6 +48,7 @@ let DebuggerController = {
       return;
     }
     this._isInitialized = true;
+
     window.removeEventListener("load", this._startupDebugger, true);
 
     DebuggerView.initialize(function() {
@@ -145,14 +146,32 @@ let DebuggerController = {
    * wiring event handlers as necessary.
    */
   _connect: function DC__connect() {
-    if (window._isRemoteDebugger && !this._prepareConnection()) {
+    function callback() {
+      window.dispatchEvent("Debugger:Connected");
+    }
+
+    let client;
+    // Remote debugging gets the debuggee from a RemoteTarget object.
+    if (this._target.isRemote) {
+      client = this.client = this._target.client;
+
+      this._target.on("close", this._onTabDetached);
+      this._target.on("navigate", this._onTabNavigated);
+
+      if (this._target.chrome) {
+        let dbg = this._target.form.chromeDebugger;
+        this._startChromeDebugging(client, dbg, callback);
+      } else {
+        this._startDebuggingTab(client, this._target.form, callback);
+      }
       return;
     }
-    let transport = (window._isChromeDebugger || window._isRemoteDebugger)
-      ? debuggerSocketConnect(Prefs.remoteHost, Prefs.remotePort)
-      : DebuggerServer.connectPipe();
 
-    let client = this.client = new DebuggerClient(transport);
+    // Content debugging can connect directly to the page.
+    // TODO: convert this to use a TabTarget.
+    let transport = DebuggerServer.connectPipe();
+    client = this.client = new DebuggerClient(transport);
+
     client.addListener("tabNavigated", this._onTabNavigated);
     client.addListener("tabDetached", this._onTabDetached);
 
@@ -160,12 +179,11 @@ let DebuggerController = {
       client.listTabs(function(aResponse) {
         if (window._isChromeDebugger) {
           let dbg = aResponse.chromeDebugger;
-          this._startChromeDebugging(client, dbg);
+          this._startChromeDebugging(client, dbg, callback);
         } else {
           let tab = aResponse.tabs[aResponse.selected];
-          this._startDebuggingTab(client, tab);
+          this._startDebuggingTab(client, tab, callback);
         }
-        window.dispatchEvent("Debugger:Connected");
       }.bind(this));
     }.bind(this));
   },
@@ -180,9 +198,12 @@ let DebuggerController = {
     }
     this.client.removeListener("tabNavigated", this._onTabNavigated);
     this.client.removeListener("tabDetached", this._onTabDetached);
-    this.client.close();
 
-    this.client = null;
+    if (!this._target.isRemote) {
+      this.client.close();
+      this.client = null;
+    }
+
     this.tabClient = null;
     this.activeThread = null;
   },
@@ -212,7 +233,8 @@ let DebuggerController = {
    * @param object aTabGrip
    *        The remote protocol grip of the tab.
    */
-  _startDebuggingTab: function DC__startDebuggingTab(aClient, aTabGrip) {
+  _startDebuggingTab: function DC__startDebuggingTab
+      (aClient, aTabGrip, aCallback=function(){}) {
     if (!aClient) {
       Cu.reportError("No client found!");
       return;
@@ -238,6 +260,7 @@ let DebuggerController = {
         this.SourceScripts.connect();
         aThreadClient.resume();
 
+        aCallback();
       }.bind(this));
     }.bind(this));
   },
@@ -250,7 +273,8 @@ let DebuggerController = {
    * @param object aChromeDebugger
    *        The remote protocol grip of the chrome debugger.
    */
-  _startChromeDebugging: function DC__startChromeDebugging(aClient, aChromeDebugger) {
+  _startChromeDebugging: function DC__startChromeDebugging
+      (aClient, aChromeDebugger, aCallback=function(){}) {
     if (!aClient) {
       Cu.reportError("No client found!");
       return;
@@ -269,6 +293,7 @@ let DebuggerController = {
       this.SourceScripts.connect();
       aThreadClient.resume();
 
+      aCallback();
     }.bind(this));
   },
 
diff --git a/browser/devtools/debugger/debugger-toolbar.js b/browser/devtools/debugger/debugger-toolbar.js
index 8f0341a6a4b..547eae695ca 100644
--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -25,7 +25,6 @@ ToolbarView.prototype = {
    */
   initialize: function DVT_initialize() {
     dumpn("Initializing the ToolbarView");
-    this._closeButton = document.getElementById("close");
     this._togglePanesButton = document.getElementById("toggle-panes");
     this._resumeButton = document.getElementById("resume");
     this._stepOverButton = document.getElementById("step-over");
@@ -44,7 +43,6 @@ ToolbarView.prototype = {
     this._stepInTooltip = L10N.getFormatStr("stepInTooltip", [stepInKey]);
     this._stepOutTooltip = L10N.getFormatStr("stepOutTooltip", [stepOutKey]);
 
-    this._closeButton.addEventListener("click", this._onCloseClick, false);
     this._togglePanesButton.addEventListener("mousedown", this._onTogglePanesPressed, false);
     this._resumeButton.addEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.addEventListener("mousedown", this._onStepOverPressed, false);
@@ -55,7 +53,6 @@ ToolbarView.prototype = {
     this._stepInButton.setAttribute("tooltiptext", this._stepInTooltip);
     this._stepOutButton.setAttribute("tooltiptext", this._stepOutTooltip);
 
-    this.toggleCloseButton(!window._isRemoteDebugger && !window._isChromeDebugger);
     // TODO: bug 806775
     // this.toggleChromeGlobalsContainer(window._isChromeDebugger);
   },
@@ -65,7 +62,6 @@ ToolbarView.prototype = {
    */
   destroy: function DVT_destroy() {
     dumpn("Destroying the ToolbarView");
-    this._closeButton.removeEventListener("click", this._onCloseClick, false);
     this._togglePanesButton.removeEventListener("mousedown", this._onTogglePanesPressed, false);
     this._resumeButton.removeEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.removeEventListener("mousedown", this._onStepOverPressed, false);
@@ -73,16 +69,6 @@ ToolbarView.prototype = {
     this._stepOutButton.removeEventListener("mousedown", this._onStepOutPressed, false);
   },
 
-  /**
-   * Sets the close button hidden or visible. It's hidden by default.
-   *
-   * @param boolean aVisibleFlag
-   *        Specifies the intended visibility.
-   */
-  toggleCloseButton: function DVT_toggleCloseButton(aVisibleFlag) {
-    this._closeButton.setAttribute("hidden", !aVisibleFlag);
-  },
-
   /**
    * Sets the resume button state based on the debugger active thread.
    *
@@ -177,7 +163,6 @@ ToolbarView.prototype = {
     }
   },
 
-  _closeButton: null,
   _togglePanesButton: null,
   _resumeButton: null,
   _stepOverButton: null,
diff --git a/browser/devtools/debugger/debugger.xul b/browser/devtools/debugger/debugger.xul
index c63b714650d..db84ee6797c 100644
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -153,11 +153,6 @@
 
   <vbox id="body" flex="1">
     <toolbar id="dbg-toolbar" class="devtools-toolbar">
-#ifdef XP_MACOSX
-      <toolbarbutton id="close"
-                     class="devtools-closebutton"
-                     tooltiptext="&debuggerUI.closeButton.tooltip;"/>
-#endif
       <hbox id="debugger-controls">
         <toolbarbutton id="resume"
                        class="devtools-toolbarbutton"
@@ -186,11 +181,6 @@
                      class="devtools-option-toolbarbutton"
                      tooltiptext="&debuggerUI.optsButton.tooltip;"
                      popup="debuggerPrefsContextMenu"/>
-#ifndef XP_MACOSX
-      <toolbarbutton id="close"
-                     class="devtools-closebutton"
-                     tooltiptext="&debuggerUI.closeButton.tooltip;"/>
-#endif
     </toolbar>
 
     <panel id="searchbox-panel"
diff --git a/browser/devtools/debugger/test/Makefile.in b/browser/devtools/debugger/test/Makefile.in
index 0918e802d39..df30cdce8ce 100644
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -12,9 +12,9 @@ include $(DEPTH)/config/autoconf.mk
 
 MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_leaktest.js \
-	browser_dbg_createChrome.js \
-	browser_dbg_debugger-tab-switch.js \
-	browser_dbg_debugger-tab-switch-window.js \
+	$(warning browser_dbg_createChrome.js disabled until issue 156 is fixed) \
+	$(browser_dbg_debugger-tab-switch.js disabled until issues 106, 40 are fixed) \
+	$(browser_dbg_debugger-tab-switch-window.js disabled until issues 106, 40 are fixed) \
 	browser_dbg_debuggerstatement.js \
 	browser_dbg_listtabs.js \
 	browser_dbg_tabactor-01.js \
@@ -45,7 +45,6 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_propertyview-reexpand.js \
 	browser_dbg_reload-same-script.js \
 	browser_dbg_pane-collapse.js \
-	browser_dbg_panesize.js \
 	browser_dbg_panesize-inner.js \
 	browser_dbg_stack-01.js \
 	browser_dbg_stack-02.js \
@@ -82,7 +81,6 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_iframes.js \
 	browser_dbg_pause-exceptions.js \
 	browser_dbg_multiple-windows.js \
-	browser_dbg_menustatus.js \
 	browser_dbg_bfcache.js \
 	browser_dbg_breakpoint-new-script.js \
 	browser_dbg_bug737803_editor_actual_location.js \
diff --git a/browser/devtools/debugger/test/browser_dbg_bfcache.js b/browser/devtools/debugger/test/browser_dbg_bfcache.js
index c430ebcb750..a008a179b74 100644
--- a/browser/devtools/debugger/test/browser_dbg_bfcache.js
+++ b/browser/devtools/debugger/test/browser_dbg_bfcache.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testInitialLoad();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js b/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
index c7e865a4596..63d180b95a2 100644
--- a/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
+++ b/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     testAddBreakpoint();
diff --git a/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js b/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
index ee38ccc3c76..e440239ccf9 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
@@ -31,9 +31,11 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
+    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
+
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
       executeSoon(startTest);
@@ -50,12 +52,10 @@ function test()
     executeSoon(startTest);
   }
 
-  window.addEventListener("Debugger:SourceShown", onScriptShown);
-
   function startTest()
   {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      window.removeEventListener("Debugger:SourceShown", onScriptShown);
+      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -77,7 +77,7 @@ function test()
     isnot(gScripts.selectedValue, gScripts.values[0],
           "the correct script is selected");
 
-    gBreakpoints = gPane.breakpoints;
+    gBreakpoints = gPane.getAllBreakpoints();
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
@@ -127,7 +127,7 @@ function test()
       is(Object.keys(gBreakpoints).length, 1,
          "the list of debugger breakpoints holds only one breakpoint");
       is(gPane.getBreakpoint(gScripts.selectedValue, 6), aBreakpointClient,
-         "getBreakpoint(selectedScript, 2) returns the correct breakpoint");
+         "getBreakpoint returns the correct breakpoint");
 
       info("remove the first breakpoint");
       gEditor.addEventListener(SourceEditor.EVENTS.BREAKPOINT_CHANGE,
diff --git a/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js b/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
index a923bf3c0b8..b6144947fda 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
@@ -29,9 +29,11 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
+    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
+
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
       executeSoon(startTest);
@@ -48,12 +50,10 @@ function test()
     executeSoon(startTest);
   }
 
-  window.addEventListener("Debugger:SourceShown", onScriptShown);
-
   function startTest()
   {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      window.removeEventListener("Debugger:SourceShown", onScriptShown);
+      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -79,7 +79,7 @@ function test()
     isnot(gScripts.selectedValue, gScripts.values[0],
           "the correct script is selected");
 
-    gBreakpoints = gPane.breakpoints;
+    gBreakpoints = gPane.getAllBreakpoints();
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("chocolate", 3), "getBreakpoint('chocolate', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
index 9e938e2f510..d9491b12036 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
@@ -19,7 +19,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gWatch = gDebugger.DebuggerView.WatchExpressions;
 
     gDebugger.DebuggerView.togglePanes({ visible: true, animated: false });
diff --git a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
index 53f9a22031b..5f596654c1c 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gWatch = gDebugger.DebuggerView.WatchExpressions;
     gVars = gDebugger.DebuggerView.Variables;
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
index 9ac7911df42..d8e4d701798 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js b/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
index 4a32b2428f1..90325b24137 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
@@ -30,9 +30,11 @@ function test() {
     gTab = aTab;
     gPane = aPane;
     gDebuggee = aDebuggee;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
+    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
+
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function () {
       framesAdded = true;
       executeSoon(startTest);
@@ -48,11 +50,9 @@ function test() {
     executeSoon(startTest);
   }
 
-  window.addEventListener("Debugger:SourceShown", onScriptShown);
-
   function startTest() {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      window.removeEventListener("Debugger:SourceShown", onScriptShown);
+      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -61,7 +61,7 @@ function test() {
   function performTest() {
     gScripts = gDebugger.DebuggerView.Sources;
     gEditor = gDebugger.editor;
-    gBreakpoints = gPane.breakpoints;
+    gBreakpoints = gPane.getAllBreakpoints();
     is(Object.keys(gBreakpoints), 0, "There are no breakpoints");
 
     gEditor.addEventListener(SourceEditor.EVENTS.BREAKPOINT_CHANGE,
diff --git a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
index d1d3ca2f4ad..8061fc8c3c3 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
@@ -29,7 +29,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gBreakpoints = gDebugger.DebuggerController.Breakpoints;
     gBreakpointsPane = gDebugger.DebuggerView.Breakpoints;
 
@@ -79,7 +79,7 @@ function test()
     is(gScripts.selectedValue, gScripts.values[0],
           "The correct script is selected");
 
-    gBreakpoints = gPane.breakpoints;
+    gBreakpoints = gPane.getAllBreakpoints();
     is(Object.keys(gBreakpoints).length, 13, "thirteen breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
index e7206d1576a..a8d15758e1c 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
@@ -33,7 +33,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gBreakpoints = gDebugger.DebuggerController.Breakpoints;
     gBreakpointsPane = gDebugger.DebuggerView.Breakpoints;
 
@@ -83,7 +83,7 @@ function test()
     is(gScripts.selectedValue, gScripts.values[0],
           "The correct script is selected");
 
-    gBreakpoints = gPane.breakpoints;
+    gBreakpoints = gPane.getAllBreakpoints();
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js b/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
index cf68ee5ca7b..d0cb74a16a5 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testNonEnumProperties();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_clean-exit.js b/browser/devtools/debugger/test/browser_dbg_clean-exit.js
index 2530328b84e..fe0a496f2dc 100644
--- a/browser/devtools/debugger/test/browser_dbg_clean-exit.js
+++ b/browser/devtools/debugger/test/browser_dbg_clean-exit.js
@@ -15,7 +15,7 @@ function test() {
   debug_tab_pane(DEBUGGER_TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testCleanExit();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_createRemote.js b/browser/devtools/debugger/test/browser_dbg_createRemote.js
index 4abcd7561a6..ff4f5bb6b7a 100644
--- a/browser/devtools/debugger/test/browser_dbg_createRemote.js
+++ b/browser/devtools/debugger/test/browser_dbg_createRemote.js
@@ -18,7 +18,7 @@ function test() {
   debug_remote(TEST_URL, function(aTab, aDebuggee, aWindow) {
     gTab = aTab;
     gWindow = aWindow;
-    let gDebugger = gWindow.contentWindow;
+    let gDebugger = gWindow.panelWin;
 
     info("Current remote window x: " +
       Services.prefs.getIntPref("devtools.debugger.ui.win-x"));
diff --git a/browser/devtools/debugger/test/browser_dbg_displayName.js b/browser/devtools/debugger/test/browser_dbg_displayName.js
index 40afa083769..785fc0fabe8 100644
--- a/browser/devtools/debugger/test/browser_dbg_displayName.js
+++ b/browser/devtools/debugger/test/browser_dbg_displayName.js
@@ -18,7 +18,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testAnonCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_iframes.js b/browser/devtools/debugger/test/browser_dbg_iframes.js
index 3411df6adb0..78f3c28d7a5 100644
--- a/browser/devtools/debugger/test/browser_dbg_iframes.js
+++ b/browser/devtools/debugger/test/browser_dbg_iframes.js
@@ -14,10 +14,7 @@ function test() {
   debug_tab_pane(TEST_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    let gDebugger = gPane.contentWindow;
-
-    is(gDebugger.document.getElementById("close").getAttribute("hidden"), "false",
-      "The close button should be visible in a normal content debugger.");
+    let gDebugger = gPane.panelWin;
 
     is(gDebugger.DebuggerController.activeThread.paused, false,
       "Should be running after debug_tab_pane.");
diff --git a/browser/devtools/debugger/test/browser_dbg_leaktest.js b/browser/devtools/debugger/test/browser_dbg_leaktest.js
index 8cd601145bf..3b4e0993c94 100644
--- a/browser/devtools/debugger/test/browser_dbg_leaktest.js
+++ b/browser/devtools/debugger/test/browser_dbg_leaktest.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js b/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
index b631cac1639..3e90fb754a4 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes-new.js b/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
index cfad4119c06..7df75c65615 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes.js b/browser/devtools/debugger/test/browser_dbg_location-changes.js
index 8ccb8b6451d..586e754e3dc 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes.js
@@ -17,7 +17,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_pane-collapse.js b/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
index 96c3a3f2337..39f64481661 100644
--- a/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
+++ b/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
@@ -16,7 +16,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gView = gDebugger.DebuggerView;
 
     testPanesState();
diff --git a/browser/devtools/debugger/test/browser_dbg_panesize-inner.js b/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
index d7d9c73ee17..440363d4a83 100644
--- a/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
+++ b/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
@@ -7,65 +7,70 @@
 function test() {
   var tab1 = addTab(TAB1_URL, function() {
     gBrowser.selectedTab = tab1;
+    let target1 = TargetFactory.forTab(tab1);
 
-    ok(!DebuggerUI.getDebugger(),
-      "Shouldn't have a debugger pane for this tab yet.");
+    ok(!gDevTools.getPanelForTarget("jsdebugger", target1),
+      "Shouldn't have a debugger panel for this tab yet.");
 
-    let pane = DebuggerUI.toggleDebugger();
-    ok(pane, "toggleDebugger() should return a pane.");
+    let toolbox = gDevTools.openToolboxForTab(target1, "jsdebugger");
+    toolbox.once("jsdebugger-ready", function dbgReady() {
+      let dbg = gDevTools.getPanelForTarget("jsdebugger", target1);
+      ok(dbg, "We should have a debugger panel.");
 
-    let preferredSfw = Services.prefs.getIntPref("devtools.debugger.ui.stackframes-width");
-    let preferredBpw = Services.prefs.getIntPref("devtools.debugger.ui.variables-width");
-    let someWidth1, someWidth2;
+      let preferredSfw = Services.prefs.getIntPref("devtools.debugger.ui.stackframes-width");
+      let preferredBpw = Services.prefs.getIntPref("devtools.debugger.ui.variables-width");
+      let someWidth1, someWidth2;
 
-    do {
-      someWidth1 = parseInt(Math.random() * 200) + 100;
-      someWidth2 = parseInt(Math.random() * 200) + 100;
-    } while (someWidth1 == preferredSfw ||
-             someWidth2 == preferredBpw)
+      do {
+        someWidth1 = parseInt(Math.random() * 200) + 100;
+        someWidth2 = parseInt(Math.random() * 200) + 100;
+      } while (someWidth1 == preferredSfw ||
+               someWidth2 == preferredBpw)
 
-    info("Preferred stackframes width: " + preferredSfw);
-    info("Preferred variables width: " + preferredBpw);
-    info("Generated stackframes width: " + someWidth1);
-    info("Generated variables width: " + someWidth2);
+      let someWidth1 = parseInt(Math.random() * 200) + 100;
+      let someWidth2 = parseInt(Math.random() * 200) + 100;
 
-    is(DebuggerUI.getDebugger(), pane,
-      "getDebugger() should return the same pane as toggleDebugger().");
+      info("Preferred stackframes width: " + preferredSfw);
+      info("Preferred variables width: " + preferredBpw);
+      info("Generated stackframes width: " + someWidth1);
+      info("Generated variables width: " + someWidth2);
 
-    let content = pane.contentWindow;
-    let stackframes;
-    let variables;
+      let content = dbg.panelWin;
+      let stackframes;
+      let variables;
 
-    wait_for_connect_and_resume(function() {
-      ok(content.Prefs.stackframesWidth,
-        "The debugger preferences should have a saved stackframesWidth value.");
-      ok(content.Prefs.variablesWidth,
-        "The debugger preferences should have a saved variablesWidth value.");
+      wait_for_connect_and_resume(function() {
+        ok(content.Prefs.stackframesWidth,
+          "The debugger preferences should have a saved stackframesWidth value.");
+        ok(content.Prefs.variablesWidth,
+          "The debugger preferences should have a saved variablesWidth value.");
 
-      stackframes = content.document.getElementById("stackframes+breakpoints");
-      variables = content.document.getElementById("variables+expressions");
+        stackframes = content.document.getElementById("stackframes+breakpoints");
+        variables = content.document.getElementById("variables+expressions");
 
-      is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
-        "The stackframes pane width should be the same as the preferred value.");
-      is(content.Prefs.variablesWidth, variables.getAttribute("width"),
-        "The variables pane width should be the same as the preferred value.");
+        is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
+          "The stackframes pane width should be the same as the preferred value.");
+        is(content.Prefs.variablesWidth, variables.getAttribute("width"),
+          "The variables pane width should be the same as the preferred value.");
 
-      stackframes.setAttribute("width", someWidth1);
-      variables.setAttribute("width", someWidth2);
+        stackframes.setAttribute("width", someWidth1);
+        variables.setAttribute("width", someWidth2);
 
-      removeTab(tab1);
+        removeTab(tab1);
+      }, tab1);
+
+      window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
+        window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
+
+        is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
+          "The stackframes pane width should have been saved by now.");
+        is(content.Prefs.variablesWidth, variables.getAttribute("width"),
+          "The variables pane width should have been saved by now.");
+
+        finish();
+
+      }, true);
     });
 
-    window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
-      window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
-
-      is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
-        "The stackframes pane width should have been saved by now.");
-      is(content.Prefs.variablesWidth, variables.getAttribute("width"),
-        "The variables pane width should have been saved by now.");
-
-      finish();
-
-    }, true);
   });
 }
diff --git a/browser/devtools/debugger/test/browser_dbg_panesize.js b/browser/devtools/debugger/test/browser_dbg_panesize.js
deleted file mode 100644
index 754f489e2e1..00000000000
--- a/browser/devtools/debugger/test/browser_dbg_panesize.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/*
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- */
-
-function test() {
-  var tab1 = addTab(TAB1_URL, function() {
-    gBrowser.selectedTab = tab1;
-
-    ok(!DebuggerUI.getDebugger(),
-      "Shouldn't have a debugger pane for this tab yet.");
-
-    let pane = DebuggerUI.toggleDebugger();
-    ok(pane, "toggleDebugger() should return a pane.");
-
-    let preferredHeight = Services.prefs.getIntPref("devtools.debugger.ui.height");
-    let someHeight;
-
-    do {
-      someHeight = parseInt(Math.random() * 200) + 200;
-    } while (someHeight == preferredHeight)
-
-    info("Preferred pane height: " + preferredHeight);
-    info("Generated pane height: " + someHeight);
-
-    is(DebuggerUI.getDebugger(), pane,
-      "getDebugger() should return the same pane as toggleDebugger().");
-
-    ok(DebuggerUI.preferences.height,
-      "The debugger preferences should have a saved height value.");
-
-    is(DebuggerUI.preferences.height, pane._frame.height,
-      "The debugger pane height should be the same as the preferred value.");
-
-    pane._frame.height = someHeight;
-
-    ok(DebuggerUI.preferences.height !== someHeight,
-      "Height preferences shouldn't have been updated yet.");
-
-    wait_for_connect_and_resume(function() {
-      removeTab(tab1);
-    });
-
-    window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
-      window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
-
-      is(DebuggerUI.preferences.height, someHeight,
-        "Height preferences should have been updated by now.");
-
-      finish();
-
-    }, true);
-  });
-}
diff --git a/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js b/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
index 5067c9f0639..aafa987086b 100644
--- a/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
+++ b/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
@@ -20,7 +20,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
@@ -30,7 +30,7 @@ function test()
 
 function testWithFrame()
 {
-  gPane.contentWindow.gClient.addOneTimeListener("paused", function() {
+  gPane.panelWin.gClient.addOneTimeListener("paused", function() {
     gDebugger.addEventListener("Debugger:FetchedVariables", function testA() {
       // We expect 2 Debugger:FetchedVariables events, one from the global object
       // scope and the regular one.
@@ -48,7 +48,7 @@ function testWithFrame()
       gDebugger.DebuggerView.Options._togglePauseOnExceptions();
 
       gCount = 0;
-      gPane.contentWindow.gClient.addOneTimeListener("resumed", function() {
+      gPane.panelWin.gClient.addOneTimeListener("resumed", function() {
         gDebugger.addEventListener("Debugger:FetchedVariables", function testB() {
           // We expect 2 Debugger:FetchedVariables events, one from the global object
           // scope and the regular one.
@@ -96,7 +96,7 @@ function testWithFrame()
 }
 
 function resumeAndFinish() {
-  gPane.contentWindow.gClient.addOneTimeListener("resumed", function() {
+  gPane.panelWin.gClient.addOneTimeListener("resumed", function() {
     Services.tm.currentThread.dispatch({ run: function() {
 
       closeDebuggerAndFinish(false);
diff --git a/browser/devtools/debugger/test/browser_dbg_pause-resume.js b/browser/devtools/debugger/test/browser_dbg_pause-resume.js
index 476aaa9b6a2..4922acf217d 100644
--- a/browser/devtools/debugger/test/browser_dbg_pause-resume.js
+++ b/browser/devtools/debugger/test/browser_dbg_pause-resume.js
@@ -15,7 +15,7 @@ function test() {
   debug_tab_pane(STACK_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gView = gDebugger.DebuggerView;
     gLH = gDebugger.LayoutHelpers;
     gL10N = gDebugger.L10N;
diff --git a/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js b/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
index 73e1ed50fac..76f934df723 100644
--- a/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
+++ b/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
@@ -18,7 +18,7 @@ function test() {
   debug_tab_pane(TEST_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    let gDebugger = gPane.contentWindow;
+    let gDebugger = gPane.panelWin;
 
     is(gDebugger.DebuggerController._isInitialized, true,
       "Controller should be initialized after debug_tab_pane.");
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-01.js b/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
index ff5dcdc1fce..46a02e4c344 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-02.js b/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
index b24e2a2ea4d..ac7c1ced378 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-03.js b/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
index 6fe0d9388a1..06e1b8b5372 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-04.js b/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
index 2b1bfd0edef..3a80ef5c6ea 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-05.js b/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
index e56bfa67e4b..ad887d32498 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-06.js b/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
index 06c908fabfe..194160c9dbc 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-07.js b/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
index c7c77f2808d..23d242115bb 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testFrameParameters();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-08.js b/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
index 7c43b7e7641..b822d77bed8 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testFrameParameters();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-09.js b/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
index d89c0c29080..b9c6a4aad37 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
@@ -19,7 +19,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-10.js b/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
index 811f8f88155..c3cb4c45e04 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
@@ -19,7 +19,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-data.js b/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
index 456a39f22c0..9c67c746149 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
@@ -18,7 +18,7 @@ function test()
   debug_tab_pane(TAB1_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gVariablesView = gDebugger.DebuggerView.Variables;
 
     testVariablesView();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
index f3ae5f48a64..6b7ca2c5594 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
@@ -18,7 +18,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
index 9a4d10e9370..8838f2f49f5 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
index 9f6ff6a95a5..9c692771246 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
index c183b6382c6..596e2b920e5 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
@@ -24,7 +24,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     testSearchbox();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
index bfc6808c533..8fd71d0b858 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
@@ -24,7 +24,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     testSearchbox();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
index 6f3f449ed6b..ab129663e5a 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
index 29d8b18336b..715edec78a7 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
index 83c3ec87853..5be8fcf096d 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
index b70a7ed9fa5..3927394b085 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js b/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
index 2f2fbcee28b..7f63689cb08 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
@@ -20,7 +20,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebuggee = aDebuggee;
 
     addBreakpoint();
diff --git a/browser/devtools/debugger/test/browser_dbg_reload-same-script.js b/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
index 7d3bd91a418..4878978d307 100644
--- a/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
+++ b/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gView = gDebugger.DebuggerView;
     resumed = true;
 
diff --git a/browser/devtools/debugger/test/browser_dbg_script-switching.js b/browser/devtools/debugger/test/browser_dbg_script-switching.js
index 56e1d988e87..cc794044e92 100644
--- a/browser/devtools/debugger/test/browser_dbg_script-switching.js
+++ b/browser/devtools/debugger/test/browser_dbg_script-switching.js
@@ -25,7 +25,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
index cb54d037921..328328e3bfd 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
index 39b8ee2a72e..18c045e7a36 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
@@ -26,7 +26,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
index e7f58a302a1..41d5936cab5 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
index a938d6ee4ff..a885e39e86b 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
index eaa7b9287c8..297b906f5a8 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
index 4191b16b0d1..022b7f4b690 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
index 33ca5cdbf7c..89f60d54a6d 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
index 44c05d6b66b..afd1b4107ab 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
index 3e07f69fe5a..3fa523e7036 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
@@ -18,7 +18,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       runTest();
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js b/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
index 1fdcf007189..cd3d523e841 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_select-line.js b/browser/devtools/debugger/test/browser_dbg_select-line.js
index bc9a9e58655..cbe3116cc64 100644
--- a/browser/devtools/debugger/test/browser_dbg_select-line.js
+++ b/browser/devtools/debugger/test/browser_dbg_select-line.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSelectLine();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-01.js b/browser/devtools/debugger/test/browser_dbg_stack-01.js
index d6ad154864c..340f4442939 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-01.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-02.js b/browser/devtools/debugger/test/browser_dbg_stack-02.js
index 14067e835a2..7dd6f7379da 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-02.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testEvalCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-03.js b/browser/devtools/debugger/test/browser_dbg_stack-03.js
index dc11eff6800..028ecf9e7cb 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-03.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testRecurse();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-04.js b/browser/devtools/debugger/test/browser_dbg_stack-04.js
index ce5fc209f26..d65708b5b37 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-04.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     testEvalCallResume();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-05.js b/browser/devtools/debugger/test/browser_dbg_stack-05.js
index 515bfcaf6f4..efa211f7559 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-05.js
@@ -22,7 +22,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js b/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
index acb4100b403..3e163206a7a 100644
--- a/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
+++ b/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
@@ -29,7 +29,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.contentWindow;
+    gDebugger = gPane.panelWin;
     gScripts = gDebugger.DebuggerView.Sources._container;
     resumed = true;
 
diff --git a/browser/devtools/debugger/test/head.js b/browser/devtools/debugger/test/head.js
index f71d21a8e9d..e643521080e 100644
--- a/browser/devtools/debugger/test/head.js
+++ b/browser/devtools/debugger/test/head.js
@@ -14,6 +14,10 @@ let DebuggerServer = tempScope.DebuggerServer;
 let DebuggerTransport = tempScope.DebuggerTransport;
 let DebuggerClient = tempScope.DebuggerClient;
 let Services = tempScope.Services;
+Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+let gDevTools = tempScope.gDevTools;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/debugger/test/";
 const TAB1_URL = EXAMPLE_URL + "browser_dbg_tab1.html";
@@ -86,11 +90,25 @@ function removeTab(aTab, aWindow) {
 }
 
 function closeDebuggerAndFinish(aRemoteFlag, aCallback, aWindow) {
-  let targetWindow = aWindow || window;
-  let debuggerUI = targetWindow.DebuggerUI;
-
   let debuggerClosed = false;
   let debuggerDisconnected = false;
+  // let targetWindow = aWindow || window;
+  ok(gTab, "There is a gTab to use for getting a toolbox reference");
+  let target = TargetFactory.forTab(gTab);
+
+  // let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+  window.addEventListener("Debugger:Shutdown", function cleanup() {
+    window.removeEventListener("Debugger:Shutdown", cleanup, false);
+    debuggerDisconnected = true;
+    _maybeFinish();
+  }, false);
+
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  toolbox.once("destroyed", function() {
+    debuggerClosed = true;
+    _maybeFinish();
+  });
+  toolbox.destroy();
 
   function _maybeFinish() {
     if (debuggerClosed && debuggerDisconnected) {
@@ -100,20 +118,15 @@ function closeDebuggerAndFinish(aRemoteFlag, aCallback, aWindow) {
     }
   }
 
-  debuggerUI.chromeWindow.addEventListener("Debugger:Shutdown", function cleanup() {
-    debuggerUI.chromeWindow.removeEventListener("Debugger:Shutdown", cleanup, false);
-    debuggerDisconnected = true;
-    _maybeFinish();
-  }, false);
-  if (!aRemoteFlag) {
-    debuggerUI.getDebugger().close(function() {
-      debuggerClosed = true;
-      _maybeFinish();
-    });
-  } else {
-    debuggerClosed = true;
-    debuggerUI.getRemoteDebugger().close();
-  }
+  // if (!aRemoteFlag) {
+  //   dbg.getDebugger().close(function() {
+  //     debuggerClosed = true;
+  //     _maybeFinish();
+  //   });
+  // } else {
+  //   debuggerClosed = true;
+  //   dbg.getRemoteDebugger().close();
+  // }
 }
 
 function get_tab_actor_for_url(aClient, aURL, aCallback) {
@@ -129,7 +142,7 @@ function get_tab_actor_for_url(aClient, aURL, aCallback) {
 
 function attach_tab_actor_for_url(aClient, aURL, aCallback) {
   get_tab_actor_for_url(aClient, aURL, function(actor) {
-    aClient.request({ to: actor.actor, type: "attach" }, function(aResponse) {
+    aClient.attachTab(actor.actor, function(aResponse) {
       aCallback(actor, aResponse);
     });
   });
@@ -137,45 +150,44 @@ function attach_tab_actor_for_url(aClient, aURL, aCallback) {
 
 function attach_thread_actor_for_url(aClient, aURL, aCallback) {
   attach_tab_actor_for_url(aClient, aURL, function(aTabActor, aResponse) {
-    aClient.request({ "to": actor.threadActor, "type": "attach" }, function(aResponse) {
+    aClient.attachThread(actor.threadActor, function(aResponse, aThreadClient) {
       // We don't care about the pause right now (use
       // get_actor_for_url() if you do), so resume it.
-      aClient.request({ to: actor.threadActor, type: "resume" }, function(aResponse) {
+      aThreadClient.resume(function(aResponse) {
         aCallback(actor);
       });
     });
   });
 }
 
-function wait_for_connect_and_resume(aOnDebugging, aWindow) {
-  let targetWindow = aWindow || window;
-  let targetDocument = targetWindow.document;
-
-  targetDocument.addEventListener("Debugger:Connected", function dbgConnected(aEvent) {
-    targetDocument.removeEventListener("Debugger:Connected", dbgConnected, true);
-
+function wait_for_connect_and_resume(aOnDebugging, aTab) {
+  let target = TargetFactory.forTab(aTab);
+  let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+  dbg.once("connected", function dbgConnected() {
     // Wait for the initial resume...
-    aEvent.target.ownerDocument.defaultView.gClient.addOneTimeListener("resumed", function() {
+    dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
       aOnDebugging();
     });
-  }, true);
+  });
 }
 
 function debug_tab_pane(aURL, aOnDebugging) {
   let tab = addTab(aURL, function() {
     gBrowser.selectedTab = gTab;
-    let debuggee = tab.linkedBrowser.contentWindow.wrappedJSObject;
+    let debuggee = gBrowser.selectedTab.linkedBrowser.contentWindow.wrappedJSObject;
 
-    let pane = DebuggerUI.toggleDebugger();
-    pane._frame.addEventListener("Debugger:Connected", function dbgConnected() {
-      pane._frame.removeEventListener("Debugger:Connected", dbgConnected, true);
-
-      // Wait for the initial resume...
-      pane.contentWindow.gClient.addOneTimeListener("resumed", function() {
-        pane.contentWindow.DebuggerView.Variables.lazyEmpty = false;
-        aOnDebugging(tab, debuggee, pane);
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolboxForTab(target, "jsdebugger");
+    toolbox.once("jsdebugger-ready", function dbgReady() {
+      let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+      dbg.once("connected", function() {
+        // Wait for the initial resume...
+        dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
+          dbg._view.Variables.lazyEmpty = false;
+          aOnDebugging(tab, debuggee, dbg);
+        });
       });
-    }, true);
+    });
   });
 }
 
@@ -192,7 +204,7 @@ function debug_remote(aURL, aOnDebugging, aBeforeTabAdded) {
       win._dbgwin.removeEventListener("Debugger:Connected", dbgConnected, true);
 
       // Wait for the initial resume...
-      win.contentWindow.gClient.addOneTimeListener("resumed", function() {
+      win.panelWin.gClient.addOneTimeListener("resumed", function() {
         win._dbgwin.DebuggerView.Variables.lazyEmpty = false;
         aOnDebugging(tab, debuggee, win);
       });
diff --git a/browser/devtools/highlighter/Makefile.in b/browser/devtools/framework/Makefile.in
similarity index 68%
rename from browser/devtools/highlighter/Makefile.in
rename to browser/devtools/framework/Makefile.in
index 8187267f5b7..df206dadd99 100644
--- a/browser/devtools/highlighter/Makefile.in
+++ b/browser/devtools/framework/Makefile.in
@@ -10,17 +10,9 @@ VPATH		= @srcdir@
 
 include $(DEPTH)/config/autoconf.mk
 
-EXTRA_JS_MODULES = \
-	highlighter.jsm \
-	$(NULL)
-
-EXTRA_PP_JS_MODULES = \
-	inspector.jsm \
-	$(NULL)
-
 TEST_DIRS += test
 
 include $(topsrcdir)/config/rules.mk
 
 libs::
-	$(NSINSTALL) $(srcdir)/CmdInspect.jsm $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/framework/Sidebar.jsm b/browser/devtools/framework/Sidebar.jsm
new file mode 100644
index 00000000000..ad77f346217
--- /dev/null
+++ b/browser/devtools/framework/Sidebar.jsm
@@ -0,0 +1,191 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cc = Components.classes;
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+
+this.EXPORTED_SYMBOLS = ["ToolSidebar"];
+
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/**
+ * ToolSidebar provides methods to register tabs in the sidebar.
+ * It's assumed that the sidebar contains a xul:tabbox.
+ *
+ * @param {Node} tabbox
+ *  <tabbox> node;
+ * @param {ToolPanel} panel
+ *  Related ToolPanel instance;
+ * @param {Boolean} showTabstripe
+ *  Show the tabs.
+ */
+this.ToolSidebar = function ToolSidebar(tabbox, panel, showTabstripe=true)
+{
+  new EventEmitter(this);
+
+  this._tabbox = tabbox;
+  this._panelDoc = this._tabbox.ownerDocument;
+  this._toolPanel = panel;
+
+  this._tabbox.tabpanels.addEventListener("select", this, true);
+
+  this._tabs = new Map();
+
+  if (!showTabstripe) {
+    this._tabbox.setAttribute("hidetabs", "true");
+  }
+}
+
+ToolSidebar.prototype = {
+  /**
+   * Register a tab. A tab is a document.
+   * The document must have a title, which will be used as the name of the tab.
+   *
+   * @param {string} tab uniq id
+   * @param {string} url
+   */
+  addTab: function ToolSidebar_addTab(id, url, selected=false) {
+    let iframe = this._panelDoc.createElementNS(XULNS, "iframe");
+    iframe.className = "iframe-" + id;
+    iframe.setAttribute("flex", "1");
+    iframe.setAttribute("src", url);
+
+    let tab = this._tabbox.tabs.appendItem();
+
+    let onIFrameLoaded = function() {
+      tab.setAttribute("label", iframe.contentDocument.title);
+      iframe.removeEventListener("DOMContentLoaded", onIFrameLoaded, true);
+      if ("setPanel" in iframe.contentWindow) {
+        iframe.contentWindow.setPanel(this._toolPanel, iframe);
+      }
+      this.emit(id + "-ready");
+    }.bind(this);
+
+    iframe.addEventListener("DOMContentLoaded", onIFrameLoaded, true);
+
+    let tabpanel = this._panelDoc.createElementNS(XULNS, "tabpanel");
+    tabpanel.setAttribute("id", "sidebar-panel-" + id);
+    tabpanel.appendChild(iframe);
+    this._tabbox.tabpanels.appendChild(tabpanel);
+
+    tab.linkedPanel = "sidebar-panel-" + id;
+
+    // We store the index of this tab.
+    this._tabs.set(id, tab);
+
+    if (selected) {
+      // For some reason I don't understand, if we call this.select in this
+      // event loop (after inserting the tab), the tab will never get the
+      // the "selected" attribute set to true.
+      this._panelDoc.defaultView.setTimeout(function() {
+        this.select(id);
+      }.bind(this), 0);
+    }
+
+    this.emit("new-tab-registered", id);
+  },
+
+  /**
+   * Select a specific tab.
+   */
+  select: function ToolSidebar_select(id) {
+    let tab = this._tabs.get(id);
+    if (tab) {
+      this._tabbox.selectedTab = tab;
+    }
+  },
+
+  /**
+   * Return the id of the selected tab.
+   */
+  getCurrentTabID: function ToolSidebar_getCurrentTabID() {
+    let currentID = null;
+    for (let [id, tab] of this._tabs) {
+      if (this._tabbox.tabs.selectedItem == tab) {
+        currentID = id;
+        break;
+      }
+    }
+    return currentID;
+  },
+
+  /**
+   * Event handler.
+   */
+  handleEvent: function ToolSidebar_eventHandler(event) {
+    if (event.type == "select") {
+      let previousTool = this._currentTool;
+      this._currentTool = this.getCurrentTabID();
+      if (previousTool) {
+        this.emit(previousTool + "-unselected");
+      }
+
+      this.emit(this._currentTool + "-selected");
+      this.emit("select", this._currentTool);
+    }
+  },
+
+
+  /**
+   * Toggle sidebar's visibility state.
+   */
+  toggle: function ToolSidebar_toggle() {
+    if (this._tabbox.hasAttribute("hidden")) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  },
+
+  /**
+   * Show the sidebar.
+   */
+  show: function ToolSidebar_show() {
+    this._tabbox.removeAttribute("hidden");
+  },
+
+  /**
+   * Show the sidebar.
+   */
+  hide: function ToolSidebar_hide() {
+    this._tabbox.setAttribute("hidden", "true");
+  },
+
+  /**
+   * Return the window containing the tab content.
+   */
+  getWindowForTab: function ToolSidebar_getWindowForTab(id) {
+    if (!this._tabs.has(id)) {
+      return null;
+    }
+
+    let panel = this._panelDoc.getElementById(this._tabs.get(id).linkedPanel);
+    return panel.firstChild.contentWindow;
+  },
+
+  /**
+   * Clean-up.
+   */
+  destroy: function ToolSidebar_destroy() {
+    this._tabbox.removeEventListener("select", this, true);
+
+    while (this._tabbox.tabpanels.hasChildNodes()) {
+      this._tabbox.tabpanels.removeChild(this._tabbox.tabpanels.firstChild);
+    }
+
+    while (this._tabbox.tabs.hasChildNodes()) {
+      this._tabbox.tabs.removeChild(this._tabbox.tabs.firstChild);
+    }
+
+    this._tabs = null;
+    this._tabbox = null;
+    this._panelDoc = null;
+    this._toolPanel = null;
+  },
+}
diff --git a/browser/devtools/framework/Target.jsm b/browser/devtools/framework/Target.jsm
new file mode 100644
index 00000000000..2438a16b94e
--- /dev/null
+++ b/browser/devtools/framework/Target.jsm
@@ -0,0 +1,385 @@
+/* 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = [ "TargetFactory" ];
+
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+
+const targets = new WeakMap();
+
+/**
+ * Functions for creating Targets
+ */
+this.TargetFactory = {
+  /**
+   * Construct a Target
+   * @param {XULTab} tab
+   *        The tab to use in creating a new target
+   * @return A target object
+   */
+  forTab: function TF_forTab(tab) {
+    let target = targets.get(tab);
+    if (target == null) {
+      target = new TabTarget(tab);
+      targets.set(tab, target);
+    }
+    return target;
+  },
+
+  /**
+   * Creating a target for a tab that is being closed is a problem because it
+   * allows a leak as a result of coming after the close event which normally
+   * clears things up. This function allows us to ask if there is a known
+   * target for a tab without creating a target
+   * @return true/false
+   */
+  isKnownTab: function TF_isKnownTab(tab) {
+    return targets.has(tab);
+  },
+
+  /**
+   * Construct a Target
+   * @param {nsIDOMWindow} window
+   *        The chromeWindow to use in creating a new target
+   * @return A target object
+   */
+  forWindow: function TF_forWindow(window) {
+    let target = targets.get(window);
+    if (target == null) {
+      target = new WindowTarget(window);
+      targets.set(window, target);
+    }
+    return target;
+  },
+
+  /**
+   * Construct a Target for a remote global
+   * @param {Object} form
+   *        The serialized form of a debugging protocol actor.
+   * @param {DebuggerClient} client
+   *        The debuger client instance to communicate with the server.
+   * @param {boolean} chrome
+   *        A flag denoting that the debugging target is the remote process as a
+   *        whole and not a single tab.
+   * @return A target object
+   */
+  forRemote: function TF_forRemote(form, client, chrome) {
+    let target = targets.get(form);
+    if (target == null) {
+      target = new RemoteTarget(form, client, chrome);
+      targets.set(form, target);
+    }
+    return target;
+  },
+
+  /**
+   * Get all of the targets known to some browser instance (local if null)
+   * @return An array of target objects
+   */
+  allTargets: function TF_allTargets() {
+    let windows = [];
+    let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                       .getService(Components.interfaces.nsIWindowMediator);
+    let en = wm.getXULWindowEnumerator(null);
+    while (en.hasMoreElements()) {
+      windows.push(en.getNext());
+    }
+
+    return windows.map(function(window) {
+      return TargetFactory.forWindow(window);
+    });
+  },
+};
+
+/**
+ * The 'version' property allows the developer tools equivalent of browser
+ * detection. Browser detection is evil, however while we don't know what we
+ * will need to detect in the future, it is an easy way to postpone work.
+ * We should be looking to use 'supports()' in place of version where
+ * possible.
+ */
+function getVersion() {
+  // FIXME: return something better
+  return 20;
+}
+
+/**
+ * A better way to support feature detection, but we're not yet at a place
+ * where we have the features well enough defined for this to make lots of
+ * sense.
+ */
+function supports(feature) {
+  // FIXME: return something better
+  return false;
+};
+
+/**
+ * A Target represents something that we can debug. Targets are generally
+ * read-only. Any changes that you wish to make to a target should be done via
+ * a Tool that attaches to the target. i.e. a Target is just a pointer saying
+ * "the thing to debug is over there".
+ *
+ * Providing a generalized abstraction of a web-page or web-browser (available
+ * either locally or remotely) is beyond the scope of this class (and maybe
+ * also beyond the scope of this universe) However Target does attempt to
+ * abstract some common events and read-only properties common to many Tools.
+ *
+ * Supported read-only properties:
+ * - name, isRemote, url
+ *
+ * Target extends EventEmitter and provides support for the following events:
+ * - close: The target window has been closed. All tools attached to this
+ *     target should close. This event is not currently cancelable.
+ * - navigate: The target window has navigated to a different URL
+ *
+ * Optional events:
+ * - will-navigate: The target window will navigate to a different URL
+ * - hidden: The target is not visible anymore (for TargetTab, another tab is selected)
+ * - visible: The target is visible (for TargetTab, tab is selected)
+ *
+ * Target also supports 2 functions to help allow 2 different versions of
+ * Firefox debug each other. The 'version' property is the equivalent of
+ * browser detection - simple and easy to implement but gets fragile when things
+ * are not quite what they seem. The 'supports' property is the equivalent of
+ * feature detection - harder to setup, but more robust long-term.
+ *
+ * Comparing Targets: 2 instances of a Target object can point at the same
+ * thing, so t1 !== t2 and t1 != t2 even when they represent the same object.
+ * To compare to targets use 't1.equals(t2)'.
+ */
+function Target() {
+  throw new Error("Use TargetFactory.newXXX or Target.getXXX to create a Target in place of 'new Target()'");
+}
+
+Object.defineProperty(Target.prototype, "version", {
+  get: getVersion,
+  enumerable: true
+});
+
+
+/**
+ * A TabTarget represents a page living in a browser tab. Generally these will
+ * be web pages served over http(s), but they don't have to be.
+ */
+function TabTarget(tab) {
+  new EventEmitter(this);
+  this._tab = tab;
+  this._setupListeners();
+}
+
+TabTarget.prototype = {
+  _webProgressListener: null,
+
+  supports: supports,
+  get version() { return getVersion(); },
+
+  get tab() {
+    return this._tab;
+  },
+
+  get name() {
+    return this._tab.linkedBrowser.contentDocument.title;
+  },
+
+  get url() {
+    return this._tab.linkedBrowser.contentDocument.location.href;
+  },
+
+  get isRemote() {
+    return false;
+  },
+
+  /**
+   * Listen to the different tabs events.
+   */
+  _setupListeners: function TabTarget__setupListeners() {
+    this._webProgressListener = new TabWebProgressListener(this);
+    this.tab.linkedBrowser.addProgressListener(this._webProgressListener);
+    this.tab.addEventListener("TabClose", this);
+    this.tab.parentNode.addEventListener("TabSelect", this);
+  },
+
+  /**
+   * Handle tabs events.
+   */
+  handleEvent: function (event) {
+    switch (event.type) {
+      case "TabClose":
+        this.destroy();
+        break;
+      case "TabSelect":
+        if (this.tab.selected) {
+          this.emit("visible", event);
+        } else {
+          this.emit("hidden", event);
+        }
+        break;
+    }
+  },
+
+
+  /**
+   * Target is not alive anymore.
+   */
+  destroy: function() {
+    if (this._destroyed) {
+      return;
+    }
+    this.tab.linkedBrowser.removeProgressListener(this._webProgressListener)
+    this._webProgressListener.target = null;
+    this._webProgressListener = null;
+    this.tab.removeEventListener("TabClose", this);
+    this.tab.parentNode.removeEventListener("TabSelect", this);
+    this._destroyed = true;
+    this.emit("close");
+
+    targets.delete(this._tab);
+    this._tab = null;
+  },
+
+  toString: function() {
+    return 'TabTarget:' + this.tab;
+  },
+};
+
+
+/**
+ * WebProgressListener for TabTarget.
+ *
+ * @param object aTarget
+ *        The TabTarget instance to work with.
+ */
+function TabWebProgressListener(aTarget) {
+  this.target = aTarget;
+}
+
+TabWebProgressListener.prototype = {
+  target: null,
+
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsIWebProgressListener, Ci.nsISupportsWeakReference]),
+
+  onStateChange: function TWPL_onStateChange(progress, request, flag, status) {
+    let isStart = flag & Ci.nsIWebProgressListener.STATE_START;
+    let isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
+    let isNetwork = flag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
+    let isRequest = flag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
+
+    // Skip non-interesting states.
+    if (!isStart || !isDocument || !isRequest || !isNetwork) {
+      return;
+    }
+
+    if (this.target) {
+      this.target.emit("will-navigate", request);
+    }
+  },
+
+  onProgressChange: function() {},
+  onSecurityChange: function() {},
+  onStatusChange: function() {},
+
+  onLocationChange: function TwPL_onLocationChange(webProgress) {
+    let window = webProgress.DOMWindow;
+    if (this.target) {
+      this.target.emit("navigate", window);
+    }
+  },
+};
+
+
+/**
+ * A WindowTarget represents a page living in a xul window or panel. Generally
+ * these will have a chrome: URL
+ */
+function WindowTarget(window) {
+  new EventEmitter(this);
+  this._window = window;
+}
+
+WindowTarget.prototype = {
+  supports: supports,
+  get version() { return getVersion(); },
+
+  get window() {
+    return this._window;
+  },
+
+  get name() {
+    return this._window.document.title;
+  },
+
+  get url() {
+    return this._window.document.location.href;
+  },
+
+  get isRemote() {
+    return false;
+  },
+
+  toString: function() {
+    return 'WindowTarget:' + this.window;
+  },
+};
+
+/**
+ * A RemoteTarget represents a page living in a remote Firefox instance.
+ */
+function RemoteTarget(form, client, chrome) {
+  new EventEmitter(this);
+  this._client = client;
+  this._form = form;
+  this._chrome = chrome;
+
+  this.destroy = this.destroy.bind(this);
+  this.client.addListener("tabDetached", this.destroy);
+
+  this._onTabNavigated = function onRemoteTabNavigated() {
+    this.emit("navigate");
+  }.bind(this);
+  this.client.addListener("tabNavigated", this._onTabNavigated);
+}
+
+RemoteTarget.prototype = {
+  supports: supports,
+  get version() getVersion(),
+
+  get isRemote() true,
+
+  get chrome() this._chrome,
+
+  get name() this._form._title,
+
+  get url() this._form._url,
+
+  get client() this._client,
+
+  get form() this._form,
+
+  /**
+   * Target is not alive anymore.
+   */
+  destroy: function RT_destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this.client.removeListener("tabNavigated", this._onTabNavigated);
+    this.client.removeListener("tabDetached", this.destroy);
+
+    this._client.close(function onClosed() {
+      this._client = null;
+      this._destroyed = true;
+      this.emit("close");
+    }.bind(this));
+  },
+
+  toString: function() {
+    return 'RemoteTarget:' + this.form.actor;
+  },
+};
diff --git a/browser/devtools/framework/ToolDefinitions.jsm b/browser/devtools/framework/ToolDefinitions.jsm
new file mode 100644
index 00000000000..ef794b4a548
--- /dev/null
+++ b/browser/devtools/framework/ToolDefinitions.jsm
@@ -0,0 +1,19 @@
+/* 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = [ "defaultTools" ];
+
+Components.utils.import("resource:///modules/WebConsolePanel.jsm");
+Components.utils.import("resource:///modules/devtools/DebuggerPanel.jsm");
+Components.utils.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
+Components.utils.import("resource:///modules/devtools/InspectorDefinition.jsm");
+
+this.defaultTools = [
+  StyleEditorDefinition,
+  WebConsoleDefinition,
+  DebuggerDefinition,
+  InspectorDefinition,
+];
diff --git a/browser/devtools/framework/Toolbox.jsm b/browser/devtools/framework/Toolbox.jsm
new file mode 100644
index 00000000000..db5ed26b7b5
--- /dev/null
+++ b/browser/devtools/framework/Toolbox.jsm
@@ -0,0 +1,523 @@
+/* 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/. */
+
+"use strict";
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/ToolboxHosts.jsm");
+Cu.import("resource:///modules/devtools/gcli.jsm");
+Cu.import('resource://gre/modules/XPCOMUtils.jsm');
+
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
+                                  "resource:///modules/devtools/DeveloperToolbar.jsm");
+
+Components.utils.import("resource://gre/modules/devtools/Require.jsm");
+
+let Requisition = require('gcli/cli').Requisition;
+let CommandOutputManager = require('gcli/canon').CommandOutputManager;
+
+this.EXPORTED_SYMBOLS = [ "Toolbox" ];
+
+/**
+ * A "Toolbox" is the component that holds all the tools for one specific
+ * target. Visually, it's a document that includes the tools tabs and all
+ * the iframes where the tool panels will be living in.
+ *
+ * @param {object} target
+ *        The object the toolbox is debugging.
+ * @param {Toolbox.HostType} hostType
+ *        Type of host that will host the toolbox (e.g. sidebar, window)
+ * @param {string} selectedTool
+ *        Tool to select initially
+ */
+this.Toolbox = function Toolbox(target, hostType, selectedTool) {
+  this._target = target;
+  this._toolPanels = new Map();
+
+  this._onLoad = this._onLoad.bind(this);
+  this._toolRegistered = this._toolRegistered.bind(this);
+  this._toolUnregistered = this._toolUnregistered.bind(this);
+  this.destroy = this.destroy.bind(this);
+
+  this._target.once("close", this.destroy);
+
+  if (!hostType) {
+    hostType = Services.prefs.getCharPref(this._prefs.LAST_HOST);
+  }
+  if (!selectedTool) {
+    selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
+  }
+  let definitions = gDevTools.getToolDefinitions();
+  if (!definitions.get(selectedTool)) {
+    selectedTool = "webconsole";
+  }
+  this._defaultToolId = selectedTool;
+
+  this._host = this._createHost(hostType);
+
+  new EventEmitter(this);
+
+  gDevTools.on("tool-registered", this._toolRegistered);
+  gDevTools.on("tool-unregistered", this._toolUnregistered);
+}
+
+/**
+ * The toolbox can be 'hosted' either embedded in a browser window
+ * or in a separate window.
+ */
+Toolbox.HostType = {
+  BOTTOM: "bottom",
+  SIDE: "side",
+  WINDOW: "window"
+}
+
+Toolbox.prototype = {
+  _URL: "chrome://browser/content/devtools/framework/toolbox.xul",
+
+  _prefs: {
+    LAST_HOST: "devtools.toolbox.host",
+    LAST_TOOL: "devtools.toolbox.selectedTool",
+    SIDE_ENABLED: "devtools.toolbox.sideEnabled"
+  },
+
+  HostType: Toolbox.HostType,
+
+  /**
+   * Returns a *copy* of the _toolPanels collection.
+   *
+   * @return {Map} panels
+   *         All the running panels in the toolbox
+   */
+  getToolPanels: function TB_getToolPanels() {
+    let panels = new Map();
+
+    for (let [key, value] of this._toolPanels) {
+      panels.set(key, value);
+    }
+    return panels;
+  },
+
+  /**
+   * Get/alter the target of a Toolbox so we're debugging something different.
+   * See Target.jsm for more details.
+   * TODO: Do we allow |toolbox.target = null;| ?
+   */
+  get target() {
+    return this._target;
+  },
+
+  set target(value) {
+    this._target = value;
+  },
+
+  /**
+   * Get/alter the host of a Toolbox, i.e. is it in browser or in a separate
+   * tab. See HostType for more details.
+   */
+  get hostType() {
+    return this._host.type;
+  },
+
+  set hostType(value) {
+    this._switchToHost(value);
+  },
+
+  /**
+   * Get/alter the currently displayed tool.
+   */
+  get currentToolId() {
+    return this._currentToolId;
+  },
+
+  set currentToolId(value) {
+    this._currentToolId = value;
+  },
+
+  /**
+   * Get the iframe containing the toolbox UI.
+   */
+  get frame() {
+    return this._host.frame;
+  },
+
+  /**
+   * Shortcut to the document containing the toolbox UI
+   */
+  get doc() {
+    return this.frame.contentDocument;
+  },
+
+  /**
+   * Open the toolbox
+   */
+  open: function TBOX_open() {
+    this._host.once("ready", function(event, iframe) {
+      iframe.addEventListener("DOMContentLoaded", this._onLoad, true);
+      iframe.setAttribute("src", this._URL);
+    }.bind(this));
+
+    this._host.open();
+  },
+
+  /**
+   * Build the buttons for changing hosts. Called every time
+   * the host changes.
+   */
+  _buildDockButtons: function TBOX_createDockButtons() {
+    let dockBox = this.doc.getElementById("toolbox-dock-buttons");
+
+    while (dockBox.firstChild) {
+      dockBox.removeChild(dockBox.firstChild);
+    }
+
+    let sideEnabled = Services.prefs.getBoolPref(this._prefs.SIDE_ENABLED);
+
+    for each (let position in this.HostType) {
+      if (position == this.hostType ||
+         (!sideEnabled && position == this.HostType.SIDE)) {
+        continue;
+      }
+
+      let button = this.doc.createElement("toolbarbutton");
+      button.id = "toolbox-dock-" + position;
+      button.className = "toolbox-dock-button";
+      button.addEventListener("command", function(position) {
+        this.hostType = position;
+      }.bind(this, position));
+
+      dockBox.appendChild(button);
+    }
+  },
+
+  /**
+   * Onload handler for the toolbox's iframe
+   */
+  _onLoad: function TBOX_onLoad() {
+    this.frame.removeEventListener("DOMContentLoaded", this._onLoad, true);
+    this.isReady = true;
+
+    let closeButton = this.doc.getElementById("toolbox-close");
+    closeButton.addEventListener("command", this.destroy, true);
+
+    this._buildDockButtons();
+
+    this._buildTabs();
+    this._buildButtons(this.frame);
+
+    this.selectTool(this._defaultToolId);
+
+    this.emit("ready");
+  },
+
+  /**
+   * Add tabs to the toolbox UI for registered tools
+   */
+  _buildTabs: function TBOX_buildTabs() {
+    for (let [id, definition] of gDevTools.getToolDefinitions()) {
+      this._buildTabForTool(definition);
+    }
+  },
+
+  /**
+   * Add buttons to the UI as specified in the devtools.window.toolbarSpec pref
+   *
+   * @param {iframe} frame
+   *        The iframe to contain the buttons
+   */
+  _buildButtons: function TBOX_buildButtons(frame) {
+    let toolbarSpec = CommandUtils.getCommandbarSpec("devtools.toolbox.toolbarSpec");
+    let environment = { chromeDocument: frame.ownerDocument };
+    let requisition = new Requisition(environment);
+    requisition.commandOutputManager = new CommandOutputManager();
+
+    let buttons = CommandUtils.createButtons(toolbarSpec, this.doc, requisition);
+
+    let container = this.doc.getElementById("toolbox-buttons");
+    buttons.forEach(function(button) {
+      container.appendChild(button);
+    }.bind(this));
+  },
+
+  /**
+   * Build a tab for one tool definition and add to the toolbox
+   *
+   * @param {string} toolDefinition
+   *        Tool definition of the tool to build a tab for.
+   */
+  _buildTabForTool: function TBOX_buildTabForTool(toolDefinition) {
+    const MAX_ORDINAL = 99;
+    if (!toolDefinition.isTargetSupported(this._target)) {
+      return;
+    }
+
+    let tabs = this.doc.getElementById("toolbox-tabs");
+    let deck = this.doc.getElementById("toolbox-deck");
+
+    let id = toolDefinition.id;
+
+    let radio = this.doc.createElement("radio");
+    radio.setAttribute("label", toolDefinition.label);
+    radio.className = "toolbox-tab devtools-tab";
+    radio.id = "toolbox-tab-" + id;
+    radio.setAttribute("toolid", id);
+
+    let ordinal = (typeof toolDefinition.ordinal == "number") ?
+                  toolDefinition.ordinal : MAX_ORDINAL;
+    radio.setAttribute("ordinal", ordinal);
+
+    radio.addEventListener("command", function(id) {
+      this.selectTool(id);
+    }.bind(this, id));
+
+    let vbox = this.doc.createElement("vbox");
+    vbox.className = "toolbox-panel";
+    vbox.id = "toolbox-panel-" + id;
+
+    tabs.appendChild(radio);
+    deck.appendChild(vbox);
+  },
+
+  /**
+   * Switch to the tool with the given id
+   *
+   * @param {string} id
+   *        The id of the tool to switch to
+   */
+  selectTool: function TBOX_selectTool(id) {
+    if (!this.isReady) {
+      throw new Error("Can't select tool, wait for toolbox 'ready' event");
+    }
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+
+    if (!tab) {
+      throw new Error("No tool found");
+    }
+
+    let tabstrip = this.doc.getElementById("toolbox-tabs");
+
+    // select the right tab
+    let index = -1;
+    let tabs = tabstrip.childNodes;
+    for (let i = 0; i < tabs.length; i++) {
+      if (tabs[i] === tab) {
+        index = i;
+        break;
+      }
+    }
+    tabstrip.selectedIndex = index;
+
+    // and select the right iframe
+    let deck = this.doc.getElementById("toolbox-deck");
+    deck.selectedIndex = index;
+
+    let definition = gDevTools.getToolDefinitions().get(id);
+
+    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
+    if (!iframe) {
+      iframe = this.doc.createElement("iframe");
+      iframe.className = "toolbox-panel-iframe";
+      iframe.id = "toolbox-panel-iframe-" + id;
+      iframe.setAttribute("flex", 1);
+
+      let vbox = this.doc.getElementById("toolbox-panel-" + id);
+      vbox.appendChild(iframe);
+
+      let boundLoad = function() {
+        iframe.removeEventListener("DOMContentLoaded", boundLoad, true);
+        let panel = definition.build(iframe.contentWindow, this);
+        this._toolPanels.set(id, panel);
+
+        let panelReady = function() {
+          this.emit(id + "-ready", panel);
+          this.emit("select", id);
+          this.emit(id + "-selected", panel);
+          gDevTools.emit(id + "-ready", this, panel);
+        }.bind(this);
+
+        if (panel.isReady) {
+          panelReady();
+        } else {
+          panel.once("ready", panelReady);
+        }
+      }.bind(this);
+
+      iframe.addEventListener("DOMContentLoaded", boundLoad, true);
+      iframe.setAttribute("src", definition.url);
+    } else {
+      let panel = this._toolPanels.get(id);
+      // only emit 'select' event if the iframe has been loaded
+      if (panel) {
+        this.emit("select", id);
+        this.emit(id + "-selected", panel);
+      }
+    }
+
+    Services.prefs.setCharPref(this._prefs.LAST_TOOL, id);
+
+    this._currentToolId = id;
+  },
+
+  /**
+   * Create a host object based on the given host type.
+   *
+   * @param {string} hostType
+   *        The host type of the new host object
+   *
+   * @return {Host} host
+   *        The created host object
+   */
+  _createHost: function TBOX_createHost(hostType) {
+    let hostTab = this._getHostTab();
+    if (!Hosts[hostType]) {
+      throw new Error('Unknown hostType: '+ hostType);
+    }
+    let newHost = new Hosts[hostType](hostTab);
+
+    // clean up the toolbox if its window is closed
+    newHost.on("window-closed", this.destroy);
+
+    return newHost;
+  },
+
+  /**
+   * Switch to a new host for the toolbox UI. E.g.
+   * bottom, sidebar, separate window.
+   *
+   * @param {string} hostType
+   *        The host type of the new host object
+   */
+  _switchToHost: function TBOX_switchToHost(hostType) {
+    if (hostType == this._host.type) {
+      return;
+    }
+
+    let newHost = this._createHost(hostType);
+
+    newHost.once("ready", function(event, iframe) {
+      // change toolbox document's parent to the new host
+      iframe.QueryInterface(Components.interfaces.nsIFrameLoaderOwner);
+      iframe.swapFrameLoaders(this.frame);
+
+      this._host.off("window-closed", this.destroy);
+      this._host.destroy();
+
+      this._host = newHost;
+
+      Services.prefs.setCharPref(this._prefs.LAST_HOST, this._host.type);
+
+      this._buildDockButtons();
+
+      this.emit("host-changed");
+    }.bind(this));
+
+    newHost.open();
+  },
+
+  /**
+   * Get the most appropriate host tab, either the target or the current tab
+   */
+  _getHostTab: function TBOX_getHostTab() {
+    if (!this._target.isRemote && !this._target.isChrome) {
+      return this._target.tab;
+    } else {
+      let win = Services.wm.getMostRecentWindow("navigator:browser");
+      return win.gBrowser.selectedTab;
+    }
+  },
+
+  /**
+   * Handler for the tool-registered event.
+   * @param  {string} event
+   *         Name of the event ("tool-registered")
+   * @param  {string} toolId
+   *         Id of the tool that was registered
+   */
+  _toolRegistered: function TBOX_toolRegistered(event, toolId) {
+    let defs = gDevTools.getToolDefinitions();
+    let tool = defs.get(toolId);
+
+    this._buildTabForTool(tool);
+  },
+
+  /**
+   * Handler for the tool-unregistered event.
+   * @param  {string} event
+   *         Name of the event ("tool-unregistered")
+   * @param  {string} toolId
+   *         Id of the tool that was unregistered
+   */
+  _toolUnregistered: function TBOX_toolUnregistered(event, toolId) {
+    let radio = this.doc.getElementById("toolbox-tab-" + toolId);
+    let panel = this.doc.getElementById("toolbox-panel-" + toolId);
+
+    if (this._currentToolId == toolId) {
+      let nextToolName = null;
+      if (radio.nextSibling) {
+        nextToolName = radio.nextSibling.getAttribute("toolid");
+      }
+      if (radio.previousSibling) {
+        nextToolName = radio.previousSibling.getAttribute("toolid");
+      }
+      if (nextToolName) {
+        this.selectTool(nextToolName);
+      }
+    }
+
+    if (radio) {
+      radio.parentNode.removeChild(radio);
+    }
+
+    if (panel) {
+      panel.parentNode.removeChild(panel);
+    }
+
+    if (this._toolPanels.has(toolId)) {
+      let instance = this._toolPanels.get(toolId);
+      instance.destroy();
+      this._toolPanels.delete(toolId);
+    }
+  },
+
+
+  /**
+   * Get the toolbox's notification box
+   *
+   * @return The notification box element.
+   */
+  getNotificationBox: function TBOX_getNotificationBox() {
+    return this.doc.getElementById("toolbox-notificationbox");
+  },
+
+  /**
+   * Remove all UI elements, detach from target and clear up
+   */
+  destroy: function TBOX_destroy() {
+    if (this._destroyed) {
+      return;
+    }
+
+    // Remote targets need to be notified that the toolbox is being torn down.
+    if (this._target && this._target.isRemote) {
+      this._target.destroy();
+    }
+    this._target = null;
+
+    for (let [id, panel] of this._toolPanels) {
+      panel.destroy();
+    }
+
+    this._host.destroy();
+
+    gDevTools.off("tool-registered", this._toolRegistered);
+    gDevTools.off("tool-unregistered", this._toolUnregistered);
+
+    this._destroyed = true;
+    this.emit("destroyed");
+  }
+};
diff --git a/browser/devtools/framework/ToolboxHosts.jsm b/browser/devtools/framework/ToolboxHosts.jsm
new file mode 100644
index 00000000000..23371c950e9
--- /dev/null
+++ b/browser/devtools/framework/ToolboxHosts.jsm
@@ -0,0 +1,208 @@
+/* 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/. */
+
+"use strict";
+
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+this.EXPORTED_SYMBOLS = [ "Hosts" ];
+
+/**
+ * A toolbox host represents an object that contains a toolbox (e.g. the
+ * sidebar or a separate window). Any host object should implement the
+ * following functions:
+ *
+ * open() - create the UI and emit a 'ready' event when the UI is ready to use
+ * destroy() - destroy the host's UI
+ */
+
+this.Hosts = {
+  "bottom": BottomHost,
+  "side": SidebarHost,
+  "window": WindowHost
+}
+
+/**
+ * Host object for the dock on the bottom of the browser
+ */
+function BottomHost(hostTab) {
+  this.hostTab = hostTab;
+
+  new EventEmitter(this);
+}
+
+BottomHost.prototype = {
+  type: "bottom",
+
+  heightPref: "devtools.toolbox.footer.height",
+
+  /**
+   * Create a box at the bottom of the host tab.
+   */
+  open: function BH_open() {
+    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
+    let ownerDocument = gBrowser.ownerDocument;
+
+    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter.setAttribute("class", "devtools-horizontal-splitter");
+
+    this.frame = ownerDocument.createElement("iframe");
+    this.frame.id = "devtools-toolbox-bottom-iframe";
+    this.frame.height = Services.prefs.getIntPref(this.heightPref);
+
+    this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
+    this._nbox.appendChild(this._splitter);
+    this._nbox.appendChild(this.frame);
+
+    let frameLoad = function() {
+      this.frame.removeEventListener("DOMContentLoaded", frameLoad, true);
+      this.emit("ready", this.frame);
+    }.bind(this);
+
+    this.frame.addEventListener("DOMContentLoaded", frameLoad, true);
+
+    // we have to load something so we can switch documents if we have to
+    this.frame.setAttribute("src", "about:blank");
+
+    focusTab(this.hostTab);
+  },
+
+  /**
+   * Destroy the bottom dock.
+   */
+  destroy: function BH_destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+    Services.prefs.setIntPref(this.heightPref, this.frame.height);
+
+    this._nbox.removeChild(this._splitter);
+    this._nbox.removeChild(this.frame);
+  }
+}
+
+
+/**
+ * Host object for the in-browser sidebar
+ */
+function SidebarHost(hostTab) {
+  this.hostTab = hostTab;
+
+  new EventEmitter(this);
+}
+
+SidebarHost.prototype = {
+  type: "side",
+
+  widthPref: "devtools.toolbox.sidebar.width",
+
+  /**
+   * Create a box in the sidebar of the host tab.
+   */
+  open: function RH_open() {
+    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
+    let ownerDocument = gBrowser.ownerDocument;
+
+    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter.setAttribute("class", "devtools-side-splitter");
+
+    this.frame = ownerDocument.createElement("iframe");
+    this.frame.id = "devtools-toolbox-side-iframe";
+    this.frame.width = Services.prefs.getIntPref(this.widthPref);
+
+    this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
+    this._sidebar.appendChild(this._splitter);
+    this._sidebar.appendChild(this.frame);
+
+    let frameLoad = function() {
+      this.frame.removeEventListener("DOMContentLoaded", frameLoad, true);
+      this.emit("ready", this.frame);
+    }.bind(this);
+
+    this.frame.addEventListener("DOMContentLoaded", frameLoad, true);
+    this.frame.setAttribute("src", "about:blank");
+
+    focusTab(this.hostTab);
+  },
+
+  /**
+   * Destroy the sidebar.
+   */
+  destroy: function RH_destroy() {
+    Services.prefs.setIntPref(this.widthPref, this.frame.width);
+
+    this._sidebar.removeChild(this._splitter);
+    this._sidebar.removeChild(this.frame);
+  }
+}
+
+/**
+ * Host object for the toolbox in a separate window
+ */
+function WindowHost() {
+  this._boundUnload = this._boundUnload.bind(this);
+
+  new EventEmitter(this);
+}
+
+WindowHost.prototype = {
+  type: "window",
+
+  WINDOW_URL: "chrome://browser/content/devtools/framework/toolbox-window.xul",
+
+  /**
+   * Create a new xul window to contain the toolbox.
+   */
+  open: function WH_open() {
+    let flags = "chrome,centerscreen,resizable,dialog=no";
+    let win = Services.ww.openWindow(null, this.WINDOW_URL, "_blank",
+                                     flags, null);
+
+    let frameLoad = function(event) {
+      win.removeEventListener("load", frameLoad, true);
+      this.frame = win.document.getElementById("toolbox-iframe");
+      this.emit("ready", this.frame);
+    }.bind(this);
+
+    win.addEventListener("load", frameLoad, true);
+    win.addEventListener("unload", this._boundUnload);
+
+    win.focus();
+
+    this._window = win;
+  },
+
+  /**
+   * Catch the user closing the window.
+   */
+  _boundUnload: function(event) {
+    if (event.target.location != this.WINDOW_URL) {
+      return;
+    }
+    this._window.removeEventListener("unload", this._boundUnload);
+
+    this.emit("window-closed");
+  },
+
+  /**
+   * Destroy the window.
+   */
+  destroy: function WH_destroy() {
+    this._window.removeEventListener("unload", this._boundUnload);
+    this._window.close();
+  }
+}
+
+/**
+ *  Switch to the given tab in a browser and focus the browser window
+ */
+function focusTab(tab) {
+  let browserWindow = tab.ownerDocument.defaultView;
+  browserWindow.focus();
+  browserWindow.gBrowser.selectedTab = tab;
+}
diff --git a/browser/devtools/framework/connect/connect.css b/browser/devtools/framework/connect/connect.css
new file mode 100644
index 00000000000..a7acc39936e
--- /dev/null
+++ b/browser/devtools/framework/connect/connect.css
@@ -0,0 +1,87 @@
+html {
+  background: url("chrome://browser/skin/newtab/noise.png");
+}
+
+body {
+  font-family: Arial;
+  padding: 20px;
+  border-radius: 3px;
+  max-width: 600px;
+  min-height: 400px;
+  margin: 10px auto 0;
+}
+
+label {
+  display: block;
+  margin: 10px;
+  font-size: 0;
+}
+
+label > span {
+  display: inline-block;
+  min-width: 150px;
+  font-size: 0.8rem;
+  text-align: right;
+  margin-right: 10px;
+}
+
+#submit {
+  margin-left: 160px;
+}
+
+
+#actors, #connection-form {
+  margin: 20px;
+}
+
+input {
+  border: 1px solid grey;
+}
+
+#connection-form,
+#connecting,
+#actors-list {
+  display: none;
+}
+
+body:not(.actors-mode):not(.connecting) > #connection-form {
+  display: block;
+}
+
+body.actors-mode > #actors-list {
+  display: block;
+}
+
+body.connecting > #connecting {
+  display: block;
+}
+
+#connecting {
+  text-align: center;
+}
+
+#throbber {
+  height: 7px; width: 7px;
+  border-radius: 50%;
+  background: black;
+  display: inline-block;
+  animation-duration: 0.6s;
+  animation-name: anim;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+@keyframes anim {to {
+    transform: scale(0.5) rotate(0.1deg);
+}}
+
+#actors {
+  padding-left: 0;
+  font-size: 0.9rem;
+}
+
+#actors > a {
+  display: block;
+  margin: 5px;
+  padding: 5px;
+}
diff --git a/browser/devtools/framework/connect/connect.js b/browser/devtools/framework/connect/connect.js
new file mode 100644
index 00000000000..169e57ec0e8
--- /dev/null
+++ b/browser/devtools/framework/connect/connect.js
@@ -0,0 +1,100 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+"use strict";
+
+const Cu = Components.utils;
+Cu.import("resource:///modules/devtools/Target.jsm");
+Cu.import("resource:///modules/devtools/Toolbox.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/devtools/dbg-client.jsm");
+
+let gClient;
+
+function submit() {
+  document.body.classList.add("connecting");
+
+  let host = document.getElementById("host").value;
+  let port = document.getElementById("port").value;
+  if (!host) {
+    host = Services.prefs.getCharPref("devtools.debugger.remote-host");
+  } else {
+    Services.prefs.setCharPref("devtools.debugger.remote-host", host);
+  }
+  if (!port) {
+    port = Services.prefs.getIntPref("devtools.debugger.remote-port");
+  } else {
+    Services.prefs.setIntPref("devtools.debugger.remote-port", port);
+  }
+
+  let transport = debuggerSocketConnect(host, port);
+  let client = gClient = new DebuggerClient(transport);
+
+  client.connect(function(aType, aTraits) {
+    client.listTabs(function(aResponse) {
+      document.body.classList.remove("connecting");
+      document.body.classList.add("actors-mode");
+
+      let parent = document.getElementById("actors");
+      let focusSet = false;
+
+      // Add Global Process debugging...
+      let globals = JSON.parse(JSON.stringify(aResponse));
+      delete globals.tabs;
+      delete globals.selected;
+      // ...only if there are appropriate actors (a 'from' property will always
+      // be there).
+      if (Object.keys(globals).length > 1) {
+        let a = document.createElement("a");
+        a.onclick = function() {
+          connect(globals, true);
+        }
+
+        a.title = a.textContent = "Remote process";
+        a.href = "#";
+
+        parent.appendChild(a);
+      }
+
+      // Add one entry for each open tab.
+      if (aResponse.tabs.length > 0) {
+        let header = document.createElement("div");
+        header.innerHTML = "Tabs:";
+        parent.appendChild(header);
+      }
+      for (let i = 0; i < aResponse.tabs.length; i++) {
+        let tab = aResponse.tabs[i];
+
+        let a = document.createElement("a");
+        a.onclick = function() {
+          connect(tab);
+        }
+
+        a.title = a.textContent = tab.title;
+        a.href = "#";
+
+        if (i == aResponse.selected) {
+          a.title += " [*]";
+          a.textContent = a.title;
+        }
+
+        parent.appendChild(a);
+
+        if (!focusSet) {
+          a.focus();
+          focusSet = true;
+        }
+      }
+    });
+  });
+}
+
+function connect(form, chrome=false) {
+  let target = TargetFactory.forRemote(form, gClient, chrome);
+  gDevTools.openToolbox(target, Toolbox.HostType.WINDOW, "webconsole");
+  window.close();
+}
diff --git a/browser/devtools/framework/connect/connect.xhtml b/browser/devtools/framework/connect/connect.xhtml
new file mode 100644
index 00000000000..466170d07de
--- /dev/null
+++ b/browser/devtools/framework/connect/connect.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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 html [
+<!ENTITY % connectionDTD SYSTEM "chrome://browser/locale/devtools/connection-screen.dtd" >
+ %connectionDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <head>
+    <title>&title;</title>
+    <link rel="stylesheet" href="chrome://browser/content/devtools/connect.css" type="text/css"/>
+    <script type="application/javascript;version=1.8" src="connect.js"></script>
+  </head>
+  <body>
+    <p>
+    </p>
+    <section id="connection-form">
+      <form onsubmit="window.submit()" action="#">
+        <label>
+          <span>&host;</span>
+          <input id="host" type="text" placeholder="localhost"></input>
+        </label>
+        <label>
+          <span>&port;</span>
+          <input id="port" type="number" placeholder="6000"></input>
+        </label>
+        <label>
+          <input id="submit" type="submit" value="&connect;"></input>
+        </label>
+      </form>
+    </section>
+    <section id="actors-list">
+      <p>&availability;</p>
+      <ul id="actors"></ul>
+    </section>
+    <section id="connecting">
+      <p>&connecting;</p>
+      <div id="throbber"></div>
+    </section>
+  </body>
+</html>
diff --git a/browser/devtools/framework/gDevTools.jsm b/browser/devtools/framework/gDevTools.jsm
new file mode 100644
index 00000000000..6c22ebdf384
--- /dev/null
+++ b/browser/devtools/framework/gDevTools.jsm
@@ -0,0 +1,543 @@
+/* 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = [ "gDevTools", "DevTools", "DevToolsXULCommands" ];
+
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
+Cu.import("resource:///modules/devtools/Toolbox.jsm");
+Cu.import("resource:///modules/devtools/Target.jsm");
+
+const FORBIDDEN_IDS = new Set("toolbox", "");
+
+/**
+ * DevTools is a class that represents a set of developer tools, it holds a
+ * set of tools and keeps track of open toolboxes in the browser.
+ */
+this.DevTools = function DevTools() {
+  this._tools = new Map();
+  this._toolboxes = new Map();
+
+  // destroy() is an observer's handler so we need to preserve context.
+  this.destroy = this.destroy.bind(this);
+
+  this._trackedBrowserWindows = new Set();
+
+  // Bind _updateMenuCheckbox() to preserve context.
+  this._updateMenuCheckbox = this._updateMenuCheckbox.bind(this);
+
+  new EventEmitter(this);
+
+  Services.obs.addObserver(this.destroy, "quit-application", false);
+
+  /**
+   * Register the set of default tools
+   */
+  for (let definition of defaultTools) {
+    this.registerTool(definition);
+  }
+}
+
+DevTools.prototype = {
+  /**
+   * Register a new developer tool.
+   *
+   * A definition is a light object that holds different information about a
+   * developer tool. This object is not supposed to have any operational code.
+   * See it as a "manifest".
+   * The only actual code lives in the build() function, which will be used to
+   * start an instance of this tool.
+   *
+   * Each toolDefinition has the following properties:
+   * - id: Unique identifier for this tool (string|required)
+   * - killswitch: Property name to allow us to turn this tool on/off globally
+   *               (string|required) (TODO: default to devtools.{id}.enabled?)
+   * - icon: URL pointing to a graphic which will be used as the src for an
+   *         16x16 img tag (string|required)
+   * - url: URL pointing to a XUL/XHTML document containing the user interface
+   *        (string|required)
+   * - label: Localized name for the tool to be displayed to the user
+   *          (string|required)
+   * - build: Function that takes an iframe, which has been populated with the
+   *          markup from |url|, and also the toolbox containing the panel.
+   *          And returns an instance of ToolPanel (function|required)
+   */
+  registerTool: function DT_registerTool(toolDefinition) {
+    let toolId = toolDefinition.id;
+
+    if (!toolId || FORBIDDEN_IDS.has(toolId)) {
+      throw new Error("Invalid definition.id");
+    }
+
+    toolDefinition.killswitch = toolDefinition.killswitch ||
+      "devtools." + toolId + ".enabled";
+    this._tools.set(toolId, toolDefinition);
+
+    this._addToolToWindows(toolDefinition);
+
+    this.emit("tool-registered", toolId);
+  },
+
+  /**
+   * Removes all tools that match the given |toolId|
+   * Needed so that add-ons can remove themselves when they are deactivated
+   *
+   * @param {string} toolId
+   *        id of the tool to unregister
+   */
+  unregisterTool: function DT_unregisterTool(toolId) {
+    this._tools.delete(toolId);
+
+    this._removeToolFromWindows(toolId);
+
+    this.emit("tool-unregistered", toolId);
+  },
+
+  /**
+   * Allow ToolBoxes to get at the list of tools that they should populate
+   * themselves with.
+   *
+   * @return {Map} tools
+   *         A map of the the tool definitions registered in this instance
+   */
+  getToolDefinitions: function DT_getToolDefinitions() {
+    let tools = new Map();
+
+    for (let [key, value] of this._tools) {
+      let enabled;
+
+      try {
+        enabled = Services.prefs.getBoolPref(value.killswitch);
+      } catch(e) {
+        enabled = true;
+      }
+
+      if (enabled) {
+        tools.set(key, value);
+      }
+    }
+    return tools;
+  },
+
+  /**
+   * Create a toolbox to debug |target| using a window displayed in |hostType|
+   * (optionally with |defaultToolId| opened)
+   *
+   * @param {Target} target
+   *         The target the toolbox will debug
+   * @param {Toolbox.HostType} hostType
+   *        The type of host (bottom, top, side)
+   * @param {string} defaultToolId
+   *        The id of the initial tool to show
+   *
+   * @return {Toolbox} toolbox
+   *        The toolbox that was opened
+   */
+  openToolbox: function DT_openToolbox(target, hostType, defaultToolId) {
+    if (this._toolboxes.has(target)) {
+      // only allow one toolbox per target
+      return this._toolboxes.get(target);
+    }
+
+    let tb = new Toolbox(target, hostType, defaultToolId);
+
+    this._toolboxes.set(target, tb);
+    tb.once("destroyed", function() {
+      this._toolboxes.delete(target);
+      this._updateMenuCheckbox();
+      this.emit("toolbox-destroyed", target);
+    }.bind(this));
+
+    tb.once("ready", function() {
+      this.emit("toolbox-ready", tb);
+      this._updateMenuCheckbox();
+    }.bind(this));
+
+    tb.open();
+
+    return tb;
+  },
+
+  /**
+   * Close the toolbox for a given target
+   */
+  closeToolbox: function DT_closeToolbox(target) {
+    let toolbox = this._toolboxes.get(target);
+    if (toolbox == null) {
+      return;
+    }
+    toolbox.destroy();
+  },
+
+  /**
+   * Open the toolbox for a specific target (not tab).
+   * FIXME: We should probably merge this function and openToolbox
+   *
+   * @param  {Target} target
+   *         The target that the toolbox should be debugging
+   * @param  {String} toolId
+   *         The id of the tool to open
+   *
+   * @return {Toolbox} toolbox
+   *         The toolbox that has been opened
+   */
+  openToolboxForTab: function DT_openToolboxForTab(target, toolId) {
+    let tb = this.getToolboxForTarget(target);
+
+    if (tb) {
+      tb.selectTool(toolId);
+    } else {
+      tb = this.openToolbox(target, null, toolId);
+    }
+    return tb;
+  },
+
+  /**
+   * This function is for the benefit of command#Tools:DevToolbox in
+   * browser/base/content/browser-sets.inc and should not be used outside
+   * of there
+   */
+  toggleToolboxCommand: function(gBrowser, toolId=null) {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    this.toggleToolboxForTarget(target, toolId);
+  },
+
+  /**
+   * Toggle a toolbox for the given target.
+   *
+   * @param  {Target} target
+   *         The target the toolbox is debugging
+   * @param  {string} toolId
+   *         The id of the tool to show in the toolbox, if it's to be opened.
+   */
+  toggleToolboxForTarget: function DT_toggleToolboxForTarget(target, toolId) {
+    let tb = this.getToolboxForTarget(target);
+
+    if (tb /* FIXME: && tool is showing */ ) {
+      tb.destroy();
+    } else {
+      this.openToolboxForTab(target, toolId);
+    }
+  },
+
+  /**
+   * Return the toolbox for a given target.
+   *
+   * @param  {object} target
+   *         Target value e.g. the target that owns this toolbox
+   *
+   * @return {Toolbox} toolbox
+   *         The toobox that is debugging the given target
+   */
+  getToolboxForTarget: function DT_getToolboxForTarget(target) {
+    return this._toolboxes.get(target);
+  },
+
+  /**
+   * Return a tool panel for a given tool and target.
+   *
+   * @param  {String} toolId
+   *         The id of the tool to open.
+   * @param  {object} target
+   *         The toolbox's target.
+   *
+   * @return {ToolPanel} panel
+   *         Panel for the tool with the toolid
+   */
+  getPanelForTarget: function DT_getPanelForTarget(toolId, target) {
+    let toolbox = this.getToolboxForTarget(target);
+    if (!toolbox) {
+      return undefined;
+    }
+    return toolbox.getToolPanels().get(toolId);
+  },
+
+  /**
+   * Add this DevTools's presence to a browser window's document
+   *
+   * @param  {XULDocument} doc
+   *         The document to which menuitems and handlers are to be added
+   */
+  registerBrowserWindow: function DT_registerBrowserWindow(win) {
+    this._trackedBrowserWindows.add(win);
+    this._addAllToolsToMenu(win.document);
+
+    let tabContainer = win.document.getElementById("tabbrowser-tabs")
+    tabContainer.addEventListener("TabSelect", this._updateMenuCheckbox, false);
+  },
+
+  /**
+   * Add the menuitem for a tool to all open browser windows.
+   *
+   * @param {object} toolDefinition
+   *        properties of the tool to add
+   */
+  _addToolToWindows: function DT_addToolToWindows(toolDefinition) {
+    for (let win of this._trackedBrowserWindows) {
+      this._addToolToMenu(toolDefinition, win.document);
+    }
+  },
+
+  /**
+   * Add all tools to the developer tools menu of a window.
+   *
+   * @param {XULDocument} doc
+   *        The document to which the tool items are to be added.
+   */
+  _addAllToolsToMenu: function DT_addAllToolsToMenu(doc) {
+    let fragCommands = doc.createDocumentFragment();
+    let fragKeys = doc.createDocumentFragment();
+    let fragBroadcasters = doc.createDocumentFragment();
+    let fragAppMenuItems = doc.createDocumentFragment();
+    let fragMenuItems = doc.createDocumentFragment();
+
+    for (let [key, toolDefinition] of this._tools) {
+      let frags = this._addToolToMenu(toolDefinition, doc, true);
+
+      if (!frags) {
+        return;
+      }
+
+      let [cmd, key, bc, appmenuitem, menuitem] = frags;
+
+      fragCommands.appendChild(cmd);
+      if (key) {
+        fragKeys.appendChild(key);
+      }
+      fragBroadcasters.appendChild(bc);
+      fragAppMenuItems.appendChild(appmenuitem);
+      fragMenuItems.appendChild(menuitem);
+    }
+
+    let mcs = doc.getElementById("mainCommandSet");
+    mcs.appendChild(fragCommands);
+
+    let mks = doc.getElementById("mainKeyset");
+    mks.appendChild(fragKeys);
+
+    let mbs = doc.getElementById("mainBroadcasterSet");
+    mbs.appendChild(fragBroadcasters);
+
+    let amp = doc.getElementById("appmenu_webDeveloper_popup");
+    if (amp) {
+      let amps = doc.getElementById("appmenu_devtools_separator");
+      amp.insertBefore(fragAppMenuItems, amps);
+    }
+
+    let mp = doc.getElementById("menuWebDeveloperPopup");
+    let mps = doc.getElementById("menu_devtools_separator");
+    mp.insertBefore(fragMenuItems, mps);
+  },
+
+  /**
+   * Add a menu entry for a tool definition
+   *
+   * @param {string} toolDefinition
+   *        Tool definition of the tool to add a menu entry.
+   * @param {XULDocument} doc
+   *        The document to which the tool menu item is to be added.
+   * @param {Boolean} [noAppend]
+   *        Return an array of elements instead of appending them to the
+   *        document. Default is false.
+   */
+  _addToolToMenu: function DT_addToolToMenu(toolDefinition, doc, noAppend) {
+    let id = toolDefinition.id;
+
+    // Prevent multiple entries for the same tool.
+    if (doc.getElementById("Tools:" + id)) {
+      return;
+    }
+
+    let cmd = doc.createElement("command");
+    cmd.id = "Tools:" + id;
+    cmd.setAttribute("oncommand",
+        'gDevTools.toggleToolboxCommand(gBrowser, "' + id + '");');
+
+    let key = null;
+    if (toolDefinition.key) {
+      key = doc.createElement("key");
+      key.id = "key_" + id;
+
+      if (toolDefinition.key.startsWith("VK_")) {
+        key.setAttribute("keycode", toolDefinition.key);
+      } else {
+        key.setAttribute("key", toolDefinition.key);
+      }
+
+      key.setAttribute("oncommand",
+          'gDevTools.toggleToolboxCommand(gBrowser, "' + id + '");');
+      key.setAttribute("modifiers", toolDefinition.modifiers);
+    }
+
+    let bc = doc.createElement("broadcaster");
+    bc.id = "devtoolsMenuBroadcaster_" + id;
+    bc.setAttribute("label", toolDefinition.label);
+    bc.setAttribute("command", "Tools:" + id);
+
+    if (key) {
+      bc.setAttribute("key", "key_" + id);
+    }
+
+    let appmenuitem = doc.createElement("menuitem");
+    appmenuitem.id = "appmenuitem_" + id;
+    appmenuitem.setAttribute("observes", "devtoolsMenuBroadcaster_" + id);
+
+    let menuitem = doc.createElement("menuitem");
+    menuitem.id = "menuitem_" + id;
+    menuitem.setAttribute("observes", "devtoolsMenuBroadcaster_" + id);
+
+    if (toolDefinition.accesskey) {
+      menuitem.setAttribute("accesskey", toolDefinition.accesskey);
+    }
+
+    if (noAppend) {
+      return [cmd, key, bc, appmenuitem, menuitem];
+    } else {
+      let mcs = doc.getElementById("mainCommandSet");
+      mcs.appendChild(cmd);
+
+      if (key) {
+        let mks = doc.getElementById("mainKeyset");
+        mks.appendChild(key);
+      }
+
+      let mbs = doc.getElementById("mainBroadcasterSet");
+      mbs.appendChild(bc);
+
+      let amp = doc.getElementById("appmenu_webDeveloper_popup");
+      if (amp) {
+        let amps = doc.getElementById("appmenu_devtools_separator");
+        amp.insertBefore(appmenuitem, amps);
+      }
+
+      let mp = doc.getElementById("menuWebDeveloperPopup");
+      let mps = doc.getElementById("menu_devtools_separator");
+      mp.insertBefore(menuitem, mps);
+    }
+  },
+
+  /**
+   * Update the "Toggle Toolbox" checkbox in the developer tools menu. This is
+   * called when a toolbox is created or destroyed.
+   */
+  _updateMenuCheckbox: function DT_updateMenuCheckbox() {
+    for (let win of this._trackedBrowserWindows) {
+
+      let hasToolbox = false;
+      if (TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
+        let target = TargetFactory.forTab(win.gBrowser.selectedTab);
+        if (this._toolboxes.has(target)) {
+          hasToolbox = true;
+        }
+      }
+
+      let broadcaster = win.document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
+      if (hasToolbox) {
+        broadcaster.setAttribute("checked", "true");
+      } else {
+        broadcaster.removeAttribute("checked");
+      }
+    }
+  },
+
+  /**
+   * Remove the menuitem for a tool to all open browser windows.
+   *
+   * @param {object} toolId
+   *        id of the tool to remove
+   */
+  _removeToolFromWindows: function DT_removeToolFromWindows(toolId) {
+    for (let win of this._trackedBrowserWindows) {
+      this._removeToolFromMenu(toolId, win.document);
+    }
+  },
+
+  /**
+   * Remove a tool's menuitem from a window
+   *
+   * @param {string} toolId
+   *        Id of the tool to add a menu entry for
+   * @param {XULDocument} doc
+   *        The document to which the tool menu item is to be removed from
+   */
+  _removeToolFromMenu: function DT_removeToolFromMenu(toolId, doc) {
+    let command = doc.getElementById("Tools:" + toolId);
+    command.parentNode.removeChild(command);
+
+    let key = doc.getElementById("key_" + toolId);
+    if (key) {
+      key.parentNode.removeChild(key);
+    }
+
+    let bc = doc.getElementById("devtoolsMenuBroadcaster_" + toolId);
+    bc.parentNode.removeChild(bc);
+
+    /*
+    // FIXME: item is null in testing. This is the only place to use
+    // "appmenu_devToolbar" + toolId, so it seems clear that this is wrong
+    let item = doc.getElementById("appmenu_devToolbar" + toolId);
+    item.parentNode.removeChild(item);
+    */
+  },
+
+  /**
+   * Called on browser unload to remove menu entries, toolboxes and event
+   * listeners from the closed browser window.
+   *
+   * @param  {XULWindow} win
+   *         The window containing the menu entry
+   */
+  forgetBrowserWindow: function DT_forgetBrowserWindow(win) {
+    if (!this._tools) {
+      return;
+    }
+
+    this._trackedBrowserWindows.delete(win);
+
+    // Destroy toolboxes for closed window
+    for (let [target, toolbox] of this._toolboxes) {
+      if (toolbox.frame.ownerDocument.defaultView == win) {
+        toolbox.destroy();
+      }
+    }
+
+    let tabContainer = win.document.getElementById("tabbrowser-tabs")
+    tabContainer.removeEventListener("TabSelect",
+                                     this._updateMenuCheckbox, false);
+  },
+
+  /**
+   * All browser windows have been closed, tidy up remaining objects.
+   */
+  destroy: function() {
+    Services.obs.removeObserver(this.destroy, "quit-application");
+
+    delete this._trackedBrowserWindows;
+    delete this._tools;
+    delete this._toolboxes;
+  },
+};
+
+/**
+ * gDevTools is a singleton that controls the Firefox Developer Tools.
+ *
+ * It is an instance of a DevTools class that holds a set of tools. It has the
+ * same lifetime as the browser.
+ */
+this.gDevTools = new DevTools();
+
+/**
+ * DevToolsXULCommands exposes methods used by browser's <command>s.
+ */
+this.DevToolsXULCommands = {
+  openConnectScreen: function(gBrowser) {
+    gBrowser.selectedTab = gBrowser.addTab("chrome://browser/content/devtools/connect.xhtml");
+  },
+}
diff --git a/browser/devtools/framework/test/Makefile.in b/browser/devtools/framework/test/Makefile.in
new file mode 100644
index 00000000000..618e044c492
--- /dev/null
+++ b/browser/devtools/framework/test/Makefile.in
@@ -0,0 +1,26 @@
+# 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/.
+
+DEPTH			= @DEPTH@
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH			= @srcdir@
+relativesrcdir  = @relativesrcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MOCHITEST_BROWSER_FILES = \
+		head.js \
+		browser_devtools_api.js \
+		browser_new_activation_workflow.js \
+		browser_toolbox_dynamic_registration.js \
+		browser_toolbox_hosts.js \
+		browser_toolbox_ready.js \
+		browser_toolbox_select_event.js \
+		browser_target_events.js \
+		browser_toolbox_tool_ready.js \
+		browser_toolbox_sidebar.js \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
diff --git a/browser/devtools/framework/test/browser_devtools_api.js b/browser/devtools/framework/test/browser_devtools_api.js
new file mode 100644
index 00000000000..205a26808ab
--- /dev/null
+++ b/browser/devtools/framework/test/browser_devtools_api.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests devtools API
+
+const Cu = Components.utils;
+const toolId = "test-tool";
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/EventEmitter.jsm", tempScope);
+let EventEmitter = tempScope.EventEmitter;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+function test() {
+  addTab("about:blank", function(aBrowser, aTab) {
+    runTests(aTab);
+  });
+}
+
+function runTests(aTab) {
+  let toolDefinition = {
+    id: toolId,
+    isTargetSupported: function() true,
+    killswitch: "devtools.test-tool.enabled",
+    url: "about:blank",
+    label: "someLabel",
+    build: function(iframeWindow, toolbox) {
+      let panel = new DevToolPanel(iframeWindow, toolbox);
+      return panel;
+    },
+  };
+
+  ok(gDevTools, "gDevTools exists");
+  is(gDevTools.getToolDefinitions().has(toolId), false,
+    "The tool is not registered");
+
+  gDevTools.registerTool(toolDefinition);
+  is(gDevTools.getToolDefinitions().has(toolId), true,
+    "The tool is registered");
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  function onNewToolbox(event, toolboxFromEvent) {
+    let toolBoxes = gDevTools._toolboxes;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let tb = toolBoxes.get(target);
+    is(toolboxFromEvent, tb, "'toolbox-ready' event fired. Correct toolbox value.");
+    is(tb.target, target, "toolbox target is correct");
+    is(tb._host.hostTab, gBrowser.selectedTab, "toolbox host is correct");
+    gDevTools.once(toolId + "-ready", continueTests);
+  }
+
+  function onToolboxClosed(event, targetFromEvent) {
+    is(targetFromEvent, target, "'toolbox-destroyed' event fired. Correct tab value.");
+    finishUp();
+  }
+
+
+  gDevTools.once("toolbox-ready", onNewToolbox);
+  gDevTools.once("toolbox-destroyed", onToolboxClosed);
+
+  executeSoon(function() {
+    gDevTools.openToolbox(target, "bottom", toolId);
+  });
+}
+
+function continueTests(event, toolbox, panel) {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  is(toolbox, gDevTools._toolboxes.get(target), "{toolId}-ready event received, with correct toolbox value");
+  is(panel, toolbox.getToolPanels().get(toolId), "panel value is correct");
+
+  is(toolbox.currentToolId, toolId, "toolbox _currentToolId is correct");
+
+  let toolDefinitions = gDevTools.getToolDefinitions();
+  is(toolDefinitions.has(toolId), true, "The tool is in gDevTools");
+
+  let toolDefinition = toolDefinitions.get(toolId);
+  is(toolDefinition.id, toolId, "toolDefinition id is correct");
+
+  gDevTools.unregisterTool(toolId);
+  is(gDevTools.getToolDefinitions().has(toolId), false,
+    "The tool is no longer registered");
+
+  toolbox.destroy();
+}
+
+function finishUp() {
+  tempScope = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+/**
+* When a Toolbox is started it creates a DevToolPanel for each of the tools
+* by calling toolDefinition.build(). The returned object should
+* at least implement these functions. They will be used by the ToolBox.
+*
+* There may be no benefit in doing this as an abstract type, but if nothing
+* else gives us a place to write documentation.
+*/
+function DevToolPanel(iframeWindow, toolbox) {
+  new EventEmitter(this);
+
+  this._toolbox = toolbox;
+
+  /*let doc = iframeWindow.document
+  let label = doc.createElement("label");
+  let textNode = doc.createTextNode("Some Tool");
+
+  label.appendChild(textNode);
+  doc.body.appendChild(label);*/
+
+  executeSoon(function() {
+    this.setReady();
+  }.bind(this));
+}
+
+DevToolPanel.prototype = {
+  get target() this._toolbox.target,
+
+  get toolbox() this._toolbox,
+
+  get isReady() this._isReady,
+
+  _isReady: false,
+
+  setReady: function() {
+    this._isReady = true;
+    this.emit("ready");
+  },
+
+  destroy: function DTI_destroy()
+  {
+
+  },
+};
diff --git a/browser/devtools/framework/test/browser_new_activation_workflow.js b/browser/devtools/framework/test/browser_new_activation_workflow.js
new file mode 100644
index 00000000000..242b725dcc5
--- /dev/null
+++ b/browser/devtools/framework/test/browser_new_activation_workflow.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests devtools API
+
+const Cu = Components.utils;
+
+let toolbox;
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+function test() {
+  addTab("about:blank", function(aBrowser, aTab) {
+    loadWebConsole(aTab);
+  });
+}
+
+function loadWebConsole(aTab) {
+  ok(gDevTools, "gDevTools exists");
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  toolbox = gDevTools.openToolbox(target, "bottom", "webconsole");
+  toolbox.once("webconsole-ready", checkToolLoading);
+}
+
+function checkToolLoading() {
+  is(toolbox.currentToolId, "webconsole", "The web console is selected");
+  selectAndCheckById("jsdebugger");
+  selectAndCheckById("styleeditor");
+  testToggle();
+}
+
+function selectAndCheckById(id) {
+  let doc = toolbox.frame.contentDocument;
+
+  toolbox.selectTool(id);
+  let tab = doc.getElementById("toolbox-tab-" + id);
+  is(tab.selected, true, "The " + id + " tab is selected");
+}
+
+function testToggle() {
+  toolbox.once("destroyed", function() {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    toolbox = gDevTools.openToolbox(target, "bottom", "styleeditor");
+    toolbox.once("styleeditor-ready", checkStyleEditorLoaded);
+  }.bind(this));
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  gDevTools.toggleToolboxForTarget(target);
+}
+
+function checkStyleEditorLoaded() {
+  is(toolbox.currentToolId, "styleeditor", "The style editor is selected");
+  finishUp();
+}
+
+function finishUp() {
+  toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_target_events.js b/browser/devtools/framework/test/browser_target_events.js
new file mode 100644
index 00000000000..56496fea2d6
--- /dev/null
+++ b/browser/devtools/framework/test/browser_target_events.js
@@ -0,0 +1,58 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+var tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+var TargetFactory = tempScope.TargetFactory;
+
+var target;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", onLoad, true);
+}
+
+function onLoad(evt) {
+  gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+
+  target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  is(target.tab, gBrowser.selectedTab, "Target linked to the right tab.");
+
+  target.once("hidden", onHidden);
+  gBrowser.selectedTab = gBrowser.addTab();
+}
+
+function onHidden() {
+  ok(true, "Hidden event received");
+  target.once("visible", onVisible);
+  gBrowser.removeCurrentTab();
+}
+
+function onVisible() {
+  ok(true, "Visible event received");
+  target.once("will-navigate", onWillNavigate);
+  gBrowser.contentWindow.location = "data:text/html,test navigation";
+}
+
+function onWillNavigate(event, request) {
+  ok(true, "will-navigate event received");
+  target.once("navigate", onNavigate);
+}
+
+function onNavigate() {
+  ok(true, "navigate event received");
+  target.once("close", onClose);
+  gBrowser.removeCurrentTab();
+}
+
+function onClose() {
+  ok(true, "close event received");
+
+  target = null;
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js b/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
new file mode 100644
index 00000000000..848dbef8aac
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
@@ -0,0 +1,112 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let toolbox;
+
+let temp = {};
+Cu.import("resource:///modules/devtools/Target.jsm", temp);
+let TargetFactory = temp.TargetFactory;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    openToolbox();
+  }, true);
+
+  content.location = "data:text/html,test for dynamically registering and unregistering tools";
+}
+
+function openToolbox()
+{
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  toolbox = gDevTools.openToolbox(target);
+
+  toolbox.once("ready", testRegister);
+}
+
+
+function testRegister()
+{
+  gDevTools.once("tool-registered", toolRegistered);
+
+  gDevTools.registerTool({
+    id: "test-tool",
+    label: "Test Tool",
+    isTargetSupported: function() true,
+    build: function() {}
+  });
+}
+
+function toolRegistered(event, toolId)
+{
+  is(toolId, "test-tool", "tool-registered event handler sent tool id");
+
+  ok(gDevTools.getToolDefinitions().has(toolId), "tool added to map");
+
+  // test that it appeared in the UI
+  let doc = toolbox.frame.contentDocument;
+  let tab = doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab, "new tool's tab exists in toolbox UI");
+
+  let panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(panel, "new tool's panel exists in toolbox UI");
+
+  for (let win of getAllBrowserWindows()) {
+    let command = win.document.getElementById("Tools:" + toolId);
+    ok(command, "command for new tool added to every browser window");
+  }
+
+  // then unregister it
+  testUnregister();
+}
+
+function getAllBrowserWindows() {
+  let wins = [];
+  let enumerator = Services.wm.getEnumerator("navigator:browser");
+  while (enumerator.hasMoreElements()) {
+    wins.push(enumerator.getNext());
+  }
+  return wins;
+}
+
+function testUnregister()
+{
+  gDevTools.once("tool-unregistered", toolUnregistered);
+
+  gDevTools.unregisterTool("test-tool");
+}
+
+function toolUnregistered(event, toolId)
+{
+  is(toolId, "test-tool", "tool-unregistered event handler sent tool id");
+
+  ok(!gDevTools.getToolDefinitions().has(toolId), "tool removed from map");
+
+  // test that it disappeared from the UI
+  let doc = toolbox.frame.contentDocument;
+  let tab = doc.getElementById("toolbox-tab-" + toolId);
+  ok(!tab, "tool's tab was removed from the toolbox UI");
+
+  let panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(!panel, "tool's panel was removed from toolbox UI");
+
+  for (let win of getAllBrowserWindows()) {
+    let command = win.document.getElementById("Tools:" + toolId);
+    ok(!command, "command removed from every browser window");
+  }
+
+  cleanup();
+}
+
+function cleanup()
+{
+  toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_hosts.js b/browser/devtools/framework/test/browser_toolbox_hosts.js
new file mode 100644
index 00000000000..5edbad6a327
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_hosts.js
@@ -0,0 +1,135 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let temp = {}
+Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
+let DevTools = temp.DevTools;
+
+Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
+let Toolbox = temp.Toolbox;
+
+Cu.import("resource:///modules/devtools/Target.jsm", temp);
+let TargetFactory = temp.TargetFactory;
+
+let toolbox;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    openToolbox(testBottomHost);
+  }, true);
+
+  content.location = "data:text/html,test for opening toolbox in different hosts";
+}
+
+function openToolbox(callback)
+{
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  gDevTools.toggleToolboxForTarget(target);
+
+  toolbox = gDevTools.getToolboxForTarget(target);
+  toolbox.once("ready", callback);
+}
+
+function testBottomHost()
+{
+  checkHostType(Toolbox.HostType.BOTTOM);
+
+  // test UI presence
+  let iframe = document.getElementById("devtools-toolbox-bottom-iframe");
+  ok(iframe, "toolbox bottom iframe exists");
+
+  checkToolboxLoaded(iframe);
+
+  toolbox.once("host-changed", testSidebarHost);
+  toolbox.hostType = Toolbox.HostType.SIDE;
+}
+
+function testSidebarHost()
+{
+  checkHostType(Toolbox.HostType.SIDE);
+
+  // test UI presence
+  let bottom = document.getElementById("devtools-toolbox-bottom-iframe");
+  ok(!bottom, "toolbox bottom iframe doesn't exist");
+
+  let iframe = document.getElementById("devtools-toolbox-side-iframe");
+  ok(iframe, "toolbox side iframe exists");
+
+  checkToolboxLoaded(iframe);
+
+  toolbox.once("host-changed", testWindowHost);
+  toolbox.hostType = Toolbox.HostType.WINDOW;
+}
+
+function testWindowHost()
+{
+  checkHostType(Toolbox.HostType.WINDOW);
+
+  let sidebar = document.getElementById("devtools-toolbox-side-iframe");
+  ok(!sidebar, "toolbox sidebar iframe doesn't exist");
+
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+
+  let iframe = win.document.getElementById("toolbox-iframe");
+  checkToolboxLoaded(iframe);
+
+  testToolSelect();
+}
+
+function testToolSelect()
+{
+  // make sure we can load a tool after switching hosts
+  toolbox.once("inspector-ready", testDestroy);
+  toolbox.selectTool("inspector");
+}
+
+function testDestroy()
+{
+  toolbox.once("destroyed", function() {
+    openToolbox(testRememberHost);
+  });
+
+  toolbox.destroy();
+}
+
+function testRememberHost()
+{
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, Toolbox.HostType.WINDOW, "host remembered");
+
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+
+  cleanup();
+}
+
+function checkHostType(hostType)
+{
+  is(toolbox.hostType, hostType, "host type is " + hostType);
+
+  let pref = Services.prefs.getCharPref("devtools.toolbox.host");
+  is(pref, hostType, "host pref is " + hostType);
+}
+
+function checkToolboxLoaded(iframe)
+{
+  let tabs = iframe.contentDocument.getElementById("toolbox-tabs");
+  ok(tabs, "toolbox UI has been loaded into iframe");
+}
+
+function cleanup()
+{
+  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
+
+  toolbox.destroy();
+  DevTools = Toolbox = toolbox = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_ready.js b/browser/devtools/framework/test/browser_toolbox_ready.js
new file mode 100644
index 00000000000..cbf6d89efe2
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_ready.js
@@ -0,0 +1,56 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+let toolbox;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    openToolbox();
+  }, true);
+
+  content.location = "data:text/html,test for dynamically registering and unregistering tools";
+}
+
+function openToolbox()
+{
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  gDevTools.toggleToolboxForTarget(target);
+
+  toolbox = gDevTools.getToolboxForTarget(target);
+
+  ok(!toolbox.isReady, "toolbox isReady isn't set yet");
+
+  try {
+    toolbox.selectTool("webconsole");
+    ok(false, "Should throw when selectTool() called before toolbox is ready");
+  }
+  catch(error) {
+    is(error.message, "Can't select tool, wait for toolbox 'ready' event")
+  }
+
+  toolbox.once("ready", testReady);
+}
+
+function testReady()
+{
+  ok(toolbox.isReady, "toolbox isReady is set");
+  cleanup();
+}
+
+function cleanup()
+{
+  toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_select_event.js b/browser/devtools/framework/test/browser_toolbox_select_event.js
new file mode 100644
index 00000000000..191bd80896f
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_select_event.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let toolbox;
+
+function test() {
+  addTab("about:blank", function() {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    toolbox = gDevTools.openToolbox(target, "bottom", "webconsole");
+    toolbox.once("ready", testSelect);
+  });
+}
+
+let called = {
+  inspector: false,
+  webconsole: false,
+  styleeditor: false,
+  //jsdebugger: false,
+}
+
+function testSelect() {
+  info("Toolbox fired a `ready` event");
+
+  toolbox.on("select", selectCB);
+
+  toolbox.selectTool("inspector");
+  toolbox.selectTool("webconsole");
+  toolbox.selectTool("styleeditor");
+  //toolbox.selectTool("jsdebugger");
+}
+
+function selectCB(event, id) {
+  called[id] = true;
+  info("toolbox-select event from " + id);
+
+  for (let tool in called) {
+    if (!called[tool]) {
+      return;
+    }
+  }
+
+  ok(true, "All the tools fired a 'select event'");
+  toolbox.off("select", selectCB);
+
+  reselect();
+}
+
+function reselect() {
+  for (let tool in called) {
+    called[tool] = false;
+  }
+
+  toolbox.once("inspector-selected", function() {
+    tidyUpIfAllCalled("inspector");
+  });
+
+  toolbox.once("webconsole-selected", function() {
+    tidyUpIfAllCalled("webconsole");
+  });
+
+  /*
+  toolbox.once("jsdebugger-selected", function() {
+    tidyUpIfAllCalled("jsdebugger");
+  });
+  */
+
+  toolbox.once("styleeditor-selected", function() {
+    tidyUpIfAllCalled("styleeditor");
+  });
+
+  toolbox.selectTool("inspector");
+  toolbox.selectTool("webconsole");
+  toolbox.selectTool("styleeditor");
+  //toolbox.selectTool("jsdebugger");
+}
+
+function tidyUpIfAllCalled(id) {
+  called[id] = true;
+  info("select event from " + id);
+
+  for (let tool in called) {
+    if (!called[tool]) {
+      return;
+    }
+  }
+
+  ok(true, "All the tools fired a {id}-selected event");
+  tidyUp();
+}
+
+function tidyUp() {
+  toolbox.destroy();
+  gBrowser.removeCurrentTab();
+
+  toolbox = null;
+  finish();
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_sidebar.js b/browser/devtools/framework/test/browser_toolbox_sidebar.js
new file mode 100644
index 00000000000..b7c17b04f1c
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_sidebar.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+  const Cu = Components.utils;
+  let tempScope = {};
+  Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+  Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+  Cu.import("resource:///modules/devtools/Sidebar.jsm", tempScope);
+  let {TargetFactory: TargetFactory, gDevTools: gDevTools, ToolSidebar: ToolSidebar} = tempScope;
+
+  const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
+                  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
+                  "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
+                  "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
+                  "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
+                  "</hbox>" +
+                  "</window>";
+
+  const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
+  const tab2URL = "data:text/html;charset=utf8,<title>2</title><p>2</p>";
+  const tab3URL = "data:text/html;charset=utf8,<title>3</title><p>3</p>";
+
+  let panelDoc;
+
+  let registeredTabs = {};
+  let readyTabs = {};
+
+  let toolDefinition = {
+    id: "fakeTool4242",
+    killswitch: "devtools.fakeTool4242.enabled",
+    url: toolURL,
+    label: "FAKE TOOL!!!",
+    isTargetSupported: function() true,
+    build: function(iframeWindow, toolbox) {
+      let panel = {
+        target: toolbox.target,
+        toolbox: toolbox,
+        isReady: true,
+        destroy: function(){},
+        panelDoc: iframeWindow.document,
+      }
+      return panel;
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  addTab("about:blank", function(aBrowser, aTab) {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolbox(target, "bottom", "fakeTool4242");
+    toolbox.once("fakeTool4242-ready", function(event, panel) {
+      ok(true, "Tool open");
+
+      let tabbox = panel.panelDoc.getElementById("sidebar");
+      panel.sidebar = new ToolSidebar(tabbox, panel, true);
+
+      panel.sidebar.on("new-tab-registered", function(event, id) {
+        registeredTabs[id] = true;
+      });
+
+      panel.sidebar.once("tab1-ready", function(event) {
+        readyTabs.tab1 = true;
+        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
+          allTabsReady(panel);
+        }
+      });
+
+      panel.sidebar.once("tab2-ready", function(event) {
+        readyTabs.tab2 = true;
+        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
+          allTabsReady(panel);
+        }
+      });
+
+      panel.sidebar.once("tab3-ready", function(event) {
+        readyTabs.tab3 = true;
+        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
+          allTabsReady(panel);
+        }
+      });
+
+      panel.sidebar.addTab("tab1", tab1URL, true);
+      panel.sidebar.addTab("tab2", tab2URL);
+      panel.sidebar.addTab("tab3", tab3URL);
+
+      panel.sidebar.show();
+    });
+  });
+
+  function allTabsReady(panel) {
+    ok(registeredTabs.tab1, "tab1 registered");
+    ok(registeredTabs.tab2, "tab2 registered");
+    ok(registeredTabs.tab3, "tab3 registered");
+    ok(readyTabs.tab1, "tab1 ready");
+    ok(readyTabs.tab2, "tab2 ready");
+    ok(readyTabs.tab3, "tab3 ready");
+
+    let tabs = panel.sidebar._tabbox.querySelectorAll("tab");
+    let panels = panel.sidebar._tabbox.querySelectorAll("tabpanel");
+    let label = 1;
+    for (let tab of tabs) {
+      is(tab.getAttribute("label"), label++, "Tab has the right title");
+    }
+    is(label, 4, "Found the right amount of tabs.");
+    is(panel.sidebar._tabbox.selectedPanel, panels[0], "First tab is selected");
+    ok(panel.sidebar.getCurrentTabID(), "tab1", "getCurrentTabID() is correct");
+
+    panel.sidebar.once("tab1-unselected", function() {
+      ok(true, "received 'unselected' event");
+      panel.sidebar.once("tab2-selected", function() {
+        ok(true, "received 'selected' event");
+        panel.sidebar.hide();
+        is(panel.sidebar._tabbox.getAttribute("hidden"), "true", "Sidebar hidden");
+        is(panel.sidebar.getWindowForTab("tab1").location.href, tab1URL, "Window is accessible");
+        finishUp(panel);
+      });
+    });
+
+    panel.sidebar.select("tab2");
+  }
+
+  function finishUp(panel) {
+    panel.sidebar.destroy();
+    gDevTools.unregisterTool(toolDefinition.id);
+
+    executeSoon(function() {
+      gBrowser.removeCurrentTab();
+      finish();
+    });
+  }
+}
diff --git a/browser/devtools/framework/test/browser_toolbox_tool_ready.js b/browser/devtools/framework/test/browser_toolbox_tool_ready.js
new file mode 100644
index 00000000000..98a537f03ca
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_tool_ready.js
@@ -0,0 +1,72 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let temp = [];
+Cu.import("resource:///modules/devtools/Target.jsm", temp);
+let TargetFactory = temp.TargetFactory;
+
+function test() {
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    openAllTools();
+  }, true);
+
+  function openAllTools() {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+    let tools = gDevTools.getToolDefinitions();
+    let expectedCallbacksCount = tools.size;
+
+    let firstTool = null;
+    // we transform the map to a [id, eventHasBeenFiredYet] map
+    for (let [id] of tools) {
+      if (!firstTool)
+        firstTool = id;
+      tools.set(id, false);
+    }
+
+    let toolbox = gDevTools.openToolbox(target, undefined, firstTool);
+
+    // We add the event listeners
+    for (let [toolId] of tools) {
+      let id = toolId;
+      info("Registering listener for " + id);
+      tools.set(id, false);
+      toolbox.on(id + "-ready", function(event, panel) {
+        expectedCallbacksCount--;
+        info("Got event "  + event);
+        is(toolbox.getToolPanels().get(id), panel, "Got the right tool panel for " + id);
+        tools.set(id, true);
+        if (expectedCallbacksCount == 0) {
+          // "executeSoon" because we want to let a chance
+          // to falsy code to fire unexpected ready events.
+          executeSoon(theEnd);
+        }
+        if (expectedCallbacksCount < 0) {
+          ok(false, "we are receiving too many events");
+        }
+      });
+    }
+
+    toolbox.once("ready", function() {
+      // We open all the 
+      for (let [id] of tools) {
+        if (id != firstTool) {
+          toolbox.selectTool(id);
+        }
+      }
+    });
+
+    function theEnd() {
+      for (let [id, called] of tools) {
+        ok(called, "Tool " + id + " has fired its ready event");
+      }
+      toolbox.destroy();
+      gBrowser.removeCurrentTab();
+      finish();
+    }
+  }
+}
diff --git a/browser/devtools/framework/test/head.js b/browser/devtools/framework/test/head.js
new file mode 100644
index 00000000000..796a7946c2d
--- /dev/null
+++ b/browser/devtools/framework/test/head.js
@@ -0,0 +1,36 @@
+/* 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/. */
+
+let tempScope = {};
+Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+Components.utils.import("resource:///modules/devtools/Console.jsm", tempScope);
+let console = tempScope.console;
+
+/**
+ * Open a new tab at a URL and call a callback on load
+ */
+function addTab(aURL, aCallback)
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  content.location = aURL;
+
+  let tab = gBrowser.selectedTab;
+  let browser = gBrowser.getBrowserForTab(tab);
+
+  function onTabLoad() {
+    browser.removeEventListener("load", onTabLoad, true);
+    aCallback(browser, tab, browser.contentDocument);
+  }
+
+  browser.addEventListener("load", onTabLoad, true);
+}
+
+registerCleanupFunction(function tearDown() {
+  while (gBrowser.tabs.length > 1) {
+    gBrowser.removeCurrentTab();
+  }
+});
diff --git a/browser/devtools/framework/toolbox-window.xul b/browser/devtools/framework/toolbox-window.xul
new file mode 100644
index 00000000000..774747b531d
--- /dev/null
+++ b/browser/devtools/framework/toolbox-window.xul
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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 window [
+<!ENTITY % toolboxDTD SYSTEM "chrome://browser/locale/devtools/toolbox.dtd" >
+ %toolboxDTD;
+]>
+
+<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        id="devtools-toolbox-window"
+        title="&window.title;"
+        macanimationtype="document"
+        fullscreenbutton="true"
+        windowtype="devtools:toolbox"
+        width="700" height="320"
+        persist="screenX screenY width height sizemode">
+
+  <commandset id="toolbox-commandset">
+    <command id="toolbox-cmd-close" oncommand="window.close();"/>
+  </commandset>
+
+  <keyset id="toolbox-keyset">
+    <key id="toolbox-key-close"
+         key="&closeCmd.key;"
+         command="toolbox-cmd-close"
+         modifiers="accel"/>
+  </keyset>
+
+  <iframe id="toolbox-iframe" flex="1"></iframe>
+</window>
diff --git a/browser/devtools/framework/toolbox.css b/browser/devtools/framework/toolbox.css
new file mode 100644
index 00000000000..57f18006c23
--- /dev/null
+++ b/browser/devtools/framework/toolbox.css
@@ -0,0 +1,10 @@
+/* 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/. */
+
+.devtools-tab > .radio-check,
+.devtools-tab > .radio-check-box1,
+.devtools-tab > .radio-spacer-box {
+  display: none;
+}
+
diff --git a/browser/devtools/framework/toolbox.xul b/browser/devtools/framework/toolbox.xul
new file mode 100644
index 00000000000..744278c12d3
--- /dev/null
+++ b/browser/devtools/framework/toolbox.xul
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/shared/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
+<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
+<?xul-overlay href="chrome://browser/content/source-editor-overlay.xul"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <notificationbox id="toolbox-notificationbox" flex="1">
+    <toolbar class="devtools-tabbar">
+      <hbox id="toolbox-controls">
+        <toolbarbutton id="toolbox-close" class="devtools-closebutton"></toolbarbutton>
+        <hbox id="toolbox-dock-buttons"/>
+      </hbox>
+      <radiogroup id="toolbox-tabs" orient="horizontal">
+      </radiogroup>
+      <hbox id="toolbox-buttons" flex="1" pack="end"/>
+    </toolbar>
+    <deck id="toolbox-deck" flex="1">
+    </deck>
+  </notificationbox>
+</window>
diff --git a/browser/devtools/highlighter/CmdInspect.jsm b/browser/devtools/highlighter/CmdInspect.jsm
deleted file mode 100644
index c352c96cb28..00000000000
--- a/browser/devtools/highlighter/CmdInspect.jsm
+++ /dev/null
@@ -1,29 +0,0 @@
-/* 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/. */
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-this.EXPORTED_SYMBOLS = [ ];
-
-Cu.import("resource:///modules/devtools/gcli.jsm");
-
-/**
- * 'inspect' command
- */
-gcli.addCommand({
-  name: "inspect",
-  description: gcli.lookup("inspectDesc"),
-  manual: gcli.lookup("inspectManual"),
-  params: [
-    {
-      name: "selector",
-      type: "node",
-      description: gcli.lookup("inspectNodeDesc"),
-      manual: gcli.lookup("inspectNodeManual")
-    }
-  ],
-  exec: function Command_inspect(args, context) {
-    let document = context.environment.chromeDocument;
-    document.defaultView.InspectorUI.openInspectorUI(args.selector);
-  }
-});
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
deleted file mode 100644
index 2ffbaf77cec..00000000000
--- a/browser/devtools/highlighter/inspector.jsm
+++ /dev/null
@@ -1,2414 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-const Cr = Components.results;
-
-this.EXPORTED_SYMBOLS = ["InspectorUI"];
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/MarkupView.jsm");
-Cu.import("resource:///modules/highlighter.jsm");
-Cu.import("resource:///modules/devtools/LayoutView.jsm");
-Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
-
-// Inspector notifications dispatched through the nsIObserverService.
-const INSPECTOR_NOTIFICATIONS = {
-  // Fires once the Inspector completes the initialization and opens up on
-  // screen.
-  OPENED: "inspector-opened",
-
-  // Fires once the Inspector is closed.
-  CLOSED: "inspector-closed",
-
-  // Fires once the Inspector is destroyed. Not fired on tab switch.
-  DESTROYED: "inspector-destroyed",
-
-  // Fires when the Inspector is reopened after tab-switch.
-  STATE_RESTORED: "inspector-state-restored",
-
-  // Fires when the Tree Panel is opened and initialized.
-  TREEPANELREADY: "inspector-treepanel-ready",
-
-  // Event notifications for the attribute-value editor
-  EDITOR_OPENED: "inspector-editor-opened",
-  EDITOR_CLOSED: "inspector-editor-closed",
-  EDITOR_SAVED: "inspector-editor-saved",
-};
-
-const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
-
-// Timer, in milliseconds, between change events fired by
-// things like resize events.
-const LAYOUT_CHANGE_TIMER = 250;
-
-/**
- * Represents an open instance of the Inspector for a tab.
- * This is the object handed out to sidebars and other API consumers.
- *
- * Right now it's a thin layer over InspectorUI, but we will
- * start moving per-tab state into this object soon, eventually
- * replacing the per-winID InspectorStore objects.
- *
- * The lifetime of this object is also not yet correct.  This object
- * is currently destroyed when the inspector is torn down, either by user
- * closing the inspector or by user switching the tab.  This should
- * only be destroyed when user closes the inspector.
- */
-function Inspector(aIUI)
-{
-  this._IUI = aIUI;
-  this._winID = aIUI.winID;
-  this._browser = aIUI.browser;
-  this._eventEmitter = new EventEmitter();
-
-  this._browser.addEventListener("resize", this, true);
-
-  this._markupButton = this._IUI.chromeDoc.getElementById("inspector-treepanel-toolbutton");
-
-  if (Services.prefs.getBoolPref("devtools.inspector.htmlPanelOpen")) {
-    this.openMarkup();
-  } else {
-    this.closeMarkup();
-  }
-
-}
-
-Inspector.prototype = {
-  /**
-   * True if the highlighter is locked on a node.
-   */
-  get locked() {
-    return !this._IUI.inspecting;
-  },
-
-  /**
-   * The currently selected node in the highlighter.
-   */
-  get selection() {
-    return this._IUI.selection;
-  },
-
-  /**
-   * Indicate that a tool has modified the state of the page.  Used to
-   * decide whether to show the "are you sure you want to navigate"
-   * notification.
-   */
-  markDirty: function Inspector_markDirty()
-  {
-    this._IUI.isDirty = true;
-  },
-
-  /**
-   * The chrome window the inspector lives in.
-   */
-  get chromeWindow() {
-    return this._IUI.chromeWin;
-  },
-
-  /**
-   * Notify the inspector that the current selection has changed.
-   *
-   * @param string aContext
-   *        An string that will be passed to the change event.  Allows
-   *        a tool to recognize when it sent a change notification itself
-   *        to avoid unnecessary refresh.
-   */
-  change: function Inspector_change(aContext)
-  {
-    this._cancelLayoutChange();
-    this._IUI.nodeChanged(aContext);
-  },
-
-  /**
-   * Returns true if a given sidebar panel is currently visible.
-   * @param string aPanelName
-   *        The panel name as registered with registerSidebar
-   */
-  isPanelVisible: function Inspector_isPanelVisible(aPanelName)
-  {
-    return this._IUI.sidebar.visible &&
-           this._IUI.sidebar.activePanel === aPanelName;
-  },
-
-  /**
-   * Called by the InspectorUI when the inspector is being destroyed.
-   */
-  _destroy: function Inspector__destroy()
-  {
-    this._cancelLayoutChange();
-    this._destroyMarkup();
-    this._browser.removeEventListener("resize", this, true);
-    delete this._IUI;
-    delete this._eventEmitter;
-  },
-
-  /**
-   * Event handler for DOM events.
-   *
-   * @param DOMEvent aEvent
-   */
-  handleEvent: function Inspector_handleEvent(aEvent)
-  {
-    switch(aEvent.type) {
-      case "resize":
-        this._scheduleLayoutChange();
-    }
-  },
-
-  /**
-   * Schedule a low-priority change event for things like paint
-   * and resize.
-   */
-  _scheduleLayoutChange: function Inspector_scheduleLayoutChange()
-  {
-    if (this._timer) {
-      return null;
-    }
-    this._timer = this._IUI.win.setTimeout(function() {
-      this.change("layout");
-    }.bind(this), LAYOUT_CHANGE_TIMER);
-  },
-
-  /**
-   * Cancel a pending low-priority change event if any is
-   * scheduled.
-   */
-  _cancelLayoutChange: function Inspector_cancelLayoutChange()
-  {
-    if (this._timer) {
-      this._IUI.win.clearTimeout(this._timer);
-      delete this._timer;
-    }
-  },
-
-  toggleMarkup: function Inspector_toggleMarkup()
-  {
-    if (this._markupFrame) {
-      this.closeMarkup();
-      Services.prefs.setBoolPref("devtools.inspector.htmlPanelOpen", false);
-    } else {
-      this.openMarkup(true);
-      Services.prefs.setBoolPref("devtools.inspector.htmlPanelOpen", true);
-    }
-  },
-
-  /**
-   * XXX: The sidebar has an object that exists and is manipulated
-   * separately from its actual loading.  So the public api for
-   * the sidebar looks like:
-   *
-   * if (inspector.sidebar.visible) { inspector.sidebar.close() }
-   *
-   * whereas the markup API looks more like
-   *
-   * if (inspector.markupOpen) { inspector.closeMarkup() }
-   *
-   * Maybe we should add an InspectorMarkup object that presents
-   * the public api for the markup panel?
-   */
-  get markupOpen() {
-    return this._markupOpen;
-  },
-
-  openMarkup: function Inspector_openMarkup(aFocus)
-  {
-    this._markupButton.setAttribute("checked", "true");
-    this._markupOpen = true;
-    if (!this._markupFrame) {
-      this._initMarkup(aFocus);
-    }
-  },
-
-  closeMarkup: function Inspector_closeMarkup()
-  {
-    this._markupButton.removeAttribute("checked");
-    this._markupOpen = false;
-    this._destroyMarkup();
-  },
-
-  _initMarkup: function Inspector_initMarkupPane(aFocus)
-  {
-    let doc = this._IUI.chromeDoc;
-
-    this._markupBox = doc.createElement("vbox");
-    try {
-      this._markupBox.height =
-        Services.prefs.getIntPref("devtools.inspector.htmlHeight");
-    } catch(e) {
-      this._markupBox.height = 112;
-    }
-    this._markupBox.minHeight = 64;
-
-    this._markupSplitter = doc.createElement("splitter");
-    this._markupSplitter.className = "devtools-horizontal-splitter";
-
-    let container = doc.getElementById("appcontent");
-    container.appendChild(this._markupSplitter);
-    container.appendChild(this._markupBox);
-
-    // create tool iframe
-    this._markupFrame = doc.createElement("iframe");
-    this._markupFrame.setAttribute("flex", "1");
-    this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
-    this._markupFrame.setAttribute("context", "inspector-node-popup");
-
-    // This is needed to enable tooltips inside the iframe document.
-    this._boundMarkupFrameLoad = function Inspector_initMarkupPanel_onload() {
-      if (aFocus) {
-        this._markupFrame.contentWindow.focus();
-      }
-      this._onMarkupFrameLoad();
-    }.bind(this);
-    this._markupFrame.addEventListener("load", this._boundMarkupFrameLoad, true);
-
-    this._markupSplitter.setAttribute("hidden", true);
-    this._markupBox.setAttribute("hidden", true);
-    this._markupBox.appendChild(this._markupFrame);
-    this._markupFrame.setAttribute("src", "chrome://browser/content/devtools/markup-view.xhtml");
-  },
-
-  _onMarkupFrameLoad: function Inspector__onMarkupFrameLoad()
-  {
-    this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
-    delete this._boundMarkupFrameLoad;
-
-    this._markupSplitter.removeAttribute("hidden");
-    this._markupBox.removeAttribute("hidden");
-
-    this.markup = new MarkupView(this, this._markupFrame);
-    this.emit("markuploaded");
-  },
-
-  _destroyMarkup: function Inspector__destroyMarkup()
-  {
-    if (this._boundMarkupFrameLoad) {
-      this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
-      delete this._boundMarkupFrameLoad;
-    }
-
-    if (this.markup) {
-      this.markup.destroy();
-      delete this.markup;
-    }
-
-    if (this._markupFrame) {
-      delete this._markupFrame;
-    }
-
-    if (this._markupBox) {
-      Services.prefs.setIntPref("devtools.inspector.htmlHeight", this._markupBox.height);
-      this._markupBox.parentNode.removeChild(this._markupBox);
-      delete this._markupBox;
-    }
-
-    if (this._markupSplitter) {
-      this._markupSplitter.parentNode.removeChild(this._markupSplitter);
-      delete this._markupSplitter;
-    }
-  },
-
-  /**
-   * Called by InspectorUI after a tab switch, when the
-   * inspector is no longer the active tab.
-   */
-  _freeze: function Inspector__freeze()
-  {
-    if (this._markupBox) {
-      this._markupSplitter.setAttribute("hidden", true);
-      this._markupBox.setAttribute("hidden", true);
-    }
-    this._cancelLayoutChange();
-    this._browser.removeEventListener("resize", this, true);
-    this._frozen = true;
-  },
-
-  /**
-   * Called by InspectorUI after a tab switch when the
-   * inspector is back to being the active tab.
-   */
-  _thaw: function Inspector__thaw()
-  {
-    if (!this._frozen) {
-      return;
-    }
-
-    if (this._markupOpen && !this._boundMarkupFrameLoad) {
-      this._markupSplitter.removeAttribute("hidden");
-      this._markupBox.removeAttribute("hidden");
-    }
-    this._browser.addEventListener("resize", this, true);
-    delete this._frozen;
-  },
-
-  /// Forward the events related calls to the event emitter.
-
-  /**
-   * Connect a listener to this object.
-   *
-   * @param string aEvent
-   *        The event name to which we're connecting.
-   * @param function aListener
-   *        Called when the event is fired.
-   */
-  on: function Inspector_on(aEvent, aListener)
-  {
-    this._eventEmitter.on(aEvent, aListener);
-  },
-
-  /**
-   * Listen for the next time an event is fired.
-   *
-   * @param string aEvent
-   *        The event name to which we're connecting.
-   * @param function aListener
-   *        Called when the event is fired.  Will be called at most one time.
-   */
-  once: function Inspector_once(aEvent, aListener)
-  {
-    this._eventEmitter.once(aEvent, aListener);
-  },
-
-  /**
-   * Remove a previously-registered event listener.  Works for events
-   * registered with either on or once.
-   *
-   * @param string aEvent
-   *        The event name whose listener we're disconnecting.
-   * @param function aListener
-   *        The listener to remove.
-   */
-  off: function Inspector_removeListener(aEvent, aListener)
-  {
-    this._eventEmitter.off(aEvent, aListener);
-  },
-
-  /**
-   * Emit an event on the inspector.  All arguments to this method will
-   * be sent to listner functions.
-   */
-  emit: function Inspector_emit()
-  {
-    this._eventEmitter.emit.apply(this._eventEmitter, arguments);
-  }
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// InspectorUI
-
-/**
- * Main controller class for the Inspector.
- *
- * @constructor
- * @param nsIDOMWindow aWindow
- *        The chrome window for which the Inspector instance is created.
- */
-this.InspectorUI = function InspectorUI(aWindow)
-{
-  // Let style inspector tools register themselves.
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/StyleInspector.jsm", tmp);
-
-  this.chromeWin = aWindow;
-  this.chromeDoc = aWindow.document;
-  this.tabbrowser = aWindow.gBrowser;
-  this.tools = {};
-  this.toolEvents = {};
-  this.store = new InspectorStore();
-  this.INSPECTOR_NOTIFICATIONS = INSPECTOR_NOTIFICATIONS;
-  this.buildButtonsTooltip();
-}
-
-InspectorUI.prototype = {
-  browser: null,
-  tools: null,
-  toolEvents: null,
-  inspecting: false,
-  ruleViewEnabled: true,
-  isDirty: false,
-  store: null,
-
-  _currentInspector: null,
-  _sidebar: null,
-
-  /**
-   * The Inspector object for the current tab.
-   */
-  get currentInspector() this._currentInspector,
-
-  /**
-   * The InspectorStyleSidebar for the current tab.
-   */
-  get sidebar() this._sidebar,
-
-  /**
-   * Toggle the inspector interface elements on or off.
-   *
-   * @param aEvent
-   *        The event that requested the UI change. Toolbar button or menu.
-   */
-  toggleInspectorUI: function IUI_toggleInspectorUI(aEvent)
-  {
-    if (this.isInspectorOpen) {
-      this.closeInspectorUI();
-    } else {
-      this.openInspectorUI();
-    }
-  },
-
-  /**
-   * Add a tooltip to the Inspect and Markup buttons.
-   * The tooltips include the related keyboard shortcut.
-   */
-  buildButtonsTooltip: function IUI_buildButtonsTooltip()
-  {
-    let keysbundle = Services.strings.createBundle("chrome://global-platform/locale/platformKeys.properties");
-    let separator = keysbundle.GetStringFromName("MODIFIER_SEPARATOR");
-
-    let button, tooltip;
-
-    // Inspect Button - the shortcut string is built from the <key> element
-
-    let key = this.chromeDoc.getElementById("key_inspect");
-
-    if (key) {
-      let modifiersAttr = key.getAttribute("modifiers");
-
-      let combo = [];
-
-      if (modifiersAttr.match("accel"))
-#ifdef XP_MACOSX
-        combo.push(keysbundle.GetStringFromName("VK_META"));
-#else
-        combo.push(keysbundle.GetStringFromName("VK_CONTROL"));
-#endif
-      if (modifiersAttr.match("shift"))
-        combo.push(keysbundle.GetStringFromName("VK_SHIFT"));
-      if (modifiersAttr.match("alt"))
-        combo.push(keysbundle.GetStringFromName("VK_ALT"));
-      if (modifiersAttr.match("ctrl"))
-        combo.push(keysbundle.GetStringFromName("VK_CONTROL"));
-      if (modifiersAttr.match("meta"))
-        combo.push(keysbundle.GetStringFromName("VK_META"));
-
-      combo.push(key.getAttribute("key"));
-
-      tooltip = this.strings.formatStringFromName("inspectButtonWithShortcutKey.tooltip",
-        [combo.join(separator)], 1);
-    } else {
-      tooltip = this.strings.GetStringFromName("inspectButton.tooltip");
-    }
-
-    button = this.chromeDoc.getElementById("inspector-inspect-toolbutton");
-    button.setAttribute("tooltiptext", tooltip);
-
-    // Markup Button - the shortcut string is built from the accesskey attribute
-
-    button = this.chromeDoc.getElementById("inspector-treepanel-toolbutton");
-#ifdef XP_MACOSX
-    // On Mac, no accesskey
-    tooltip = this.strings.GetStringFromName("markupButton.tooltip");
-#else
-    let altString = keysbundle.GetStringFromName("VK_ALT");
-    let accesskey = button.getAttribute("accesskey");
-    let shortcut = altString + separator + accesskey;
-    tooltip = this.strings.formatStringFromName("markupButton.tooltipWithAccesskey",
-      [shortcut], 1);
-#endif
-    button.setAttribute("tooltiptext", tooltip);
-
-  },
-
-  /**
-   * Toggle the status of the inspector, starting or stopping it. Invoked
-   * from the toolbar's Inspect button.
-   */
-  toggleInspection: function IUI_toggleInspection()
-  {
-    if (!this.isInspectorOpen) {
-      this.openInspectorUI();
-      return;
-    }
-
-    if (this.inspecting) {
-      this.stopInspecting();
-    } else {
-      this.startInspecting();
-    }
-  },
-
-  /**
-   * Show or hide the sidebar. Called from the Styling button on the
-   * highlighter toolbar.
-   */
-  toggleSidebar: function IUI_toggleSidebar()
-  {
-    if (!this.sidebar.visible) {
-      this.sidebar.show();
-    } else {
-      this.sidebar.hide();
-    }
-  },
-
-  /**
-   * Toggle the TreePanel.
-   */
-  toggleHTMLPanel: function IUI_toggleHTMLPanel()
-  {
-    this.currentInspector.toggleMarkup();
-  },
-
-  /**
-   * Is the inspector UI open? Simply check if the toolbar is visible or not.
-   *
-   * @returns boolean
-   */
-  get isInspectorOpen()
-  {
-    return !!(this.toolbar && !this.toolbar.hidden && this.highlighter);
-  },
-
-  /**
-   * Return the default selection element for the inspected document.
-   */
-  get defaultSelection()
-  {
-    let doc = this.win.document;
-    return doc.documentElement ? doc.documentElement.lastElementChild : null;
-  },
-
-  /**
-   * Open inspector UI and HTML tree. Add listeners for document scrolling,
-   * resize, tabContainer.TabSelect and others. If a node is provided, then
-   * start inspecting it.
-   *
-   * @param [optional] aNode
-   *        The node to inspect.
-   */
-  openInspectorUI: function IUI_openInspectorUI(aNode)
-  {
-    // InspectorUI is already up and running. Lock a node if asked (via context).
-    if (this.isInspectorOpen) {
-      if (aNode) {
-        this.inspectNode(aNode);
-        this.stopInspecting();
-      }
-      return;
-    }
-
-    // Observer used to inspect the specified element from content after the
-    // inspector UI has been opened (via the content context menu).
-    function inspectObserver(aElement) {
-      Services.obs.removeObserver(boundInspectObserver,
-                                  INSPECTOR_NOTIFICATIONS.OPENED,
-                                  false);
-      this.inspectNode(aElement);
-      this.stopInspecting();
-    };
-
-    var boundInspectObserver = inspectObserver.bind(this, aNode);
-
-    if (aNode) {
-      // Add the observer to inspect the node after initialization finishes.
-      Services.obs.addObserver(boundInspectObserver,
-                               INSPECTOR_NOTIFICATIONS.OPENED,
-                               false);
-    }
-    // Start initialization.
-    this.browser = this.tabbrowser.selectedBrowser;
-    this.win = this.browser.contentWindow;
-    this.winID = this.getWindowID(this.win);
-    this.toolbar = this.chromeDoc.getElementById("inspector-toolbar");
-    this.inspectCommand = this.chromeDoc.getElementById("Inspector:Inspect");
-
-    // Update menus:
-    this.inspectorUICommand = this.chromeDoc.getElementById("Tools:Inspect");
-    this.inspectorUICommand.setAttribute("checked", "true");
-
-    this.chromeWin.Tilt.setup();
-
-    this.toolbar.hidden = false;
-
-    // initialize the HTML Breadcrumbs
-    this.breadcrumbs = new HTMLBreadcrumbs(this);
-
-    this.isDirty = false;
-
-    this.progressListener = new InspectorProgressListener(this);
-
-    this.chromeWin.addEventListener("keypress", this, false);
-
-    // initialize the highlighter
-    this.highlighter = new Highlighter(this.chromeWin);
-
-    this.initializeStore();
-
-    this._sidebar = new InspectorStyleSidebar({
-      document: this.chromeDoc,
-      inspector: this._currentInspector,
-    });
-
-    // Fade out the highlighter when needed
-    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
-    deck.addEventListener("mouseenter", this, true);
-    deck.addEventListener("mouseleave", this, true);
-
-    // Create UI for any sidebars registered with
-    // InspectorUI.registerSidebar()
-    for each (let tool in InspectorUI._registeredSidebars) {
-      this._sidebar.addTool(tool);
-    }
-
-    this.setupNavigationKeys();
-    this.highlighterReady();
-
-    // Focus the first focusable element in the toolbar
-    this.chromeDoc.commandDispatcher.advanceFocusIntoSubtree(this.toolbar);
-
-    // If nothing is focused in the toolbar, it means that the focus manager
-    // is limited to some specific elements and has moved the focus somewhere else.
-    // So in this case, we want to focus the content window.
-    // See: https://developer.mozilla.org/en/XUL_Tutorial/Focus_and_Selection#Platform_Specific_Behaviors
-    if (!this.toolbar.querySelector(":-moz-focusring")) {
-      this.win.focus();
-    }
-
-  },
-
-  /**
-   * Initialize the InspectorStore.
-   */
-  initializeStore: function IUI_initializeStore()
-  {
-    // First time opened, add the TabSelect listener
-    if (this.store.isEmpty()) {
-      this.tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
-    }
-
-    // Has this windowID been inspected before?
-    if (this.store.hasID(this.winID)) {
-      this._currentInspector = this.store.getInspector(this.winID);
-      this._currentInspector._thaw();
-      let selectedNode = this.currentInspector._selectedNode;
-      if (selectedNode) {
-        this.inspectNode(selectedNode);
-      }
-      this.isDirty = this.currentInspector._isDirty;
-    } else {
-      // First time inspecting, set state to no selection + live inspection.
-      let inspector = new Inspector(this);
-      this.store.addInspector(this.winID, inspector);
-      inspector._selectedNode = null;
-      inspector._inspecting = true;
-      inspector._isDirty = this.isDirty;
-
-      inspector._htmlPanelOpen =
-        Services.prefs.getBoolPref("devtools.inspector.htmlPanelOpen");
-
-      inspector._sidebarOpen =
-        Services.prefs.getBoolPref("devtools.inspector.sidebarOpen");
-
-      inspector._activeSidebar =
-        Services.prefs.getCharPref("devtools.inspector.activeSidebar");
-
-      this.win.addEventListener("pagehide", this, true);
-
-      this._currentInspector = inspector;
-    }
-  },
-
-  /**
-   * Browse nodes according to the breadcrumbs layout, only for some specific
-   * elements of the UI.
-   */
-   setupNavigationKeys: function IUI_setupNavigationKeys()
-   {
-     // UI elements that are arrow keys sensitive:
-     // - the Inspector toolbar.
-
-     this.onKeypress = this.onKeypress.bind(this);
-
-     this.toolbar.addEventListener("keypress", this.onKeypress, true);
-   },
-
-  /**
-   * Remove the event listeners for the arrowkeys.
-   */
-   removeNavigationKeys: function IUI_removeNavigationKeys()
-   {
-      this.toolbar.removeEventListener("keypress", this.onKeypress, true);
-   },
-
-  /**
-   * Close inspector UI and associated panels. Unhighlight and stop inspecting.
-   * Remove event listeners for document scrolling, resize,
-   * tabContainer.TabSelect and others.
-   *
-   * @param boolean aKeepInspector
-   *        Tells if you want the inspector associated to the current tab/window to
-   *        be cleared or not. Set this to true to save the inspector, or false
-   *        to destroy it.
-   */
-  closeInspectorUI: function IUI_closeInspectorUI(aKeepInspector)
-  {
-    if (this.closing || !this.win || !this.browser) {
-      return;
-    }
-
-    let winId = new String(this.winID); // retain this to notify observers.
-
-    this.closing = true;
-    this.toolbar.hidden = true;
-
-    this.removeNavigationKeys();
-
-    this.progressListener.destroy();
-    delete this.progressListener;
-
-    if (!aKeepInspector) {
-      this.win.removeEventListener("pagehide", this, true);
-      this.clearPseudoClassLocks();
-    } else {
-      // Update the inspector before closing.
-      if (this.selection) {
-        this.currentInspector._selectedNode = this.selection;
-      }
-      this.currentInspector._inspecting = this.inspecting;
-      this.currentInspector._isDirty = this.isDirty;
-    }
-
-    if (this.store.isEmpty()) {
-      this.tabbrowser.tabContainer.removeEventListener("TabSelect", this, false);
-    }
-
-    this.chromeWin.removeEventListener("keypress", this, false);
-
-    this.stopInspecting();
-
-    // close the sidebar
-    if (this._sidebar) {
-      this._sidebar.destroy();
-      this._sidebar = null;
-    }
-
-    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
-    deck.removeEventListener("mouseenter", this, true);
-    deck.removeEventListener("mouseleave", this, true);
-
-    this.highlighter.destroy();
-    this.highlighter = null;
-
-    if (this.breadcrumbs) {
-      this.breadcrumbs.destroy();
-      this.breadcrumbs = null;
-    }
-
-    if (aKeepInspector) {
-      this._currentInspector._freeze();
-    } else {
-      this.store.deleteInspector(this.winID);
-    }
-    delete this._currentInspector;
-
-    this.inspectorUICommand.setAttribute("checked", "false");
-
-    this.browser = this.win = null; // null out references to browser and window
-    this.winID = null;
-    this.selection = null;
-    this.closing = false;
-    this.isDirty = false;
-
-    delete this.stylePanel;
-    delete this.inspectorUICommand;
-    delete this.inspectCommand;
-    delete this.toolbar;
-
-    Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.CLOSED, null);
-
-    if (!aKeepInspector)
-      Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.DESTROYED, winId);
-  },
-
-  /**
-   * Begin inspecting webpage, attach page event listeners, activate
-   * highlighter event listeners.
-   */
-  startInspecting: function IUI_startInspecting()
-  {
-    this.inspectCommand.setAttribute("checked", "true");
-
-    this.inspecting = true;
-    this.highlighter.unlock();
-    this._notifySelected();
-    this._currentInspector.emit("unlocked");
-  },
-
-  _notifySelected: function IUI__notifySelected(aFrom)
-  {
-    this._currentInspector._cancelLayoutChange();
-    this._currentInspector.emit("select", aFrom);
-  },
-
-  /**
-   * Stop inspecting webpage, detach page listeners, disable highlighter
-   * event listeners.
-   * @param aPreventScroll
-   *        Prevent scroll in the HTML tree?
-   */
-  stopInspecting: function IUI_stopInspecting(aPreventScroll)
-  {
-    if (!this.inspecting) {
-      return;
-    }
-
-    this.inspectCommand.setAttribute("checked", "false");
-
-    this.inspecting = false;
-
-    if (this.closing)
-      return;
-
-    if (this.highlighter.getNode()) {
-      this.select(this.highlighter.getNode(), true, !aPreventScroll);
-    } else {
-      this.select(null, true, true);
-    }
-
-    this.highlighter.lock();
-    this._notifySelected();
-    this._currentInspector.emit("locked");
-  },
-
-  /**
-   * Select an object in the inspector.
-   * @param aNode
-   *        node to inspect
-   * @param forceUpdate
-   *        force an update?
-   * @param aScroll boolean
-   *        scroll the tree panel?
-   * @param aFrom [optional] string
-   *        which part of the UI the selection occured from
-   */
-  select: function IUI_select(aNode, forceUpdate, aScroll, aFrom)
-  {
-    if (!aNode)
-      aNode = this.defaultSelection;
-
-    if (forceUpdate || aNode != this.selection) {
-      if (aFrom != "breadcrumbs") {
-        this.clearPseudoClassLocks();
-      }
-
-      this.selection = aNode;
-      if (!this.inspecting) {
-        this.highlighter.highlight(this.selection);
-      }
-    }
-
-    this.breadcrumbs.update();
-    this.chromeWin.Tilt.update(aNode);
-
-    this._notifySelected(aFrom);
-  },
-
-  /**
-   * Toggle the pseudo-class lock on the currently inspected element. If the
-   * pseudo-class is :hover or :active, that pseudo-class will also be toggled
-   * on every ancestor of the element, mirroring real :hover and :active
-   * behavior.
-   * 
-   * @param aPseudo the pseudo-class lock to toggle, e.g. ":hover"
-   */
-  togglePseudoClassLock: function IUI_togglePseudoClassLock(aPseudo)
-  {
-    if (DOMUtils.hasPseudoClassLock(this.selection, aPseudo)) {
-      this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
-        DOMUtils.removePseudoClassLock(crumb.node, aPseudo);
-      });
-    } else {
-      let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
-      let node = this.selection;
-      do {
-        DOMUtils.addPseudoClassLock(node, aPseudo);
-        node = node.parentNode;
-      } while (hierarchical && node.parentNode)
-    }
-    this.nodeChanged("pseudoclass");
-  },
-
-  /**
-   * Clear all pseudo-class locks applied to elements in the node hierarchy
-   */
-  clearPseudoClassLocks: function IUI_clearPseudoClassLocks()
-  {
-    this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
-      if (LayoutHelpers.isNodeConnected(crumb.node)) {
-        DOMUtils.clearPseudoClassLocks(crumb.node);
-      }
-    });
-  },
-
-  /**
-   * Called when the highlighted node is changed by a tool.
-   *
-   * @param object aUpdater
-   *        The tool that triggered the update (if any), that tool's
-   *        onChanged will not be called.
-   */
-  nodeChanged: function IUI_nodeChanged(aUpdater)
-  {
-    this.highlighter.updateInfobar();
-    this.highlighter.invalidateSize();
-    this.breadcrumbs.updateSelectors();
-    this._currentInspector.emit("change", aUpdater);
-  },
-
-  /////////////////////////////////////////////////////////////////////////
-  //// Event Handling
-
-  highlighterReady: function IUI_highlighterReady()
-  {
-    let self = this;
-
-    this.highlighter.addListener("locked", function() {
-      self.stopInspecting();
-    });
-
-    this.highlighter.addListener("unlocked", function() {
-      self.startInspecting();
-    });
-
-    this.highlighter.addListener("nodeselected", function() {
-      self.select(self.highlighter.getNode(), false, false);
-    });
-
-    this.highlighter.addListener("pseudoclasstoggled", function(aPseudo) {
-      self.togglePseudoClassLock(aPseudo);
-    });
-
-    if (this.currentInspector._inspecting) {
-      this.startInspecting();
-      this.highlighter.unlock();
-    } else {
-      this.highlighter.lock();
-    }
-
-    Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.STATE_RESTORED, null);
-
-    this.highlighter.highlight();
-
-    if (this.currentInspector._sidebarOpen) {
-      this._sidebar.show();
-    }
-
-    Services.obs.notifyObservers({wrappedJSObject: this},
-                                 INSPECTOR_NOTIFICATIONS.OPENED, null);
-  },
-
-  /**
-   * Main callback handler for events.
-   *
-   * @param event
-   *        The event to be handled.
-   */
-  handleEvent: function IUI_handleEvent(event)
-  {
-    let winID = null;
-    let win = null;
-    let inspectorClosed = false;
-
-    switch (event.type) {
-      case "TabSelect":
-        winID = this.getWindowID(this.tabbrowser.selectedBrowser.contentWindow);
-        if (this.isInspectorOpen && winID != this.winID) {
-          this.closeInspectorUI(true);
-          inspectorClosed = true;
-        }
-
-        if (winID && this.store.hasID(winID)) {
-          if (inspectorClosed && this.closing) {
-            Services.obs.addObserver(function reopenInspectorForTab() {
-              Services.obs.removeObserver(reopenInspectorForTab,
-                INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-              this.openInspectorUI();
-            }.bind(this), INSPECTOR_NOTIFICATIONS.CLOSED, false);
-          } else {
-            this.openInspectorUI();
-          }
-        }
-
-        if (this.store.isEmpty()) {
-          this.tabbrowser.tabContainer.removeEventListener("TabSelect", this,
-                                                         false);
-        }
-        break;
-      case "keypress":
-        switch (event.keyCode) {
-          case this.chromeWin.KeyEvent.DOM_VK_ESCAPE:
-            this.closeInspectorUI(false);
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-      }
-      case "pagehide":
-        win = event.originalTarget.defaultView;
-        // Skip iframes/frames.
-        if (!win || win.frameElement || win.top != win) {
-          break;
-        }
-
-        win.removeEventListener(event.type, this, true);
-
-        winID = this.getWindowID(win);
-        if (winID && winID != this.winID) {
-          this.store.deleteInspector(winID);
-        }
-
-        if (this.store.isEmpty()) {
-          this.tabbrowser.tabContainer.removeEventListener("TabSelect", this,
-                                                         false);
-        }
-        break;
-      case "mouseleave":
-        this.highlighter.show();
-        break;
-      case "mouseenter":
-        this.highlighter.hide();
-        break;
-    }
-  },
-
-  /*
-   * handles "keypress" events.
-  */
-  onKeypress: function IUI_onKeypress(event)
-  {
-    let node = null;
-    let bc = this.breadcrumbs;
-    switch (event.keyCode) {
-      case this.chromeWin.KeyEvent.DOM_VK_LEFT:
-        if (bc.currentIndex != 0)
-          node = bc.nodeHierarchy[bc.currentIndex - 1].node;
-        if (node && this.highlighter.isNodeHighlightable(node))
-          this.highlighter.highlight(node);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case this.chromeWin.KeyEvent.DOM_VK_RIGHT:
-        if (bc.currentIndex < bc.nodeHierarchy.length - 1)
-          node = bc.nodeHierarchy[bc.currentIndex + 1].node;
-        if (node && this.highlighter.isNodeHighlightable(node)) {
-          this.highlighter.highlight(node);
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case this.chromeWin.KeyEvent.DOM_VK_UP:
-        if (this.selection) {
-          // Find a previous sibling that is highlightable.
-          node = this.selection.previousSibling;
-          while (node && !this.highlighter.isNodeHighlightable(node)) {
-            node = node.previousSibling;
-          }
-        }
-        if (node && this.highlighter.isNodeHighlightable(node)) {
-          this.highlighter.highlight(node, true);
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case this.chromeWin.KeyEvent.DOM_VK_DOWN:
-        if (this.selection) {
-          // Find a next sibling that is highlightable.
-          node = this.selection.nextSibling;
-          while (node && !this.highlighter.isNodeHighlightable(node)) {
-            node = node.nextSibling;
-          }
-        }
-        if (node && this.highlighter.isNodeHighlightable(node)) {
-          this.highlighter.highlight(node, true);
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-    }
-  },
-
-  /**
-   * Return the currently-selected node for the purposes of the
-   * context menu.  This is usually the highlighter selection, unless
-   * the markup panel has a selected node that can't be highlighted
-   * (such as a text node).  This will be fixed once the highlighter/inspector
-   * is confortable with non-element nodes being the current selection.
-   * See bug 785180.
-   */
-  _contextSelection: function IUI__contextSelection()
-  {
-    let inspector = this.currentInspector;
-    if (inspector.markup) {
-      return inspector.markup.selected;
-    }
-    return this.selection;
-  },
-
-  /**
-   * Copy the innerHTML of the selected Node to the clipboard. Called via the
-   * Inspector:CopyInner command.
-   */
-  copyInnerHTML: function IUI_copyInnerHTML()
-  {
-    let selection = this._contextSelection();
-    clipboardHelper.copyString(selection.innerHTML, selection.ownerDocument);
-  },
-
-  /**
-   * Copy the outerHTML of the selected Node to the clipboard. Called via the
-   * Inspector:CopyOuter command.
-   */
-  copyOuterHTML: function IUI_copyOuterHTML()
-  {
-    let selection = this._contextSelection();
-    clipboardHelper.copyString(selection.outerHTML, selection.ownerDocument);
-  },
-
-  /**
-   * Delete the selected node. Called via the Inspector:DeleteNode command.
-   */
-  deleteNode: function IUI_deleteNode()
-  {
-    let selection = this._contextSelection();
-
-    let root = selection.ownerDocument.documentElement;
-    if (selection === root) {
-      // We can't delete the root element.
-      return;
-    }
-
-    let parent = selection.parentNode;
-
-    // If the markup panel is active, use the markup panel to delete
-    // the node, making this an undoable action.
-    let markup = this.currentInspector.markup;
-    if (markup) {
-      markup.deleteNode(selection);
-    } else {
-      // remove the node from content
-      parent.removeChild(selection);
-    }
-
-    // Otherwise, just delete the node.
-    this.breadcrumbs.invalidateHierarchy();
-
-    // select the parent node in the highlighter and breadcrumbs
-    this.inspectNode(parent);
-  },
-
-  /////////////////////////////////////////////////////////////////////////
-  //// Utility Methods
-
-  /**
-   * inspect the given node, highlighting it on the page and selecting the
-   * correct row in the tree panel
-   *
-   * @param aNode
-   *        the element in the document to inspect
-   * @param aScroll
-   *        force scroll?
-   */
-  inspectNode: function IUI_inspectNode(aNode, aScroll)
-  {
-    if (aNode.ownerDocument === this.chromeDoc) {
-      // This should never happen, but just in case, we don't let the inspector
-      // inspect browser nodes.
-      return;
-    }
-    this.select(aNode, true, true);
-    this.highlighter.highlight(aNode, aScroll);
-  },
-
-  ///////////////////////////////////////////////////////////////////////////
-  //// Utility functions
-
-  /**
-   * Retrieve the unique ID of a window object.
-   *
-   * @param nsIDOMWindow aWindow
-   * @returns integer ID
-   */
-  getWindowID: function IUI_getWindowID(aWindow)
-  {
-    if (!aWindow) {
-      return null;
-    }
-
-    let util = {};
-
-    try {
-      util = aWindow.QueryInterface(Ci.nsIInterfaceRequestor).
-        getInterface(Ci.nsIDOMWindowUtils);
-    } catch (ex) { }
-
-    return util.currentInnerWindowID;
-  },
-
-  /**
-   * @param msg
-   *        text message to send to the log
-   */
-  _log: function LOG(msg)
-  {
-    Services.console.logStringMessage(msg);
-  },
-
-  /**
-   * Debugging function.
-   * @param msg
-   *        text to show with the stack trace.
-   */
-  _trace: function TRACE(msg)
-  {
-    this._log("TRACE: " + msg);
-    let frame = Components.stack.caller;
-    while (frame = frame.caller) {
-      if (frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT ||
-          frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT2) {
-        this._log("filename: " + frame.filename + " lineNumber: " + frame.lineNumber +
-          " functionName: " + frame.name);
-      }
-    }
-    this._log("END TRACE");
-  },
-
-  /**
-   * Get the toolbar button name for a given id string. Used by the
-   * registerTools API to retrieve a consistent name for toolbar buttons
-   * based on the ID of the tool.
-   * @param anId String
-   *        id of the tool to be buttonized
-   * @returns String
-   */
-  getToolbarButtonId: function IUI_createButtonId(anId)
-  {
-    return "inspector-" + anId + "-toolbutton";
-  },
-
-  /**
-   * Destroy the InspectorUI instance. This is called by the InspectorUI API
-   * "user", see gBrowserInit.onUnload() in browser.js.
-   */
-  destroy: function IUI_destroy()
-  {
-    if (this.isInspectorOpen) {
-      this.closeInspectorUI();
-    }
-
-    delete this.store;
-    delete this.chromeDoc;
-    delete this.chromeWin;
-    delete this.tabbrowser;
-  },
-};
-
-/**
- * The Inspector store is used for storing data specific to each tab window.
- * @constructor
- */
-function InspectorStore()
-{
-  this.store = {};
-}
-InspectorStore.prototype = {
-  length: 0,
-
-  /**
-   * Check if there is any data recorded for any tab/window.
-   *
-   * @returns boolean True if there are no stores for any window/tab, or false
-   * otherwise.
-   */
-  isEmpty: function IS_isEmpty()
-  {
-    return this.length == 0 ? true : false;
-  },
-
-  /**
-   * Add a new inspector.
-   *
-   * @param string aID The Store ID you want created.
-   * @param Inspector aInspector The inspector to add.
-   * @returns boolean True if the store was added successfully, or false
-   * otherwise.
-   */
-  addInspector: function IS_addInspector(aID, aInspector)
-  {
-    let result = false;
-
-    if (!(aID in this.store)) {
-      this.store[aID] = aInspector;
-      this.length++;
-      result = true;
-    }
-
-    return result;
-  },
-
-  /**
-   * Get the inspector for a window, if any.
-   *
-   * @param string aID The Store ID you want created.
-   */
-  getInspector: function IS_getInspector(aID)
-  {
-    return this.store[aID] || null;
-  },
-
-  /**
-   * Delete an inspector by ID.
-   *
-   * @param string aID The store ID you want deleted.
-   * @returns boolean True if the store was removed successfully, or false
-   * otherwise.
-   */
-  deleteInspector: function IS_deleteInspector(aID)
-  {
-    let result = false;
-
-    if (aID in this.store) {
-      this.store[aID]._destroy();
-      delete this.store[aID];
-      this.length--;
-      result = true;
-    }
-
-    return result;
-  },
-
-  /**
-   * Check store existence.
-   *
-   * @param string aID The store ID you want to check.
-   * @returns boolean True if the store ID is registered, or false otherwise.
-   */
-  hasID: function IS_hasID(aID)
-  {
-    return (aID in this.store);
-  },
-};
-
-/**
- * The InspectorProgressListener object is an nsIWebProgressListener which
- * handles onStateChange events for the inspected browser. If the user makes
- * changes to the web page and he tries to navigate away, he is prompted to
- * confirm page navigation, such that he's given the chance to prevent the loss
- * of edits.
- *
- * @constructor
- * @param object aInspector
- *        InspectorUI instance object.
- */
-function InspectorProgressListener(aInspector)
-{
-  this.IUI = aInspector;
-  this.IUI.tabbrowser.addProgressListener(this);
-}
-
-InspectorProgressListener.prototype = {
-  onStateChange:
-  function IPL_onStateChange(aProgress, aRequest, aFlag, aStatus)
-  {
-    // Remove myself if the Inspector is no longer open.
-    if (!this.IUI.isInspectorOpen) {
-      this.destroy();
-      return;
-    }
-
-    let isStart = aFlag & Ci.nsIWebProgressListener.STATE_START;
-    let isDocument = aFlag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
-    let isNetwork = aFlag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
-    let isRequest = aFlag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
-
-    // Skip non-interesting states.
-    if (!isStart || !isDocument || !isRequest || !isNetwork) {
-      return;
-    }
-
-    // If the request is about to happen in a new window, we are not concerned
-    // about the request.
-    if (aProgress.DOMWindow != this.IUI.win) {
-      return;
-    }
-
-    if (this.IUI.isDirty) {
-      this.showNotification(aRequest);
-    } else {
-      this.IUI.closeInspectorUI();
-    }
-  },
-
-  /**
-   * Show an asynchronous notification which asks the user to confirm or cancel
-   * the page navigation request.
-   *
-   * @param nsIRequest aRequest
-   *        The request initiated by the user or by the page itself.
-   * @returns void
-   */
-  showNotification: function IPL_showNotification(aRequest)
-  {
-    aRequest.suspend();
-
-    let notificationBox = this.IUI.tabbrowser.getNotificationBox(this.IUI.browser);
-    let notification = notificationBox.
-      getNotificationWithValue("inspector-page-navigation");
-
-    if (notification) {
-      notificationBox.removeNotification(notification, true);
-    }
-
-    let cancelRequest = function onCancelRequest() {
-      if (aRequest) {
-        aRequest.cancel(Cr.NS_BINDING_ABORTED);
-        aRequest.resume(); // needed to allow the connection to be cancelled.
-        aRequest = null;
-      }
-    };
-
-    let eventCallback = function onNotificationCallback(aEvent) {
-      if (aEvent == "removed") {
-        cancelRequest();
-      }
-    };
-
-    let buttons = [
-      {
-        id: "inspector.confirmNavigationAway.buttonLeave",
-        label: this.IUI.strings.
-          GetStringFromName("confirmNavigationAway.buttonLeave"),
-        accessKey: this.IUI.strings.
-          GetStringFromName("confirmNavigationAway.buttonLeaveAccesskey"),
-        callback: function onButtonLeave() {
-          if (aRequest) {
-            aRequest.resume();
-            aRequest = null;
-            this.IUI.closeInspectorUI();
-            return true;
-          }
-          return false;
-        }.bind(this),
-      },
-      {
-        id: "inspector.confirmNavigationAway.buttonStay",
-        label: this.IUI.strings.
-          GetStringFromName("confirmNavigationAway.buttonStay"),
-        accessKey: this.IUI.strings.
-          GetStringFromName("confirmNavigationAway.buttonStayAccesskey"),
-        callback: cancelRequest
-      },
-    ];
-
-    let message = this.IUI.strings.
-      GetStringFromName("confirmNavigationAway.message");
-
-    notification = notificationBox.appendNotification(message,
-      "inspector-page-navigation", "chrome://browser/skin/Info.png",
-      notificationBox.PRIORITY_WARNING_HIGH, buttons, eventCallback);
-
-    // Make sure this not a transient notification, to avoid the automatic
-    // transient notification removal.
-    notification.persistence = -1;
-  },
-
-  /**
-   * Destroy the progress listener instance.
-   */
-  destroy: function IPL_destroy()
-  {
-    this.IUI.tabbrowser.removeProgressListener(this);
-
-    let notificationBox = this.IUI.tabbrowser.getNotificationBox(this.IUI.browser);
-    let notification = notificationBox.
-      getNotificationWithValue("inspector-page-navigation");
-
-    if (notification) {
-      notificationBox.removeNotification(notification, true);
-    }
-
-    delete this.IUI;
-  },
-};
-
-InspectorUI._registeredSidebars = [];
-
-/**
- * Register an inspector sidebar template.
- * Already running sidebars will not be affected, see bug 740665.
- *
- * @param aRegistration Object
- * {
- *   id: "toolname",
- *   label: "Button or tab label",
- *   icon: "chrome://somepath.png",
- *   tooltiptext: "Button tooltip",
- *   accesskey: "S",
- *   contentURL: string URI, source of the tool's iframe content.
- *   load: Called when the sidebar has been created and the contentURL loaded.
- *         Passed an Inspector object and an iframe object.
- *   destroy: Called when the sidebar is destroyed by the inspector.
- *     Passed whatever was returned by the tool's create function.
- * }
- */
-InspectorUI.registerSidebar = function IUI_registerSidebar(aRegistration)
-{
-  // Only allow a given tool ID to be registered once.
-  if (InspectorUI._registeredSidebars.some(function(elt) elt.id == aRegistration.id))
-    return false;
-
-  InspectorUI._registeredSidebars.push(aRegistration);
-
-  return true;
-}
-
-/**
- * Unregister a previously-registered inspector sidebar.
- * Already running sidebars will not be affected, see bug 740665.
- *
- * @param aID string
- */
-InspectorUI.unregisterSidebar = function IUI_unregisterSidebar(aID)
-{
-  InspectorUI._registeredSidebars = InspectorUI._registeredSidebars.filter(function(aReg) aReg.id != aID);
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// Style Sidebar
-
-/**
- * Manages the UI and loading of registered sidebar tools.
- * @param aOptions object
- *   Initialization information for the style sidebar, including:
- *     document: The chrome document in which the style sidebar
- *             should be created.
- *     inspector: The Inspector object tied to this sidebar.
- */
-function InspectorStyleSidebar(aOptions)
-{
-  this._tools = {};
-  this._chromeDoc = aOptions.document;
-  this._inspector = aOptions.inspector;
-}
-
-InspectorStyleSidebar.prototype = {
-
-  get visible() !this._box.hasAttribute("hidden"),
-  get activePanel() this._deck.selectedPanel._toolID,
-
-  destroy: function ISS_destroy()
-  {
-    // close the Layout View
-    if (this._layoutview) {
-      this._layoutview.destroy();
-      this._layoutview = null;
-    }
-
-    for each (let toolID in Object.getOwnPropertyNames(this._tools)) {
-      this.removeTool(toolID);
-    }
-    delete this._tools;
-    this._teardown();
-  },
-
-  /**
-   * Called by InspectorUI to create the UI for a registered sidebar tool.
-   * Will create a toolbar button and an iframe for the tool.
-   * @param aRegObj object
-   *        See the documentation for InspectorUI.registerSidebar().
-   */
-  addTool: function ISS_addTool(aRegObj)
-  {
-    if (aRegObj.id in this._tools) {
-      return;
-    }
-
-    let btn = this._chromeDoc.createElement("toolbarbutton");
-    btn.setAttribute("label", aRegObj.label);
-    btn.setAttribute("class", "devtools-toolbarbutton");
-    btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
-    btn.setAttribute("accesskey", aRegObj.accesskey);
-    btn.setAttribute("image", aRegObj.icon || "");
-    btn.setAttribute("type", "radio");
-    btn.setAttribute("group", "sidebar-tools");
-
-    let spacer = this._toolbar.querySelector("spacer");
-    this._toolbar.insertBefore(btn, spacer);
-    // create tool iframe
-    let frame = this._chromeDoc.createElement("iframe");
-    frame.setAttribute("flex", "1");
-    frame._toolID = aRegObj.id;
-
-    // This is needed to enable tooltips inside the iframe document.
-    frame.setAttribute("tooltip", "aHTMLTooltip");
-
-    this._deck.appendChild(frame);
-
-    // wire up button to show the iframe
-    let onClick = function() {
-      this.activatePanel(aRegObj.id);
-    }.bind(this);
-    btn.addEventListener("click", onClick, true);
-
-    this._tools[aRegObj.id] = {
-      id: aRegObj.id,
-      registration: aRegObj,
-      button: btn,
-      frame: frame,
-      loaded: false,
-      context: null,
-      onClick: onClick
-    };
-  },
-
-  /**
-   * Remove a tool from the sidebar.
-   *
-   * @param aID string
-   *        The string ID of the tool to remove.
-   */
-  removeTool: function ISS_removeTool(aID)
-  {
-    if (!aID in this._tools) {
-      return;
-    }
-    let tool = this._tools[aID];
-    delete this._tools[aID];
-
-    if (tool.loaded && tool.registration.destroy) {
-      tool.registration.destroy(tool.context);
-    }
-
-    if (tool.onLoad) {
-      tool.frame.removeEventListener("load", tool.onLoad, true);
-      delete tool.onLoad;
-    }
-
-    if (tool.onClick) {
-      tool.button.removeEventListener("click", tool.onClick, true);
-      delete tool.onClick;
-    }
-
-    tool.button.parentNode.removeChild(tool.button);
-    tool.frame.parentNode.removeChild(tool.frame);
-  },
-
-  /**
-   * Hide or show the sidebar.
-   */
-  toggle: function ISS_toggle()
-  {
-    if (!this.visible) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  },
-
-  /**
-   * Shows the sidebar, updating the stored visibility pref.
-   */
-  show: function ISS_show()
-  {
-    this._box.removeAttribute("hidden");
-    this._splitter.removeAttribute("hidden");
-    this._toggleButton.checked = true;
-
-    this._showDefault();
-
-    this._inspector._sidebarOpen = true;
-    Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", true);
-
-    // Instantiate the Layout View if needed.
-    if (Services.prefs.getBoolPref("devtools.layoutview.enabled")
-        && !this._layoutview) {
-      this._layoutview = new LayoutView({
-        document: this._chromeDoc,
-        inspector: this._inspector,
-      });
-    }
-  },
-
-  /**
-   * Hides the sidebar, updating the stored visibility pref.
-   */
-  hide: function ISS_hide()
-  {
-    this._teardown();
-    this._inspector._sidebarOpen = false;
-    Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", false);
-  },
-
-  /**
-   * Hides the sidebar UI elements.
-   */
-  _teardown: function ISS__teardown()
-  {
-    this._toggleButton.checked = false;
-    this._box.setAttribute("hidden", true);
-    this._splitter.setAttribute("hidden", true);
-  },
-
-  /**
-   * Sets the current sidebar panel.
-   *
-   * @param aID string
-   *        The ID of the panel to make visible.
-   */
-  activatePanel: function ISS_activatePanel(aID) {
-    let tool = this._tools[aID];
-    Services.prefs.setCharPref("devtools.inspector.activeSidebar", aID);
-    this._inspector._activeSidebar = aID;
-    this._deck.selectedPanel = tool.frame;
-    this._showContent(tool);
-    tool.button.setAttribute("checked", "true");
-    let hasSelected = Array.forEach(this._toolbar.children, function(btn) {
-      if (btn != tool.button) {
-        btn.removeAttribute("checked");
-      }
-    });
-  },
-
-  /**
-   * Make the iframe content of a given tool visible.  If this is the first
-   * time the tool has been shown, load its iframe content and call the
-   * registration object's load method.
-   *
-   * @param aTool object
-   *        The tool object we're loading.
-   */
-  _showContent: function ISS__showContent(aTool)
-  {
-    // If the current tool is already loaded, notify that we're
-    // showing this sidebar.
-    if (aTool.loaded) {
-      this._inspector.emit("sidebaractivated", aTool.id);
-      this._inspector.emit("sidebaractivated-" + aTool.id);
-      return;
-    }
-
-    // If we're already loading, we're done.
-    if (aTool.onLoad) {
-      return;
-    }
-
-    // This will be canceled in removeTool if necessary.
-    aTool.onLoad = function(evt) {
-      if (evt.target.location != aTool.registration.contentURL) {
-        return;
-      }
-      aTool.frame.removeEventListener("load", aTool.onLoad, true);
-      delete aTool.onLoad;
-      aTool.loaded = true;
-      aTool.context = aTool.registration.load(this._inspector, aTool.frame);
-
-      this._inspector.emit("sidebaractivated", aTool.id);
-
-      // Send an event specific to the activation of this panel.  For
-      // this initial event, include a "createpanel" argument
-      // to let panels watch sidebaractivated to refresh themselves
-      // but ignore the one immediately after their load.
-      // I don't really like this, we should find a better solution.
-      this._inspector.emit("sidebaractivated-" + aTool.id, "createpanel");
-    }.bind(this);
-    aTool.frame.addEventListener("load", aTool.onLoad, true);
-    aTool.frame.setAttribute("src", aTool.registration.contentURL);
-  },
-
-  /**
-   * For testing purposes, mostly - return the tool-provided context
-   * for a given tool.  Will only work after the tool has been loaded
-   * and instantiated.
-   */
-  _toolContext: function ISS__toolContext(aID) {
-    return aID in this._tools ? this._tools[aID].context : null;
-  },
-
-  /**
-   * Also mostly for testing, return the list of tool objects stored in
-   * the sidebar.
-   */
-  _toolObjects: function ISS__toolObjects() {
-    return [this._tools[i] for each (i in Object.getOwnPropertyNames(this._tools))];
-  },
-
-  /**
-   * If no tool is already selected, show the last-used sidebar.  If there
-   * was no last-used sidebar, just show the first one.
-   */
-  _showDefault: function ISS__showDefault()
-  {
-    let hasSelected = Array.some(this._toolbar.children,
-      function(btn) btn.hasAttribute("checked"));
-
-    // Make sure the selected panel is loaded...
-    this._showContent(this._tools[this.activePanel]);
-
-    if (hasSelected) {
-      return;
-    }
-
-    let activeID = this._inspector._activeSidebar;
-    if (!activeID || !(activeID in this._tools)) {
-      activeID = Object.getOwnPropertyNames(this._tools)[0];
-    }
-    this.activatePanel(activeID);
-  },
-
-  // DOM elements
-  get _toggleButton() this._chromeDoc.getElementById("inspector-style-button"),
-  get _box() this._chromeDoc.getElementById("devtools-sidebar-box"),
-  get _splitter() this._chromeDoc.getElementById("devtools-side-splitter"),
-  get _toolbar() this._chromeDoc.getElementById("devtools-sidebar-toolbar"),
-  get _deck() this._chromeDoc.getElementById("devtools-sidebar-deck"),
-};
-
-///////////////////////////////////////////////////////////////////////////
-//// HTML Breadcrumbs
-
-/**
- * Display the ancestors of the current node and its children.
- * Only one "branch" of children are displayed (only one line).
- *
- * Mechanism:
- * . If no nodes displayed yet:
- *    then display the ancestor of the selected node and the selected node;
- *   else select the node;
- * . If the selected node is the last node displayed, append its first (if any).
- *
- * @param object aInspector
- *        The InspectorUI instance.
- */
-function HTMLBreadcrumbs(aInspector)
-{
-  this.IUI = aInspector;
-  this.DOMHelpers = new DOMHelpers(this.IUI.win);
-  this._init();
-}
-
-HTMLBreadcrumbs.prototype = {
-  _init: function BC__init()
-  {
-    this.container = this.IUI.chromeDoc.getElementById("inspector-breadcrumbs");
-    this.container.addEventListener("mousedown", this, true);
-
-    // We will save a list of already displayed nodes in this array.
-    this.nodeHierarchy = [];
-
-    // Last selected node in nodeHierarchy.
-    this.currentIndex = -1;
-
-    // Siblings menu
-    this.menu = this.IUI.chromeDoc.createElement("menupopup");
-    this.menu.id = "inspector-breadcrumbs-menu";
-
-    let popupSet = this.IUI.chromeDoc.getElementById("mainPopupSet");
-    popupSet.appendChild(this.menu);
-
-    // By default, hide the arrows. We let the <scrollbox> show them
-    // in case of overflow.
-    this.container.removeAttribute("overflows");
-    this.container._scrollButtonUp.collapsed = true;
-    this.container._scrollButtonDown.collapsed = true;
-
-    this.onscrollboxreflow = function() {
-      if (this.container._scrollButtonDown.collapsed)
-        this.container.removeAttribute("overflows");
-      else
-        this.container.setAttribute("overflows", true);
-    }.bind(this);
-
-    this.container.addEventListener("underflow", this.onscrollboxreflow, false);
-    this.container.addEventListener("overflow", this.onscrollboxreflow, false);
-
-    this.menu.addEventListener("popuphiding", (function() {
-      while (this.menu.hasChildNodes()) {
-        this.menu.removeChild(this.menu.firstChild);
-      }
-      let button = this.container.querySelector("button[siblings-menu-open]");
-      button.removeAttribute("siblings-menu-open");
-    }).bind(this), false);
-  },
-
-  /**
-   * Build a string that represents the node: tagName#id.class1.class2.
-   *
-   * @param aNode The node to pretty-print
-   * @returns a string
-   */
-  prettyPrintNodeAsText: function BC_prettyPrintNodeText(aNode)
-  {
-    let text = aNode.tagName.toLowerCase();
-    if (aNode.id) {
-      text += "#" + aNode.id;
-    }
-    for (let i = 0; i < aNode.classList.length; i++) {
-      text += "." + aNode.classList[i];
-    }
-    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
-      let pseudo = PSEUDO_CLASSES[i];
-      if (DOMUtils.hasPseudoClassLock(aNode, pseudo)) {
-        text += pseudo;  
-      }      
-    }
-
-    return text;
-  },
-
-
-  /**
-   * Build <label>s that represent the node:
-   *   <label class="inspector-breadcrumbs-tag">tagName</label>
-   *   <label class="inspector-breadcrumbs-id">#id</label>
-   *   <label class="inspector-breadcrumbs-classes">.class1.class2</label>
-   *
-   * @param aNode The node to pretty-print
-   * @returns a document fragment.
-   */
-  prettyPrintNodeAsXUL: function BC_prettyPrintNodeXUL(aNode)
-  {
-    let fragment = this.IUI.chromeDoc.createDocumentFragment();
-
-    let tagLabel = this.IUI.chromeDoc.createElement("label");
-    tagLabel.className = "inspector-breadcrumbs-tag plain";
-
-    let idLabel = this.IUI.chromeDoc.createElement("label");
-    idLabel.className = "inspector-breadcrumbs-id plain";
-
-    let classesLabel = this.IUI.chromeDoc.createElement("label");
-    classesLabel.className = "inspector-breadcrumbs-classes plain";
-
-    let pseudosLabel = this.IUI.chromeDoc.createElement("label");
-    pseudosLabel.className = "inspector-breadcrumbs-pseudo-classes plain";
-
-    tagLabel.textContent = aNode.tagName.toLowerCase();
-    idLabel.textContent = aNode.id ? ("#" + aNode.id) : "";
-
-    let classesText = "";
-    for (let i = 0; i < aNode.classList.length; i++) {
-      classesText += "." + aNode.classList[i];
-    }
-    classesLabel.textContent = classesText;
-
-    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(aNode, pseudo);
-    }, this);
-    pseudosLabel.textContent = pseudos.join("");
-
-    fragment.appendChild(tagLabel);
-    fragment.appendChild(idLabel);
-    fragment.appendChild(classesLabel);
-    fragment.appendChild(pseudosLabel);
-
-    return fragment;
-  },
-
-  /**
-   * Open the sibling menu.
-   *
-   * @param aButton the button representing the node.
-   * @param aNode the node we want the siblings from.
-   */
-  openSiblingMenu: function BC_openSiblingMenu(aButton, aNode)
-  {
-    let title = this.IUI.chromeDoc.createElement("menuitem");
-    title.setAttribute("label",
-      this.IUI.strings.GetStringFromName("breadcrumbs.siblings"));
-    title.setAttribute("disabled", "true");
-
-    let separator = this.IUI.chromeDoc.createElement("menuseparator");
-
-    this.menu.appendChild(title);
-    this.menu.appendChild(separator);
-
-    let fragment = this.IUI.chromeDoc.createDocumentFragment();
-
-    let nodes = aNode.parentNode.childNodes;
-    for (let i = 0; i < nodes.length; i++) {
-      if (nodes[i].nodeType == aNode.ELEMENT_NODE) {
-        let item = this.IUI.chromeDoc.createElement("menuitem");
-        let inspector = this.IUI;
-        if (nodes[i] === aNode) {
-          item.setAttribute("disabled", "true");
-          item.setAttribute("checked", "true");
-        }
-
-        item.setAttribute("type", "radio");
-        item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
-
-        item.onmouseup = (function(aNode) {
-          return function() {
-            inspector.select(aNode, true, true, "breadcrumbs");
-          }
-        })(nodes[i]);
-
-        fragment.appendChild(item);
-      }
-    }
-    this.menu.appendChild(fragment);
-    this.menu.openPopup(aButton, "before_start", 0, 0, true, false);
-    aButton.setAttribute("siblings-menu-open", "true");
-  },
-
-  /**
-   * Generic event handler.
-   *
-   * @param nsIDOMEvent aEvent
-   *        The DOM event object.
-   */
-  handleEvent: function BC_handleEvent(aEvent)
-  {
-    if (aEvent.type == "mousedown" && aEvent.button == 0) {
-      // on Click and Hold, open the Siblings menu
-
-      let timer;
-      let container = this.container;
-      let window = this.IUI.win;
-
-      function openMenu(aEvent) {
-        cancelHold();
-        let target = aEvent.originalTarget;
-        if (target.tagName == "button") {
-          target.onBreadcrumbsHold();
-        }
-      }
-
-      function handleClick(aEvent) {
-        cancelHold();
-        let target = aEvent.originalTarget;
-        if (target.tagName == "button") {
-          target.onBreadcrumbsClick();
-        }
-      }
-
-      function cancelHold(aEvent) {
-        window.clearTimeout(timer);
-        container.removeEventListener("mouseout", cancelHold, false);
-        container.removeEventListener("mouseup", handleClick, false);
-      }
-
-      container.addEventListener("mouseout", cancelHold, false);
-      container.addEventListener("mouseup", handleClick, false);
-      timer = window.setTimeout(openMenu, 500, aEvent);
-    }
-  },
-
-  /**
-   * Remove nodes and delete properties.
-   */
-  destroy: function BC_destroy()
-  {
-    this.container.removeEventListener("underflow", this.onscrollboxreflow, false);
-    this.container.removeEventListener("overflow", this.onscrollboxreflow, false);
-    this.onscrollboxreflow = null;
-
-    this.empty();
-    this.container.removeEventListener("mousedown", this, true);
-    this.menu.parentNode.removeChild(this.menu);
-    this.container = null;
-    this.nodeHierarchy = null;
-  },
-
-  /**
-   * Empty the breadcrumbs container.
-   */
-  empty: function BC_empty()
-  {
-    while (this.container.hasChildNodes()) {
-      this.container.removeChild(this.container.firstChild);
-    }
-  },
-
-  /**
-   * Re-init the cache and remove all the buttons.
-   */
-  invalidateHierarchy: function BC_invalidateHierarchy()
-  {
-    this.menu.hidePopup();
-    this.nodeHierarchy = [];
-    this.empty();
-  },
-
-  /**
-   * Set which button represent the selected node.
-   *
-   * @param aIdx Index of the displayed-button to select
-   */
-  setCursor: function BC_setCursor(aIdx)
-  {
-    // Unselect the previously selected button
-    if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
-      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
-    }
-    if (aIdx > -1) {
-      this.nodeHierarchy[aIdx].button.setAttribute("checked", "true");
-      if (this.hadFocus)
-        this.nodeHierarchy[aIdx].button.focus();
-    }
-    this.currentIndex = aIdx;
-  },
-
-  /**
-   * Get the index of the node in the cache.
-   *
-   * @param aNode
-   * @returns integer the index, -1 if not found
-   */
-  indexOf: function BC_indexOf(aNode)
-  {
-    let i = this.nodeHierarchy.length - 1;
-    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
-      if (this.nodeHierarchy[i].node === aNode) {
-        return i;
-      }
-    }
-    return -1;
-  },
-
-  /**
-   * Remove all the buttons and their references in the cache
-   * after a given index.
-   *
-   * @param aIdx
-   */
-  cutAfter: function BC_cutAfter(aIdx)
-  {
-    while (this.nodeHierarchy.length > (aIdx + 1)) {
-      let toRemove = this.nodeHierarchy.pop();
-      this.container.removeChild(toRemove.button);
-    }
-  },
-
-  /**
-   * Build a button representing the node.
-   *
-   * @param aNode The node from the page.
-   * @returns aNode The <button>.
-   */
-  buildButton: function BC_buildButton(aNode)
-  {
-    let button = this.IUI.chromeDoc.createElement("button");
-    let inspector = this.IUI;
-    button.appendChild(this.prettyPrintNodeAsXUL(aNode));
-    button.className = "inspector-breadcrumbs-button";
-
-    button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
-
-    button.onkeypress = function onBreadcrumbsKeypress(e) {
-      if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
-          e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
-        button.click();
-    }
-
-    button.onBreadcrumbsClick = function onBreadcrumbsClick() {
-      inspector.stopInspecting();
-      inspector.select(aNode, true, true, "breadcrumbs");
-    };
-
-    button.onclick = (function _onBreadcrumbsRightClick(aEvent) {
-      button.focus();
-      if (aEvent.button == 2) {
-        this.openSiblingMenu(button, aNode);
-      }
-    }).bind(this);
-
-    button.onBreadcrumbsHold = (function _onBreadcrumbsHold() {
-      this.openSiblingMenu(button, aNode);
-    }).bind(this);
-    return button;
-  },
-
-  /**
-   * Connecting the end of the breadcrumbs to a node.
-   *
-   * @param aNode The node to reach.
-   */
-  expand: function BC_expand(aNode)
-  {
-      let fragment = this.IUI.chromeDoc.createDocumentFragment();
-      let toAppend = aNode;
-      let lastButtonInserted = null;
-      let originalLength = this.nodeHierarchy.length;
-      let stopNode = null;
-      if (originalLength > 0) {
-        stopNode = this.nodeHierarchy[originalLength - 1].node;
-      }
-      while (toAppend && toAppend.tagName && toAppend != stopNode) {
-        let button = this.buildButton(toAppend);
-        fragment.insertBefore(button, lastButtonInserted);
-        lastButtonInserted = button;
-        this.nodeHierarchy.splice(originalLength, 0, {node: toAppend, button: button});
-        toAppend = this.DOMHelpers.getParentObject(toAppend);
-      }
-      this.container.appendChild(fragment, this.container.firstChild);
-  },
-
-  /**
-   * Get a child of a node that can be displayed in the breadcrumbs.
-   * By default, we want a node that can highlighted by the highlighter.
-   * If no highlightable child is found, we return the first node of type
-   * ELEMENT_NODE.
-   *
-   * @param aNode The parent node.
-   * @returns nsIDOMNode|null
-   */
-  getFirstHighlightableChild: function BC_getFirstHighlightableChild(aNode)
-  {
-    let nextChild = this.DOMHelpers.getChildObject(aNode, 0);
-    let fallback = null;
-
-    while (nextChild) {
-      if (this.IUI.highlighter.isNodeHighlightable(nextChild)) {
-        return nextChild;
-      }
-      if (!fallback && nextChild.nodeType == aNode.ELEMENT_NODE) {
-        fallback = nextChild;
-      }
-      nextChild = this.DOMHelpers.getNextSibling(nextChild);
-    }
-    return fallback;
-  },
-
-  /**
-   * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
-   *
-   * @param aNode
-   * @returns Index of the ancestor in the cache
-   */
-  getCommonAncestor: function BC_getCommonAncestor(aNode)
-  {
-    let node = aNode;
-    while (node) {
-      let idx = this.indexOf(node);
-      if (idx > -1) {
-        return idx;
-      } else {
-        node = this.DOMHelpers.getParentObject(node);
-      }
-    }
-    return -1;
-  },
-
-  /**
-   * Make sure that the latest node in the breadcrumbs is not the selected node
-   * if the selected node still has children.
-   */
-  ensureFirstChild: function BC_ensureFirstChild()
-  {
-    // If the last displayed node is the selected node
-    if (this.currentIndex == this.nodeHierarchy.length - 1) {
-      let node = this.nodeHierarchy[this.currentIndex].node;
-      let child = this.getFirstHighlightableChild(node);
-      // If the node has a child
-      if (child) {
-        // Show this child
-        this.expand(child);
-      }
-    }
-  },
-
-  /**
-   * Ensure the selected node is visible.
-   */
-  scroll: function BC_scroll()
-  {
-    // FIXME bug 684352: make sure its immediate neighbors are visible too.
-
-    let scrollbox = this.container;
-    let element = this.nodeHierarchy[this.currentIndex].button;
-    scrollbox.ensureElementIsVisible(element);
-  },
-  
-  updateSelectors: function BC_updateSelectors()
-  {
-    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
-      let crumb = this.nodeHierarchy[i];
-      let button = crumb.button;
-
-      while(button.hasChildNodes()) {
-        button.removeChild(button.firstChild);
-      }
-      button.appendChild(this.prettyPrintNodeAsXUL(crumb.node));
-      button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(crumb.node));
-    }
-  },
-
-  /**
-   * Update the breadcrumbs display when a new node is selected.
-   */
-  update: function BC_update()
-  {
-    this.menu.hidePopup();
-
-    let cmdDispatcher = this.IUI.chromeDoc.commandDispatcher;
-    this.hadFocus = (cmdDispatcher.focusedElement &&
-                     cmdDispatcher.focusedElement.parentNode == this.container);
-
-    let selection = this.IUI.selection;
-    let idx = this.indexOf(selection);
-
-    // Is the node already displayed in the breadcrumbs?
-    if (idx > -1) {
-      // Yes. We select it.
-      this.setCursor(idx);
-    } else {
-      // No. Is the breadcrumbs display empty?
-      if (this.nodeHierarchy.length > 0) {
-        // No. We drop all the element that are not direct ancestors
-        // of the selection
-        let parent = this.DOMHelpers.getParentObject(selection);
-        let idx = this.getCommonAncestor(parent);
-        this.cutAfter(idx);
-      }
-      // we append the missing button between the end of the breadcrumbs display
-      // and the current node.
-      this.expand(selection);
-
-      // we select the current node button
-      idx = this.indexOf(selection);
-      this.setCursor(idx);
-    }
-    // Add the first child of the very last node of the breadcrumbs if possible.
-    this.ensureFirstChild();
-
-    // Make sure the selected node and its neighbours are visible.
-    this.scroll();
-
-    this.updateSelectors();
-  },
-
-}
-
-/////////////////////////////////////////////////////////////////////////
-//// Initializers
-
-XPCOMUtils.defineLazyGetter(InspectorUI.prototype, "strings",
-  function () {
-    return Services.strings.createBundle(
-            "chrome://browser/locale/devtools/inspector.properties");
-  });
-
-XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
-  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-});
-
-XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
-  return Cc["@mozilla.org/widget/clipboardhelper;1"].
-    getService(Ci.nsIClipboardHelper);
-});
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js b/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
deleted file mode 100644
index 71349374fcf..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let notificationBox = null;
-
-function startLocationTests() {
-  ok(window.InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runInspectorTests() {
-  Services.obs.removeObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
-
-  let para = content.document.querySelector("p");
-  ok(para, "found the paragraph element");
-  is(para.textContent, "init", "paragraph content is correct");
-
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isInspectorOpen, "Inspector is open");
-
-  InspectorUI.isDirty = true;
-
-  notificationBox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-  notificationBox.addEventListener("AlertActive", alertActive1, false);
-
-  gBrowser.selectedBrowser.addEventListener("load", onPageLoad, true);
-
-  content.location = "data:text/html,<div>location change test 1 for " +
-    "inspector</div><p>test1</p>";
-}
-
-function alertActive1() {
-  notificationBox.removeEventListener("AlertActive", alertActive1, false);
-
-  let notification = notificationBox.
-    getNotificationWithValue("inspector-page-navigation");
-  ok(notification, "found the inspector-page-navigation notification");
-
-  // By closing the notification it is expected that page navigation is
-  // canceled.
-  executeSoon(function() {
-    notification.close();
-    locationTest2();
-  });
-}
-
-function onPageLoad() {
-  gBrowser.selectedBrowser.removeEventListener("load", onPageLoad, true);
-
-  isnot(content.location.href.indexOf("test2"), -1,
-        "page navigated to the correct location");
-
-  let para = content.document.querySelector("p");
-  ok(para, "found the paragraph element, third time");
-  is(para.textContent, "test2", "paragraph content is correct");
-
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(!InspectorUI.isInspectorOpen, "Inspector Panel is not open");
-
-  testEnd();
-}
-
-function locationTest2() {
-  // Location did not change.
-  let para = content.document.querySelector("p");
-  ok(para, "found the paragraph element, second time");
-  is(para.textContent, "init", "paragraph content is correct");
-
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isInspectorOpen, "Inspector Panel is open");
-
-  notificationBox.addEventListener("AlertActive", alertActive2, false);
-
-  content.location = "data:text/html,<div>location change test 2 for " +
-    "inspector</div><p>test2</p>";
-}
-
-function alertActive2() {
-  notificationBox.removeEventListener("AlertActive", alertActive2, false);
-
-  let notification = notificationBox.
-    getNotificationWithValue("inspector-page-navigation");
-  ok(notification, "found the inspector-page-navigation notification");
-
-  let buttons = notification.querySelectorAll("button");
-  let buttonLeave = null;
-  for (let i = 0; i < buttons.length; i++) {
-    if (buttons[i].buttonInfo.id == "inspector.confirmNavigationAway.buttonLeave") {
-      buttonLeave = buttons[i];
-      break;
-    }
-  }
-
-  ok(buttonLeave, "the Leave page button was found");
-
-  // Accept page navigation.
-  executeSoon(function(){
-    buttonLeave.doCommand();
-  });
-}
-
-function testEnd() {
-  notificationBox = null;
-  gBrowser.removeCurrentTab();
-  executeSoon(finish);
-}
-
-function test() {
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-    waitForFocus(startLocationTests, content);
-  }, true);
-
-  content.location = "data:text/html,<div>location change tests for " +
-    "inspector.</div><p>init</p>";
-}
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_690361.js b/browser/devtools/highlighter/test/browser_inspector_bug_690361.js
deleted file mode 100644
index c60a258acf5..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_bug_690361.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/* -*- Mode: C++; 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/. */
-
-let doc;
-let salutation;
-let closing;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
-    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
-    '<h1>Some header text</h1>\n' +
-    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
-    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
-    'solely to provide some things to test the inspector initialization.</p>\n' +
-    'If you are reading this, you should go do something else instead. Maybe ' +
-    'read a book. Or better yet, write some test-cases for another bit of code. ' +
-    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
-    '<p id="closing">end transmission</p>\n' +
-    '</div>';
-  doc.title = "Inspector Opening and Closing Test";
-  startInspectorTests();
-}
-
-function startInspectorTests()
-{
-  ok(InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runInspectorTests()
-{
-  Services.obs.removeObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  Services.obs.addObserver(closeInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-  ok(InspectorUI.toolbar, "we have the toolbar.");
-  ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
-  ok(InspectorUI.inspecting, "Inspector is inspecting");
-  ok(!InspectorUI.currentInspector._markupOpen, "Inspector Tree Panel is not open");
-  ok(InspectorUI.highlighter, "Highlighter is up");
-
-  salutation = doc.getElementById("salutation");
-  InspectorUI.inspectNode(salutation);
-
-  let button = document.getElementById("highlighter-closebutton");
-  button.click();
-}
-
-function closeInspectorTests()
-{
-  Services.obs.removeObserver(closeInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-  Services.obs.addObserver(inspectorOpenedTrap,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  ok(!InspectorUI.isInspectorOpen, "Inspector is not open");
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    gBrowser.removeCurrentTab();
-  }, true);
-
-  gBrowser.tabContainer.addEventListener("TabSelect", finishInspectorTests, false);
-}
-
-function inspectorOpenedTrap()
-{
-  ok(false, "Inspector opened! Should not have done so.");
-  InspectorUI.closeInspectorUI(false);
-}
-
-function finishInspectorTests()
-{
-  gBrowser.tabContainer.removeEventListener("TabSelect", finishInspectorTests, false);
-
-  Services.obs.removeObserver(inspectorOpenedTrap,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-  requestLongerTimeout(4); // give the inspector a chance to open
-  executeSoon(function() {
-    gBrowser.removeCurrentTab();
-    finish();
-  });
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  ignoreAllUncaughtExceptions();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
deleted file mode 100644
index 50beccc16e2..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let iframe;
-let iframeLoads = 0;
-let checksAfterLoads = false;
-
-function startTest() {
-  ok(window.InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runInspectorTests() {
-  Services.obs.removeObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
-
-  iframe = content.document.querySelector("iframe");
-  ok(iframe, "found the iframe element");
-
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isInspectorOpen, "Inspector is open");
-
-  Services.obs.addObserver(finishTest,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-  iframe.addEventListener("load", onIframeLoad, false);
-
-  executeSoon(function() {
-    iframe.contentWindow.location = "javascript:location.reload()";
-  });
-}
-
-function onIframeLoad() {
-  if (++iframeLoads != 2) {
-    executeSoon(function() {
-      iframe.contentWindow.location = "javascript:location.reload()";
-    });
-    return;
-  }
-
-  iframe.removeEventListener("load", onIframeLoad, false);
-
-  ok(InspectorUI.inspecting, "Inspector is highlighting after iframe nav");
-  ok(InspectorUI.isInspectorOpen, "Inspector Panel is open after iframe nav");
-
-  checksAfterLoads = true;
-
-  InspectorUI.closeInspectorUI();
-}
-
-function finishTest() {
-  Services.obs.removeObserver(finishTest,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-
-  is(iframeLoads, 2, "iframe loads");
-  ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
-  ok(!InspectorUI.isInspectorOpen, "Inspector Panel is not open");
-
-  iframe = null;
-  gBrowser.removeCurrentTab();
-  executeSoon(finish);
-}
-
-function test() {
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-    waitForFocus(startTest, content);
-  }, true);
-
-  content.location = "data:text/html,<p>bug 699308 - test iframe navigation" +
-    "<iframe src='data:text/html,hello world'></iframe>";
-}
diff --git a/browser/devtools/highlighter/test/browser_inspector_changes.js b/browser/devtools/highlighter/test/browser_inspector_changes.js
deleted file mode 100644
index ce122a01341..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_changes.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/* -*- Mode: C++; 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/. */
-let doc;
-let testDiv;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
-  doc.title = "Inspector Change Test";
-  startInspectorTests();
-}
-
-
-function getInspectorProp(aName)
-{
-  for each (let view in computedViewTree().propertyViews) {
-    if (view.name == aName) {
-      return view;
-    }
-  }
-  return null;
-}
-
-function startInspectorTests()
-{
-  ok(InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runInspectorTests()
-{
-  Services.obs.removeObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  testDiv = doc.getElementById("testdiv");
-
-  testDiv.style.fontSize = "10px";
-
-  InspectorUI.inspectNode(testDiv);
-  InspectorUI.stopInspecting();
-
-  // Start up the style inspector panel...
-  Services.obs.addObserver(stylePanelTests, "StyleInspector-populated", false);
-
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("computedview");
-}
-
-function stylePanelTests()
-{
-  Services.obs.removeObserver(stylePanelTests, "StyleInspector-populated");
-
-  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
-  ok(computedViewTree(), "Style Panel has a cssHtmlTree");
-
-  let propView = getInspectorProp("font-size");
-  is(propView.value, "10px", "Style inspector should be showing the correct font size.");
-
-  Services.obs.addObserver(stylePanelAfterChange, "StyleInspector-populated", false);
-
-  testDiv.style.fontSize = "15px";
-  InspectorUI.nodeChanged();
-}
-
-function stylePanelAfterChange()
-{
-  Services.obs.removeObserver(stylePanelAfterChange, "StyleInspector-populated");
-
-  let propView = getInspectorProp("font-size");
-  is(propView.value, "15px", "Style inspector should be showing the new font size.");
-
-  stylePanelNotActive();
-}
-
-function stylePanelNotActive()
-{
-  // Tests changes made while the style panel is not active.
-  InspectorUI.sidebar.activatePanel("ruleview");
-
-  executeSoon(function() {
-    Services.obs.addObserver(stylePanelAfterSwitch, "StyleInspector-populated", false);
-    testDiv.style.fontSize = "20px";
-    InspectorUI.nodeChanged();
-    InspectorUI.sidebar.activatePanel("computedview");
-  });
-}
-
-function stylePanelAfterSwitch()
-{
-  Services.obs.removeObserver(stylePanelAfterSwitch, "StyleInspector-populated");
-
-  let propView = getInspectorProp("font-size");
-  is(propView.value, "20px", "Style inspector should be showing the newest font size.");
-
-  Services.obs.addObserver(finishTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-  executeSoon(function() {
-    InspectorUI.closeInspectorUI(true);
-  });
-}
-
-function finishTest()
-{
-  Services.obs.removeObserver(finishTest,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js b/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
deleted file mode 100644
index 5878b4f12f8..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let doc;
-
-function createDocument() {
-  doc.body.innerHTML = '<h1>highlighter autohide test</h1>';
-
-  InspectorUI.openInspectorUI(doc.querySelector("h1"));
-
-  // Open the sidebar and wait for the default view (the rule view) to show.
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", inspectorRuleViewOpened);
-
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("ruleview");
-}
-
-function inspectorRuleViewOpened() {
-  let deck = InspectorUI.sidebar._deck;
-
-  EventUtils.synthesizeMouse(InspectorUI.highlighter.highlighterContainer, 2, 2, {type: "mousemove"}, window);
-
-  executeSoon(function() {
-    ok(!InspectorUI.highlighter.hidden, "Outline visible (1)");
-
-    EventUtils.synthesizeMouse(deck, 10, 2, {type: "mousemove"}, window);
-
-    executeSoon(function() {
-      ok(InspectorUI.highlighter.hidden, "Outline not visible");
-
-      EventUtils.synthesizeMouse(deck, -10, 2, {type: "mousemove"}, window);
-
-      executeSoon(function() {
-        ok(!InspectorUI.highlighter.hidden, "Outline visible (2)");
-        finishTest();
-      });
-    });
-  });
-}
-
-function finishTest() {
-  InspectorUI.closeInspectorUI();
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test() {
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for highlighter";
-}
-
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_initialization.js b/browser/devtools/highlighter/test/browser_inspector_initialization.js
deleted file mode 100644
index 3c8c84b8328..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_initialization.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/* -*- Mode: C++; 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/. */
-let doc;
-let salutation;
-let closing;
-let winId;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
-    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
-    '<h1>Some header text</h1>\n' +
-    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
-    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
-    'solely to provide some things to test the inspector initialization.</p>\n' +
-    'If you are reading this, you should go do something else instead. Maybe ' +
-    'read a book. Or better yet, write some test-cases for another bit of code. ' +
-    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
-    '<p id="closing">end transmission</p>\n' +
-    '</div>';
-  doc.title = "Inspector Initialization Test";
-  startInspectorTests();
-}
-
-function startInspectorTests()
-{
-  ok(InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runInspectorTests()
-{
-  Services.obs.removeObserver(runInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-  ok(InspectorUI.toolbar, "we have the toolbar.");
-  ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
-  ok(InspectorUI.inspecting, "Inspector is inspecting");
-  ok(!InspectorUI.markupOpen, "Inspector Tree Panel is not open");
-  ok(!InspectorUI.sidebar.visible, "Inspector sidebar should not visible.");
-  ok(InspectorUI.highlighter, "Highlighter is up");
-  InspectorUI.inspectNode(doc.body);
-  InspectorUI.stopInspecting();
-
-  InspectorUI.currentInspector.once("markuploaded", treePanelTests);
-  InspectorUI.currentInspector.openMarkup();
-}
-
-function treePanelTests()
-{
-  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
-
-  InspectorUI.toggleSidebar();
-  ok(InspectorUI.sidebar.visible, "Inspector Sidebar should be open");
-  InspectorUI.toggleSidebar();
-  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar should be closed");
-  InspectorUI.sidebar.show();
-  InspectorUI.currentInspector.once("sidebaractivated-computedview",
-    stylePanelTests)
-  InspectorUI.sidebar.activatePanel("computedview");
-}
-
-function stylePanelTests()
-{
-  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
-  is(InspectorUI.sidebar.activePanel, "computedview", "Computed View is open");
-  ok(computedViewTree(), "Computed view has a cssHtmlTree");
-
-  InspectorUI.sidebar.activatePanel("ruleview");
-  executeSoon(function() {
-    ruleViewTests();
-  });
-}
-
-function ruleViewTests()
-{
-  Services.obs.addObserver(runContextMenuTest,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-  is(InspectorUI.sidebar.activePanel, "ruleview", "Rule View is open");
-  ok(ruleView(), "InspectorUI has a cssRuleView");
-
-  executeSoon(function() {
-    InspectorUI.closeInspectorUI();
-  });
-}
-
-function runContextMenuTest()
-{
-  Services.obs.removeObserver(runContextMenuTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-  Services.obs.addObserver(inspectNodesFromContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  salutation = doc.getElementById("salutation");
-  ok(salutation, "hello, context menu test!");
-  let eventDeets = { type : "contextmenu", button : 2 };
-  let contextMenu = document.getElementById("contentAreaContextMenu");
-  ok(contextMenu, "we have the context menu");
-  let contextInspectMenuItem = document.getElementById("context-inspect");
-  ok(contextInspectMenuItem, "we have the inspect context menu item");
-  EventUtils.synthesizeMouse(salutation, 2, 2, eventDeets);
-  is(contextMenu.state, "showing", "context menu is open");
-  is(!contextInspectMenuItem.hidden, gPrefService.getBoolPref("devtools.inspector.enabled"), "is context menu item enabled?");
-  contextMenu.hidePopup();
-  executeSoon(function() {
-    InspectorUI.openInspectorUI(salutation);
-  });
-}
-
-function inspectNodesFromContextTest()
-{
-  Services.obs.removeObserver(inspectNodesFromContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  Services.obs.addObserver(openInspectorForContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-  ok(!InspectorUI.inspecting, "Inspector is not actively highlighting");
-  is(InspectorUI.selection, salutation, "Inspector is highlighting salutation");
-  executeSoon(function() {
-    InspectorUI.closeInspectorUI(true);
-  });
-}
-
-function openInspectorForContextTest()
-{
-  Services.obs.removeObserver(openInspectorForContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-  Services.obs.addObserver(inspectNodesFromContextTestWhileOpen, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  executeSoon(function() {
-    InspectorUI.openInspectorUI(salutation);
-  });
-}
-
-function inspectNodesFromContextTestWhileOpen()
-{
-  Services.obs.removeObserver(inspectNodesFromContextTestWhileOpen, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  Services.obs.addObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.highlighter.addListener("nodeselected", inspectNodesFromContextTestHighlight);
-  is(InspectorUI.selection, salutation, "Inspector is highlighting salutation");
-  closing = doc.getElementById("closing");
-  ok(closing, "we have the closing statement");
-  executeSoon(function() {
-    InspectorUI.openInspectorUI(closing);
-  });
-}
-
-function inspectNodesFromContextTestHighlight()
-{
-  winId = InspectorUI.winID;
-  InspectorUI.highlighter.removeListener("nodeselected", inspectNodesFromContextTestHighlight);
-  Services.obs.addObserver(finishInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED, false);
-  is(InspectorUI.selection, closing, "InspectorUI.selection is header");
-  executeSoon(function() {
-    InspectorUI.closeInspectorUI();
-  });
-}
-
-function inspectNodesFromContextTestTrap()
-{
-  Services.obs.removeObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  ok(false, "Inspector UI has been opened again. We Should Not Be Here!");
-}
-
-function finishInspectorTests(subject, topic, aWinIdString)
-{
-  Services.obs.removeObserver(finishInspectorTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED);
-
-  is(parseInt(aWinIdString), winId, "winId of destroyed Inspector matches");
-  ok(!InspectorUI.highlighter, "Highlighter is gone");
-  ok(!InspectorUI.inspecting, "Inspector is not inspecting");
-  ok(!InspectorUI._sidebar, "Inspector Sidebar is closed");
-  ok(!InspectorUI.toolbar, "toolbar is hidden");
-
-  Services.obs.removeObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_invalidate.js b/browser/devtools/highlighter/test/browser_inspector_invalidate.js
deleted file mode 100644
index dba5cd7862d..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_invalidate.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let doc;
-let div;
-
-function createDocument()
-{
-  div = doc.createElement("div");
-  div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
-  doc.body.appendChild(div);
-
-  Services.obs.addObserver(runTest,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function runTest(subject)
-{
-  Services.obs.removeObserver(runTest,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  InspectorUI.highlighter.highlight(div);
-
-  executeSoon(function() {
-    let outline = InspectorUI.highlighter.outline;
-    is(outline.style.width, "100px", "selection has the right width");
-
-    div.style.width = "200px";
-    function pollTest() {
-      if (outline.style.width == "100px") {
-    	setTimeout(pollTest, 10);
-    	return;
-      }
-      is(outline.style.width, "200px", "selection updated");
-      InspectorUI.closeInspectorUI();
-      gBrowser.removeCurrentTab();
-      finish();
-    }
-    setTimeout(pollTest, 10);
-  });
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_keybindings.js b/browser/devtools/highlighter/test/browser_inspector_keybindings.js
deleted file mode 100644
index 4e8fc459d8f..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_keybindings.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  let doc;
-  let node;
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    doc = content.document;
-    waitForFocus(setupKeyBindingsTest, content);
-  }, true);
-
-  content.location = "data:text/html,<h1>foobar</h1>";
-
-  function setupKeyBindingsTest()
-  {
-    node = doc.querySelector("h1");
-    Services.obs.addObserver(highlightNode,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
-  }
-
-  function highlightNode()
-  {
-    Services.obs.removeObserver(highlightNode,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-    executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", lockNode);
-      InspectorUI.inspectNode(node);
-    });
-  }
-
-  function lockNode()
-  {
-    InspectorUI.highlighter.removeListener("nodeselected", lockNode);
-    synthesizeKeyFromKeyTag("key_inspect");
-    executeSoon(isTheNodeLocked);
-  }
-
-  function isTheNodeLocked()
-  {
-    is(InspectorUI.selection, node, "selection matches node");
-    ok(!InspectorUI.inspecting, "the node is locked");
-    unlockNode();
-  }
-
-  function unlockNode() {
-    synthesizeKeyFromKeyTag("key_inspect");
-    executeSoon(isTheNodeUnlocked);
-  }
-
-  function isTheNodeUnlocked()
-  {
-    ok(InspectorUI.inspecting, "the node is unlocked");
-
-    // Let's close the inspector
-    Services.obs.addObserver(finishUp,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-    EventUtils.synthesizeKey("VK_ESCAPE", {});
-    ok(true, "Inspector is closing successfuly");
-  }
-
-  function finishUp() {
-    Services.obs.removeObserver(finishUp,
-                                InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-    doc = node = null;
-    gBrowser.removeCurrentTab();
-    finish();
-  }
-}
diff --git a/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js b/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
deleted file mode 100644
index 5cbcceb88de..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-
-let pseudos = [":hover", ":active", ":focus"];
-
-let doc;
-let div;
-let menu;
-
-function test()
-{
-  waitForExplicitFinish();
-  ignoreAllUncaughtExceptions();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,pseudo-class lock node menu tests";
-}
-
-function createDocument()
-{
-  div = doc.createElement("div");
-  div.textContent = "test div";
-
-  doc.body.appendChild(div);
-
-  setupTests();
-}
-
-function setupTests()
-{
-  Services.obs.addObserver(selectNode,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function selectNode()
-{
-  Services.obs.removeObserver(selectNode,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-  executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTests);
-    InspectorUI.inspectNode(div);
-  });
-}
-
-function performTests()
-{
-  InspectorUI.highlighter.removeListener("nodeselected", performTests);
-
-  menu = document.getElementById("highlighter-node-menu");
-  menu.addEventListener("popupshowing", testMenuItems, true);
-
-  menu.openPopup();
-}
-
-function testMenuItems()
-{
-  menu.removeEventListener("popupshowing", testMenuItems, true);
-
-  for each (let pseudo in pseudos) {
-    let menuitem = document.getElementById("highlighter-pseudo-class-menuitem-"
-                   + pseudo);
-    ok(menuitem, pseudo + " menuitem exists");
-
-    menuitem.doCommand();
-
-    is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
-       "pseudo-class lock has been applied");
-  }
-  finishUp();
-}
-
-function finishUp()
-{
-  InspectorUI.closeInspectorUI();
-  doc = div = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
diff --git a/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js b/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
deleted file mode 100644
index c4c8039654d..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/* -*- Mode: C++; 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/. */
-
-/**
- * Tests that properties disabled in the rule view survive a tab switch.
- */
-
-let div;
-let tab1;
-
-function waitForRuleView(aCallback)
-{
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", aCallback);
-}
-
-function inspectorTabOpen1()
-{
-  Services.obs.addObserver(inspectorUIOpen1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function inspectorUIOpen1()
-{
-  Services.obs.removeObserver(inspectorUIOpen1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Highlight a node.
-  div = content.document.getElementsByTagName("div")[0];
-  InspectorUI.inspectNode(div);
-  InspectorUI.stopInspecting();
-
-  // Open the rule view sidebar.
-  waitForRuleView(ruleViewOpened1);
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("ruleview");
-}
-
-function ruleViewOpened1()
-{
-  let prop = ruleView()._elementStyle.rules[0].textProps[0];
-  is(prop.name, "background-color", "First prop is the background color prop.");
-  prop.setEnabled(false);
-
-  // Open second tab and switch to it
-  gBrowser.selectedTab = gBrowser.addTab();
-
-  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
-                                                 true);
-    waitForFocus(inspectorTabOpen2, content);
-  }, true);
-  content.location = "data:text/html,<p>tab 2: the inspector should close now";
-}
-
-function inspectorTabOpen2()
-{
-  // Switch back to tab 1.
-  executeSoon(function() {
-    Services.obs.addObserver(inspectorFocusTab1,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    gBrowser.removeCurrentTab();
-    gBrowser.selectedTab = tab1;
-  });
-}
-
-function inspectorFocusTab1()
-{
-  Services.obs.removeObserver(inspectorFocusTab1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Now wait for the rule view to load again...
-  waitForRuleView(ruleViewOpened2);
-}
-
-function ruleViewOpened2()
-{
-  let prop = ruleView()._elementStyle.rules[0].textProps[0];
-  is(prop.name, "background-color", "First prop is the background color prop.");
-  ok(!prop.enabled, "First prop should be disabled.");
-
-  InspectorUI.closeInspectorUI();
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-
-  tab1 = gBrowser.addTab();
-  gBrowser.selectedTab = tab1;
-  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
-      true);
-    waitForFocus(inspectorTabOpen1, content);
-  }, true);
-
-  content.location = "data:text/html,<p>tab switching tests for inspector" +
-    '<div style="background-color: green;">tab 1</div>';
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js b/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
deleted file mode 100644
index 4c0756beccd..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let doc;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<h1>Sidebar state test</h1>';
-  doc.title = "Sidebar State Test";
-
-  InspectorUI.openInspectorUI();
-
-  // Open the sidebar and wait for the default view (the rule view) to show.
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", inspectorRuleViewOpened);
-
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("ruleview");
-}
-
-function inspectorRuleViewOpened()
-{
-  is(InspectorUI.sidebar.activePanel, "ruleview", "Rule View is selected by default");
-
-  // Select the computed view and turn off the inspector.
-  InspectorUI.sidebar.activatePanel("computedview");
-
-  Services.obs.addObserver(inspectorClosed,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-  InspectorUI.closeInspectorUI();
-}
-
-function inspectorClosed()
-{
-  // Reopen the inspector, expect the computed view to be loaded.
-  Services.obs.removeObserver(inspectorClosed,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-
-  Services.obs.addObserver(computedViewPopulated,
-    "StyleInspector-populated", false);
-
-  InspectorUI.openInspectorUI();
-}
-
-function computedViewPopulated()
-{
-  Services.obs.removeObserver(computedViewPopulated,
-    "StyleInspector-populated");
-  is(InspectorUI.sidebar.activePanel, "computedview", "Computed view is selected by default.");
-
-  finishTest();
-}
-
-
-function finishTest()
-{
-  InspectorUI.closeInspectorUI();
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_tab_switch.js b/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
deleted file mode 100644
index 9b01e0ebe3d..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/* -*- Mode: C++; 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/. */
-
-let div;
-let tab1;
-let tab2;
-let tab1window;
-
-function inspectorTabOpen1()
-{
-  ok(window.InspectorUI, "InspectorUI variable exists");
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
-
-  Services.obs.addObserver(inspectorUIOpen1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function inspectorUIOpen1()
-{
-  Services.obs.removeObserver(inspectorUIOpen1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is open.
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar is not open");
-  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
-  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
-
-  // Highlight a node.
-  div = content.document.getElementsByTagName("div")[0];
-  InspectorUI.inspectNode(div);
-  is(InspectorUI.selection, div, "selection matches the div element");
-
-  // Open the second tab.
-  tab2 = gBrowser.addTab();
-  gBrowser.selectedTab = tab2;
-
-  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
-      true);
-    waitForFocus(inspectorTabOpen2, content);
-  }, true);
-
-  content.location = "data:text/html,<p>tab 2: the inspector should close now";
-}
-
-function inspectorTabOpen2()
-{
-  // Make sure the inspector is closed.
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
-
-  // Activate the inspector again.
-  executeSoon(function() {
-    Services.obs.addObserver(inspectorUIOpen2,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    clearUserPrefs();
-    InspectorUI.openInspectorUI();
-  });
-}
-
-function inspectorUIOpen2()
-{
-  Services.obs.removeObserver(inspectorUIOpen2,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is open.
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
-
-  // Disable highlighting.
-  InspectorUI.toggleInspection();
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-
-
-  // Switch back to tab 1.
-  executeSoon(function() {
-    Services.obs.addObserver(inspectorFocusTab1,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    gBrowser.selectedTab = tab1;
-  });
-}
-
-function inspectorFocusTab1()
-{
-  Services.obs.removeObserver(inspectorFocusTab1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is still open.
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
-  is(InspectorUI.selection, div, "selection matches the div element");
-
-  InspectorUI.currentInspector.once("markuploaded", inspectorOpenTreePanelTab1);
-  InspectorUI.toggleHTMLPanel();
-}
-
-function inspectorOpenTreePanelTab1()
-{
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
-  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
-  is(InspectorUI.selection, div, "selection matches the div element");
-
-  InspectorUI.currentInspector.once("sidebaractivated-computedview",
-    inspectorSidebarStyleView1);
-
-  executeSoon(function() {
-    InspectorUI.sidebar.show();
-    InspectorUI.sidebar.activatePanel("computedview");
-  });
-}
-
-function inspectorSidebarStyleView1()
-{
-  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
-  ok(computedView(), "Inspector Has a computed view Instance");
-
-  InspectorUI.sidebar._toolObjects().forEach(function (aTool) {
-    let btn = aTool.button;
-    is(btn.hasAttribute("checked"),
-      (aTool.id == "computedview"),
-      "Button " + btn.label + " has correct checked attribute");
-  });
-
-  // Switch back to tab 2.
-  Services.obs.addObserver(inspectorFocusTab2,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  gBrowser.selectedTab = tab2;
-}
-
-function inspectorFocusTab2()
-{
-  Services.obs.removeObserver(inspectorFocusTab2,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is still open.
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar is not open");
-  is(InspectorUI.store.length, 2, "Inspector.store.length is 2");
-  isnot(InspectorUI.selection, div, "selection does not match the div element");
-
-
-  executeSoon(function() {
-    // Make sure keybindings still work
-    synthesizeKeyFromKeyTag("key_inspect");
-
-    ok(InspectorUI.inspecting, "Inspector is highlighting");
-    InspectorUI.toggleInspection();
-
-    // Switch back to tab 1.
-    Services.obs.addObserver(inspectorSecondFocusTab1,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    gBrowser.selectedTab = tab1;
-  });
-}
-
-function inspectorSecondFocusTab1()
-{
-  Services.obs.removeObserver(inspectorSecondFocusTab1,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-  InspectorUI.currentInspector.once("sidebaractivated-computedview",
-    inspectorSecondFocusTabSidebarLoaded);
-}
-
-function inspectorSecondFocusTabSidebarLoaded()
-{
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
-  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
-  is(InspectorUI.selection, div, "selection matches the div element");
-
-  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
-  ok(computedView(), "Inspector Has a Style Panel Instance");
-  InspectorUI.sidebar._toolObjects().forEach(function(aTool) {
-    let btn = aTool.button;
-    is(btn.hasAttribute("checked"),
-      (aTool.id == "computedview"),
-      "Button " + btn.label + " has correct checked attribute");
-  });
-
-  // Switch back to tab 2.
-  Services.obs.addObserver(inspectorSecondFocusTab2,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  gBrowser.selectedTab = tab2;
-}
-
-function inspectorSecondFocusTab2()
-{
-  Services.obs.removeObserver(inspectorSecondFocusTab2,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-  // Make sure the inspector is still open.
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
-
-  is(InspectorUI.store.length, 2, "Inspector.store.length is 2");
-  isnot(InspectorUI.selection, div, "selection does not match the div element");
-
-  // Remove tab 1.
-  tab1window = gBrowser.getBrowserForTab(tab1).contentWindow;
-  tab1window.addEventListener("pagehide", inspectorTabUnload1, false);
-  gBrowser.removeTab(tab1);
-}
-
-function inspectorTabUnload1(evt)
-{
-  tab1window.removeEventListener(evt.type, arguments.callee, false);
-  tab1window = tab1 = tab2 = div = null;
-
-  // Make sure the Inspector is still open and that the state is correct.
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
-  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
-
-  InspectorUI.closeInspectorUI();
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  ignoreAllUncaughtExceptions();
-
-  tab1 = gBrowser.addTab();
-  gBrowser.selectedTab = tab1;
-  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
-      true);
-    waitForFocus(inspectorTabOpen1, content);
-  }, true);
-
-  content.location = "data:text/html,<p>tab switching tests for inspector" +
-    "<div>tab 1</div>";
-}
-
diff --git a/browser/devtools/highlighter/test/browser_inspector_treeSelection.js b/browser/devtools/highlighter/test/browser_inspector_treeSelection.js
deleted file mode 100644
index 6e681623377..00000000000
--- a/browser/devtools/highlighter/test/browser_inspector_treeSelection.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* -*- Mode: C++; 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/. */
-
-let doc;
-let h1;
-
-function createDocument()
-{
-  let div = doc.createElement("div");
-  let h1 = doc.createElement("h1");
-  let p1 = doc.createElement("p");
-  let p2 = doc.createElement("p");
-  doc.title = "Inspector Tree Selection Test";
-  h1.textContent = "Inspector Tree Selection Test";
-  p1.textContent = "This is some example text";
-  p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
-    "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
-    "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
-    "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
-    "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
-    "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
-    "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
-  div.appendChild(h1);
-  div.appendChild(p1);
-  div.appendChild(p2);
-  doc.body.appendChild(div);
-  setupSelectionTests();
-}
-
-function setupSelectionTests()
-{
-  h1 = doc.querySelectorAll("h1")[0];
-  ok(h1, "we have the header node");
-  Services.obs.addObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function runSelectionTests()
-{
-  Services.obs.removeObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
-    InspectorUI.inspectNode(h1);
-  });
-}
-
-function performTestComparisons(evt)
-{
-  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
-
-  is(h1, InspectorUI.selection, "selection matches node");
-  ok(isHighlighting(), "highlighter is highlighting");
-  is(getHighlitNode(), h1, "highlighter highlighting correct node");
-
-  finishUp();
-}
-
-function finishUp() {
-  InspectorUI.closeInspectorUI();
-  doc = h1 = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  ignoreAllUncaughtExceptions();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/inspector/Breadcrumbs.jsm b/browser/devtools/inspector/Breadcrumbs.jsm
new file mode 100644
index 00000000000..b0625140a27
--- /dev/null
+++ b/browser/devtools/inspector/Breadcrumbs.jsm
@@ -0,0 +1,593 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cc = Components.classes;
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+
+const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
+
+this.EXPORTED_SYMBOLS = ["HTMLBreadcrumbs"];
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
+Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
+
+const LOW_PRIORITY_ELEMENTS = {
+  "HEAD": true,
+  "BASE": true,
+  "BASEFONT": true,
+  "ISINDEX": true,
+  "LINK": true,
+  "META": true,
+  "SCRIPT": true,
+  "STYLE": true,
+  "TITLE": true,
+};
+
+///////////////////////////////////////////////////////////////////////////
+//// HTML Breadcrumbs
+
+/**
+ * Display the ancestors of the current node and its children.
+ * Only one "branch" of children are displayed (only one line).
+ *
+ * Mechanism:
+ * . If no nodes displayed yet:
+ *    then display the ancestor of the selected node and the selected node;
+ *   else select the node;
+ * . If the selected node is the last node displayed, append its first (if any).
+ */
+this.HTMLBreadcrumbs = function HTMLBreadcrumbs(aInspector)
+{
+  this.inspector = aInspector;
+  this.selection = this.inspector.selection;
+  this.chromeWin = this.inspector.panelWin;
+  this.chromeDoc = this.inspector.panelDoc;
+  this.DOMHelpers = new DOMHelpers(this.chromeWin);
+  this._init();
+}
+
+HTMLBreadcrumbs.prototype = {
+  _init: function BC__init()
+  {
+    this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
+    this.container.addEventListener("mousedown", this, true);
+    this.container.addEventListener("keypress", this, true);
+
+    // We will save a list of already displayed nodes in this array.
+    this.nodeHierarchy = [];
+
+    // Last selected node in nodeHierarchy.
+    this.currentIndex = -1;
+
+    // By default, hide the arrows. We let the <scrollbox> show them
+    // in case of overflow.
+    this.container.removeAttribute("overflows");
+    this.container._scrollButtonUp.collapsed = true;
+    this.container._scrollButtonDown.collapsed = true;
+
+    this.onscrollboxreflow = function() {
+      if (this.container._scrollButtonDown.collapsed)
+        this.container.removeAttribute("overflows");
+      else
+        this.container.setAttribute("overflows", true);
+    }.bind(this);
+
+    this.container.addEventListener("underflow", this.onscrollboxreflow, false);
+    this.container.addEventListener("overflow", this.onscrollboxreflow, false);
+
+    this.update = this.update.bind(this);
+    this.updateSelectors = this.updateSelectors.bind(this);
+    this.selection.on("new-node", this.update);
+    this.selection.on("detached", this.update);
+    this.selection.on("pseudoclass", this.updateSelectors);
+    this.selection.on("attribute-changed", this.updateSelectors);
+    this.update();
+  },
+
+  /**
+   * Build a string that represents the node: tagName#id.class1.class2.
+   *
+   * @param aNode The node to pretty-print
+   * @returns a string
+   */
+  prettyPrintNodeAsText: function BC_prettyPrintNodeText(aNode)
+  {
+    let text = aNode.tagName.toLowerCase();
+    if (aNode.id) {
+      text += "#" + aNode.id;
+    }
+    for (let i = 0; i < aNode.classList.length; i++) {
+      text += "." + aNode.classList[i];
+    }
+    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
+      let pseudo = PSEUDO_CLASSES[i];
+      if (DOMUtils.hasPseudoClassLock(aNode, pseudo)) {
+        text += pseudo;
+      }
+    }
+
+    return text;
+  },
+
+
+  /**
+   * Build <label>s that represent the node:
+   *   <label class="inspector-breadcrumbs-tag">tagName</label>
+   *   <label class="inspector-breadcrumbs-id">#id</label>
+   *   <label class="inspector-breadcrumbs-classes">.class1.class2</label>
+   *
+   * @param aNode The node to pretty-print
+   * @returns a document fragment.
+   */
+  prettyPrintNodeAsXUL: function BC_prettyPrintNodeXUL(aNode)
+  {
+    let fragment = this.chromeDoc.createDocumentFragment();
+
+    let tagLabel = this.chromeDoc.createElement("label");
+    tagLabel.className = "inspector-breadcrumbs-tag plain";
+
+    let idLabel = this.chromeDoc.createElement("label");
+    idLabel.className = "inspector-breadcrumbs-id plain";
+
+    let classesLabel = this.chromeDoc.createElement("label");
+    classesLabel.className = "inspector-breadcrumbs-classes plain";
+
+    let pseudosLabel = this.chromeDoc.createElement("label");
+    pseudosLabel.className = "inspector-breadcrumbs-pseudo-classes plain";
+
+    tagLabel.textContent = aNode.tagName.toLowerCase();
+    idLabel.textContent = aNode.id ? ("#" + aNode.id) : "";
+
+    let classesText = "";
+    for (let i = 0; i < aNode.classList.length; i++) {
+      classesText += "." + aNode.classList[i];
+    }
+    classesLabel.textContent = classesText;
+
+    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
+      return DOMUtils.hasPseudoClassLock(aNode, pseudo);
+    }, this);
+    pseudosLabel.textContent = pseudos.join("");
+
+    fragment.appendChild(tagLabel);
+    fragment.appendChild(idLabel);
+    fragment.appendChild(classesLabel);
+    fragment.appendChild(pseudosLabel);
+
+    return fragment;
+  },
+
+  /**
+   * Open the sibling menu.
+   *
+   * @param aButton the button representing the node.
+   * @param aNode the node we want the siblings from.
+   */
+  openSiblingMenu: function BC_openSiblingMenu(aButton, aNode)
+  {
+    // We make sure that the targeted node is selected
+    // because we want to use the nodemenu that only works
+    // for inspector.selection
+    this.selection.setNode(aNode, "breadcrumbs");
+
+    let title = this.chromeDoc.createElement("menuitem");
+    title.setAttribute("label", this.inspector.strings.GetStringFromName("breadcrumbs.siblings"));
+    title.setAttribute("disabled", "true");
+
+    let separator = this.chromeDoc.createElement("menuseparator");
+
+    let items = [title, separator];
+
+    let nodes = aNode.parentNode.childNodes;
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].nodeType == aNode.ELEMENT_NODE) {
+        let item = this.chromeDoc.createElement("menuitem");
+        if (nodes[i] === aNode) {
+          item.setAttribute("disabled", "true");
+          item.setAttribute("checked", "true");
+        }
+
+        item.setAttribute("type", "radio");
+        item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
+
+        let selection = this.selection;
+        item.onmouseup = (function(aNode) {
+          return function() {
+            selection.setNode(aNode, "breadcrumbs");
+          }
+        })(nodes[i]);
+
+        items.push(item);
+      }
+    }
+    this.inspector.showNodeMenu(aButton, "before_start", items);
+  },
+
+  /**
+   * Generic event handler.
+   *
+   * @param nsIDOMEvent event
+   *        The DOM event object.
+   */
+  handleEvent: function BC_handleEvent(event)
+  {
+    if (event.type == "mousedown" && event.button == 0) {
+      // on Click and Hold, open the Siblings menu
+
+      let timer;
+      let container = this.container;
+
+      function openMenu(event) {
+        cancelHold();
+        let target = event.originalTarget;
+        if (target.tagName == "button") {
+          target.onBreadcrumbsHold();
+        }
+      }
+
+      function handleClick(event) {
+        cancelHold();
+        let target = event.originalTarget;
+        if (target.tagName == "button") {
+          target.onBreadcrumbsClick();
+        }
+      }
+
+      let window = this.chromeWin;
+      function cancelHold(event) {
+        window.clearTimeout(timer);
+        container.removeEventListener("mouseout", cancelHold, false);
+        container.removeEventListener("mouseup", handleClick, false);
+      }
+
+      container.addEventListener("mouseout", cancelHold, false);
+      container.addEventListener("mouseup", handleClick, false);
+      timer = window.setTimeout(openMenu, 500, event);
+    }
+
+    if (event.type == "keypress" && this.selection.isElementNode()) {
+      let node = null;
+      switch (event.keyCode) {
+        case this.chromeWin.KeyEvent.DOM_VK_LEFT:
+          if (this.currentIndex != 0) {
+            node = this.nodeHierarchy[this.currentIndex - 1].node;
+          }
+          break;
+        case this.chromeWin.KeyEvent.DOM_VK_RIGHT:
+          if (this.currentIndex < this.nodeHierarchy.length - 1) {
+            node = this.nodeHierarchy[this.currentIndex + 1].node;
+          }
+          break;
+        case this.chromeWin.KeyEvent.DOM_VK_UP:
+          node = this.selection.node.previousSibling;
+          while (node && (node.nodeType != node.ELEMENT_NODE)) {
+            node = node.previousSibling;
+          }
+          break;
+        case this.chromeWin.KeyEvent.DOM_VK_DOWN:
+          node = this.selection.node.nextSibling;
+          while (node && (node.nodeType != node.ELEMENT_NODE)) {
+            node = node.nextSibling;
+          }
+          break;
+      }
+      if (node) {
+        this.selection.setNode(node, "breadcrumbs");
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+
+  /**
+   * Remove nodes and delete properties.
+   */
+  destroy: function BC_destroy()
+  {
+    this.nodeHierarchy.forEach(function(crumb) {
+      if (LayoutHelpers.isNodeConnected(crumb.node)) {
+        DOMUtils.clearPseudoClassLocks(crumb.node);
+      }
+    });
+
+    this.selection.off("new-node", this.update);
+    this.selection.off("detached", this.update);
+    this.selection.off("pseudoclass", this.updateSelectors);
+    this.selection.off("attribute-changed", this.updateSelectors);
+
+    this.container.removeEventListener("underflow", this.onscrollboxreflow, false);
+    this.container.removeEventListener("overflow", this.onscrollboxreflow, false);
+    this.onscrollboxreflow = null;
+
+    this.empty();
+    this.container.removeEventListener("mousedown", this, true);
+    this.container.removeEventListener("keypress", this, true);
+    this.container = null;
+    this.nodeHierarchy = null;
+  },
+
+  /**
+   * Empty the breadcrumbs container.
+   */
+  empty: function BC_empty()
+  {
+    while (this.container.hasChildNodes()) {
+      this.container.removeChild(this.container.firstChild);
+    }
+  },
+
+  /**
+   * Re-init the cache and remove all the buttons.
+   */
+  invalidateHierarchy: function BC_invalidateHierarchy()
+  {
+    this.inspector.hideNodeMenu();
+    this.nodeHierarchy = [];
+    this.empty();
+  },
+
+  /**
+   * Set which button represent the selected node.
+   *
+   * @param aIdx Index of the displayed-button to select
+   */
+  setCursor: function BC_setCursor(aIdx)
+  {
+    // Unselect the previously selected button
+    if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
+      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
+    }
+    if (aIdx > -1) {
+      this.nodeHierarchy[aIdx].button.setAttribute("checked", "true");
+      if (this.hadFocus)
+        this.nodeHierarchy[aIdx].button.focus();
+    }
+    this.currentIndex = aIdx;
+  },
+
+  /**
+   * Get the index of the node in the cache.
+   *
+   * @param aNode
+   * @returns integer the index, -1 if not found
+   */
+  indexOf: function BC_indexOf(aNode)
+  {
+    let i = this.nodeHierarchy.length - 1;
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      if (this.nodeHierarchy[i].node === aNode) {
+        return i;
+      }
+    }
+    return -1;
+  },
+
+  /**
+   * Remove all the buttons and their references in the cache
+   * after a given index.
+   *
+   * @param aIdx
+   */
+  cutAfter: function BC_cutAfter(aIdx)
+  {
+    while (this.nodeHierarchy.length > (aIdx + 1)) {
+      let toRemove = this.nodeHierarchy.pop();
+      this.container.removeChild(toRemove.button);
+    }
+  },
+
+  /**
+   * Build a button representing the node.
+   *
+   * @param aNode The node from the page.
+   * @returns aNode The <button>.
+   */
+  buildButton: function BC_buildButton(aNode)
+  {
+    let button = this.chromeDoc.createElement("button");
+    button.appendChild(this.prettyPrintNodeAsXUL(aNode));
+    button.className = "inspector-breadcrumbs-button";
+
+    button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
+
+    button.onkeypress = function onBreadcrumbsKeypress(e) {
+      if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
+          e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
+        button.click();
+    }
+
+    button.onBreadcrumbsClick = function onBreadcrumbsClick() {
+      this.selection.setNode(aNode, "breadcrumbs");
+    }.bind(this);
+
+    button.onclick = (function _onBreadcrumbsRightClick(event) {
+      button.focus();
+      if (event.button == 2) {
+        this.openSiblingMenu(button, aNode);
+      }
+    }).bind(this);
+
+    button.onBreadcrumbsHold = (function _onBreadcrumbsHold() {
+      this.openSiblingMenu(button, aNode);
+    }).bind(this);
+    return button;
+  },
+
+  /**
+   * Connecting the end of the breadcrumbs to a node.
+   *
+   * @param aNode The node to reach.
+   */
+  expand: function BC_expand(aNode)
+  {
+      let fragment = this.chromeDoc.createDocumentFragment();
+      let toAppend = aNode;
+      let lastButtonInserted = null;
+      let originalLength = this.nodeHierarchy.length;
+      let stopNode = null;
+      if (originalLength > 0) {
+        stopNode = this.nodeHierarchy[originalLength - 1].node;
+      }
+      while (toAppend && toAppend.tagName && toAppend != stopNode) {
+        let button = this.buildButton(toAppend);
+        fragment.insertBefore(button, lastButtonInserted);
+        lastButtonInserted = button;
+        this.nodeHierarchy.splice(originalLength, 0, {node: toAppend, button: button});
+        toAppend = this.DOMHelpers.getParentObject(toAppend);
+      }
+      this.container.appendChild(fragment, this.container.firstChild);
+  },
+
+  /**
+   * Get a child of a node that can be displayed in the breadcrumbs
+   * and that is probably visible. See LOW_PRIORITY_ELEMENTS.
+   *
+   * @param aNode The parent node.
+   * @returns nsIDOMNode|null
+   */
+  getInterestingFirstNode: function BC_getInterestingFirstNode(aNode)
+  {
+    let nextChild = this.DOMHelpers.getChildObject(aNode, 0);
+    let fallback = null;
+
+    while (nextChild) {
+      if (nextChild.nodeType == aNode.ELEMENT_NODE) {
+        if (!(nextChild.tagName in LOW_PRIORITY_ELEMENTS)) {
+          return nextChild;
+        }
+        if (!fallback) {
+          fallback = nextChild;
+        }
+      }
+      nextChild = this.DOMHelpers.getNextSibling(nextChild);
+    }
+    return fallback;
+  },
+
+
+  /**
+   * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
+   *
+   * @param aNode
+   * @returns Index of the ancestor in the cache
+   */
+  getCommonAncestor: function BC_getCommonAncestor(aNode)
+  {
+    let node = aNode;
+    while (node) {
+      let idx = this.indexOf(node);
+      if (idx > -1) {
+        return idx;
+      } else {
+        node = this.DOMHelpers.getParentObject(node);
+      }
+    }
+    return -1;
+  },
+
+  /**
+   * Make sure that the latest node in the breadcrumbs is not the selected node
+   * if the selected node still has children.
+   */
+  ensureFirstChild: function BC_ensureFirstChild()
+  {
+    // If the last displayed node is the selected node
+    if (this.currentIndex == this.nodeHierarchy.length - 1) {
+      let node = this.nodeHierarchy[this.currentIndex].node;
+      let child = this.getInterestingFirstNode(node);
+      // If the node has a child
+      if (child) {
+        // Show this child
+        this.expand(child);
+      }
+    }
+  },
+
+  /**
+   * Ensure the selected node is visible.
+   */
+  scroll: function BC_scroll()
+  {
+    // FIXME bug 684352: make sure its immediate neighbors are visible too.
+
+    let scrollbox = this.container;
+    let element = this.nodeHierarchy[this.currentIndex].button;
+    scrollbox.ensureElementIsVisible(element);
+  },
+
+  updateSelectors: function BC_updateSelectors()
+  {
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      let crumb = this.nodeHierarchy[i];
+      let button = crumb.button;
+
+      while(button.hasChildNodes()) {
+        button.removeChild(button.firstChild);
+      }
+      button.appendChild(this.prettyPrintNodeAsXUL(crumb.node));
+      button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(crumb.node));
+    }
+  },
+
+  /**
+   * Update the breadcrumbs display when a new node is selected.
+   */
+  update: function BC_update()
+  {
+    this.inspector.hideNodeMenu();
+
+    let cmdDispatcher = this.chromeDoc.commandDispatcher;
+    this.hadFocus = (cmdDispatcher.focusedElement &&
+                     cmdDispatcher.focusedElement.parentNode == this.container);
+
+    if (!this.selection.isConnected()) {
+      this.cutAfter(-1); // remove all the crumbs
+      return;
+    }
+
+    if (!this.selection.isElementNode()) {
+      this.setCursor(-1); // no selection
+      return;
+    }
+
+    let idx = this.indexOf(this.selection.node);
+
+    // Is the node already displayed in the breadcrumbs?
+    if (idx > -1) {
+      // Yes. We select it.
+      this.setCursor(idx);
+    } else {
+      // No. Is the breadcrumbs display empty?
+      if (this.nodeHierarchy.length > 0) {
+        // No. We drop all the element that are not direct ancestors
+        // of the selection
+        let parent = this.DOMHelpers.getParentObject(this.selection.node);
+        let idx = this.getCommonAncestor(parent);
+        this.cutAfter(idx);
+      }
+      // we append the missing button between the end of the breadcrumbs display
+      // and the current node.
+      this.expand(this.selection.node);
+
+      // we select the current node button
+      idx = this.indexOf(this.selection.node);
+      this.setCursor(idx);
+    }
+    // Add the first child of the very last node of the breadcrumbs if possible.
+    this.ensureFirstChild();
+
+    // Make sure the selected node and its neighbours are visible.
+    this.scroll();
+
+    this.updateSelectors();
+  },
+}
+
+XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
+  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});
diff --git a/browser/devtools/inspector/CmdInspect.jsm b/browser/devtools/inspector/CmdInspect.jsm
new file mode 100644
index 00000000000..bde650c86aa
--- /dev/null
+++ b/browser/devtools/inspector/CmdInspect.jsm
@@ -0,0 +1,48 @@
+/* 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/. */
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+this.EXPORTED_SYMBOLS = [ ];
+
+Cu.import("resource:///modules/devtools/gcli.jsm");
+Cu.import('resource://gre/modules/XPCOMUtils.jsm');
+
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
+
+/**
+ * 'inspect' command
+ */
+gcli.addCommand({
+  name: "inspect",
+  description: gcli.lookup("inspectDesc"),
+  manual: gcli.lookup("inspectManual"),
+  params: [
+    {
+      name: "selector",
+      type: "node",
+      description: gcli.lookup("inspectNodeDesc"),
+      manual: gcli.lookup("inspectNodeManual")
+    }
+  ],
+  exec: function Command_inspect(args, context) {
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+    let node = args.selector;
+
+    let inspector = gDevTools.getPanelForTarget("inspector", target);
+    if (inspector && inspector.isReady) {
+      inspector.selection.setNode(node, "gcli");
+    } else {
+      let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+      toolbox.once("inspector-ready", function(event, panel) {
+        let inspector = gDevTools.getPanelForTarget("inspector", target);
+        inspector.selection.setNode(node, "gcli");
+      }.bind(this));
+    }
+  }
+});
diff --git a/browser/devtools/highlighter/highlighter.jsm b/browser/devtools/inspector/Highlighter.jsm
similarity index 64%
rename from browser/devtools/highlighter/highlighter.jsm
rename to browser/devtools/inspector/Highlighter.jsm
index e94d41bfa55..587b4978e2e 100644
--- a/browser/devtools/highlighter/highlighter.jsm
+++ b/browser/devtools/inspector/Highlighter.jsm
@@ -11,21 +11,10 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 
 this.EXPORTED_SYMBOLS = ["Highlighter"];
 
-const INSPECTOR_INVISIBLE_ELEMENTS = {
-  "head": true,
-  "base": true,
-  "basefont": true,
-  "isindex": true,
-  "link": true,
-  "meta": true,
-  "script": true,
-  "style": true,
-  "title": true,
-};
-
 const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
   // add ":visited" and ":link" after bug 713106 is fixed
 
@@ -39,22 +28,9 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  * API:
  *
  *   // Constructor and destructor.
- *   // @param aWindow - browser.xul window.
- *   Highlighter(aWindow);
+ *   Highlighter(aTab, aInspector)
  *   void destroy();
  *
- *   // Highlight a node.
- *   // @param aNode - node to highlight
- *   // @param aScroll - scroll to ensure the node is visible
- *   void highlight(aNode, aScroll);
- *
- *   // Get the selected node.
- *   DOMNode getNode();
- *
- *   // Lock and unlock the select node.
- *   void lock();
- *   void unlock();
- *
  *   // Show and hide the highlighter
  *   void show();
  *   void hide();
@@ -63,44 +39,27 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  *   // Redraw the highlighter if the visible portion of the node has changed.
  *   void invalidateSize(aScroll);
  *
- *   // Is a node highlightable.
- *   boolean isNodeHighlightable(aNode);
- *
- *   // Show/hide the outline and the infobar
- *   void showInfobar();
- *   void hideInfobar();
- *   void showOutline();
- *   void hideOutline();
- *
- *   // Add/Remove listeners
- *   // @param aEvent - event name
- *   // @param aListener - function callback
- *   void addListener(aEvent, aListener);
- *   void removeListener(aEvent, aListener);
- *
  * Events:
  *
  *   "closed" - Highlighter is closing
- *   "nodeselected" - A new node has been selected
  *   "highlighting" - Highlighter is highlighting
  *   "locked" - The selected node has been locked
  *   "unlocked" - The selected ndoe has been unlocked
- *   "pseudoclasstoggled" - A pseudo-class lock has changed on the selected node
  *
  * Structure:
- *  <stack id="highlighter-container">
- *    <box id="highlighter-outline-container">
- *      <box id="highlighter-outline" locked="true/false"/>
+ *  <stack class="highlighter-container">
+ *    <box class="highlighter-outline-container">
+ *      <box class="highlighter-outline" locked="true/false"/>
  *    </box>
- *    <box id="highlighter-controls">
- *      <box id="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
- *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-top"/>
- *        <hbox id="highlighter-nodeinfobar">
- *          <toolbarbutton id="highlighter-nodeinfobar-inspectbutton" class="highlighter-nodeinfobar-button"/>
- *          <hbox id="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
- *          <toolbarbutton id="highlighter-nodeinfobar-menu" class="highlighter-nodeinfobar-button">…</toolbarbutton>
+ *    <box class="highlighter-controls">
+ *      <box class="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
+ *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top"/>
+ *        <hbox class="highlighter-nodeinfobar">
+ *          <toolbarbutton class="highlighter-nodeinfobar-inspectbutton highlighter-nodeinfobar-button"/>
+ *          <hbox class="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
+ *          <toolbarbutton class="highlighter-nodeinfobar-menu highlighter-nodeinfobar-button">…</toolbarbutton>
  *        </hbox>
- *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-bottom"/>
+ *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom"/>
  *      </box>
  *    </box>
  *  </stack>
@@ -111,40 +70,54 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
 /**
  * Constructor.
  *
- * @param object aWindow
+ * @param aTarget The inspection target.
+ * @param aInspector Inspector panel.
+ * @param aToolbox The toolbox holding the inspector.
  */
-this.Highlighter = function Highlighter(aWindow)
+this.Highlighter = function Highlighter(aTarget, aInspector, aToolbox)
 {
-  this.chromeWin = aWindow;
-  this.tabbrowser = aWindow.gBrowser;
-  this.chromeDoc = aWindow.document;
-  this.browser = aWindow.gBrowser.selectedBrowser;
-  this.events = {};
+  this.target = aTarget;
+  this.tab = aTarget.tab;
+  this.toolbox = aToolbox;
+  this.browser = this.tab.linkedBrowser;
+  this.chromeDoc = this.tab.ownerDocument;
+  this.chromeWin = this.chromeDoc.defaultView;
+  this.inspector = aInspector
+
+  new EventEmitter(this);
 
   this._init();
 }
 
 Highlighter.prototype = {
+  get selection() {
+    return this.inspector.selection;
+  },
+
   _init: function Highlighter__init()
   {
+    this.unlock = this.unlock.bind(this);
+    this.updateInfobar = this.updateInfobar.bind(this);
+    this.highlight = this.highlight.bind(this);
+
     let stack = this.browser.parentNode;
     this.win = this.browser.contentWindow;
     this._highlighting = false;
 
     this.highlighterContainer = this.chromeDoc.createElement("stack");
-    this.highlighterContainer.id = "highlighter-container";
+    this.highlighterContainer.className = "highlighter-container";
 
     this.outline = this.chromeDoc.createElement("box");
-    this.outline.id = "highlighter-outline";
+    this.outline.className = "highlighter-outline";
 
     let outlineContainer = this.chromeDoc.createElement("box");
     outlineContainer.appendChild(this.outline);
-    outlineContainer.id = "highlighter-outline-container";
+    outlineContainer.className = "highlighter-outline-container";
 
     // The controlsBox will host the different interactive
     // elements of the highlighter (buttons, toolbars, ...).
     let controlsBox = this.chromeDoc.createElement("box");
-    controlsBox.id = "highlighter-controls";
+    controlsBox.className = "highlighter-controls";
     this.highlighterContainer.appendChild(outlineContainer);
     this.highlighterContainer.appendChild(controlsBox);
 
@@ -158,8 +131,23 @@ Highlighter.prototype = {
 
     this.unlock();
 
+    this.selection.on("new-node", this.highlight);
+    this.selection.on("new-node", this.updateInfobar);
+    this.selection.on("detached", this.highlight);
+    this.selection.on("pseudoclass", this.updateInfobar);
+    this.selection.on("attribute-changed", this.updateInfobar);
+
+    this.onToolSelected = function(event, id) {
+      if (id != "inspector") {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }.bind(this);
+    this.toolbox.on("select", this.onToolSelected);
+
     this.hidden = true;
-    this.show();
+    this.highlight();
   },
 
   /**
@@ -167,6 +155,18 @@ Highlighter.prototype = {
    */
   destroy: function Highlighter_destroy()
   {
+    this.inspectButton.removeEventListener("command", this.unlock);
+    this.inspectButton = null;
+
+    this.toolbox.off("select", this.onToolSelected);
+    this.toolbox = null;
+
+    this.selection.off("new-node", this.highlight);
+    this.selection.off("new-node", this.updateInfobar);
+    this.selection.off("detached", this.highlight);
+    this.selection.off("pseudoclass", this.updateInfobar);
+    this.selection.off("attribute-changed", this.updateInfobar);
+
     this.detachMouseListeners();
     this.detachPageListeners();
 
@@ -177,7 +177,6 @@ Highlighter.prototype = {
     this._highlightRect = null;
     this._highlighting = false;
     this.outline = null;
-    this.node = null;
     this.nodeInfo = null;
     this.highlighterContainer.parentNode.removeChild(this.highlighterContainer);
     this.highlighterContainer = null;
@@ -187,92 +186,59 @@ Highlighter.prototype = {
     this.chromeWin = null;
     this.tabbrowser = null;
 
-    this.emitEvent("closed");
-    this.removeAllListeners();
+    this.emit("closed");
   },
 
   /**
    * Show the outline, and select a node.
-   * If no node is specified, the previous selected node is highlighted if any.
-   * If no node was selected, the root element is selected.
-   *
-   * @param aNode [optional] - The node to be selected.
-   * @param aScroll [optional] boolean
-   *        Should we scroll to ensure that the selected node is visible.
    */
-  highlight: function Highlighter_highlight(aNode, aScroll)
+  highlight: function Highlighter_highlight()
   {
-    if (this.hidden)
+    if (this.selection.reason != "highlighter") {
+      this.lock();
+    }
+
+    let canHighlightNode = this.selection.isNode() &&
+                          this.selection.isConnected() &&
+                          this.selection.isElementNode();
+
+    if (canHighlightNode) {
       this.show();
-
-    let oldNode = this.node;
-
-    if (!aNode) {
-      if (!this.node)
-        this.node = this.win.document.documentElement;
-    } else {
-      this.node = aNode;
-    }
-
-    if (oldNode !== this.node) {
       this.updateInfobar();
+      this.invalidateSize();
+      if (!this._highlighting &&
+          this.selection.reason != "highlighter") {
+        LayoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
+      }
+    } else {
+      this.hide();
     }
-
-    this.invalidateSize(!!aScroll);
-
-    if (oldNode !== this.node) {
-      this.emitEvent("nodeselected");
-    }
-  },
-
-  /**
-   * Notify that a pseudo-class lock was toggled on the highlighted element
-   *
-   * @param aPseudo - The pseudo-class to toggle, e.g. ":hover".
-   */
-  pseudoClassLockToggled: function Highlighter_pseudoClassLockToggled(aPseudo)
-  {
-    this.emitEvent("pseudoclasstoggled", [aPseudo]);
-    this.updateInfobar();
-    this.moveInfobar();
   },
 
   /**
    * Update the highlighter size and position.
    */
-  invalidateSize: function Highlighter_invalidateSize(aScroll)
+  invalidateSize: function Highlighter_invalidateSize()
   {
-    let rect = null;
+    let canHiglightNode = this.selection.isNode() &&
+                          this.selection.isConnected() &&
+                          this.selection.isElementNode();
 
-    if (this.node && this.isNodeHighlightable(this.node)) {
-
-      if (aScroll &&
-          this.node.scrollIntoView) { // XUL elements don't have such method
-        this.node.scrollIntoView();
-      }
-      let clientRect = this.node.getBoundingClientRect();
-      rect = LayoutHelpers.getDirtyRect(this.node);
-    }
+    if (!canHiglightNode)
+      return;
 
+    let clientRect = this.selection.node.getBoundingClientRect();
+    let rect = LayoutHelpers.getDirtyRect(this.selection.node);
     this.highlightRectangle(rect);
 
     this.moveInfobar();
 
     if (this._highlighting) {
       this.showOutline();
-      this.emitEvent("highlighting");
+      this.emit("highlighting");
     }
   },
 
-  /**
-   * Returns the selected node.
-   *
-   * @returns node
-   */
-  getNode: function() {
-    return this.node;
-  },
-
   /**
    * Show the highlighter if it has been hidden.
    */
@@ -315,7 +281,7 @@ Highlighter.prototype = {
     this.nodeInfo.container.setAttribute("locked", "true");
     this.detachMouseListeners();
     this.locked = true;
-    this.emitEvent("locked");
+    this.emit("locked");
   },
 
   /**
@@ -328,28 +294,12 @@ Highlighter.prototype = {
     this.nodeInfo.container.removeAttribute("locked");
     this.attachMouseListeners();
     this.locked = false;
-    this.showOutline();
-    this.emitEvent("unlocked");
-  },
-
-  /**
-   * Is the specified node highlightable?
-   *
-   * @param nsIDOMNode aNode
-   *        the DOM element in question
-   * @returns boolean
-   *          True if the node is highlightable or false otherwise.
-   */
-  isNodeHighlightable: function Highlighter_isNodeHighlightable(aNode)
-  {
-    if (!LayoutHelpers.isNodeConnected(aNode)) {
-      return false;
+    this.chromeWin.focus();
+    if (this.selection.isElementNode() &&
+        this.selection.isConnected()) {
+      this.showOutline();
     }
-    if (aNode.nodeType != aNode.ELEMENT_NODE) {
-      return false;
-    }
-    let nodeName = aNode.nodeName.toLowerCase();
-    return !INSPECTOR_INVISIBLE_ELEMENTS[nodeName];
+    this.emit("unlocked");
   },
 
   /**
@@ -387,19 +337,19 @@ Highlighter.prototype = {
   /**
    * 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"/>
+   * <box class="highlighter-nodeinfobar-container">
+   *   <box class="Highlighter-nodeinfobar-arrow-top"/>
+   *   <hbox class="highlighter-nodeinfobar">
+   *     <toolbarbutton class="highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"/>
+   *     <hbox class="highlighter-nodeinfobar-text">
+   *       <xhtml:span class="highlighter-nodeinfobar-tagname"/>
+   *       <xhtml:span class="highlighter-nodeinfobar-id"/>
+   *       <xhtml:span class="highlighter-nodeinfobar-classes"/>
+   *       <xhtml:span class="highlighter-nodeinfobar-pseudo-classes"/>
    *     </hbox>
-   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-menu"/>
+   *     <toolbarbutton class="highlighter-nodeinfobar-button highlighter-nodeinfobar-menu"/>
    *   </hbox>
-   *   <box id="Highlighter-nodeinfobar-arrow-bottom"/>
+   *   <box class="Highlighter-nodeinfobar-arrow-bottom"/>
    * </box>
    *
    * @param nsIDOMElement aParent
@@ -408,90 +358,71 @@ Highlighter.prototype = {
   buildInfobar: function Highlighter_buildInfobar(aParent)
   {
     let container = this.chromeDoc.createElement("box");
-    container.id = "highlighter-nodeinfobar-container";
+    container.className = "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);
+    nodeInfobar.className = "highlighter-nodeinfobar";
 
     let arrowBoxTop = this.chromeDoc.createElement("box");
-    arrowBoxTop.className = "highlighter-nodeinfobar-arrow";
-    arrowBoxTop.id = "highlighter-nodeinfobar-arrow-top";
+    arrowBoxTop.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top";
 
     let arrowBoxBottom = this.chromeDoc.createElement("box");
-    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
-    arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
+    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom";
 
     let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    tagNameLabel.id = "highlighter-nodeinfobar-tagname";
+    tagNameLabel.className = "highlighter-nodeinfobar-tagname";
 
     let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    idLabel.id = "highlighter-nodeinfobar-id";
+    idLabel.className = "highlighter-nodeinfobar-id";
 
     let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    classesBox.id = "highlighter-nodeinfobar-classes";
+    classesBox.className = "highlighter-nodeinfobar-classes";
 
     let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    pseudoClassesBox.id = "highlighter-nodeinfobar-pseudo-classes";
+    pseudoClassesBox.className = "highlighter-nodeinfobar-pseudo-classes";
 
     // Add some content to force a better boundingClientRect down below.
     pseudoClassesBox.textContent = "&nbsp;";
 
     // Create buttons
 
-    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");
+    this.inspectButton = this.chromeDoc.createElement("toolbarbutton");
+    this.inspectButton.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"
+    let toolbarInspectButton = this.inspector.panelDoc.getElementById("inspector-inspect-toolbutton");
+    this.inspectButton.setAttribute("tooltiptext", toolbarInspectButton.getAttribute("tooltiptext"));
+    this.inspectButton.addEventListener("command", this.unlock);
 
     let nodemenu = this.chromeDoc.createElement("toolbarbutton");
     nodemenu.setAttribute("type", "menu");
-    nodemenu.id = "highlighter-nodeinfobar-menu";
-    nodemenu.className = "highlighter-nodeinfobar-button"
+    nodemenu.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-menu"
     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";
+    nodemenu.onclick = function() {
+      this.inspector.showNodeMenu(nodemenu, "after_start");
+    }.bind(this);
 
-    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);
-
-    // <hbox id="highlighter-nodeinfobar-text"/>
+    // <hbox class="highlighter-nodeinfobar-text"/>
     let texthbox = this.chromeDoc.createElement("hbox");
-    texthbox.id = "highlighter-nodeinfobar-text";
+    texthbox.className = "highlighter-nodeinfobar-text";
     texthbox.setAttribute("align", "center");
     texthbox.setAttribute("flex", "1");
 
+    texthbox.addEventListener("mousedown", function(aEvent) {
+      // On click, show the node:
+      if (this.selection.isElementNode()) {
+        LayoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
+      }
+    }.bind(this), true);
+
     texthbox.appendChild(tagNameLabel);
     texthbox.appendChild(idLabel);
     texthbox.appendChild(classesBox);
     texthbox.appendChild(pseudoClassesBox);
 
-    nodeInfobar.appendChild(inspect);
+    nodeInfobar.appendChild(this.inspectButton);
     nodeInfobar.appendChild(texthbox);
     nodeInfobar.appendChild(nodemenu);
 
@@ -513,30 +444,6 @@ Highlighter.prototype = {
     };
   },
 
-  /**
-   * Create the menuitems for toggling the selection's pseudo-class state
-   *
-   * @returns DocumentFragment. The menuitems for toggling pseudo-classes.
-   */
-  buildPseudoClassMenu: function IUI_buildPseudoClassesMenu()
-  {
-    let fragment = this.chromeDoc.createDocumentFragment();
-    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
-      let pseudo = PSEUDO_CLASSES[i];
-      let item = this.chromeDoc.createElement("menuitem");
-      item.id = "highlighter-pseudo-class-menuitem-" + pseudo;
-      item.setAttribute("type", "checkbox");
-      item.setAttribute("label", pseudo);
-      item.className = "highlighter-pseudo-class-menuitem";
-      item.setAttribute("checked", DOMUtils.hasPseudoClassLock(this.node,
-                        pseudo));
-      item.addEventListener("command",
-                            this.pseudoClassLockToggled.bind(this, pseudo), false);
-      fragment.appendChild(item);
-    }
-    return fragment;
-  },
-
   /**
    * Highlight a rectangular region.
    *
@@ -599,21 +506,31 @@ Highlighter.prototype = {
    */
   updateInfobar: function Highlighter_updateInfobar()
   {
+    if (!this.selection.isElementNode()) {
+      this.nodeInfo.tagNameLabel.textContent = "";
+      this.nodeInfo.idLabel.textContent = "";
+      this.nodeInfo.classesBox.textContent = "";
+      this.nodeInfo.pseudoClassesBox.textContent = "";
+      return;
+    }
+
+    let node = this.selection.node;
+
     // Tag name
-    this.nodeInfo.tagNameLabel.textContent = this.node.tagName;
+    this.nodeInfo.tagNameLabel.textContent = node.tagName;
 
     // ID
-    this.nodeInfo.idLabel.textContent = this.node.id ? "#" + this.node.id : "";
+    this.nodeInfo.idLabel.textContent = node.id ? "#" + node.id : "";
 
     // Classes
     let classes = this.nodeInfo.classesBox;
 
-    classes.textContent = this.node.classList.length ?
-                            "." + Array.join(this.node.classList, ".") : "";
+    classes.textContent = node.classList.length ?
+                            "." + Array.join(node.classList, ".") : "";
 
     // Pseudo-classes
     let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(this.node, pseudo);
+      return DOMUtils.hasPseudoClassLock(node, pseudo);
     }, this);
 
     let pseudoBox = this.nodeInfo.pseudoClassesBox;
@@ -697,46 +614,6 @@ Highlighter.prototype = {
       .fullZoom;
   },
 
-  /////////////////////////////////////////////////////////////////////////
-  //// Event Emitter Mechanism
-
-  addListener: function Highlighter_addListener(aEvent, aListener)
-  {
-    if (!(aEvent in this.events))
-      this.events[aEvent] = [];
-    this.events[aEvent].push(aListener);
-  },
-
-  removeListener: function Highlighter_removeListener(aEvent, aListener)
-  {
-    if (!(aEvent in this.events))
-      return;
-    let idx = this.events[aEvent].indexOf(aListener);
-    if (idx > -1)
-      this.events[aEvent].splice(idx, 1);
-  },
-
-  emitEvent: function Highlighter_emitEvent(aEvent, aArgv)
-  {
-    if (!(aEvent in this.events))
-      return;
-
-    let listeners = this.events[aEvent];
-    let highlighter = this;
-    listeners.forEach(function(aListener) {
-      try {
-        aListener.apply(highlighter, aArgv);
-      } catch(e) {}
-    });
-  },
-
-  removeAllListeners: function Highlighter_removeAllIsteners()
-  {
-    for (let event in this.events) {
-      delete this.events[event];
-    }
-  },
-
   /////////////////////////////////////////////////////////////////////////
   //// Event Handling
 
@@ -865,6 +742,8 @@ Highlighter.prototype = {
     if (aEvent.button == 0) {
       let win = aEvent.target.ownerDocument.defaultView;
       this.lock();
+      let node = this.selection.node;
+      this.selection.setNode(node, "highlighter-lock");
       win.focus();
       aEvent.preventDefault();
       aEvent.stopPropagation();
@@ -886,8 +765,8 @@ Highlighter.prototype = {
     if (doc && doc != this.chromeDoc) {
       let element = LayoutHelpers.getElementFromPoint(aEvent.target.ownerDocument,
         aEvent.clientX, aEvent.clientY);
-      if (element && element != this.node) {
-        this.highlight(element);
+      if (element && element != this.selection.node) {
+        this.selection.setNode(element, "highlighter");
       }
     }
   },
diff --git a/browser/devtools/inspector/InspectorDefinition.jsm b/browser/devtools/inspector/InspectorDefinition.jsm
new file mode 100644
index 00000000000..97a9a683ea6
--- /dev/null
+++ b/browser/devtools/inspector/InspectorDefinition.jsm
@@ -0,0 +1,45 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = ["InspectorDefinition"];
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+const properties = "chrome://browser/locale/devtools/inspector.properties";
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyGetter(this, "osString",
+  function() Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
+
+XPCOMUtils.defineLazyGetter(this, "Strings",
+  function() Services.strings.createBundle(properties));
+
+function l10n(aName) Strings.GetStringFromName(aName);
+
+Cu.import("resource://gre/modules/Services.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "InspectorPanel", "resource:///modules/devtools/InspectorPanel.jsm");
+
+this.InspectorDefinition = {
+  id: "inspector",
+  accesskey: l10n("inspector.accesskey"),
+  key: l10n("inspector.commandkey"),
+  ordinal: 2,
+  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
+  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
+  url: "chrome://browser/content/devtools/inspector/inspector.xul",
+  label: l10n("inspector.label"),
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new InspectorPanel(iframeWindow, toolbox);
+  }
+};
diff --git a/browser/devtools/inspector/InspectorPanel.jsm b/browser/devtools/inspector/InspectorPanel.jsm
new file mode 100644
index 00000000000..1f45c547441
--- /dev/null
+++ b/browser/devtools/inspector/InspectorPanel.jsm
@@ -0,0 +1,536 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cc = Components.classes;
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+const Cr = Components.results;
+
+this.EXPORTED_SYMBOLS = ["InspectorPanel"];
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/MarkupView.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource:///modules/devtools/Selection.jsm");
+Cu.import("resource:///modules/devtools/Breadcrumbs.jsm");
+Cu.import("resource:///modules/devtools/Highlighter.jsm");
+Cu.import("resource:///modules/devtools/Sidebar.jsm");
+
+const LAYOUT_CHANGE_TIMER = 250;
+
+/**
+ * Represents an open instance of the Inspector for a tab.
+ * The inspector controls the highlighter, the breadcrumbs,
+ * the markup view, and the sidebar (computed view, rule view
+ * and layout view).
+ */
+this.InspectorPanel = function InspectorPanel(iframeWindow, toolbox) {
+  this._toolbox = toolbox;
+  this._target = toolbox._target;
+
+  if (this.target.isRemote) {
+    throw "Unsupported target";
+  }
+
+  this.tabTarget = (this.target.tab != null);
+  this.winTarget = (this.target.window != null);
+
+  new EventEmitter(this);
+
+  this.preventNavigateAway = this.preventNavigateAway.bind(this);
+  this.onNavigatedAway = this.onNavigatedAway.bind(this);
+  this.target.on("will-navigate", this.preventNavigateAway);
+  this.target.on("navigate", this.onNavigatedAway);
+
+  this.panelDoc = iframeWindow.document;
+  this.panelWin = iframeWindow;
+  this.panelWin.inspector = this;
+
+  this.nodemenu = this.panelDoc.getElementById("inspector-node-popup");
+  this.lastNodemenuItem = this.nodemenu.lastChild;
+  this._setupNodeMenu = this._setupNodeMenu.bind(this);
+  this._resetNodeMenu = this._resetNodeMenu.bind(this);
+  this.nodemenu.addEventListener("popupshowing", this._setupNodeMenu, true);
+  this.nodemenu.addEventListener("popuphiding", this._resetNodeMenu, true);
+
+  // Create an empty selection
+  this._selection = new Selection();
+  this.onNewSelection = this.onNewSelection.bind(this);
+  this.selection.on("new-node", this.onNewSelection);
+
+  this.breadcrumbs = new HTMLBreadcrumbs(this);
+
+  if (this.tabTarget) {
+    this.browser = this.target.tab.linkedBrowser;
+    this.scheduleLayoutChange = this.scheduleLayoutChange.bind(this);
+    this.browser.addEventListener("resize", this.scheduleLayoutChange, true);
+
+    this.highlighter = new Highlighter(this.target, this, this._toolbox);
+    let button = this.panelDoc.getElementById("inspector-inspect-toolbutton");
+    button.hidden = false;
+    this.updateInspectorButton = function() {
+      if (this.highlighter.locked) {
+        button.removeAttribute("checked");
+      } else {
+        button.setAttribute("checked", "true");
+      }
+    }.bind(this);
+    this.highlighter.on("locked", this.updateInspectorButton);
+    this.highlighter.on("unlocked", this.updateInspectorButton);
+  }
+
+  this._initMarkup();
+  this.isReady = false;
+
+  this.once("markuploaded", function() {
+    this.isReady = true;
+
+    // All the components are initialized. Let's select a node.
+    if (this.tabTarget) {
+      let root = this.browser.contentDocument.documentElement;
+      this._selection.setNode(root);
+    }
+    if (this.winTarget) {
+      let root = this.target.window.document.documentElement;
+      this._selection.setNode(root);
+    }
+
+    if (this.highlighter) {
+      this.highlighter.unlock();
+    }
+
+    this.emit("ready");
+  }.bind(this));
+
+  this.setupSidebar();
+}
+
+InspectorPanel.prototype = {
+  /**
+   * Selection object (read only)
+   */
+  get selection() {
+    return this._selection;
+  },
+
+  /**
+   * Target getter.
+   */
+  get target() {
+    return this._target;
+  },
+
+  /**
+   * Target setter.
+   */
+  set target(value) {
+    this._target = value;
+  },
+
+  /**
+   * Expose gViewSourceUtils so that other tools can make use of them.
+   */
+  get viewSourceUtils() {
+    return this.panelWin.gViewSourceUtils;
+  },
+
+  /**
+   * Indicate that a tool has modified the state of the page.  Used to
+   * decide whether to show the "are you sure you want to navigate"
+   * notification.
+   */
+  markDirty: function InspectorPanel_markDirty() {
+    this.isDirty = true;
+  },
+
+  /**
+   * Build the sidebar.
+   */
+  setupSidebar: function InspectorPanel_setupSidebar() {
+    let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
+    this.sidebar = new ToolSidebar(tabbox, this);
+
+    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+
+    this._setDefaultSidebar = function(event, toolId) {
+      Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
+    }.bind(this);
+
+    this.sidebar.on("select", this._setDefaultSidebar);
+
+    this.sidebar.addTab("ruleview",
+                        "chrome://browser/content/devtools/cssruleview.xul",
+                        "ruleview" == defaultTab);
+
+    this.sidebar.addTab("computedview",
+                        "chrome://browser/content/devtools/csshtmltree.xul",
+                        "computedview" == defaultTab);
+
+    this.sidebar.addTab("layoutview",
+                        "chrome://browser/content/devtools/layoutview/view.xhtml",
+                        "layoutview" == defaultTab);
+
+    this.sidebar.show();
+  },
+
+  /**
+   * Reset the inspector on navigate away.
+   */
+  onNavigatedAway: function InspectorPanel_onNavigatedAway(event, newWindow) {
+    this.selection.setNode(null);
+    this._destroyMarkup();
+    this.isDirty = false;
+    let self = this;
+    newWindow.addEventListener("DOMContentLoaded", function onDOMReady() {
+      newWindow.removeEventListener("DOMContentLoaded", onDOMReady, true);;
+      if (!self.selection.node) {
+        self.selection.setNode(newWindow.document.documentElement);
+      }
+      self._initMarkup();
+    }, true);
+  },
+
+  /**
+   * Show a message if the inspector is dirty.
+   */
+  preventNavigateAway: function InspectorPanel_preventNavigateAway(event, request) {
+    if (!this.isDirty) {
+      return;
+    }
+
+    request.suspend();
+
+    let notificationBox = this._toolbox.getNotificationBox();
+    let notification = notificationBox.
+      getNotificationWithValue("inspector-page-navigation");
+
+    if (notification) {
+      notificationBox.removeNotification(notification, true);
+    }
+
+    let cancelRequest = function onCancelRequest() {
+      if (request) {
+        request.cancel(Cr.NS_BINDING_ABORTED);
+        request.resume(); // needed to allow the connection to be cancelled.
+        request = null;
+      }
+    };
+
+    let eventCallback = function onNotificationCallback(event) {
+      if (event == "removed") {
+        cancelRequest();
+      }
+    };
+
+    let buttons = [
+      {
+        id: "inspector.confirmNavigationAway.buttonLeave",
+        label: this.strings.GetStringFromName("confirmNavigationAway.buttonLeave"),
+        accessKey: this.strings.GetStringFromName("confirmNavigationAway.buttonLeaveAccesskey"),
+        callback: function onButtonLeave() {
+          if (request) {
+            request.resume();
+            request = null;
+            return true;
+          }
+          return false;
+        }.bind(this),
+      },
+      {
+        id: "inspector.confirmNavigationAway.buttonStay",
+        label: this.strings.GetStringFromName("confirmNavigationAway.buttonStay"),
+        accessKey: this.strings.GetStringFromName("confirmNavigationAway.buttonStayAccesskey"),
+        callback: cancelRequest
+      },
+    ];
+
+    let message = this.strings.GetStringFromName("confirmNavigationAway.message2");
+
+    notification = notificationBox.appendNotification(message,
+      "inspector-page-navigation", "chrome://browser/skin/Info.png",
+      notificationBox.PRIORITY_WARNING_HIGH, buttons, eventCallback);
+
+    // Make sure this not a transient notification, to avoid the automatic
+    // transient notification removal.
+    notification.persistence = -1;
+  },
+
+  /**
+   * When a new node is selected.
+   */
+  onNewSelection: function InspectorPanel_onNewSelection() {
+    this.cancelLayoutChange();
+  },
+
+  /**
+   * Destroy the inspector.
+   */
+  destroy: function InspectorPanel__destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this.cancelLayoutChange();
+    this._destroyed = true;
+
+    this._toolbox = null;
+
+    if (this.browser) {
+      this.browser.removeEventListener("resize", this.scheduleLayoutChange, true);
+      this.browser = null;
+    }
+
+    this.target.off("will-navigate", this.preventNavigateAway);
+    this.target.off("navigate", this.onNavigatedAway);
+
+    if (this.highlighter) {
+      this.highlighter.off("locked", this.updateInspectorButton);
+      this.highlighter.off("unlocked", this.updateInspectorButton);
+      this.highlighter.destroy();
+    }
+
+    this.sidebar.off("select", this._setDefaultSidebar);
+    this.sidebar.destroy();
+    this.sidebar = null;
+
+    this.nodemenu.removeEventListener("popupshowing", this._setupNodeMenu, true);
+    this.nodemenu.removeEventListener("popuphiding", this._resetNodeMenu, true);
+    this.breadcrumbs.destroy();
+    this.selection.off("new-node", this.onNewSelection);
+    this._destroyMarkup();
+    this._selection.destroy();
+    this._selection = null;
+    this.panelWin.inspector = null;
+    this.target = null;
+    this.panelDoc = null;
+    this.panelWin = null;
+    this.breadcrumbs = null;
+    this.lastNodemenuItem = null;
+    this.nodemenu = null;
+    this.highlighter = null;
+  },
+
+  /**
+   * Show the node menu.
+   */
+  showNodeMenu: function InspectorPanel_showNodeMenu(aButton, aPosition, aExtraItems) {
+    if (aExtraItems) {
+      for (let item of aExtraItems) {
+        this.nodemenu.appendChild(item);
+      }
+    }
+    this.nodemenu.openPopup(aButton, aPosition, 0, 0, true, false);
+  },
+
+  hideNodeMenu: function InspectorPanel_hideNodeMenu() {
+    this.nodemenu.hidePopup();
+  },
+
+  /**
+   * Disable the delete item if needed. Update the pseudo classes.
+   */
+  _setupNodeMenu: function InspectorPanel_setupNodeMenu() {
+    // Set the pseudo classes
+    for (let name of ["hover", "active", "focus"]) {
+      let menu = this.panelDoc.getElementById("node-menu-pseudo-" + name);
+      let checked = DOMUtils.hasPseudoClassLock(this.selection.node, ":" + name);
+      menu.setAttribute("checked", checked);
+    }
+
+    // Disable delete item if needed
+    let deleteNode = this.panelDoc.getElementById("node-menu-delete");
+    if (this.selection.isRoot()) {
+      deleteNode.setAttribute("disabled", "true");
+    } else {
+      deleteNode.removeAttribute("disabled");
+    }
+  },
+
+  _resetNodeMenu: function InspectorPanel_resetNodeMenu() {
+    // Remove any extra items
+    while (this.lastNodemenuItem.nextSibling) {
+      let toDelete = this.lastNodemenuItem.nextSibling;
+      toDelete.parentNode.removeChild(toDelete);
+    }
+  },
+
+  _initMarkup: function InspectorPanel_initMarkup() {
+    let doc = this.panelDoc;
+
+    this._markupBox = doc.getElementById("markup-box");
+
+    // create tool iframe
+    this._markupFrame = doc.createElement("iframe");
+    this._markupFrame.setAttribute("flex", "1");
+    this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
+    this._markupFrame.setAttribute("context", "inspector-node-popup");
+
+    // This is needed to enable tooltips inside the iframe document.
+    this._boundMarkupFrameLoad = function InspectorPanel_initMarkupPanel_onload() {
+      this._markupFrame.contentWindow.focus();
+      this._onMarkupFrameLoad();
+    }.bind(this);
+    this._markupFrame.addEventListener("load", this._boundMarkupFrameLoad, true);
+
+    this._markupBox.setAttribute("hidden", true);
+    this._markupBox.appendChild(this._markupFrame);
+    this._markupFrame.setAttribute("src", "chrome://browser/content/devtools/markup-view.xhtml");
+  },
+
+  _onMarkupFrameLoad: function InspectorPanel__onMarkupFrameLoad() {
+    this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
+    delete this._boundMarkupFrameLoad;
+
+    this._markupBox.removeAttribute("hidden");
+
+    let controllerWindow;
+    if (this.tabTarget) {
+      controllerWindow = this.target.tab.ownerDocument.defaultView;
+    } else if (this.winTarget) {
+      controllerWindow = this.target.window;
+    }
+    this.markup = new MarkupView(this, this._markupFrame, controllerWindow);
+
+    this.emit("markuploaded");
+  },
+
+  _destroyMarkup: function InspectorPanel__destroyMarkup() {
+    if (this._boundMarkupFrameLoad) {
+      this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
+      delete this._boundMarkupFrameLoad;
+    }
+
+    if (this.markup) {
+      this.markup.destroy();
+      delete this.markup;
+    }
+
+    if (this._markupFrame) {
+      this._markupFrame.parentNode.removeChild(this._markupFrame);
+      delete this._markupFrame;
+    }
+  },
+
+  /**
+   * Toggle a pseudo class.
+   */
+  togglePseudoClass: function InspectorPanel_togglePseudoClass(aPseudo) {
+    if (this.selection.isElementNode()) {
+      if (DOMUtils.hasPseudoClassLock(this.selection.node, aPseudo)) {
+        this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
+          DOMUtils.removePseudoClassLock(crumb.node, aPseudo);
+        });
+      } else {
+        let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
+        let node = this.selection.node;
+        do {
+          DOMUtils.addPseudoClassLock(node, aPseudo);
+          node = node.parentNode;
+        } while (hierarchical && node.parentNode)
+      }
+    }
+    this.selection.emit("pseudoclass");
+  },
+
+  /**
+   * Copy the innerHTML of the selected Node to the clipboard.
+   */
+  copyInnerHTML: function InspectorPanel_copyInnerHTML()
+  {
+    if (!this.selection.isNode()) {
+      return;
+    }
+    let toCopy = this.selection.node.innerHTML;
+    if (toCopy) {
+      clipboardHelper.copyString(toCopy);
+    }
+  },
+
+  /**
+   * Copy the outerHTML of the selected Node to the clipboard.
+   */
+  copyOuterHTML: function InspectorPanel_copyOuterHTML()
+  {
+    if (!this.selection.isNode()) {
+      return;
+    }
+    let toCopy = this.selection.node.outerHTML;
+    if (toCopy) {
+      clipboardHelper.copyString(toCopy);
+    }
+  },
+
+  /**
+   * Delete the selected node.
+   */
+  deleteNode: function IUI_deleteNode() {
+    if (!this.selection.isNode() ||
+         this.selection.isRoot()) {
+      return;
+    }
+
+    let toDelete = this.selection.node;
+
+    let parent = this.selection.node.parentNode;
+
+    // If the markup panel is active, use the markup panel to delete
+    // the node, making this an undoable action.
+    if (this.markup) {
+      this.markup.deleteNode(toDelete);
+    } else {
+      // remove the node from content
+      parent.removeChild(toDelete);
+    }
+  },
+
+  /**
+   * Schedule a low-priority change event for things like paint
+   * and resize.
+   */
+  scheduleLayoutChange: function Inspector_scheduleLayoutChange()
+  {
+    if (this._timer) {
+      return null;
+    }
+    this._timer = this.panelWin.setTimeout(function() {
+      this.emit("layout-change");
+      this._timer = null;
+    }.bind(this), LAYOUT_CHANGE_TIMER);
+  },
+
+  /**
+   * Cancel a pending low-priority change event if any is
+   * scheduled.
+   */
+  cancelLayoutChange: function Inspector_cancelLayoutChange()
+  {
+    if (this._timer) {
+      this.panelWin.clearTimeout(this._timer);
+      delete this._timer;
+    }
+  },
+
+}
+
+/////////////////////////////////////////////////////////////////////////
+//// Initializers
+
+XPCOMUtils.defineLazyGetter(InspectorPanel.prototype, "strings",
+  function () {
+    return Services.strings.createBundle(
+            "chrome://browser/locale/devtools/inspector.properties");
+  });
+
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+  return Cc["@mozilla.org/widget/clipboardhelper;1"].
+    getService(Ci.nsIClipboardHelper);
+});
+
+
+XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
+  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});
diff --git a/browser/devtools/inspector/Makefile.in b/browser/devtools/inspector/Makefile.in
new file mode 100644
index 00000000000..02dcc9f605a
--- /dev/null
+++ b/browser/devtools/inspector/Makefile.in
@@ -0,0 +1,18 @@
+#
+# 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/.
+
+DEPTH		= @DEPTH@
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+TEST_DIRS += test
+
+include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools/
diff --git a/browser/devtools/inspector/Selection.jsm b/browser/devtools/inspector/Selection.jsm
new file mode 100644
index 00000000000..a5cbf9020b2
--- /dev/null
+++ b/browser/devtools/inspector/Selection.jsm
@@ -0,0 +1,230 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cu = Components.utils;
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+this.EXPORTED_SYMBOLS = ["Selection"];
+
+/**
+ * API
+ *
+ *   new Selection(node=null, track={attributes,detached});
+ *   destroy()
+ *   node (readonly)
+ *   setNode(node, origin="unknown")
+ *
+ * Helpers:
+ *
+ *   window
+ *   document
+ *   isRoot()
+ *   isNode()
+ *   isHTMLNode()
+ *
+ * Check the nature of the node:
+ *
+ *   isElementNode()
+ *   isAttributeNode()
+ *   isTextNode()
+ *   isCDATANode()
+ *   isEntityRefNode()
+ *   isEntityNode()
+ *   isProcessingInstructionNode()
+ *   isCommentNode()
+ *   isDocumentNode()
+ *   isDocumentTypeNode()
+ *   isDocumentFragmentNode()
+ *   isNotationNode()
+ *
+ * Events:
+ *   "new-node" when the inner node changed
+ *   "attribute-changed" when an attribute is changed (only if tracked)
+ *   "detached" when the node (or one of its parents) is removed from the document (only if tracked)
+ *   "reparented" when the node (or one of its parents) is moved under a different node (only if tracked)
+ */
+
+/**
+ * A Selection object. Hold a reference to a node.
+ * Includes some helpers, fire some helpful events.
+ *
+ * @param node Inner node.
+ *    Can be null. Can be (un)set in the future via the "node" property;
+ * @param trackAttribute Tell if events should be fired when the attributes of
+ *    the ndoe change.
+ *
+ */
+this.Selection = function Selection(node=null, track={attributes:true,detached:true}) {
+  new EventEmitter(this);
+  this._onMutations = this._onMutations.bind(this);
+  this.track = track;
+  this.setNode(node);
+}
+
+Selection.prototype = {
+  _node: null,
+
+  _onMutations: function(mutations) {
+    let attributeChange = false;
+    let detached = false;
+    for (let m of mutations) {
+      if (!attributeChange && m.type == "attributes") {
+        attributeChange = true;
+      }
+      if (m.type == "childList") {
+        if (!detached && !this.isConnected()) {
+          detached = true;
+        }
+      }
+    }
+
+    if (attributeChange)
+      this.emit("attribute-changed");
+    if (detached)
+      this.emit("detached");
+  },
+
+  _attachEvents: function SN__attachEvents() {
+    if (!this.window || !this.isNode() || !this.track) {
+      return;
+    }
+
+    if (this.track.attributes) {
+      this._nodeObserver = new this.window.MutationObserver(this._onMutations);
+      this._nodeObserver.observe(this.node, {attributes: true});
+    }
+
+    if (this.track.detached) {
+      this._docObserver = new this.window.MutationObserver(this._onMutations);
+      this._docObserver.observe(this.document.documentElement, {childList: true, subtree: true});
+    }
+  },
+
+  _detachEvents: function SN__detachEvents() {
+    // `disconnect` fail if node's document has
+    // been deleted.
+    try {
+      if (this._nodeObserver)
+        this._nodeObserver.disconnect();
+    } catch(e) {}
+    try {
+      if (this._docObserver)
+        this._docObserver.disconnect();
+    } catch(e) {}
+  },
+
+  destroy: function SN_destroy() {
+    this._detachEvents();
+    this.setNode(null);
+  },
+
+  setNode: function SN_setNode(value, reason="unknown") {
+    this.reason = reason;
+    if (value !== this._node) {
+      let previousNode = this._node;
+      this._detachEvents();
+      this._node = value;
+      this._attachEvents();
+      this.emit("new-node", previousNode, this.reason);
+    }
+  },
+
+  get node() {
+    return this._node;
+  },
+
+  get window() {
+    if (this.isNode()) {
+      return this.node.ownerDocument.defaultView;
+    }
+    return null;
+  },
+
+  get document() {
+    if (this.isNode()) {
+      return this.node.ownerDocument;
+    }
+    return null;
+  },
+
+  isRoot: function SN_isRootNode() {
+    return this.isNode() &&
+           this.isConnected() &&
+           this.node.ownerDocument.documentElement === this.node;
+  },
+
+  isNode: function SN_isNode() {
+    return (this.node &&
+            this.node.ownerDocument &&
+            this.node.ownerDocument.defaultView &&
+            this.node instanceof this.node.ownerDocument.defaultView.Node);
+  },
+
+  isConnected: function SN_isConnected() {
+    try {
+      let doc = this.document;
+      return doc && doc.defaultView && doc.documentElement.contains(this.node);
+    } catch (e) {
+      // "can't access dead object" error
+      return false;
+    }
+  },
+
+  isHTMLNode: function SN_isHTMLNode() {
+    let xhtml_ns = "http://www.w3.org/1999/xhtml";
+    return this.isNode() && this.node.namespaceURI == xhtml_ns;
+  },
+
+  // Node type
+
+  isElementNode: function SN_isElementNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.ELEMENT_NODE;
+  },
+
+  isAttributeNode: function SN_isAttributeNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.ATTRIBUTE_NODE;
+  },
+
+  isTextNode: function SN_isTextNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.TEXT_NODE;
+  },
+
+  isCDATANode: function SN_isCDATANode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.CDATA_SECTION_NODE;
+  },
+
+  isEntityRefNode: function SN_isEntityRefNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.ENTITY_REFERENCE_NODE;
+  },
+
+  isEntityNode: function SN_isEntityNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.ENTITY_NODE;
+  },
+
+  isProcessingInstructionNode: function SN_isProcessingInstructionNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isCommentNode: function SN_isCommentNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isDocumentNode: function SN_isDocumentNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.DOCUMENT_NODE;
+  },
+
+  isDocumentTypeNode: function SN_isDocumentTypeNode() {
+    return this.isNode() && this.node.nodeType ==this.window. Node.DOCUMENT_TYPE_NODE;
+  },
+
+  isDocumentFragmentNode: function SN_isDocumentFragmentNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.DOCUMENT_FRAGMENT_NODE;
+  },
+
+  isNotationNode: function SN_isNotationNode() {
+    return this.isNode() && this.node.nodeType == this.window.Node.NOTATION_NODE;
+  },
+}
diff --git a/browser/devtools/inspector/inspector.css b/browser/devtools/inspector/inspector.css
new file mode 100644
index 00000000000..981c7f54748
--- /dev/null
+++ b/browser/devtools/inspector/inspector.css
@@ -0,0 +1,11 @@
+.inspector-breadcrumbs-button {
+  direction: ltr;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+#inspector-sidebar {
+  min-width: 250px;
+}
diff --git a/browser/devtools/inspector/inspector.xul b/browser/devtools/inspector/inspector.xul
new file mode 100644
index 00000000000..0331d35a0ad
--- /dev/null
+++ b/browser/devtools/inspector/inspector.xul
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://browser/content/devtools/inspector/inspector.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/inspector.css" type="text/css"?>
+<!DOCTYPE window [
+<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/inspector.dtd" >
+ %inspectorDTD;
+]>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript"
+          src="chrome://global/content/viewSourceUtils.js"/>
+
+  <popupset id="inspectorPopupSet">
+    <!-- Used by the Markup Panel, the Highlighter and the Breadcrumbs -->
+    <menupopup id="inspector-node-popup">
+      <menuitem id="node-menu-copyinner"
+        label="&inspectorHTMLCopyInner.label;"
+        accesskey="&inspectorHTMLCopyInner.accesskey;"
+        oncommand="inspector.copyInnerHTML()"/>
+      <menuitem id="node-menu-copyouter"
+        label="&inspectorHTMLCopyOuter.label;"
+        accesskey="&inspectorHTMLCopyOuter.accesskey;"
+        oncommand="inspector.copyOuterHTML()"/>
+      <menuseparator/>
+      <menuitem id="node-menu-delete"
+        label="&inspectorHTMLDelete.label;"
+        accesskey="&inspectorHTMLDelete.accesskey;"
+        oncommand="inspector.deleteNode()"/>
+      <menuseparator/>
+      <menuitem id="node-menu-pseudo-hover"
+        label=":hover" type="checkbox"
+        oncommand="inspector.togglePseudoClass(':hover')"/>
+      <menuitem id="node-menu-pseudo-active"
+        label=":active" type="checkbox"
+        oncommand="inspector.togglePseudoClass(':active')"/>
+      <menuitem id="node-menu-pseudo-focus"
+        label=":focus" type="checkbox"
+        oncommand="inspector.togglePseudoClass(':focus')"/>
+    </menupopup>
+  </popupset>
+
+  <hbox flex="1">
+    <vbox flex="1">
+      <toolbar id="inspector-toolbar"
+        class="devtools-toolbar"
+        nowindowdrag="true">
+        <toolbarbutton id="inspector-inspect-toolbutton"
+          tooltiptext="&inspector.selectButton.tooltip;"
+          class="devtools-toolbarbutton"
+          hidden="true"
+          oncommand="inspector.highlighter.unlock()"/>
+        <arrowscrollbox id="inspector-breadcrumbs"
+          flex="1" orient="horizontal"
+          clicktoscroll="true"/>
+      </toolbar>
+      <vbox flex="1" id="markup-box">
+      </vbox>
+    </vbox>
+    <splitter class="devtools-side-splitter"/>
+    <tabbox id="inspector-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+  </hbox>
+</window>
diff --git a/browser/devtools/highlighter/test/Makefile.in b/browser/devtools/inspector/test/Makefile.in
similarity index 88%
rename from browser/devtools/highlighter/test/Makefile.in
rename to browser/devtools/inspector/test/Makefile.in
index 14c302b5162..422f6648596 100644
--- a/browser/devtools/highlighter/test/Makefile.in
+++ b/browser/devtools/inspector/test/Makefile.in
@@ -12,34 +12,29 @@ include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/rules.mk
 
 _BROWSER_FILES = \
-		browser_inspector_initialization.js \
-		browser_inspector_treeSelection.js \
-		browser_inspector_highlighter.js \
-		browser_inspector_highlighter_autohide.js \
 		browser_inspector_iframeTest.js \
+		browser_inspector_initialization.js \
+		browser_inspector_highlighter.js \
 		browser_inspector_scrolling.js \
-		browser_inspector_tab_switch.js \
 		browser_inspector_bug_665880.js \
-		browser_inspector_bug_674871.js \
-		browser_inspector_bug_566084_location_changed.js \
 		browser_inspector_infobar.js \
-		browser_inspector_bug_690361.js \
-		browser_inspector_bug_672902_keyboard_shortcuts.js \
-		browser_inspector_keybindings.js \
 		browser_inspector_breadcrumbs.html \
 		browser_inspector_breadcrumbs.js \
-		browser_inspector_bug_699308_iframe_navigation.js \
-		browser_inspector_changes.js \
-		browser_inspector_ruleviewstore.js \
 		browser_inspector_invalidate.js \
-		browser_inspector_sidebarstate.js \
 		browser_inspector_menu.js \
-		browser_inspector_pseudoclass_lock.js \
 		browser_inspector_pseudoClass_menu.js \
 		browser_inspector_destroyselection.html \
 		browser_inspector_destroyselection.js \
+		browser_inspector_bug_699308_iframe_navigation.js \
+		browser_inspector_bug_672902_keyboard_shortcuts.js \
+		browser_inspector_bug_566084_location_changed.js \
+		browser_inspector_sidebarstate.js \
+		browser_inspector_pseudoclass_lock.js \
 		browser_inspector_cmd_inspect.js \
 		browser_inspector_cmd_inspect.html \
+		browser_inspector_highlighter_autohide.js \
+		browser_inspector_changes.js \
+		browser_inspector_bug_674871.js \
 		head.js \
 		helpers.js \
 		$(NULL)
diff --git a/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.html
similarity index 100%
rename from browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html
rename to browser/devtools/inspector/test/browser_inspector_breadcrumbs.html
diff --git a/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
similarity index 68%
rename from browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js
rename to browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
index 0b1f7829034..50ceed087e9 100644
--- a/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js
+++ b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
@@ -18,6 +18,7 @@ function test()
   let doc;
   let nodes;
   let cursor;
+  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -26,7 +27,7 @@ function test()
     waitForFocus(setupTest, content);
   }, true);
 
-  content.location = "http://mochi.test:8888/browser/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html";
+  content.location = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_breadcrumbs.html";
 
   function setupTest()
   {
@@ -36,20 +37,16 @@ function test()
       ok(nodes[i].node, "node " + nodes[i].nodeId + " found");
     }
 
-    Services.obs.addObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    openInspector(runTests);
   }
 
-  function runTests()
+  function runTests(aInspector)
   {
-    Services.obs.removeObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
+    inspector = aInspector;
     cursor = 0;
+    inspector.selection.on("new-node", nodeSelected);
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", nodeSelected);
-      InspectorUI.inspectNode(nodes[0].node);
+      inspector.selection.setNode(nodes[0].node);
     });
   }
 
@@ -59,24 +56,20 @@ function test()
       performTest();
       cursor++;
       if (cursor >= nodes.length) {
-
-        InspectorUI.highlighter.removeListener("nodeselected", nodeSelected);
-        Services.obs.addObserver(finishUp,
-          InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-        executeSoon(function() {
-          InspectorUI.closeInspectorUI();
-        });
+        inspector.selection.off("new-node", nodeSelected);
+        finishUp();
       } else {
         let node = nodes[cursor].node;
-        InspectorUI.inspectNode(node);
+        inspector.selection.setNode(node);
       }
     });
   }
 
   function performTest()
   {
-    let container = document.getElementById("inspector-breadcrumbs");
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let panel = gDevTools.getPanelForTarget("inspector", target);
+    let container = panel.panelDoc.getElementById("inspector-breadcrumbs");
     let buttonsLabelIds = nodes[cursor].result.split(" ");
 
     // html > body > …
@@ -91,11 +84,11 @@ function test()
 
     let checkedButton = container.querySelector("button[checked]");
     let labelId = checkedButton.querySelector(".inspector-breadcrumbs-id");
-    is(labelId.textContent, "#" + InspectorUI.selection.id, "Node " + cursor + ": selection matches");
+    let id = inspector.selection.node.id;
+    is(labelId.textContent, "#" + id, "Node " + cursor + ": selection matches");
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = nodes = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js b/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
new file mode 100644
index 00000000000..c209f9f6e93
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
@@ -0,0 +1,131 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+function test() {
+  let notificationBox, inspector;
+  let alertActive1_called = false;
+  let alertActive2_called = false;
+
+  function startLocationTests() {
+    openInspector(runInspectorTests);
+  }
+
+  function runInspectorTests(aInspector) {
+    inspector = aInspector;
+
+    let para = content.document.querySelector("p");
+    ok(para, "found the paragraph element");
+    is(para.textContent, "init", "paragraph content is correct");
+
+    inspector.markDirty();
+
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.getToolboxForTarget(target);
+    notificationBox = toolbox.getNotificationBox();
+    notificationBox.addEventListener("AlertActive", alertActive1, false);
+
+    ok(toolbox, "We have access to the notificationBox");
+
+    gBrowser.selectedBrowser.addEventListener("load", onPageLoad, true);
+
+    content.location = "data:text/html,<div>location change test 1 for " +
+      "inspector</div><p>test1</p>";
+  }
+
+  function alertActive1() {
+    alertActive1_called = true;
+    notificationBox.removeEventListener("AlertActive", alertActive1, false);
+
+    let notification = notificationBox.
+      getNotificationWithValue("inspector-page-navigation");
+    ok(notification, "found the inspector-page-navigation notification");
+
+    // By closing the notification it is expected that page navigation is
+    // canceled.
+    executeSoon(function() {
+      notification.close();
+      locationTest2();
+    });
+  }
+
+  function locationTest2() {
+    // Location did not change.
+    let para = content.document.querySelector("p");
+    ok(para, "found the paragraph element, second time");
+    is(para.textContent, "init", "paragraph content is correct");
+
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let inspector = gDevTools.getPanelForTarget("inspector", target);
+    ok(inspector, "Inspector still alive");
+
+    notificationBox.addEventListener("AlertActive", alertActive2, false);
+
+    content.location = "data:text/html,<div>location change test 2 for " +
+      "inspector</div><p>test2</p>";
+  }
+
+  function alertActive2() {
+    alertActive2_called = true;
+    notificationBox.removeEventListener("AlertActive", alertActive2, false);
+
+    let notification = notificationBox.
+      getNotificationWithValue("inspector-page-navigation");
+    ok(notification, "found the inspector-page-navigation notification");
+
+    let buttons = notification.querySelectorAll("button");
+    let buttonLeave = null;
+    for (let i = 0; i < buttons.length; i++) {
+      if (buttons[i].buttonInfo.id == "inspector.confirmNavigationAway.buttonLeave") {
+        buttonLeave = buttons[i];
+        break;
+      }
+    }
+
+    ok(buttonLeave, "the Leave page button was found");
+
+    // Accept page navigation.
+    executeSoon(function(){
+      buttonLeave.doCommand();
+    });
+  }
+
+  function onPageLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onPageLoad, true);
+
+    isnot(content.location.href.indexOf("test2"), -1,
+          "page navigated to the correct location");
+
+    let para = content.document.querySelector("p");
+    ok(para, "found the paragraph element, third time");
+    is(para.textContent, "test2", "paragraph content is correct");
+
+    let root = content.document.documentElement;
+    ok(inspector.selection.node, root, "Selection is the root of the new page.");
+
+    ok(alertActive1_called, "first notification box has been showed");
+    ok(alertActive2_called, "second notification box has been showed");
+    testEnd();
+  }
+
+
+  function testEnd() {
+    notificationBox = null;
+    gBrowser.removeCurrentTab();
+    executeSoon(finish);
+  }
+
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
+    waitForFocus(startLocationTests, content);
+  }, true);
+
+  content.location = "data:text/html,<div>location change tests for " +
+    "inspector.</div><p>init</p>";
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_665880.js b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
similarity index 52%
rename from browser/devtools/highlighter/test/browser_inspector_bug_665880.js
rename to browser/devtools/inspector/test/browser_inspector_bug_665880.js
index b5e23af2bb2..b80de1cc211 100644
--- a/browser/devtools/highlighter/test/browser_inspector_bug_665880.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
@@ -23,37 +23,25 @@ function test()
   {
     objectNode = doc.querySelector("object");
     ok(objectNode, "we have the object node");
-    Services.obs.addObserver(runObjectInspectionTest,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    openInspector(runObjectInspectionTest);
   }
 
-  function runObjectInspectionTest()
+  function runObjectInspectionTest(inspector)
   {
-    Services.obs.removeObserver(runObjectInspectionTest,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-    executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", performTestComparison);
-
-      InspectorUI.inspectNode(objectNode);
-    });
+    inspector.highlighter.once("locked", performTestComparison);
+    inspector.selection.setNode(objectNode, "");
   }
 
   function performTestComparison()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", performTestComparison);
-
-    is(InspectorUI.selection, objectNode, "selection matches node");
-
-    Services.obs.addObserver(finishUp,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    InspectorUI.closeInspectorUI();
+    is(getActiveInspector().selection.node, objectNode, "selection matches node");
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
+    finishUp();
   }
 
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = objectNode = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js b/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
similarity index 51%
rename from browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js
rename to browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
index 1e11ec60e94..f44ad7ba983 100644
--- a/browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
@@ -11,6 +11,7 @@ function test()
 
   let doc;
   let node;
+  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -26,23 +27,19 @@ function test()
 
   function setupKeyBindingsTest()
   {
-    Services.obs.addObserver(findAndHighlightNode,
-                             InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED,
-                             false);
-    InspectorUI.toggleInspectorUI();
+    openInspector(findAndHighlightNode);
   }
 
-  function findAndHighlightNode()
+  function findAndHighlightNode(aInspector)
   {
-    Services.obs.removeObserver(findAndHighlightNode,
-                                InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    inspector = aInspector;
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", highlightBodyNode);
+      inspector.selection.once("new-node", highlightBodyNode);
       // Test that navigating around without a selected node gets us to the
       // body element.
       node = doc.querySelector("body");
-      let bc = InspectorUI.breadcrumbs;
+      let bc = inspector.breadcrumbs;
       bc.nodeHierarchy[bc.currentIndex].button.focus();
       EventUtils.synthesizeKey("VK_RIGHT", { });
     });
@@ -50,11 +47,10 @@ function test()
 
   function highlightBodyNode()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", highlightBodyNode);
-    is(InspectorUI.selection, node, "selected body element");
+    is(inspector.selection.node, node, "selected body element");
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", highlightHeaderNode);
+      inspector.selection.once("new-node", highlightHeaderNode);
       // Test that moving to the child works.
       node = doc.querySelector("h1");
       EventUtils.synthesizeKey("VK_RIGHT", { });
@@ -63,11 +59,10 @@ function test()
 
   function highlightHeaderNode()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", highlightHeaderNode);
-    is(InspectorUI.selection, node, "selected h1 element");
+    is(inspector.selection.node, node, "selected h1 element");
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", highlightParagraphNode);
+      inspector.selection.once("new-node", highlightParagraphNode);
       // Test that moving to the next sibling works.
       node = doc.querySelector("p");
       EventUtils.synthesizeKey("VK_DOWN", { });
@@ -76,11 +71,10 @@ function test()
 
   function highlightParagraphNode()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", highlightParagraphNode);
-    is(InspectorUI.selection, node, "selected p element");
+    is(inspector.selection.node, node, "selected p element");
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", highlightHeaderNodeAgain);
+      inspector.selection.once("new-node", highlightHeaderNodeAgain);
       // Test that moving to the previous sibling works.
       node = doc.querySelector("h1");
       EventUtils.synthesizeKey("VK_UP", { });
@@ -89,11 +83,10 @@ function test()
 
   function highlightHeaderNodeAgain()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", highlightHeaderNodeAgain);
-    is(InspectorUI.selection, node, "selected h1 element");
+    is(inspector.selection.node, node, "selected h1 element");
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", highlightParentNode);
+      inspector.selection.once("new-node", highlightParentNode);
       // Test that moving to the parent works.
       node = doc.querySelector("body");
       EventUtils.synthesizeKey("VK_LEFT", { });
@@ -102,27 +95,11 @@ function test()
 
   function highlightParentNode()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", highlightParentNode);
-    is(InspectorUI.selection, node, "selected body element");
-
-    // Test that locking works.
-    synthesizeKeyFromKeyTag("key_inspect");
-
-    executeSoon(isTheNodeLocked);
-  }
-
-  function isTheNodeLocked()
-  {
-    ok(!InspectorUI.inspecting, "the node is locked");
-    Services.obs.addObserver(finishUp,
-                             InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED,
-                             false);
-    InspectorUI.closeInspectorUI();
+    is(inspector.selection.node, node, "selected body element");
+    finishUp();
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp,
-                                InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = node = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_674871.js b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
similarity index 68%
rename from browser/devtools/highlighter/test/browser_inspector_bug_674871.js
rename to browser/devtools/inspector/test/browser_inspector_bug_674871.js
index 6b6e3d16742..ed448d8f161 100644
--- a/browser/devtools/highlighter/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
@@ -1,7 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-
 function test()
 {
   waitForExplicitFinish();
@@ -46,52 +45,45 @@ function test()
     iframeBodyNode = iframeNode.contentDocument.querySelector("body");
     ok(iframeNode, "we have the iframe node");
     ok(iframeBodyNode, "we have the body node");
-    Services.obs.addObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    openInspector(runTests);
   }
 
-  function runTests()
+  function runTests(inspector)
   {
-    Services.obs.removeObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", isTheIframeSelected);
-
+      inspector.highlighter.once("highlighting", isTheIframeSelected);
       moveMouseOver(iframeNode, 1, 1);
     });
   }
 
   function isTheIframeSelected()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", isTheIframeSelected);
+    let inspector = getActiveInspector();
 
-    is(InspectorUI.selection, iframeNode, "selection matches node");
+    is(inspector.selection.node, iframeNode, "selection matches node");
     iframeNode.style.marginBottom = doc.defaultView.innerHeight + "px";
     doc.defaultView.scrollBy(0, 40);
 
     executeSoon(function() {
-      InspectorUI.highlighter.addListener("nodeselected", isTheIframeContentSelected);
+      inspector.selection.once("new-node", isTheIframeContentSelected);
       moveMouseOver(iframeNode, 40, 40);
     });
   }
 
   function isTheIframeContentSelected()
   {
-    InspectorUI.highlighter.removeListener("nodeselected", isTheIframeContentSelected);
-    is(InspectorUI.selection, iframeBodyNode, "selection matches node");
+    let inspector = getActiveInspector();
+    is(inspector.selection.node, iframeBodyNode, "selection matches node");
     // 184 == 200 + 11(border) + 13(padding) - 40(scroll)
-    is(InspectorUI.highlighter._highlightRect.height, 184,
+    is(inspector.highlighter._highlightRect.height, 184,
       "highlighter height");
 
-    Services.obs.addObserver(finishUp,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    InspectorUI.closeInspectorUI();
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
+    finishUp();
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = iframeNode = iframeBodyNode = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
new file mode 100644
index 00000000000..3f9355dd733
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+  let iframe;
+  let iframeLoads = 0;
+  let checksAfterLoads = false;
+  let inspector;
+
+  function startTest() {
+    openInspector(runInspectorTests);
+  }
+
+  function runInspectorTests(aInspector) {
+    inspector = aInspector;
+
+    iframe = content.document.querySelector("iframe");
+    ok(iframe, "found the iframe element");
+
+    ok(inspector.highlighter._highlighting, "Inspector is highlighting");
+
+    iframe.addEventListener("load", onIframeLoad, false);
+
+    executeSoon(function() {
+      iframe.contentWindow.location = "javascript:location.reload()";
+    });
+  }
+
+  function onIframeLoad() {
+    if (++iframeLoads != 2) {
+      executeSoon(function() {
+        iframe.contentWindow.location = "javascript:location.reload()";
+      });
+      return;
+    }
+
+    iframe.removeEventListener("load", onIframeLoad, false);
+
+    ok(inspector.highlighter._highlighting, "Inspector is highlighting after iframe nav");
+
+    checksAfterLoads = true;
+
+    finishTest();
+  }
+
+  function finishTest() {
+    is(iframeLoads, 2, "iframe loads");
+    ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
+
+    iframe = null;
+    gBrowser.removeCurrentTab();
+    executeSoon(finish);
+  }
+
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
+    waitForFocus(startTest, content);
+  }, true);
+
+  content.location = "data:text/html,<p>bug 699308 - test iframe navigation" +
+    "<iframe src='data:text/html,hello world'></iframe>";
+}
diff --git a/browser/devtools/inspector/test/browser_inspector_changes.js b/browser/devtools/inspector/test/browser_inspector_changes.js
new file mode 100644
index 00000000000..a3088e51d22
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_changes.js
@@ -0,0 +1,112 @@
+/* -*- Mode: C++; 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/. */
+let doc;
+let testDiv;
+
+function test() {
+  let inspector;
+
+  function createDocument()
+  {
+    doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
+    doc.title = "Inspector Change Test";
+    openInspector(runInspectorTests);
+  }
+
+
+  function getInspectorProp(aName)
+  {
+    let computedview = inspector.sidebar.getWindowForTab("computedview").computedview.view;
+    for each (let view in computedview.propertyViews) {
+      if (view.name == aName) {
+        return view;
+      }
+    }
+    return null;
+  }
+
+  function runInspectorTests(aInspector)
+  {
+    inspector = aInspector;
+    inspector.sidebar.once("computedview-ready", function() {
+      info("Computed View ready");
+      inspector.sidebar.select("computedview");
+
+      testDiv = doc.getElementById("testdiv");
+
+      testDiv.style.fontSize = "10px";
+
+      // Start up the style inspector panel...
+      Services.obs.addObserver(stylePanelTests, "StyleInspector-populated", false);
+
+      inspector.selection.setNode(testDiv);
+    });
+  }
+
+  function stylePanelTests()
+  {
+    Services.obs.removeObserver(stylePanelTests, "StyleInspector-populated");
+
+    let computedview = inspector.sidebar.getWindowForTab("computedview").computedview;
+    ok(computedview, "Style Panel has a cssHtmlTree");
+
+    let propView = getInspectorProp("font-size");
+    is(propView.value, "10px", "Style inspector should be showing the correct font size.");
+
+    Services.obs.addObserver(stylePanelAfterChange, "StyleInspector-populated", false);
+
+    testDiv.style.fontSize = "15px";
+    inspector.emit("layout-change");
+  }
+
+  function stylePanelAfterChange()
+  {
+    Services.obs.removeObserver(stylePanelAfterChange, "StyleInspector-populated");
+
+    let propView = getInspectorProp("font-size");
+    is(propView.value, "15px", "Style inspector should be showing the new font size.");
+
+    stylePanelNotActive();
+  }
+
+  function stylePanelNotActive()
+  {
+    // Tests changes made while the style panel is not active.
+    inspector.sidebar.select("ruleview");
+
+    executeSoon(function() {
+      Services.obs.addObserver(stylePanelAfterSwitch, "StyleInspector-populated", false);
+      testDiv.style.fontSize = "20px";
+      inspector.sidebar.select("computedview");
+    });
+  }
+
+  function stylePanelAfterSwitch()
+  {
+    Services.obs.removeObserver(stylePanelAfterSwitch, "StyleInspector-populated");
+
+    let propView = getInspectorProp("font-size");
+    is(propView.value, "20px", "Style inspector should be showing the newest font size.");
+
+    finishTest();
+  }
+
+  function finishTest()
+  {
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.html b/browser/devtools/inspector/test/browser_inspector_cmd_inspect.html
similarity index 100%
rename from browser/devtools/highlighter/test/browser_inspector_cmd_inspect.html
rename to browser/devtools/inspector/test/browser_inspector_cmd_inspect.html
diff --git a/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js b/browser/devtools/inspector/test/browser_inspector_cmd_inspect.js
similarity index 97%
rename from browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js
rename to browser/devtools/inspector/test/browser_inspector_cmd_inspect.js
index 3879ffbebed..545e60799c7 100644
--- a/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js
+++ b/browser/devtools/inspector/test/browser_inspector_cmd_inspect.js
@@ -3,7 +3,7 @@
 
 // Tests that the inspect command works as it should
 
-const TEST_URI = "http://example.com/browser/browser/devtools/highlighter/" +
+const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
                  "test/browser_inspector_cmd_inspect.html";
 
 function test() {
diff --git a/browser/devtools/highlighter/test/browser_inspector_destroyselection.html b/browser/devtools/inspector/test/browser_inspector_destroyselection.html
similarity index 100%
rename from browser/devtools/highlighter/test/browser_inspector_destroyselection.html
rename to browser/devtools/inspector/test/browser_inspector_destroyselection.html
diff --git a/browser/devtools/highlighter/test/browser_inspector_destroyselection.js b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
similarity index 55%
rename from browser/devtools/highlighter/test/browser_inspector_destroyselection.js
rename to browser/devtools/inspector/test/browser_inspector_destroyselection.js
index 73fe34d71a2..bf24c5e34d0 100644
--- a/browser/devtools/highlighter/test/browser_inspector_destroyselection.js
+++ b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
@@ -6,7 +6,7 @@ function test()
   waitForExplicitFinish();
   //ignoreAllUncaughtExceptions();
 
-  let node, iframe;
+  let node, iframe, inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -14,42 +14,28 @@ function test()
     waitForFocus(setupTest, content);
   }, true);
 
-  content.location = "http://mochi.test:8888/browser/browser/devtools/highlighter/test/browser_inspector_destroyselection.html";
+  content.location = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_destroyselection.html";
 
   function setupTest()
   {
     iframe = content.document.querySelector("iframe");
     node = iframe.contentDocument.querySelector("span");
-
-    Services.obs.addObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.openInspectorUI(node);
+    openInspector(runTests);
   }
 
-  function runTests()
+  function runTests(aInspector)
   {
-    Services.obs.removeObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-    is(InspectorUI.selection, node, "node selected");
+    inspector = aInspector;
+    inspector.selection.setNode(node);
+
     iframe.parentNode.removeChild(iframe);
     iframe = null;
 
     let tmp = {};
     Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tmp);
     ok(!tmp.LayoutHelpers.isNodeConnected(node), "Node considered as disconnected.");
+    ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
 
-    Services.obs.addObserver(testBreadcrumbs,
-                             InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-    executeSoon(function() {
-      InspectorUI.closeInspectorUI();
-    });
-  }
-
-  function testBreadcrumbs()
-  {
-    Services.obs.removeObserver(testBreadcrumbs, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    ok(!InspectorUI.breadcrumbs, "Breadcrumbs destroyed");
     finishUp();
   }
 
diff --git a/browser/devtools/highlighter/test/browser_inspector_highlighter.js b/browser/devtools/inspector/test/browser_inspector_highlighter.js
similarity index 78%
rename from browser/devtools/highlighter/test/browser_inspector_highlighter.js
rename to browser/devtools/inspector/test/browser_inspector_highlighter.js
index b2b0c133f18..d7ad02c8486 100644
--- a/browser/devtools/highlighter/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@@ -48,56 +48,45 @@ function createDocument()
   doc.body.appendChild(div2);
   doc.body.appendChild(div3);
 
-  setupHighlighterTests();
+  openInspector(setupHighlighterTests);
 }
 
 function setupHighlighterTests()
 {
   h1 = doc.querySelector("h1");
   ok(h1, "we have the header");
-  Services.obs.addObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
 
-function runSelectionTests(subject)
-{
-  Services.obs.removeObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  is(subject.wrappedJSObject, InspectorUI,
-     "InspectorUI accessible in the observer");
-
-  InspectorUI.highlighter.outline.setAttribute("disable-transitions", "true");
+  let i = getActiveInspector();
+  i.highlighter.unlock();
+  i.highlighter.outline.setAttribute("disable-transitions", "true");
 
   executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
+    i.selection.once("new-node", performTestComparisons);
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
   });
 }
 
 function performTestComparisons(evt)
 {
-  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
-
-  InspectorUI.stopInspecting();
+  let i = getActiveInspector();
+  i.highlighter.lock();
   ok(isHighlighting(), "highlighter is highlighting");
   is(getHighlitNode(), h1, "highlighter matches selection")
-  is(InspectorUI.selection, h1, "selection matches node");
-  is(InspectorUI.selection, getHighlitNode(), "selection matches highlighter");
+  is(i.selection.node, h1, "selection matches node");
+  is(i.selection.node, getHighlitNode(), "selection matches highlighter");
 
 
   div = doc.querySelector("div#checkOutThisWickedSpread");
 
   executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", finishTestComparisons);
-    InspectorUI.inspectNode(div);
+    i.selection.once("new-node", finishTestComparisons);
+    i.selection.setNode(div);
   });
 }
 
 function finishTestComparisons()
 {
-  InspectorUI.highlighter.removeListener("nodeselected", finishTestComparisons);
+  let i = getActiveInspector();
 
   // get dimensions of div element
   let divDims = div.getBoundingClientRect();
@@ -105,8 +94,7 @@ function finishTestComparisons()
   let divHeight = divDims.height;
 
   // get dimensions of the outline
-  let outlineDims = 
-    InspectorUI.highlighter.outline.getBoundingClientRect();
+  let outlineDims = i.highlighter.outline.getBoundingClientRect();
   let outlineWidth = outlineDims.width;
   let outlineHeight = outlineDims.height;
 
@@ -115,7 +103,7 @@ function finishTestComparisons()
   //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
 
   // zoom the page by a factor of 2
-  let contentViewer = InspectorUI.browser.docShell.contentViewer
+  let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
   contentViewer.fullZoom = 2;
 
@@ -124,7 +112,7 @@ function finishTestComparisons()
 
   window.setTimeout(function() {
     // check what zoom factor we're at, should be 2
-    let zoom = InspectorUI.highlighter.zoom;
+    let zoom = i.highlighter.zoom;
     is(zoom, 2, "zoom is 2?");
 
     // simulate the zoomed dimensions of the div element
@@ -133,8 +121,7 @@ function finishTestComparisons()
     let divHeight = divDims.height * zoom;
 
     // now zoomed, get new dimensions the outline
-    let outlineDims = 
-      InspectorUI.highlighter.outline.getBoundingClientRect();
+    let outlineDims = i.highlighter.outline.getBoundingClientRect();
     let outlineWidth = outlineDims.width;
     let outlineHeight = outlineDims.height;
 
@@ -148,7 +135,8 @@ function finishTestComparisons()
 }
 
 function finishUp() {
-  InspectorUI.closeInspectorUI();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  gDevTools.closeToolbox(target);
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js b/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
new file mode 100644
index 00000000000..8dfca604b74
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+
+function test()
+{
+  let toolbox;
+  let inspector;
+
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    waitForFocus(startInspector, content);
+  }, true);
+  content.location = "data:text/html,mop"
+
+  function startInspector() {
+    info("Tab loaded");
+    openInspector(function(aInspector) {
+      inspector = aInspector;
+      ok(!inspector.highlighter.hidden, "Highlighter is visible");
+      toolbox = inspector._toolbox;
+      toolbox.once("webconsole-selected", onWebConsoleSelected);
+      toolbox.selectTool("webconsole");
+    });
+  }
+
+  function onWebConsoleSelected() {
+    executeSoon(function() {
+      ok(inspector.highlighter.hidden, "Highlighter is hidden");
+      toolbox.once("inspector-selected", onInspectorSelected);
+      toolbox.selectTool("inspector");
+    });
+  }
+
+  function onInspectorSelected() {
+    executeSoon(function() {
+      ok(!inspector.highlighter.hidden, "Highlighter is visible once inspector reopen");
+      gBrowser.removeCurrentTab();
+      finish();
+    });
+  }
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_iframeTest.js b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
similarity index 72%
rename from browser/devtools/highlighter/test/browser_inspector_iframeTest.js
rename to browser/devtools/inspector/test/browser_inspector_iframeTest.js
index f146046ef74..8d23b0493f4 100644
--- a/browser/devtools/highlighter/test/browser_inspector_iframeTest.js
+++ b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
@@ -32,7 +32,7 @@ function createDocument()
       div2.textContent = 'nested div';
       iframe2.contentDocument.body.appendChild(div2);
 
-      setupIframeTests();
+      openInspector(runIframeTests);
     }, false);
 
     iframe2.src = 'data:text/html,nested iframe';
@@ -49,43 +49,29 @@ function moveMouseOver(aElement)
     aElement.ownerDocument.defaultView);
 }
 
-function setupIframeTests()
-{
-  Services.obs.addObserver(runIframeTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
 function runIframeTests()
 {
-  Services.obs.removeObserver(runIframeTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-
-  executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons1);
-    moveMouseOver(div1)
-  });
+  getActiveInspector().selection.once("new-node", performTestComparisons1);
+  moveMouseOver(div1)
 }
 
 function performTestComparisons1()
 {
-  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons1);
-
-  is(InspectorUI.selection, div1, "selection matches div1 node");
+  let i = getActiveInspector();
+  is(i.selection.node, div1, "selection matches div1 node");
   is(getHighlitNode(), div1, "highlighter matches selection");
 
+  i.selection.once("new-node", performTestComparisons2);
   executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons2);
     moveMouseOver(div2);
   });
 }
 
 function performTestComparisons2()
 {
-  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons2);
+  let i = getActiveInspector();
 
-  is(InspectorUI.selection, div2, "selection matches div2 node");
+  is(i.selection.node, div2, "selection matches div2 node");
   is(getHighlitNode(), div2, "highlighter matches selection");
 
   finish();
@@ -105,7 +91,8 @@ function test() {
   content.location = "data:text/html,iframe tests for inspector";
 
   registerCleanupFunction(function () {
-    InspectorUI.closeInspectorUI(true);
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
     gBrowser.removeCurrentTab();
   });
 }
diff --git a/browser/devtools/highlighter/test/browser_inspector_infobar.js b/browser/devtools/inspector/test/browser_inspector_infobar.js
similarity index 72%
rename from browser/devtools/highlighter/test/browser_inspector_infobar.js
rename to browser/devtools/inspector/test/browser_inspector_infobar.js
index 1ca3ed741c9..1e20539cd1f 100644
--- a/browser/devtools/highlighter/test/browser_inspector_infobar.js
+++ b/browser/devtools/inspector/test/browser_inspector_infobar.js
@@ -9,6 +9,7 @@ function test()
   let doc;
   let nodes;
   let cursor;
+  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -36,19 +37,15 @@ function test()
       ok(nodes[i].node, "node " + i + " found");
     }
 
-    Services.obs.addObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    openInspector(runTests);
   }
 
-  function runTests()
+  function runTests(aInspector)
   {
-    Services.obs.removeObserver(runTests,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
+    inspector = aInspector;
     cursor = 0;
     executeSoon(function() {
-      InspectorUI.inspectNode(nodes[0].node);
+      inspector.selection.setNode(nodes[0].node, "");
       nodeSelected();
     });
   }
@@ -59,16 +56,10 @@ function test()
       performTest();
       cursor++;
       if (cursor >= nodes.length) {
-
-        Services.obs.addObserver(finishUp,
-          InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-
-        executeSoon(function() {
-          InspectorUI.closeInspectorUI();
-        });
+        finishUp();
       } else {
         let node = nodes[cursor].node;
-        InspectorUI.inspectNode(node);
+        inspector.selection.setNode(node, "");
         nodeSelected();
       }
     });
@@ -76,21 +67,23 @@ function test()
 
   function performTest()
   {
-    let container = document.getElementById("highlighter-nodeinfobar-container");
+    let browser = gBrowser.selectedBrowser;
+    let stack = browser.parentNode;
+
+    let container = stack.querySelector(".highlighter-nodeinfobar-container");
     is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");
 
-    let tagNameLabel = document.getElementById("highlighter-nodeinfobar-tagname");
+    let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
     is(tagNameLabel.textContent, nodes[cursor].tag, "node " + cursor  + ": tagName matches.");
 
-    let idLabel = document.getElementById("highlighter-nodeinfobar-id");
+    let idLabel = stack.querySelector(".highlighter-nodeinfobar-id");
     is(idLabel.textContent, nodes[cursor].id, "node " + cursor  + ": id matches.");
 
-    let classesBox = document.getElementById("highlighter-nodeinfobar-classes");
+    let classesBox = stack.querySelector(".highlighter-nodeinfobar-classes");
     is(classesBox.textContent, nodes[cursor].classes, "node " + cursor  + ": classes match.");
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = nodes = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/inspector/test/browser_inspector_initialization.js b/browser/devtools/inspector/test/browser_inspector_initialization.js
new file mode 100644
index 00000000000..4083dd29b17
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_initialization.js
@@ -0,0 +1,147 @@
+/* -*- Mode: C++; 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/. */
+let doc;
+let salutation;
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
+    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
+    '<h1>Some header text</h1>\n' +
+    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
+    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
+    'solely to provide some things to test the inspector initialization.</p>\n' +
+    'If you are reading this, you should go do something else instead. Maybe ' +
+    'read a book. Or better yet, write some test-cases for another bit of code. ' +
+    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
+    '<p id="closing">end transmission</p>\n' +
+    '</div>';
+  doc.title = "Inspector Initialization Test";
+
+  openInspector(startInspectorTests);
+}
+
+function startInspectorTests()
+{
+  ok(true, "Inspector started, and notification received.");
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+
+  ok(inspector, "Inspector instance is accessible");
+  ok(inspector.isReady, "Inspector instance is ready");
+  is(inspector.target.tab, gBrowser.selectedTab, "Valid target");
+  ok(inspector.highlighter, "Highlighter is up");
+
+  let p = doc.querySelector("p");
+
+  inspector.selection.setNode(p);
+
+  testHighlighter(p);
+  testMarkupView(p);
+  testBreadcrumbs(p);
+
+  let span = doc.querySelector("span");
+  span.scrollIntoView();
+
+  inspector.selection.setNode(span);
+
+  testHighlighter(span);
+  testMarkupView(span);
+  testBreadcrumbs(span);
+
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  toolbox.once("destroyed", function() {
+    ok("true", "'destroyed' notification received.");
+    let toolbox = gDevTools.getToolboxForTarget(target);
+    ok(!toolbox, "Toolbox destroyed.");
+    executeSoon(runContextMenuTest);
+  });
+  toolbox.destroy();
+}
+
+
+function testHighlighter(node)
+{
+  ok(isHighlighting(), "Highlighter is highlighting");
+  is(getHighlitNode(), node, "Right node is highlighted");
+}
+
+function testMarkupView(node)
+{
+  let i = getActiveInspector();
+  is(i.markup._selectedContainer.node, node, "Right node is selected in the markup view");
+}
+
+function testBreadcrumbs(node)
+{
+  let b = getActiveInspector().breadcrumbs;
+  let expectedText = b.prettyPrintNodeAsText(node);
+  let button = b.container.querySelector("button[checked=true]");
+  ok(button, "A crumbs is checked=true");
+  is(button.getAttribute("tooltiptext"), expectedText, "Crumb refers to the right node");
+}
+
+function _clickOnInspectMenuItem(node) {
+  document.popupNode = node;
+  var contentAreaContextMenu = document.getElementById("contentAreaContextMenu");
+  var contextMenu = new nsContextMenu(contentAreaContextMenu, gBrowser);
+  contextMenu.inspectNode();
+}
+
+function runContextMenuTest()
+{
+  salutation = doc.getElementById("salutation");
+  _clickOnInspectMenuItem(salutation);
+  gDevTools.once("inspector-ready", testInitialNodeIsSelected);
+}
+
+function testInitialNodeIsSelected() {
+  testHighlighter(salutation);
+  testMarkupView(salutation);
+  testBreadcrumbs(salutation);
+  inspectNodesFromContextTestWhileOpen();
+}
+
+function inspectNodesFromContextTestWhileOpen()
+{
+  let closing = doc.getElementById("closing");
+  getActiveInspector().selection.once("new-node", function() {
+    ok(true, "Get selection's 'new-node' selection");
+    executeSoon(function() {
+      testHighlighter(closing);
+      testMarkupView(closing);
+      testBreadcrumbs(closing);
+      finishInspectorTests();
+    }
+  )});
+  _clickOnInspectMenuItem(closing);
+}
+
+function finishInspectorTests(subject, topic, aWinIdString)
+{
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/inspector/test/browser_inspector_invalidate.js b/browser/devtools/inspector/test/browser_inspector_invalidate.js
new file mode 100644
index 00000000000..3fc9a20434e
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_invalidate.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+
+  let doc;
+  let div;
+  let inspector;
+
+  function createDocument()
+  {
+    div = doc.createElement("div");
+    div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
+    doc.body.appendChild(div);
+
+    openInspector(runTest);
+  }
+
+  function runTest(inspector)
+  {
+    inspector.selection.setNode(div);
+
+    executeSoon(function() {
+      let outline = inspector.highlighter.outline;
+      is(outline.style.width, "100px", "selection has the right width");
+
+      div.style.width = "200px";
+      function pollTest() {
+        if (outline.style.width == "100px") {
+          setTimeout(pollTest, 10);
+          return;
+        }
+        is(outline.style.width, "200px", "selection updated");
+        gBrowser.removeCurrentTab();
+        finish();
+      }
+      setTimeout(pollTest, 10);
+    });
+  }
+
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_menu.js b/browser/devtools/inspector/test/browser_inspector_menu.js
similarity index 62%
rename from browser/devtools/highlighter/test/browser_inspector_menu.js
rename to browser/devtools/inspector/test/browser_inspector_menu.js
index 61c95ed1a7c..88f0c57e6de 100644
--- a/browser/devtools/highlighter/test/browser_inspector_menu.js
+++ b/browser/devtools/inspector/test/browser_inspector_menu.js
@@ -9,6 +9,7 @@ function test() {
   let doc;
   let node1;
   let div;
+  let inspector;
 
   function createDocument() {
     div = doc.createElement("div");
@@ -22,7 +23,7 @@ function test() {
     div.appendChild(p1);
     doc.body.appendChild(div);
     node1 = p1;
-    setupTest();
+    openInspector(runTests);
   }
 
   gBrowser.selectedTab = gBrowser.addTab();
@@ -34,20 +35,14 @@ function test() {
 
   content.location = content.location = "data:text/html,basic tests for inspector";;
 
-  function setupTest() {
-    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
-  }
-
-  function runTests() {
-    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-    InspectorUI.stopInspecting();
-    InspectorUI.inspectNode(node1, true);
+  function runTests(aInspector) {
+    inspector = aInspector;
+    inspector.selection.setNode(node1);
     testCopyInnerMenu();
   }
 
   function testCopyInnerMenu() {
-    let copyInner = document.getElementById("inspectorHTMLCopyInner");
+    let copyInner = inspector.panelDoc.getElementById("node-menu-copyinner");
     ok(copyInner, "the popup menu has a copy inner html menu item");
 
     waitForClipboard("This is some example text",
@@ -56,7 +51,7 @@ function test() {
   }
 
   function testCopyOuterMenu() {
-    let copyOuter = document.getElementById("inspectorHTMLCopyOuter");
+    let copyOuter = inspector.panelDoc.getElementById("node-menu-copyouter");
     ok(copyOuter, "the popup menu has a copy outer html menu item");
 
     waitForClipboard("<p>This is some example text</p>",
@@ -65,10 +60,10 @@ function test() {
   }
 
   function testDeleteNode() {
-    let deleteNode = document.getElementById("inspectorHTMLDelete");
+    let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
     ok(deleteNode, "the popup menu has a delete menu item");
 
-    InspectorUI.highlighter.addListener("nodeselected", deleteTest);
+    inspector.selection.once("detached", deleteTest);
 
     let commandEvent = document.createEvent("XULCommandEvent");
     commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
@@ -77,19 +72,16 @@ function test() {
   }
 
   function deleteTest() {
-    InspectorUI.highlighter.removeListener("nodeselected", deleteTest);
-    is(InspectorUI.selection, div, "parent node selected");
     let p = doc.querySelector("P");
     is(p, null, "node deleted");
 
-    InspectorUI.highlighter.addListener("nodeselected", deleteRootNode);
-    InspectorUI.inspectNode(doc.documentElement, true);
+    deleteRootNode();
   }
 
   function deleteRootNode() {
-    InspectorUI.highlighter.removeListener("nodeselected", deleteRootNode);
-    let deleteNode = document.getElementById("inspectorHTMLDelete");
-    let commandEvent = document.createEvent("XULCommandEvent");
+    inspector.selection.setNode(doc.documentElement);
+    let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
+    let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
     commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
                                   false, false, null);
     deleteNode.dispatchEvent(commandEvent);
@@ -98,15 +90,6 @@ function test() {
 
   function isRootStillAlive() {
     ok(doc.documentElement, "Document element still alive.");
-    Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    executeSoon(function() {
-      InspectorUI.closeInspectorUI();
-    });
-  }
-
-  function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-    doc = node1 = div = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
new file mode 100644
index 00000000000..f8e2baf1ccf
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+
+  let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+
+  let pseudos = ["hover", "active", "focus"];
+
+  let doc;
+  let div;
+  let menu;
+  let inspector;
+
+  waitForExplicitFinish();
+  ignoreAllUncaughtExceptions();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,pseudo-class lock node menu tests";
+
+  function createDocument()
+  {
+    div = doc.createElement("div");
+    div.textContent = "test div";
+
+    doc.body.appendChild(div);
+
+    openInspector(selectNode);
+  }
+
+  function selectNode(aInspector)
+  {
+    inspector = aInspector;
+    inspector.selection.setNode(div);
+    performTests();
+  }
+
+  function performTests()
+  {
+    menu = inspector.panelDoc.getElementById("inspector-node-popup");
+    menu.addEventListener("popupshowing", testMenuItems, true);
+    menu.openPopup();
+  }
+
+  function testMenuItems()
+  {
+    menu.removeEventListener("popupshowing", testMenuItems, true);
+
+    for each (let pseudo in pseudos) {
+      let menuitem = inspector.panelDoc.getElementById("node-menu-pseudo-" + pseudo);
+      ok(menuitem, ":" + pseudo + " menuitem exists");
+
+      menuitem.doCommand();
+
+      is(DOMUtils.hasPseudoClassLock(div, ":" + pseudo), true,
+        "pseudo-class lock has been applied");
+    }
+    finishUp();
+  }
+
+  function finishUp()
+  {
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
similarity index 59%
rename from browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js
rename to browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
index 6dcfee24d91..6f8fc29a7c4 100644
--- a/browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
@@ -1,10 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 
 let doc;
 let div;
+let inspector;
+let ruleview;
 
 let pseudo = ":hover";
 
@@ -35,57 +41,38 @@ function createDocument()
   head.appendChild(style);
   doc.body.appendChild(div);
 
-  setupTests();
+  openInspector(selectNode);
 }
 
-function setupTests()
+function selectNode(aInspector)
 {
-  Services.obs.addObserver(selectNode,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function selectNode()
-{
-  Services.obs.removeObserver(selectNode,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-
-  executeSoon(function() {
-    InspectorUI.highlighter.addListener("locked", openRuleView);
-    InspectorUI.inspectNode(div);
-    InspectorUI.stopInspecting();
+  inspector = aInspector;
+  inspector.selection.setNode(div);
+  inspector.sidebar.once("ruleview-ready", function() {
+    ruleview = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
+    inspector.sidebar.select("ruleview");
+    performTests();
   });
 }
 
-function openRuleView()
-{
-  InspectorUI.sidebar.show();
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", performTests);
-  InspectorUI.sidebar.activatePanel("ruleview");
-}
-
 function performTests()
 {
-  InspectorUI.highlighter.removeListener("locked", performTests);
-
   // toggle the class
-  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);
+  inspector.togglePseudoClass(pseudo);
 
   testAdded();
 
   // toggle the lock off
-  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);
+  inspector.togglePseudoClass(pseudo);
 
   testRemoved();
   testRemovedFromUI();
 
   // toggle it back on
-  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);  
+  inspector.togglePseudoClass(pseudo);
 
   // close the inspector
-  Services.obs.addObserver(testInspectorClosed,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-  InspectorUI.closeInspectorUI();
+  finishUp();
 }
 
 function testAdded()
@@ -99,14 +86,14 @@ function testAdded()
   } while (node.parentNode)
 
   // infobar selector contains pseudo-class
-  let pseudoClassesBox = document.getElementById("highlighter-nodeinfobar-pseudo-classes");
+  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
   is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
-  
+
   // ruleview contains pseudo-class rule
-  is(ruleView().element.children.length, 3,
+  is(ruleview.element.children.length, 3,
      "rule view is showing 3 rules for pseudo-class locked div");
-     
-  is(ruleView().element.children[1]._ruleEditor.rule.selectorText,
+
+  is(ruleview.element.children[1]._ruleEditor.rule.selectorText,
      "div:hover", "rule view is showing " + pseudo + " rule");
 }
 
@@ -124,27 +111,25 @@ function testRemoved()
 function testRemovedFromUI()
 {
   // infobar selector doesn't contain pseudo-class
-  let pseudoClassesBox = document.getElementById("highlighter-nodeinfobar-pseudo-classes");
+  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
   is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");    
 
   // ruleview no longer contains pseudo-class rule
-  is(ruleView().element.children.length, 2,
+  is(ruleview.element.children.length, 2,
      "rule view is showing 2 rules after removing lock");    
 }
 
-function testInspectorClosed()
-{
-  Services.obs.removeObserver(testInspectorClosed,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-
-  testRemoved();
-
-  finishUp();  
-}
-
 function finishUp()
 {
-  doc = div = null;
-  gBrowser.removeCurrentTab();
-  finish();
+  gDevTools.once("toolbox-destroyed", function() {
+    testRemoved();
+    inspector = ruleview = null;
+    doc = div = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  toolbox.destroy();
 }
diff --git a/browser/devtools/highlighter/test/browser_inspector_scrolling.js b/browser/devtools/inspector/test/browser_inspector_scrolling.js
similarity index 76%
rename from browser/devtools/highlighter/test/browser_inspector_scrolling.js
rename to browser/devtools/inspector/test/browser_inspector_scrolling.js
index 2116188fbd7..85db0080e7e 100644
--- a/browser/devtools/highlighter/test/browser_inspector_scrolling.js
+++ b/browser/devtools/inspector/test/browser_inspector_scrolling.js
@@ -7,6 +7,7 @@
 let doc;
 let div;
 let iframe;
+let inspector;
 
 function createDocument()
 {
@@ -21,35 +22,25 @@ function createDocument()
     div.textContent = "big div";
     div.setAttribute("style", "height:500px; width:500px; border:1px solid gray;");
     iframe.contentDocument.body.appendChild(div);
-    toggleInspector();
+    openInspector(inspectNode);
   }, false);
 
   iframe.src = "data:text/html,foo bar";
   doc.body.appendChild(iframe);
 }
 
-function toggleInspector()
+function inspectNode(aInspector)
 {
-  Services.obs.addObserver(inspectNode, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function inspectNode()
-{
-  Services.obs.removeObserver(inspectNode,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  InspectorUI.highlighter.addListener("nodeselected", performScrollingTest);
+  inspector = aInspector;
 
+  inspector.highlighter.once("locked", performScrollingTest);
   executeSoon(function() {
-    InspectorUI.inspectNode(div);
+    inspector.selection.setNode(div, "");
   });
 }
 
 function performScrollingTest()
 {
-  InspectorUI.highlighter.removeListener("nodeselected", performScrollingTest);
-
   executeSoon(function() {
     EventUtils.synthesizeWheel(div, 10, 10,
       { deltaY: 50.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL },
@@ -62,8 +53,9 @@ function performScrollingTest()
 
     is(iframe.contentDocument.body.scrollTop, 50, "inspected iframe scrolled");
 
-    div = iframe = doc = null;
-    InspectorUI.closeInspectorUI();
+    inspector = div = iframe = doc = null;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
     gBrowser.removeCurrentTab();
     finish();
   }, false);
diff --git a/browser/devtools/inspector/test/browser_inspector_sidebarstate.js b/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
new file mode 100644
index 00000000000..ba51db9a584
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+let doc;
+let inspector;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<h1>Sidebar state test</h1>';
+  doc.title = "Sidebar State Test";
+
+  openInspector(function(panel) {
+    inspector = panel;
+    inspector.sidebar.select("ruleview");
+    inspectorRuleViewOpened();
+  });
+}
+
+function inspectorRuleViewOpened()
+{
+  is(inspector.sidebar.getCurrentTabID(), "ruleview", "Rule View is selected by default");
+
+  // Select the computed view and turn off the inspector.
+  inspector.sidebar.select("computedview");
+
+  gDevTools.once("toolbox-destroyed", inspectorClosed);
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  executeSoon(function() {
+    toolbox.destroy();
+  });
+}
+
+function inspectorClosed()
+{
+  openInspector(function(panel) {
+    inspector = panel;
+    if (inspector.sidebar.getCurrentTabID()) {
+      // Default sidebar already selected.
+      testNewDefaultTab();
+    } else {
+      // Default sidebar still to be selected.
+      inspector.sidebar.once("select", testNewDefaultTab);
+    }
+  });
+}
+
+function testNewDefaultTab()
+{
+  is(inspector.sidebar.getCurrentTabID(), "computedview", "Computed view is selected by default.");
+
+  finishTest();
+}
+
+
+function finishTest()
+{
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_tree_height.js b/browser/devtools/inspector/test/browser_inspector_tree_height.js
similarity index 100%
rename from browser/devtools/highlighter/test/browser_inspector_tree_height.js
rename to browser/devtools/inspector/test/browser_inspector_tree_height.js
diff --git a/browser/devtools/highlighter/test/head.js b/browser/devtools/inspector/test/head.js
similarity index 64%
rename from browser/devtools/highlighter/test/head.js
rename to browser/devtools/inspector/test/head.js
index 7c34572aee6..45332a27bf0 100644
--- a/browser/devtools/highlighter/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@@ -6,30 +6,44 @@ const Cu = Components.utils;
 let tempScope = {};
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
 let LayoutHelpers = tempScope.LayoutHelpers;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
-// Clear preferences that may be set during the course of tests.
-function clearUserPrefs()
+function openInspector(callback)
 {
-  Services.prefs.clearUserPref("devtools.inspector.htmlPanelOpen");
-  Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
-  Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+  if (inspector && inspector.isReady) {
+    callback(inspector);
+  } else {
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-ready", function(event, panel) {
+      let inspector = gDevTools.getPanelForTarget("inspector", target);
+      callback(inspector);
+    });
+  }
 }
 
-registerCleanupFunction(clearUserPrefs);
+function getActiveInspector()
+{
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  return gDevTools.getPanelForTarget("inspector", target);
+}
 
 function isHighlighting()
 {
-  let outline = InspectorUI.highlighter.outline;
+  let outline = getActiveInspector().highlighter.outline;
   return !(outline.getAttribute("hidden") == "true");
 }
 
 function getHighlitNode()
 {
-  let h = InspectorUI.highlighter;
+  let h = getActiveInspector().highlighter;
   if (!isHighlighting() || !h._contentRect)
     return null;
 
@@ -61,7 +75,9 @@ function midPoint(aPointA, aPointB)
 
 function computedView()
 {
-  return InspectorUI.sidebar._toolContext("computedview");
+  let sidebar = getActiveInspector().sidebar;
+  let iframe = sidebar.tabbox.querySelector(".iframe-computedview");
+  return iframe.contentWindow.computedView;
 }
 
 function computedViewTree()
@@ -71,8 +87,11 @@ function computedViewTree()
 
 function ruleView()
 {
-  return InspectorUI.sidebar._toolContext("ruleview").view;
+  let sidebar = getActiveInspector().sidebar;
+  let iframe = sidebar.tabbox.querySelector(".iframe-ruleview");
+  return iframe.contentWindow.ruleView;
 }
+
 function synthesizeKeyFromKeyTag(aKeyId) {
   let key = document.getElementById(aKeyId);
   isnot(key, null, "Successfully retrieved the <key> node");
diff --git a/browser/devtools/highlighter/test/helpers.js b/browser/devtools/inspector/test/helpers.js
similarity index 100%
rename from browser/devtools/highlighter/test/helpers.js
rename to browser/devtools/inspector/test/helpers.js
diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn
index d3435d62059..ea3f4638947 100644
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -7,7 +7,7 @@ browser.jar:
     content/browser/devtools/markup-view.css      (markupview/markup-view.css)
     content/browser/NetworkPanel.xhtml            (webconsole/NetworkPanel.xhtml)
     content/browser/devtools/webconsole.js        (webconsole/webconsole.js)
-*   content/browser/devtools/webconsole.xul       (webconsole/webconsole.xul)
+    content/browser/devtools/webconsole.xul       (webconsole/webconsole.xul)
 *   content/browser/scratchpad.xul                (scratchpad/scratchpad.xul)
     content/browser/scratchpad.js                 (scratchpad/scratchpad.js)
     content/browser/splitview.css                 (shared/splitview.css)
@@ -16,11 +16,12 @@ browser.jar:
     content/browser/devtools/csshtmltree.xul      (styleinspector/csshtmltree.xul)
     content/browser/devtools/cssruleview.xul      (styleinspector/cssruleview.xul)
     content/browser/devtools/styleinspector.css   (styleinspector/styleinspector.css)
+    content/browser/devtools/layoutview/view.js   (layoutview/view.js)
     content/browser/devtools/layoutview/view.xhtml  (layoutview/view.xhtml)
     content/browser/devtools/layoutview/view.css  (layoutview/view.css)
     content/browser/orion.js                      (sourceeditor/orion/orion.js)
 *   content/browser/source-editor-overlay.xul     (sourceeditor/source-editor-overlay.xul)
-*   content/browser/debugger.xul                  (debugger/debugger.xul)
+    content/browser/debugger.xul                  (debugger/debugger.xul)
     content/browser/debugger.css                  (debugger/debugger.css)
     content/browser/debugger-controller.js        (debugger/debugger-controller.js)
     content/browser/debugger-view.js              (debugger/debugger-view.js)
@@ -29,3 +30,11 @@ browser.jar:
     content/browser/devtools/commandline.css      (commandline/commandline.css)
     content/browser/devtools/commandlineoutput.xhtml  (commandline/commandlineoutput.xhtml)
     content/browser/devtools/commandlinetooltip.xhtml  (commandline/commandlinetooltip.xhtml)
+    content/browser/devtools/framework/toolbox-window.xul    (framework/toolbox-window.xul)
+    content/browser/devtools/framework/toolbox.xul           (framework/toolbox.xul)
+    content/browser/devtools/framework/toolbox.css           (framework/toolbox.css)
+    content/browser/devtools/inspector/inspector.xul         (inspector/inspector.xul)
+    content/browser/devtools/inspector/inspector.css         (inspector/inspector.css)
+    content/browser/devtools/connect.xhtml  (framework/connect/connect.xhtml)
+    content/browser/devtools/connect.css    (framework/connect/connect.css)
+    content/browser/devtools/connect.js     (framework/connect/connect.js)
diff --git a/browser/devtools/layoutview/LayoutView.jsm b/browser/devtools/layoutview/LayoutView.jsm
deleted file mode 100644
index b07d411acff..00000000000
--- a/browser/devtools/layoutview/LayoutView.jsm
+++ /dev/null
@@ -1,368 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-"use strict";
-
-const Cu = Components.utils;
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/inspector.jsm");
-Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
-
-this.EXPORTED_SYMBOLS = ["LayoutView"];
-
-this.LayoutView = function LayoutView(aOptions)
-{
-  this.chromeDoc = aOptions.document;
-  this.inspector = aOptions.inspector;
-  this.browser = this.inspector.chromeWindow.gBrowser;
-
-  this.init();
-}
-
-LayoutView.prototype = {
-  init: function LV_init() {
-    this.cssLogic = new CssLogic();
-
-    this.update = this.update.bind(this);
-    this.onMessage = this.onMessage.bind(this);
-
-    this.isOpen = false;
-    this.documentReady = false;
-
-    // Is the layout view was open before?
-    if (!("_layoutViewIsOpen" in this.inspector)) {
-      this.inspector._layoutViewIsOpen =
-        Services.prefs.getBoolPref("devtools.layoutview.open");
-    }
-
-    // We update the values when:
-    //  a node is locked
-    //  we get the MozAfterPaint event and the node is locked
-    function onSelect() {
-      if (this.inspector.locked) {
-        this.cssLogic.highlight(this.inspector.selection);
-        this.undim();
-        this.update();
-        // We make sure we never add 2 listeners.
-        if (!this.trackingPaint) {
-          this.browser.addEventListener("MozAfterPaint", this.update, true);
-          this.trackingPaint = true;
-        }
-      }
-    }
-
-    function onUnlock() {
-      this.browser.removeEventListener("MozAfterPaint", this.update, true);
-      this.trackingPaint = false;
-      this.dim();
-    }
-
-    this.onSelect= onSelect.bind(this);
-    this.onUnlock = onUnlock.bind(this);
-    this.inspector.on("select", this.onSelect);
-    this.inspector.on("unlocked", this.onUnlock);
-
-    // Build the layout view in the sidebar.
-    this.buildView();
-
-    this.bound_handleKeypress = this.handleKeypress.bind(this);
-    this.iframe.addEventListener("keypress", this.bound_handleKeypress, true);
-
-    // Get messages from the iframe.
-    this.inspector.chromeWindow.addEventListener("message", this.onMessage, true);
-
-    // Store for the different dimensions of the node.
-    // 'selector' refers to the element that holds the value in view.xhtml;
-    // 'property' is what we are measuring;
-    // 'value' is the computed dimension, computed in update().
-    this.map = {
-      marginTop: {selector: ".margin.top > span",
-                  property: "margin-top",
-                  value: undefined},
-      marginBottom: {selector: ".margin.bottom > span",
-                  property: "margin-bottom",
-                  value: undefined},
-      marginLeft: {selector: ".margin.left > span",
-                  property: "margin-left",
-                  value: undefined},
-      marginRight: {selector: ".margin.right > span",
-                  property: "margin-right",
-                  value: undefined},
-      paddingTop: {selector: ".padding.top > span",
-                  property: "padding-top",
-                  value: undefined},
-      paddingBottom: {selector: ".padding.bottom > span",
-                  property: "padding-bottom",
-                  value: undefined},
-      paddingLeft: {selector: ".padding.left > span",
-                  property: "padding-left",
-                  value: undefined},
-      paddingRight: {selector: ".padding.right > span",
-                  property: "padding-right",
-                  value: undefined},
-      borderTop: {selector: ".border.top > span",
-                  property: "border-top-width",
-                  value: undefined},
-      borderBottom: {selector: ".border.bottom > span",
-                  property: "border-bottom-width",
-                  value: undefined},
-      borderLeft: {selector: ".border.left > span",
-                  property: "border-left-width",
-                  value: undefined},
-      borderRight: {selector: ".border.right > span",
-                  property: "border-right-width",
-                  value: undefined},
-    };
-  },
-
-  /**
-   * Destroy the nodes. Remove listeners.
-   */
-  destroy: function LV_destroy() {
-    this.inspector.off("select", this.onSelect);
-    this.inspector.off("unlocked", this.onUnlock);
-    this.browser.removeEventListener("MozAfterPaint", this.update, true);
-    this.iframe.removeEventListener("keypress", this.bound_handleKeypress, true);
-    this.inspector.chromeWindow.removeEventListener("message", this.onMessage, true);
-    this.close();
-    this.sizeHeadingLabel = null;
-    this.sizeLabel = null;
-    this.iframe = null;
-    this.view.parentNode.removeChild(this.view);
-  },
-
-  /**
-   * Build the Layout container:
-   *
-   * <vbox id="inspector-layoutview-container">
-   *  <iframe src="chrome://browser/content/devtools/layoutview/view.xhtml"/>
-   * </vbox>
-   */
-  buildView: function LV_buildPanel() {
-    this.iframe = this.chromeDoc.createElement("iframe");
-    this.iframe.setAttribute("src", "chrome://browser/content/devtools/layoutview/view.xhtml");
-
-    this.view = this.chromeDoc.createElement("vbox");
-    this.view.id = "inspector-layoutview-container";
-    this.view.appendChild(this.iframe);
-
-    let sidebar = this.chromeDoc.getElementById("devtools-sidebar-box");
-    sidebar.appendChild(this.view);
-  },
-
-  /**
-   * Called when the iframe is loaded.
-   */
-  onDocumentReady: function LV_onDocumentReady() {
-    this.documentReady = true;
-    this.doc = this.iframe.contentDocument;
-
-    // Save reference to the labels displaying size of the node.
-    this.sizeLabel = this.doc.querySelector(".size > span");
-    this.sizeHeadingLabel = this.doc.getElementById("element-size");
-
-    // We can't do that earlier because open() and close() need to do stuff
-    // inside the iframe.
-
-    if (this.inspector.locked)
-      this.onSelect();
-    else
-      this.onUnlock();
-
-    if (this.inspector._layoutViewIsOpen) {
-      this.open();
-    } else {
-      this.close();
-    }
-
-  },
-
-  /**
-   * This is where we get messages from the layout view iframe.
-   */
-  onMessage: function LV_onMessage(e) {
-    switch (e.data) {
-      case "layoutview-toggle-view":
-        this.toggle(true);
-        break;
-      case "layoutview-ready":
-        this.onDocumentReady();
-        break;
-      default:
-        break;
-    }
-  },
-
-  /**
-   * Handle keypress.
-   */
-   handleKeypress: function LV_handleKeypress(event) {
-     let win = this.inspector.chromeWindow;
-
-     // avoid scroll
-     if (event.keyCode == win.KeyEvent.DOM_VK_LEFT ||
-         event.keyCode == win.KeyEvent.DOM_VK_RIGHT ||
-         event.keyCode == win.KeyEvent.DOM_VK_UP ||
-         event.keyCode == win.KeyEvent.DOM_VK_DOWN ||
-         event.keyCode == win.KeyEvent.DOM_VK_PAGE_UP ||
-         event.keyCode == win.KeyEvent.DOM_VK_PAGE_DOWN) {
-
-        event.preventDefault();
-     }
-
-     if (event.charCode == win.KeyEvent.DOM_VK_SPACE) {
-       this.toggle(true);
-     }
-   },
-
-  /**
-   * Open the view container.
-   *
-   * @param aUserAction Is the action triggered by the user (click on the
-   * open/close button in the view)
-   */
-  open: function LV_open(aUserAction) {
-    this.isOpen = true;
-    if (this.documentReady)
-      this.doc.body.classList.add("open");
-    if (aUserAction) {
-      this.inspector._layoutViewIsOpen = true;
-      Services.prefs.setBoolPref("devtools.layoutview.open", true);
-      this.view.removeAttribute("disable-transitions");
-    } else {
-      this.view.setAttribute("disable-transitions", "true");
-    }
-    this.iframe.setAttribute("open", "true");
-    this.update();
-  },
-
-  /**
-   * Close the view container.
-   *
-   * @param aUserAction Is the action triggered by the user (click on the
-   * open/close button in the view)
-   */
-  close: function LV_close(aUserAction) {
-    this.isOpen = false;
-    if (this.documentReady)
-      this.doc.body.classList.remove("open");
-    if (aUserAction) {
-      this.inspector._layoutViewIsOpen = false;
-      Services.prefs.setBoolPref("devtools.layoutview.open", false);
-      this.view.removeAttribute("disable-transitions");
-    } else {
-      this.view.setAttribute("disable-transitions", "true");
-    }
-    this.iframe.removeAttribute("open");
-  },
-
-  /**
-   * Toggle view container state (open/close).
-   *
-   * @param aUserAction Is the action triggered by the user (click on the
-   * open/close button in the view)
-   */
-  toggle: function LV_toggle(aUserAction) {
-    this.isOpen ? this.close(aUserAction):this.open(aUserAction);
-  },
-
-  /**
-   * Hide the layout boxes. No node are selected.
-   */
-  dim: function LV_dim() {
-    if (!this.documentReady) return;
-    this.doc.body.classList.add("dim");
-  },
-
-  /**
-   * Show the layout boxes. A node is selected.
-   */
-  undim: function LV_dim() {
-    if (!this.documentReady) return;
-    this.doc.body.classList.remove("dim");
-  },
-
-  /**
-   * Compute the dimensions of the node and update the values in
-   * the layoutview/view.xhtml document.
-   */
-  update: function LV_update() {
-    let node = this.inspector.selection;
-    if (!node ||
-        !LayoutHelpers.isNodeConnected(node) ||
-        !this.documentReady) {
-      return;
-    }
-
-    // First, we update the first part of the layout view, with
-    // the size of the element.
-
-    let clientRect = node.getBoundingClientRect();
-    let width = Math.round(clientRect.width);
-    let height = Math.round(clientRect.height);
-
-    let newLabel = width + "x" + height;
-    if (this.sizeHeadingLabel.textContent != newLabel) {
-      this.sizeHeadingLabel.textContent = newLabel;
-    }
-
-    // If the view is closed, no need to do anything more.
-    if (!this.isOpen) return;
-
-    // We compute and update the values of margins & co.
-    let style = this.browser.contentWindow.getComputedStyle(node);;
-
-    for (let i in this.map) {
-      let property = this.map[i].property;
-      this.map[i].value = parseInt(style.getPropertyValue(property));
-    }
-
-    let margins = this.processMargins(node);
-    if ("top" in margins) this.map.marginTop.value = "auto";
-    if ("right" in margins) this.map.marginRight.value = "auto";
-    if ("bottom" in margins) this.map.marginBottom.value = "auto";
-    if ("left" in margins) this.map.marginLeft.value = "auto";
-
-    for (let i in this.map) {
-      let selector = this.map[i].selector;
-      let span = this.doc.querySelector(selector);
-      if (span.textContent.length > 0 &&
-          span.textContent == this.map[i].value) {
-        continue;
-      }
-      span.textContent = this.map[i].value;
-    }
-
-    width -= this.map.borderLeft.value + this.map.borderRight.value +
-             this.map.paddingLeft.value + this.map.paddingRight.value;
-
-    height -= this.map.borderTop.value + this.map.borderBottom.value +
-              this.map.paddingTop.value + this.map.paddingBottom.value;
-
-    let newValue = width + "x" + height;
-    if (this.sizeLabel.textContent != newValue) {
-      this.sizeLabel.textContent = newValue;
-    }
-  },
-
-  /**
-   * Find margins declared 'auto'
-   */
-  processMargins: function LV_processMargins(node) {
-    let margins = {};
-
-    for each (let prop in ["top", "bottom", "left", "right"]) {
-      let info = this.cssLogic.getPropertyInfo("margin-" + prop);
-      let selectors = info.matchedSelectors;
-      if (selectors && selectors.length > 0 && selectors[0].value == "auto") {
-        margins[prop] = "auto";
-      }
-    }
-
-    return margins;
-  },
-}
diff --git a/browser/devtools/layoutview/Makefile.in b/browser/devtools/layoutview/Makefile.in
index df206dadd99..a8d0b209397 100644
--- a/browser/devtools/layoutview/Makefile.in
+++ b/browser/devtools/layoutview/Makefile.in
@@ -13,6 +13,3 @@ include $(DEPTH)/config/autoconf.mk
 TEST_DIRS += test
 
 include $(topsrcdir)/config/rules.mk
-
-libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/layoutview/test/browser_layoutview.js b/browser/devtools/layoutview/test/browser_layoutview.js
index 291b8d267b0..3767c54424f 100644
--- a/browser/devtools/layoutview/test/browser_layoutview.js
+++ b/browser/devtools/layoutview/test/browser_layoutview.js
@@ -1,6 +1,10 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 function test() {
   waitForExplicitFinish();
 
@@ -10,6 +14,7 @@ function test() {
   let doc;
   let node;
   let view;
+  let inspector;
 
   // Expected values:
   let res1 = [
@@ -61,44 +66,36 @@ function test() {
     node = doc.querySelector("div");
     ok(node, "node found");
 
-    Services.obs.addObserver(openLayoutView,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-ready", function(event, panel) {
+      let inspector = gDevTools.getPanelForTarget("inspector", target);
+      openLayoutView(inspector);
+    });
   }
 
-  function openLayoutView() {
-    Services.obs.removeObserver(openLayoutView,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  function openLayoutView(aInspector) {
+    inspector = aInspector;
 
     info("Inspector open");
 
-    let highlighter = InspectorUI.highlighter;
-    highlighter.highlight(node);
-    highlighter.lock();
-
-    window.addEventListener("message", viewReady, true);
+    inspector.selection.setNode(node);
+    inspector.sidebar.select("layoutview");
+    inspector.sidebar.once("layoutview-ready", viewReady);
   }
 
-  function viewReady(e) {
-    if (e.data != "layoutview-ready") return;
-
-    window.removeEventListener("message", viewReady, true);
-
+  function viewReady() {
     info("Layout view ready");
 
-    view = InspectorUI._sidebar._layoutview;
+    view = inspector.sidebar.getWindowForTab("layoutview");
 
-    ok(!!view, "LayoutView document is alive.");
-
-    view.open();
-
-    ok(view.iframe.getAttribute("open"), "true", "View is open.");
+    ok(!!view.layoutview, "LayoutView document is alive.");
 
     test1();
   }
 
   function test1() {
-    let viewdoc = view.iframe.contentDocument;
+    let viewdoc = view.document;
 
     for (let i = 0; i < res1.length; i++) {
       let elt = viewdoc.querySelector(res1[i].selector);
@@ -107,14 +104,14 @@ function test() {
 
     gBrowser.selectedBrowser.addEventListener("MozAfterPaint", test2, false);
 
-    InspectorUI.selection.style.height = "150px";
-    InspectorUI.selection.style.paddingRight = "50px";
+    inspector.selection.node.style.height = "150px";
+    inspector.selection.node.style.paddingRight = "50px";
   }
 
   function test2() {
     gBrowser.selectedBrowser.removeEventListener("MozAfterPaint", test2, false);
 
-    let viewdoc = view.iframe.contentDocument;
+    let viewdoc = view.document;
 
     for (let i = 0; i < res2.length; i++) {
       let elt = viewdoc.querySelector(res2[i].selector);
@@ -122,16 +119,14 @@ function test() {
     }
 
     executeSoon(function() {
-      Services.obs.addObserver(finishUp,
-        InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-      InspectorUI.closeInspectorUI();
+      gDevTools.once("toolbox-destroyed", finishUp);
+      inspector._toolbox.destroy();
     });
   }
 
   function finishUp() {
     Services.prefs.clearUserPref("devtools.layoutview.enabled");
     Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/layoutview/view.css b/browser/devtools/layoutview/view.css
index a8e9d2861b0..4042929f0d0 100644
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@@ -38,10 +38,6 @@ body {
   -moz-box-pack: end;
 }
 
-#header:focus {
-  outline: none;
-}
-
 #main {
   margin: 0 10px 10px 10px;
   -moz-box-sizing: border-box;
diff --git a/browser/devtools/layoutview/view.js b/browser/devtools/layoutview/view.js
new file mode 100644
index 00000000000..130b6d790bc
--- /dev/null
+++ b/browser/devtools/layoutview/view.js
@@ -0,0 +1,248 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+"use strict";
+
+const Cu = Components.utils;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
+Cu.import("resource:///modules/devtools/CssLogic.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+function LayoutView(aInspector, aWindow)
+{
+  this.inspector = aInspector;
+
+  // <browser> is not always available (for Chrome targets for example)
+  if (this.inspector.target.tab) {
+    this.browser = aInspector.target.tab.linkedBrowser;
+  }
+
+  this.doc = aWindow.document;
+  this.sizeLabel = this.doc.querySelector(".size > span");
+  this.sizeHeadingLabel = this.doc.getElementById("element-size");
+
+  this.init();
+}
+
+LayoutView.prototype = {
+  init: function LV_init() {
+    this.cssLogic = new CssLogic();
+
+    this.update = this.update.bind(this);
+    this.onNewNode = this.onNewNode.bind(this);
+    this.onHighlighterLocked = this.onHighlighterLocked.bind(this);
+    this.inspector.selection.on("detached", this.onNewNode);
+    this.inspector.selection.on("new-node", this.onNewNode);
+    this.inspector.sidebar.on("layoutview-selected", this.onNewNode);
+    if (this.inspector.highlighter) {
+      this.inspector.highlighter.on("locked", this.onHighlighterLocked);
+    }
+
+    // Store for the different dimensions of the node.
+    // 'selector' refers to the element that holds the value in view.xhtml;
+    // 'property' is what we are measuring;
+    // 'value' is the computed dimension, computed in update().
+    this.map = {
+      marginTop: {selector: ".margin.top > span",
+                  property: "margin-top",
+                  value: undefined},
+      marginBottom: {selector: ".margin.bottom > span",
+                  property: "margin-bottom",
+                  value: undefined},
+      marginLeft: {selector: ".margin.left > span",
+                  property: "margin-left",
+                  value: undefined},
+      marginRight: {selector: ".margin.right > span",
+                  property: "margin-right",
+                  value: undefined},
+      paddingTop: {selector: ".padding.top > span",
+                  property: "padding-top",
+                  value: undefined},
+      paddingBottom: {selector: ".padding.bottom > span",
+                  property: "padding-bottom",
+                  value: undefined},
+      paddingLeft: {selector: ".padding.left > span",
+                  property: "padding-left",
+                  value: undefined},
+      paddingRight: {selector: ".padding.right > span",
+                  property: "padding-right",
+                  value: undefined},
+      borderTop: {selector: ".border.top > span",
+                  property: "border-top-width",
+                  value: undefined},
+      borderBottom: {selector: ".border.bottom > span",
+                  property: "border-bottom-width",
+                  value: undefined},
+      borderLeft: {selector: ".border.left > span",
+                  property: "border-left-width",
+                  value: undefined},
+      borderRight: {selector: ".border.right > span",
+                  property: "border-right-width",
+                  value: undefined},
+    };
+
+    this.onNewNode();
+  },
+
+  /**
+   * Is the layoutview visible in the sidebar?
+   */
+  isActive: function LV_isActive() {
+    return this.inspector.sidebar.getCurrentTabID() == "layoutview";
+  },
+
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy: function LV_destroy() {
+    this.inspector.sidebar.off("layoutview-selected", this.onNewNode);
+    this.inspector.selection.off("new-node", this.onNewNode);
+    this.inspector.selection.off("detached", this.onNewNode);
+    if (this.browser) {
+      this.browser.removeEventListener("MozAfterPaint", this.update, true);
+    }
+    if (this.inspector.highlighter) {
+      this.inspector.highlighter.on("locked", this.onHighlighterLocked);
+    }
+    this.sizeHeadingLabel = null;
+    this.sizeLabel = null;
+    this.inspector = null;
+    this.doc = null;
+  },
+
+  /**
+   * Selection 'new-node' event handler.
+   */
+  onNewNode: function LV_onNewNode() {
+    if (this.isActive() &&
+        this.inspector.selection.isConnected() &&
+        this.inspector.selection.isElementNode() &&
+        this.inspector.selection.reason != "highlighter") {
+      this.cssLogic.highlight(this.inspector.selection.node);
+      this.undim();
+      this.update();
+    } else {
+      this.dim();
+    }
+  },
+
+  /**
+   * Highlighter 'locked' event handler
+   */
+  onHighlighterLocked: function LV_onHighlighterLocked() {
+    this.cssLogic.highlight(this.inspector.selection.node);
+    this.undim();
+    this.update();
+  },
+
+  /**
+   * Hide the layout boxes. No node are selected.
+   */
+  dim: function LV_dim() {
+    if (this.browser) {
+      this.browser.removeEventListener("MozAfterPaint", this.update, true);
+    }
+    this.trackingPaint = false;
+    this.doc.body.classList.add("dim");
+    this.dimmed = true;
+  },
+
+  /**
+   * Show the layout boxes. A node is selected.
+   */
+  undim: function LV_undim() {
+    if (!this.trackingPaint) {
+      if (this.browser) {
+        this.browser.addEventListener("MozAfterPaint", this.update, true);
+      }
+      this.trackingPaint = true;
+    }
+    this.doc.body.classList.remove("dim");
+    this.dimmed = false;
+  },
+
+  /**
+   * Compute the dimensions of the node and update the values in
+   * the layoutview/view.xhtml document.
+   */
+  update: function LV_update() {
+    if (!this.isActive() ||
+        !this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()) {
+      return;
+    }
+
+    let node = this.inspector.selection.node;
+
+    // First, we update the first part of the layout view, with
+    // the size of the element.
+
+    let clientRect = node.getBoundingClientRect();
+    let width = Math.round(clientRect.width);
+    let height = Math.round(clientRect.height);
+
+    let newLabel = width + "x" + height;
+    if (this.sizeHeadingLabel.textContent != newLabel) {
+      this.sizeHeadingLabel.textContent = newLabel;
+    }
+
+    // If the view is dimmed, no need to do anything more.
+    if (this.dimmed) return;
+
+    // We compute and update the values of margins & co.
+    let style = node.ownerDocument.defaultView.getComputedStyle(node);
+
+    for (let i in this.map) {
+      let property = this.map[i].property;
+      this.map[i].value = parseInt(style.getPropertyValue(property));
+    }
+
+    let margins = this.processMargins(node);
+    if ("top" in margins) this.map.marginTop.value = "auto";
+    if ("right" in margins) this.map.marginRight.value = "auto";
+    if ("bottom" in margins) this.map.marginBottom.value = "auto";
+    if ("left" in margins) this.map.marginLeft.value = "auto";
+
+    for (let i in this.map) {
+      let selector = this.map[i].selector;
+      let span = this.doc.querySelector(selector);
+      if (span.textContent.length > 0 &&
+          span.textContent == this.map[i].value) {
+        continue;
+      }
+      span.textContent = this.map[i].value;
+    }
+
+    width -= this.map.borderLeft.value + this.map.borderRight.value +
+             this.map.paddingLeft.value + this.map.paddingRight.value;
+
+    height -= this.map.borderTop.value + this.map.borderBottom.value +
+              this.map.paddingTop.value + this.map.paddingBottom.value;
+
+    let newValue = width + "x" + height;
+    if (this.sizeLabel.textContent != newValue) {
+      this.sizeLabel.textContent = newValue;
+    }
+  },
+
+  /**
+   * Find margins declared 'auto'
+   */
+  processMargins: function LV_processMargins(node) {
+    let margins = {};
+
+    for each (let prop in ["top", "bottom", "left", "right"]) {
+      let info = this.cssLogic.getPropertyInfo("margin-" + prop);
+      let selectors = info.matchedSelectors;
+      if (selectors && selectors.length > 0 && selectors[0].value == "auto") {
+        margins[prop] = "auto";
+      }
+    }
+
+    return margins;
+  },
+}
diff --git a/browser/devtools/layoutview/view.xhtml b/browser/devtools/layoutview/view.xhtml
index d6f6db6ee2c..c4a20c0e7bf 100644
--- a/browser/devtools/layoutview/view.xhtml
+++ b/browser/devtools/layoutview/view.xhtml
@@ -10,8 +10,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
-    <title>Layout View</title>
+    <title>&title;</title>
 
+    <script type="application/javascript;version=1.8" src="view.js"></script>
     <script type="application/javascript;version=1.8">
     <![CDATA[
       let elts;
@@ -20,7 +21,8 @@
       const Ci = Components.interfaces;
       const Cc = Components.classes;
 
-      window.onload = function() {
+      window.setPanel = function(panel) {
+        this.layoutview = new LayoutView(panel, window);
 
         // Tooltip mechanism
         elts = document.querySelectorAll("*[tooltip]");
@@ -41,6 +43,7 @@
       }
 
       window.onunload = function() {
+        this.layoutview.destroy();
         if (elts) {
           for (let i = 0; i < elts.length; i++) {
             let elt = elts[i];
@@ -57,10 +60,6 @@
       function onmouseout(e) {
         tooltip.textContent = "";
       }
-
-      function toggleView() {
-        window.parent.postMessage("layoutview-toggle-view", "*");
-      }
     ]]>
     </script>
 
@@ -70,13 +69,10 @@
   </head>
   <body>
 
-    <!-- Header: always visible, even when the view is closed. -->
-    <a onclick="toggleView()" href="#" id="header">
+    <p id="header">
         <span id="element-size"></span>
-        <span id="togglebutton"></span>
-    </a>
+    </p>
 
-    <!-- Boxes: hidden when the view is closed. -->
     <div id="main">
 
       <div id="margins" tooltip="&margins.tooltip;">
diff --git a/browser/devtools/markupview/MarkupView.jsm b/browser/devtools/markupview/MarkupView.jsm
index 55967b0d3ca..a0ab2eeb6cc 100644
--- a/browser/devtools/markupview/MarkupView.jsm
+++ b/browser/devtools/markupview/MarkupView.jsm
@@ -39,7 +39,7 @@ Cu.import("resource://gre/modules/Services.jsm");
  * @param iframe aFrame
  *        An iframe in which the caller has kindly loaded markup-view.xhtml.
  */
-this.MarkupView = function MarkupView(aInspector, aFrame)
+this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
 {
   this._inspector = aInspector;
   this._frame = aFrame;
@@ -47,15 +47,15 @@ this.MarkupView = function MarkupView(aInspector, aFrame)
   this._elt = this.doc.querySelector("#root");
 
   this.undo = new UndoStack();
-  this.undo.installController(this._frame.ownerDocument.defaultView);
+  this.undo.installController(aControllerWindow);
 
   this._containers = new WeakMap();
 
   this._observer = new this.doc.defaultView.MutationObserver(this._mutationObserver.bind(this));
 
-  this._boundSelect = this._onSelect.bind(this);
-  this._inspector.on("select", this._boundSelect);
-  this._onSelect();
+  this._boundOnNewSelection = this._onNewSelection.bind(this);
+  this._inspector.selection.on("new-node", this._boundOnNewSelection);
+  this._onNewSelection();
 
   this._boundKeyDown = this._onKeyDown.bind(this);
   this._frame.addEventListener("keydown", this._boundKeyDown, false);
@@ -69,13 +69,6 @@ this.MarkupView = function MarkupView(aInspector, aFrame)
 MarkupView.prototype = {
   _selectedContainer: null,
 
-  /**
-   * Return the selected node.
-   */
-  get selected() {
-    return this._selectedContainer ? this._selectedContainer.node : null;
-  },
-
   template: function MT_template(aName, aDest, aOptions)
   {
     let node = this.doc.getElementById("template-" + aName).cloneNode(true);
@@ -94,14 +87,16 @@ MarkupView.prototype = {
   },
 
   /**
-   * Highlight the given element in the markup panel.
+   * Highlight the inspector selected node.
    */
-  _onSelect: function MT__onSelect()
+  _onNewSelection: function MT__onNewSelection()
   {
-    if (this._inspector.selection) {
-      this.showNode(this._inspector.selection, true);
+    if (this._inspector.selection.isNode()) {
+      this.showNode(this._inspector.selection.node, true);
+      this.markNodeAsSelected(this._inspector.selection.node);
+    } else {
+      this.unmarkSelectedNode();
     }
-    this.selectNode(this._inspector.selection);
   },
 
   /**
@@ -255,12 +250,11 @@ MarkupView.prototype = {
 
     let node = aContainer.node;
     this.showNode(node, false);
-    this.selectNode(node);
 
-    if (this._inspector._IUI.highlighter.isNodeHighlightable(node)) {
-      this._inspector._IUI.select(node, true, false, "treepanel");
-      this._inspector._IUI.highlighter.highlight(node);
-    }
+    this._inspector.selection.setNode(node, "treepanel");
+    // This event won't be fired if the node is the same. But the highlighter
+    // need to lock the node if it wasn't.
+    this._inspector.selection.emit("new-node");
 
     if (!aIgnoreFocus) {
       aContainer.focus();
@@ -413,7 +407,7 @@ MarkupView.prototype = {
   /**
    * Mark the given node selected.
    */
-  selectNode: function MT_selectNode(aNode)
+  markNodeAsSelected: function MT_markNodeAsSelected(aNode)
   {
     let container = this._containers.get(aNode);
     if (this._selectedContainer === container) {
@@ -427,11 +421,20 @@ MarkupView.prototype = {
       this._selectedContainer.selected = true;
     }
 
-    this._selectedContainer.focus();
-
     return true;
   },
 
+  /**
+   * Unmark selected node (no node selected).
+   */
+  unmarkSelectedNode: function MT_unmarkSelectedNode()
+  {
+    if (this._selectedContainer) {
+      this._selectedContainer.selected = false;
+      this._selectedContainer = null;
+    }
+  },
+
   /**
    * Called when the markup panel initiates a change on a node.
    */
@@ -490,8 +493,8 @@ MarkupView.prototype = {
     this._frame.removeEventListener("keydown", this._boundKeyDown, true);
     delete this._boundKeyDown;
 
-    this._inspector.off("select", this._boundSelect);
-    delete this._boundSelect;
+    this._inspector.selection.off("new-node", this._boundOnNewSelection);
+    delete this._boundOnNewSelection;
 
     delete this._elt;
 
@@ -947,9 +950,9 @@ ElementEditor.prototype = {
         start: function EE_editAttribute_start(aEditor, aEvent) {
           // If the editing was started inside the name or value areas,
           // select accordingly.
-          if (aEvent.target === name) {
+          if (aEvent && aEvent.target === name) {
             aEditor.input.setSelectionRange(0, name.textContent.length);
-          } else if (aEvent.target === val) {
+          } else if (aEvent && aEvent.target === val) {
             let length = val.textContent.length;
             let editorLength = aEditor.input.value.length;
             let start = editorLength - (length + 1);
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.js b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
index 280f025dce5..dfe1ed6d734 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
@@ -17,8 +17,10 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
  */
 
 function test() {
+  let inspector;
   let tempScope = {}
   Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
+
   let inplaceEditor = tempScope._getInplaceEditorForSpan;
 
   waitForExplicitFinish();
@@ -52,8 +54,8 @@ function test() {
 
   // All the mutation types we want to test.
   let edits = [
-    // Change an attribute
     {
+      desc: "Change an attribute",
       before: function() {
         assertAttributes(doc.querySelector("#node1"), {
           id: "node1",
@@ -73,8 +75,8 @@ function test() {
       }
     },
 
-    // Try change an attribute to a badly formed string
     {
+      desc: "Try change an attribute to a badly formed string",
       before: function() {
         assertAttributes(doc.querySelector("#node22"), {
           id: "node22",
@@ -94,9 +96,8 @@ function test() {
       }
     },
 
-
-    // Remove an attribute
     {
+      desc: "Remove an attribute",
       before: function() {
         assertAttributes(doc.querySelector("#node4"), {
           id: "node4",
@@ -115,8 +116,8 @@ function test() {
       }
     },
 
-    // Add an attribute by clicking the empty space after a node
     {
+      desc: "Add an attribute by clicking the empty space after a node",
       before: function() {
         assertAttributes(doc.querySelector("#node14"), {
           id: "node14",
@@ -136,8 +137,8 @@ function test() {
       }
     },
 
-    // Try add a badly formed attribute by clicking the empty space after a node
     {
+      desc: "Try add a badly formed attribute by clicking the empty space after a node",
       before: function() {
         assertAttributes(doc.querySelector("#node23"), {
           id: "node23",
@@ -155,34 +156,8 @@ function test() {
       }
     },
 
-    // Add attributes by adding to an existing attribute's entry
-    {
-      setup: function() {
-        InspectorUI.select(doc.querySelector("#node18"), true, true, true);
-      },
-      before: function() {
-        assertAttributes(doc.querySelector("#node18"), {
-          id: "node18",
-        });
-        is(InspectorUI.highlighter.nodeInfo.classesBox.textContent, "", "No classes in the infobar before edit.");
-      },
-      execute: function() {
-        let editor = markup.getContainer(doc.querySelector("#node18")).editor;
-        let attr = editor.attrs["id"].querySelector(".editable");
-        editField(attr, attr.textContent + ' class="newclass" style="color:green"');
-      },
-      after: function() {
-        assertAttributes(doc.querySelector("#node18"), {
-          id: "node18",
-          class: "newclass",
-          style: "color:green"
-        });
-        is(InspectorUI.highlighter.nodeInfo.classesBox.textContent, ".newclass", "Correct classes in the infobar after edit.");
-      }
-    },
-
-    // Try add attributes by adding to an existing attribute's entry
     {
+      desc: "Try add attributes by adding to an existing attribute's entry",
       before: function() {
         assertAttributes(doc.querySelector("#node24"), {
           id: "node24",
@@ -200,22 +175,8 @@ function test() {
       }
     },
 
-    // Remove an element with the delete key
-    {
-      before: function() {
-        ok(!!doc.querySelector("#node18"), "Node 18 should exist.");
-      },
-      execute: function() {
-        markup.selectNode(doc.querySelector("#node18"));
-        EventUtils.sendKey("delete");
-      },
-      after: function() {
-        ok(!doc.querySelector("#node18"), "Node 18 should not exist.")
-      }
-    },
-
-    // Edit text
     {
+      desc: "Edit text",
       before: function() {
         let node = doc.querySelector('.node6').firstChild;
         is(node.nodeValue, "line6", "Text should be unchanged");
@@ -231,19 +192,103 @@ function test() {
         is(node.nodeValue, "New text", "Text should be changed.");
       },
     },
+  ];
 
-    // Edit the tag name
-    {
+  // Create the helper tab for parsing...
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    doc = content.document;
+    waitForFocus(setupTest, content);
+  }, true);
+  content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_edit.html";
+
+  function setupTest() {
+    var target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
+      inspector = aInspector;
+      runTests();
+    });
+  }
+
+  function runTests() {
+    inspector.selection.once("new-node", startTests);
+    executeSoon(function() {
+      inspector.selection.setNode(doc.body);
+    });
+  }
+
+  function startTests() {
+    let startNode = doc.documentElement.cloneNode();
+    markup = inspector.markup;
+    markup.expandAll();
+    for (let step of edits) {
+      info("START " + step.desc);
+      if (step.setup) {
+        step.setup();
+      }
+      step.before();
+      step.execute();
+      step.after();
+      ok(markup.undo.canUndo(), "Should be able to undo.");
+      markup.undo.undo();
+      step.before();
+      ok(markup.undo.canRedo(), "Should be able to redo.");
+      markup.undo.redo();
+      step.after();
+      info("END " + step.desc);
+    }
+    addAttributes();
+  }
+
+  function addAttributes() {
+    let test = {
+      desc: "Add attributes by adding to an existing attribute's entry",
       setup: function() {
-        markup.selectNode(doc.querySelector("#retag-me"));
+        inspector.selection.setNode(doc.querySelector("#node18"));
+      },
+      before: function() {
+        assertAttributes(doc.querySelector("#node18"), {
+          id: "node18",
+        });
+
+        is(inspector.highlighter.nodeInfo.classesBox.textContent, "",
+          "No classes in the infobar before edit.");
+      },
+      execute: function() {
+        let editor = markup.getContainer(doc.querySelector("#node18")).editor;
+        let attr = editor.attrs["id"].querySelector(".editable");
+        editField(attr, attr.textContent + ' class="newclass" style="color:green"');
+      },
+      after: function() {
+        assertAttributes(doc.querySelector("#node18"), {
+          id: "node18",
+          class: "newclass",
+          style: "color:green"
+        });
+        is(inspector.highlighter.nodeInfo.classesBox.textContent, ".newclass",
+          "Correct classes in the infobar after edit.");
+      }
+    };
+    testAsyncSetup(test, editTagName);
+  }
+
+  function editTagName() {
+    let test =  {
+      desc: "Edit the tag name",
+      setup: function() {
+        inspector.selection.setNode(doc.querySelector("#retag-me"));
       },
       before: function() {
         let node = doc.querySelector("#retag-me");
         let container = markup.getContainer(node);
+
         is(node.tagName, "DIV", "retag-me should be a div.");
         ok(container.selected, "retag-me should be selected.");
         ok(container.expanded, "retag-me should be expanded.");
-        is(doc.querySelector("#retag-me-2").parentNode, node, "retag-me-2 should be a child of the old element.");
+        is(doc.querySelector("#retag-me-2").parentNode, node,
+          "retag-me-2 should be a child of the old element.");
       },
       execute: function() {
         let node = doc.querySelector("#retag-me");
@@ -257,65 +302,80 @@ function test() {
         is(node.tagName, "P", "retag-me should be a p.");
         ok(container.selected, "retag-me should be selected.");
         ok(container.expanded, "retag-me should be expanded.");
-        is(doc.querySelector("#retag-me-2").parentNode, node, "retag-me-2 should be a child of the new element.");
+        is(doc.querySelector("#retag-me-2").parentNode, node,
+          "retag-me-2 should be a child of the new element.");
       }
-    },
-  ];
-
-  // Create the helper tab for parsing...
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    doc = content.document;
-    waitForFocus(setupTest, content);
-  }, true);
-  content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_edit.html";
-
-  function setupTest() {
-    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
+    };
+    testAsyncSetup(test, removeElementWithDelete);
   }
 
-  function runTests() {
-    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-    InspectorUI.currentInspector.once("markuploaded", startTests);
-    InspectorUI.select(doc.body, true, true, true);
-    InspectorUI.stopInspecting();
-    InspectorUI.toggleHTMLPanel();
+  function removeElementWithDelete() {
+    let test =  {
+      desc: "Remove an element with the delete key",
+      before: function() {
+        ok(!!doc.querySelector("#node18"), "Node 18 should exist.");
+      },
+      execute: function() {
+        inspector.selection.setNode(doc.querySelector("#node18"));
+      },
+      executeCont: function() {
+        EventUtils.sendKey("delete");
+      },
+      after: function() {
+        ok(!doc.querySelector("#node18"), "Node 18 should not exist.")
+      }
+    };
+    testAsyncExecute(test, finishUp);
   }
 
-  function startTests() {
-    let startNode = doc.documentElement.cloneNode();
-    markup = InspectorUI.currentInspector.markup;
-    markup.expandAll();
-    for (let step of edits) {
-      if (step.setup) {
-        step.setup();
-      }
-      step.before();
-      step.execute();
-      step.after();
-      ok(markup.undo.canUndo(), "Should be able to undo.");
-      markup.undo.undo();
-      step.before();
+  function testAsyncExecute(test, callback) {
+    info("START " + test.desc);
+
+    test.before();
+    inspector.selection.once("new-node", function BIMET_testAsyncExecNewNode() {
+      test.executeCont();
+      test.after();
+      undoRedo(test, callback);
+    });
+    executeSoon(function BIMET_setNode1() {
+      test.execute();
+    });
+  }
+
+  function testAsyncSetup(test, callback) {
+    info("START " + test.desc);
+
+    inspector.selection.once("new-node", function BIMET_testAsyncSetupNewNode() {
+      test.before();
+      test.execute();
+      test.after();
+      undoRedo(test, callback);
+    });
+    executeSoon(function BIMET_setNode2() {
+      test.setup();
+    });
+  }
+
+  function undoRedo(test, callback) {
+    ok(markup.undo.canUndo(), "Should be able to undo.");
+    markup.undo.undo();
+    executeSoon(function() {
+      test.before();
       ok(markup.undo.canRedo(), "Should be able to redo.");
       markup.undo.redo();
-      step.after();
-    }
-
-    while (markup.undo.canUndo()) {
-      markup.undo.undo();
-    }
-    // By now we should have a healthy undo stack, clear it out and we should be back where
-    // we started.
-    ok(doc.documentElement.isEqualNode(startNode), "Clearing the undo stack should leave us where we started.");
-    Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    InspectorUI.closeInspectorUI();
+      executeSoon(function() {
+        test.after();
+        info("END " + test.desc);
+        callback();
+      });
+    });
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-    doc = null;
+    while (markup.undo.canUndo()) {
+      markup.undo.undo();
+    }
+    doc = inspector = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_mutation.js b/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
index a34d86fd65a..463fc8e4880 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
@@ -24,6 +24,8 @@ function test() {
   let parseTab;
   let parseDoc;
 
+  let inspector;
+
   // Strip whitespace from a node and its children.
   function stripWhitespace(node)
   {
@@ -143,32 +145,27 @@ function test() {
   content.location = "data:text/html,<html></html>";
 
   function setupTest() {
-    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
-  }
-
-  function runTests() {
-    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-    InspectorUI.currentInspector.once("markuploaded", startTests);
-    InspectorUI.select(doc.body, true, true, true);
-    InspectorUI.stopInspecting();
-    InspectorUI.toggleHTMLPanel();
+    var target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-selected", function BIMMT_selected(id, aInspector) {
+      inspector = aInspector;
+      startTests();
+    });
   }
 
   function startTests() {
-    markup = InspectorUI.currentInspector.markup;
+    markup = inspector.markup;
     checkMarkup();
     nextStep(0);
   }
 
   function nextStep(cursor) {
     if (cursor >= mutations.length) {
-      Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-      InspectorUI.closeInspectorUI();
+      finishUp();
       return;
     }
     mutations[cursor]();
-    InspectorUI.currentInspector.once("markupmutation", function() {
+    inspector.once("markupmutation", function() {
       executeSoon(function() {
         checkMarkup();
         nextStep(cursor + 1);
@@ -177,8 +174,7 @@ function test() {
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-    doc = null;
+    doc = inspector = null;
     gBrowser.removeTab(contentTab);
     gBrowser.removeTab(parseTab);
     finish();
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_navigation.html b/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
index fe5561181b1..9633052e17f 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
+++ b/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 
 <html class="html">
-  <meta charset=utf-8 />
+  <head class="head">
+    <meta charset=utf-8 />
+  </head>
 
   <body class="body">
     <div class="node0">
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_navigation.js b/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
index 4540c1e5c60..3cc3a18c505 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
@@ -3,12 +3,16 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
 
 
 function test() {
+  let inspector;
 
   waitForExplicitFinish();
 
   let doc;
 
   let keySequences = [
+    ["right", "html"],
+    ["down", "head"],
+    ["down", "body"],
     ["right", "body"],
     ["down", "node0"],
     ["right", "node0"],
@@ -68,34 +72,28 @@ function test() {
 
   content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_navigation.html";
 
-  let markup = null;
-
   function setupTest() {
-    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.toggleInspectorUI();
-  }
-
-  function runTests() {
-    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
-    InspectorUI.currentInspector.once("markuploaded", startNavigation);
-    InspectorUI.select(doc.body, true, true, true);
-    InspectorUI.toggleHTMLPanel();
+    var target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-selected", function BIMNT_selected(id, aInspector) {
+      inspector = aInspector;
+      startNavigation();
+    });
   }
 
   function startNavigation() {
-    markup = InspectorUI.currentInspector.markup;
     nextStep(0);
   }
 
   function nextStep(cursor) {
     if (cursor >= keySequences.length) {
-      Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-      InspectorUI.closeInspectorUI();
+      finishUp();
       return;
     }
 
     let key = keySequences[cursor][0];
     let className = keySequences[cursor][1];
+    inspector.markup._frame.focus();
 
     switch(key) {
       case "right":
@@ -121,8 +119,9 @@ function test() {
         break;
     }
 
-    executeSoon(function() {
-      let node = markup.selected;
+    executeSoon(function BIMNT_newNode() {
+      let node = inspector.selection.node;
+
       if (className == "*comment*") {
         is(node.nodeType, Node.COMMENT_NODE, "[" + cursor + "] should be a comment after moving " + key);
       } else if (className == "*text*") {
@@ -132,13 +131,13 @@ function test() {
       } else {
         is(node.className, className, "[" + cursor + "] right node selected: " + className + " after moving " + key);
       }
+
       nextStep(cursor + 1);
     });
   }
 
   function finishUp() {
-    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
-    doc = null;
+    doc = inspector = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/markupview/test/head.js b/browser/devtools/markupview/test/head.js
index 3907fad4fbd..61cc0427410 100644
--- a/browser/devtools/markupview/test/head.js
+++ b/browser/devtools/markupview/test/head.js
@@ -4,6 +4,12 @@
 
 const Cu = Components.utils;
 
+let TargetFactory = (function() {
+  let tempScope = {};
+  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
+  return tempScope.TargetFactory;
+})();
+
 // Clear preferences that may be set during the course of tests.
 function clearUserPrefs()
 {
diff --git a/browser/devtools/responsivedesign/CmdResize.jsm b/browser/devtools/responsivedesign/CmdResize.jsm
index 1303136c296..d35fdf33ed7 100644
--- a/browser/devtools/responsivedesign/CmdResize.jsm
+++ b/browser/devtools/responsivedesign/CmdResize.jsm
@@ -30,6 +30,8 @@ gcli.addCommand({
 
 gcli.addCommand({
   name: 'resize toggle',
+  buttonId: "command-button-responsive",
+  buttonClass: "command-button",
   description: gcli.lookup('resizeModeToggleDesc'),
   manual: gcli.lookup('resizeModeManual'),
   exec: gcli_cmd_resize
diff --git a/browser/devtools/responsivedesign/responsivedesign.jsm b/browser/devtools/responsivedesign/responsivedesign.jsm
index a74df04f9da..8f45f9eecf5 100644
--- a/browser/devtools/responsivedesign/responsivedesign.jsm
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -9,8 +9,10 @@ const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import("resource:///modules/devtools/FloatingScrollbars.jsm");
 Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/Target.jsm");
 
 this.EXPORTED_SYMBOLS = ["ResponsiveUIManager"];
 
@@ -161,7 +163,8 @@ function ResponsiveUI(aWindow, aTab)
   this.buildUI();
   this.checkMenus();
 
-  this.inspectorWasOpen = this.mainWindow.InspectorUI.isInspectorOpen;
+  let target = TargetFactory.forTab(this.tab);
+  this.toolboxWasOpen = !!gDevTools.getToolboxForTarget(target);
 
   try {
     if (Services.prefs.getBoolPref("devtools.responsiveUI.rotate")) {
@@ -241,12 +244,13 @@ ResponsiveUI.prototype = {
     if (aEvent.keyCode == this.mainWindow.KeyEvent.DOM_VK_ESCAPE &&
         this.mainWindow.gBrowser.selectedBrowser == this.browser) {
 
-      // If the inspector wasn't open at first but is open now,
+      // If the toolbox wasn't open at first but is open now,
       // we don't want to close the Responsive Mode on Escape.
-      // We let the inspector close first.
+      // We let the toolbox close first.
 
-      let isInspectorOpen = this.mainWindow.InspectorUI.isInspectorOpen;
-      if (this.inspectorWasOpen || !isInspectorOpen) {
+      let target = TargetFactory.forTab(this.tab);
+      let isToolboxOpen =  !!gDevTools.getToolboxForTarget(target);
+      if (this.toolboxWasOpen || !isToolboxOpen) {
         aEvent.preventDefault();
         aEvent.stopPropagation();
         this.close();
diff --git a/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js b/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
index bfdcb11d600..540e918f596 100644
--- a/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
+++ b/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
@@ -5,6 +5,7 @@ function test() {
   let instance;
 
   let computedView;
+  let inspector;
 
   waitForExplicitFinish();
 
@@ -52,29 +53,27 @@ function test() {
 
     instance.setSize(500, 500);
 
-    Services.obs.addObserver(onInspectorUIOpen,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.openInspectorUI();
+    openInspector(onInspectorUIOpen);
   }
 
-  function onInspectorUIOpen() {
-    Services.obs.removeObserver(onInspectorUIOpen,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  function onInspectorUIOpen(aInspector) {
+    inspector = aInspector;
+    ok(inspector, "Got inspector instance");
+    inspector.sidebar.select("computedview");
 
     let div = content.document.getElementsByTagName("div")[0];
-    InspectorUI.inspectNode(div);
-    InspectorUI.stopInspecting();
 
-    Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
-
-    InspectorUI.sidebar.show();
-    InspectorUI.sidebar.activatePanel("computedview");
+    inspector.sidebar.once("computedview-ready", function() {
+      Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
+      inspector.selection.setNode(div);
+    });
   }
 
   function testShrink() {
     Services.obs.removeObserver(testShrink, "StyleInspector-populated", false);
 
-    computedView = InspectorUI.sidebar._toolContext("computedview").view;
+    computedView = inspector.sidebar.getWindowForTab("computedview").computedview.view;
+    ok(computedView, "We have access to the Computed View object");
 
     is(computedWidth(), "500px", "Should show 500px initially.");
 
@@ -103,8 +102,6 @@ function test() {
     // Menus are correctly updated?
     is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "false", "menu unchecked");
 
-    InspectorUI.closeInspectorUI();
-
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/responsivedesign/test/browser_responsiveruleview.js b/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
index 8161e8dc0d2..9aeb3147a30 100644
--- a/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
+++ b/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
@@ -5,6 +5,7 @@ function test() {
   let instance;
 
   let ruleView;
+  let inspector;
 
   waitForExplicitFinish();
 
@@ -47,27 +48,26 @@ function test() {
 
     instance.setSize(500, 500);
 
-    Services.obs.addObserver(onInspectorUIOpen,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    InspectorUI.openInspectorUI();
+    openInspector(onInspectorUIOpen);
   }
 
-  function onInspectorUIOpen() {
-    Services.obs.removeObserver(onInspectorUIOpen,
-      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  function onInspectorUIOpen(aInspector) {
+    inspector = aInspector;
+    ok(inspector, "Got inspector instance");
+    inspector.sidebar.select("ruleview");
 
     let div = content.document.getElementsByTagName("div")[0];
-    InspectorUI.inspectNode(div);
-    InspectorUI.stopInspecting();
 
-    InspectorUI.currentInspector.once("sidebaractivated-ruleview", testShrink);
-
-    InspectorUI.sidebar.show();
-    InspectorUI.sidebar.activatePanel("ruleview");
+    inspector.sidebar.once("ruleview-ready", function() {
+      Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
+      inspector.selection.setNode(div);
+    });
   }
 
   function testShrink() {
-    ruleView = InspectorUI.sidebar._toolContext("ruleview").view;
+    Services.obs.removeObserver(testShrink, "StyleInspector-populated");
+
+    ruleView = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
 
     is(numberOfRules(), 2, "Should have two rules initially.");
 
@@ -96,7 +96,6 @@ function test() {
     // Menus are correctly updated?
     is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "false", "menu unchecked");
 
-    InspectorUI.closeInspectorUI();
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/responsivedesign/test/head.js b/browser/devtools/responsivedesign/test/head.js
index d4dc324c438..cc6b0832a7e 100644
--- a/browser/devtools/responsivedesign/test/head.js
+++ b/browser/devtools/responsivedesign/test/head.js
@@ -3,6 +3,27 @@
 
 "use strict";
 
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
+
+function openInspector(callback)
+{
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+  if (inspector && inspector.isReady) {
+    callback(inspector);
+  } else {
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-ready", function(event, panel) {
+      let inspector = gDevTools.getPanelForTarget("inspector", target);
+      callback(inspector);
+    });
+  }
+}
+
diff --git a/browser/devtools/scratchpad/CmdScratchpad.jsm b/browser/devtools/scratchpad/CmdScratchpad.jsm
new file mode 100644
index 00000000000..859b287f1fa
--- /dev/null
+++ b/browser/devtools/scratchpad/CmdScratchpad.jsm
@@ -0,0 +1,21 @@
+/* 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/. */
+
+this.EXPORTED_SYMBOLS = [ ];
+
+Components.utils.import("resource:///modules/devtools/gcli.jsm");
+
+/**
+ * 'scratchpad' command
+ */
+gcli.addCommand({
+  name: "scratchpad",
+  buttonId: "command-button-scratchpad",
+  buttonClass: "command-button",
+  hidden: true,
+  exec: function(args, context) {
+    let chromeWindow = context.environment.chromeDocument.defaultView;
+    chromeWindow.Scratchpad.ScratchpadManager.openScratchpad();
+  }
+});
diff --git a/browser/devtools/scratchpad/scratchpad.js b/browser/devtools/scratchpad/scratchpad.js
index f69743bab46..a8dde0114dc 100644
--- a/browser/devtools/scratchpad/scratchpad.js
+++ b/browser/devtools/scratchpad/scratchpad.js
@@ -26,6 +26,8 @@ Cu.import("resource:///modules/source-editor.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource:///modules/devtools/scratchpad-manager.jsm");
 Cu.import("resource://gre/modules/jsdebugger.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource:///modules/devtools/Target.jsm");
 
 const SCRATCHPAD_CONTEXT_CONTENT = 1;
 const SCRATCHPAD_CONTEXT_BROWSER = 2;
@@ -1053,9 +1055,8 @@ var Scratchpad = {
    */
   openWebConsole: function SP_openWebConsole()
   {
-    if (!this.browserWindow.HUDConsoleUI.getOpenHUD()) {
-      this.browserWindow.HUDConsoleUI.toggleHUD();
-    }
+    let target = TargetFactory.forTab(this.gBrowser.selectedTab);
+    gDevTools.openToolboxForTab(target, "webconsole");
     this.browserWindow.focus();
   },
 
diff --git a/browser/devtools/scratchpad/scratchpad.xul b/browser/devtools/scratchpad/scratchpad.xul
index 8dfcfa7c372..dd6edd351c4 100644
--- a/browser/devtools/scratchpad/scratchpad.xul
+++ b/browser/devtools/scratchpad/scratchpad.xul
@@ -100,10 +100,6 @@
        key="&errorConsoleCmd.commandkey;"
        command="sp-cmd-errorConsole"
        modifiers="accel,shift"/>
-  <key id="sp-key-webConsole"
-       key="&webConsoleCmd.commandkey;"
-       command="sp-cmd-webConsole"
-       modifiers="accel,shift"/>
   <key id="key_openHelp"
        keycode="VK_F1"
        command="sp-cmd-documentationLink"/>
diff --git a/browser/devtools/shared/DeveloperToolbar.jsm b/browser/devtools/shared/DeveloperToolbar.jsm
index 8a921e65c85..ecf9095cb58 100644
--- a/browser/devtools/shared/DeveloperToolbar.jsm
+++ b/browser/devtools/shared/DeveloperToolbar.jsm
@@ -4,7 +4,7 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [ "DeveloperToolbar" ];
+this.EXPORTED_SYMBOLS = [ "DeveloperToolbar", "CommandUtils" ];
 
 const NS_XHTML = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -27,6 +27,92 @@ XPCOMUtils.defineLazyModuleGetter(this, "CmdCommands",
 XPCOMUtils.defineLazyModuleGetter(this, "PageErrorListener",
                                   "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
+XPCOMUtils.defineLazyGetter(this, "prefBranch", function() {
+  var prefService = Components.classes["@mozilla.org/preferences-service;1"]
+          .getService(Components.interfaces.nsIPrefService);
+  return prefService.getBranch(null)
+          .QueryInterface(Components.interfaces.nsIPrefBranch2);
+});
+
+/**
+ * A collection of utilities to help working with commands
+ */
+this.CommandUtils = {
+  /**
+   * Read a toolbarSpec from preferences
+   * @param aPref The name of the preference to read
+   */
+  getCommandbarSpec: function CU_getCommandbarSpec(aPref) {
+    let value = prefBranch.getComplexValue(aPref,
+                               Components.interfaces.nsISupportsString).data;
+    return JSON.parse(value);
+  },
+
+  /**
+   * A toolbarSpec is an array of buttonSpecs. A buttonSpec is an array of
+   * strings each of which is a GCLI command (including args if needed).
+   */
+  createButtons: function CU_createButtons(toolbarSpec, document, requisition) {
+    var reply = [];
+
+    toolbarSpec.forEach(function(buttonSpec) {
+      var button = document.createElement("toolbarbutton");
+      reply.push(button);
+
+      if (typeof buttonSpec == "string") {
+        buttonSpec = { typed: buttonSpec };
+      }
+      // Ask GCLI to parse the typed string (doesn't execute it)
+      requisition.update(buttonSpec.typed);
+
+      // Ignore invalid commands
+      var command = requisition.commandAssignment.value;
+      if (command == null) {
+        // TODO: Have a broken icon
+        // button.icon = 'Broken';
+        button.setAttribute("label", "X");
+        button.setAttribute("tooltip", "Unknown command: " + buttonSpec.typed);
+        button.setAttribute("disabled", "true");
+      }
+      else {
+        if (command.buttonId != null) {
+          button.id = command.buttonId;
+        }
+        if (command.buttonClass != null) {
+          button.className = command.buttonClass;
+        }
+
+        button.addEventListener("click", function() {
+          requisition.update(buttonSpec.typed);
+          //if (requisition.getStatus() == Status.VALID) {
+            requisition.exec();
+          /*
+          }
+          else {
+            console.error('incomplete commands not yet supported');
+          }
+          */
+        }, false);
+
+        // Allow the command button to be toggleable
+        /*
+        if (command.checkedState) {
+          button.setAttribute("type", "checkbox");
+          button.setAttribute("checked", command.checkedState.get() ? "true" : "false");
+          command.checkedState.on("change", function() {
+            button.checked = command.checkedState.get();
+          });
+        }
+        */
+      }
+    });
+
+    requisition.update('');
+
+    return reply;
+  }
+};
+
 /**
  * Due to a number of panel bugs we need a way to check if we are running on
  * Linux. See the comments for TooltipPanel and OutputPanel for further details.
@@ -57,10 +143,10 @@ this.DeveloperToolbar = function DeveloperToolbar(aChromeWindow, aToolbarElement
   this._lastState = NOTIFICATIONS.HIDE;
   this._pendingShowCallback = undefined;
   this._pendingHide = false;
-  this._errorsCount = Object.create(null);
-  this._errorListeners = Object.create(null);
-  this._webConsoleButton = this._doc
-                           .getElementById("developer-toolbar-webconsole");
+  this._errorsCount = {};
+  this._errorListeners = {};
+  this._errorCounterButton = this._doc
+                             .getElementById("developer-toolbar-toolbox-button");
 
   try {
     CmdCommands.refreshAutoCommands(aChromeWindow);
@@ -497,9 +583,9 @@ function DT__updateErrorsCount(aChangedTabId)
   let errors = this._errorsCount[tabId];
 
   if (errors) {
-    this._webConsoleButton.setAttribute("error-count", errors);
+    this._errorCounterButton.setAttribute("error-count", errors);
   } else {
-    this._webConsoleButton.removeAttribute("error-count");
+    this._errorCounterButton.removeAttribute("error-count");
   }
 };
 
diff --git a/browser/devtools/shared/EventEmitter.jsm b/browser/devtools/shared/EventEmitter.jsm
index d70324fc570..fdeda407459 100644
--- a/browser/devtools/shared/EventEmitter.jsm
+++ b/browser/devtools/shared/EventEmitter.jsm
@@ -1,8 +1,23 @@
-// XXXkhuey this should have a license header.
+/* 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/. */
 
 this.EXPORTED_SYMBOLS = ["EventEmitter"];
 
-this.EventEmitter = function EventEmitter() {
+/**
+ * EventEmitter.
+ *
+ * @param Object aObjectToExtend
+ *        If aObjectToExtend is not null, the public methods of EventEmitter
+ *        are bound to the object.
+ */
+this.EventEmitter = function EventEmitter(aObjectToExtend) {
+  if (aObjectToExtend) {
+    aObjectToExtend.on = this.on.bind(this);
+    aObjectToExtend.off = this.off.bind(this);
+    aObjectToExtend.once = this.once.bind(this);
+    aObjectToExtend.emit = this.emit.bind(this);
+  }
 }
 
 EventEmitter.prototype = {
@@ -34,7 +49,7 @@ EventEmitter.prototype = {
   once: function EventEmitter_once(aEvent, aListener) {
     let handler = function() {
       this.off(aEvent, handler);
-      aListener();
+      aListener.apply(null, arguments);
     }.bind(this);
     this.on(aEvent, handler);
   },
@@ -52,7 +67,9 @@ EventEmitter.prototype = {
     if (!this._eventEmitterListeners)
       return;
     let listeners = this._eventEmitterListeners.get(aEvent);
-    this._eventEmitterListeners.set(aEvent, listeners.filter(function(l) aListener != l));
+    if (listeners) {
+      this._eventEmitterListeners.set(aEvent, listeners.filter(function(l) aListener != l));
+    }
   },
 
   /**
diff --git a/browser/devtools/shared/test/browser_eventemitter_basic.js b/browser/devtools/shared/test/browser_eventemitter_basic.js
index c54ce5420ee..e15adbe72e2 100644
--- a/browser/devtools/shared/test/browser_eventemitter_basic.js
+++ b/browser/devtools/shared/test/browser_eventemitter_basic.js
@@ -1,10 +1,24 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-
 function test() {
+  testEmitter();
+  testEmitter({});
+}
+
+
+function testEmitter(aObject) {
   Cu.import("resource:///modules/devtools/EventEmitter.jsm", this);
-  let emitter = new EventEmitter();
+
+  let emitter;
+
+  if (aObject) {
+    emitter = aObject;
+    new EventEmitter(emitter);
+  } else {
+    emitter = new EventEmitter();
+  }
+
   ok(emitter, "We have an event emitter");
 
   emitter.on("next", next);
diff --git a/browser/devtools/shared/test/browser_toolbar_basic.js b/browser/devtools/shared/test/browser_toolbar_basic.js
index 31d3ae19a0d..10734464cf8 100644
--- a/browser/devtools/shared/test/browser_toolbar_basic.js
+++ b/browser/devtools/shared/test/browser_toolbar_basic.js
@@ -31,102 +31,34 @@ function isChecked(b) {
 
 function checkOpen() {
   ok(DeveloperToolbar.visible, "DeveloperToolbar is visible in checkOpen");
-
   let close = document.getElementById("developer-toolbar-closebutton");
-  let webconsole = document.getElementById("developer-toolbar-webconsole");
-  let inspector = document.getElementById("developer-toolbar-inspector");
-  let styleeditor = document.getElementById("developer-toolbar-styleeditor");
-  let debuggr = document.getElementById("developer-toolbar-debugger");
-
   ok(close, "Close button exists");
 
-  ok(!isChecked(webconsole), "web console button state 1");
-  ok(!isChecked(inspector), "inspector button state 1");
-  ok(!isChecked(debuggr), "debugger button state 1");
-  ok(!isChecked(styleeditor), "styleeditor button state 1");
+  let toggleToolbox =
+    document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
+  ok(!isChecked(toggleToolbox), "toggle toolbox button is not checked");
 
-  document.getElementById("Tools:WebConsole").doCommand();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.openToolboxForTab(target, "webconsole");
+  toolbox.once("webconsole-selected", function BTBT_selected(id, aInspector) {
+    ok(isChecked(toggleToolbox), "toggle toolbox button is checked");
 
-  ok(isChecked(webconsole), "web console button state 2");
-  ok(!isChecked(inspector), "inspector button state 2");
-  ok(!isChecked(debuggr), "debugger button state 2");
-  ok(!isChecked(styleeditor), "styleeditor button state 2");
+    addTab("about:blank", function(browser, tab) {
+      info("Opened a new tab");
 
-  document.getElementById("Tools:Inspect").doCommand();
+      ok(!isChecked(toggleToolbox), "toggle toolbox button is not checked");
 
-  ok(isChecked(webconsole), "web console button state 3");
-  ok(isChecked(inspector), "inspector button state 3");
-  ok(!isChecked(debuggr), "debugger button state 3");
-  ok(!isChecked(styleeditor), "styleeditor button state 3");
+      gBrowser.removeCurrentTab();
 
-  // Christmas tree!
-
-  // The web console opens synchronously, but closes asynchronously.
-  let hud = imported.HUDService.getHudByWindow(content);
-  imported.HUDService.disableAnimation(hud.hudId);
-
-  document.getElementById("Tools:WebConsole").doCommand();
-
-  ok(!isChecked(webconsole), "web console button state 6");
-  ok(isChecked(inspector), "inspector button state 6");
-  ok(!isChecked(debuggr), "debugger button state 6");
-  ok(!isChecked(styleeditor), "styleeditor button state 6");
-
-  document.getElementById("Tools:Inspect").doCommand();
-
-  ok(!isChecked(webconsole), "web console button state 7");
-  ok(!isChecked(inspector), "inspector button state 7");
-  ok(!isChecked(debuggr), "debugger button state 7");
-  ok(!isChecked(styleeditor), "styleeditor button state 7");
-
-  // All closed
-
-  // Check we can open and close and retain button state
-  document.getElementById("Tools:Inspect").doCommand();
-
-  ok(!isChecked(webconsole), "web console button state 8");
-  ok(isChecked(inspector), "inspector button state 8");
-  ok(!isChecked(debuggr), "debugger button state 8");
-  ok(!isChecked(styleeditor), "styleeditor button state 8");
-
-
-  // Test Style Editor
-  document.getElementById("Tools:StyleEditor").doCommand();
-
-  ok(!isChecked(webconsole), "web console button state 9");
-  ok(isChecked(inspector), "inspector button state 9");
-  ok(!isChecked(debuggr), "debugger button state 9");
-  ok(isChecked(styleeditor), "styleeditor button state 9");
-
-  // Test Debugger
-  document.getElementById("Tools:Debugger").doCommand();
-
-  ok(!isChecked(webconsole), "web console button state 9");
-  ok(isChecked(inspector), "inspector button state 9");
-  ok(isChecked(debuggr), "debugger button state 9");
-  ok(isChecked(styleeditor), "styleeditor button state 9");
-
-  addTab("about:blank", function(browser, tab) {
-    info("Opening a new tab");
-
-    ok(!isChecked(webconsole), "web console button state 10");
-    ok(!isChecked(inspector), "inspector button state 10");
-    ok(!isChecked(debuggr), "debugger button state 10");
-    ok(!isChecked(styleeditor), "styleeditor button state 10");
-
-    gBrowser.removeCurrentTab();
-
-    oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
-    document.getElementById("Tools:DevToolbar").doCommand();
+      oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
+      document.getElementById("Tools:DevToolbar").doCommand();
+    });
   });
 }
 
 function checkClosed() {
   ok(!DeveloperToolbar.visible, "DeveloperToolbar is not visible in checkClosed");
 
-  // Check we grok state even when closed
-  document.getElementById("Tools:WebConsole").doCommand();
-
   oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.SHOW, catchFail(checkReOpen));
   document.getElementById("Tools:DevToolbar").doCommand();
 }
@@ -134,18 +66,9 @@ function checkClosed() {
 function checkReOpen() {
   ok(DeveloperToolbar.visible, "DeveloperToolbar is visible in checkReOpen");
 
-  let webconsole = document.getElementById("developer-toolbar-webconsole");
-  let inspector = document.getElementById("developer-toolbar-inspector");
-  let debuggr = document.getElementById("developer-toolbar-debugger");
-  let styleeditor = document.getElementById("developer-toolbar-styleeditor");
-
-  ok(isChecked(webconsole), "web console button state 99");
-  ok(isChecked(inspector), "inspector button state 99");
-  ok(isChecked(debuggr), "debugger button state 99");
-  ok(isChecked(styleeditor), "styleeditor button state 99");
-
-  // We close the style editor (not automatically closed)
-  document.getElementById("Tools:StyleEditor").doCommand();
+  let toggleToolbox =
+    document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
+  ok(isChecked(toggleToolbox), "toggle toolbox button is checked");
 
   oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkReClosed));
   document.getElementById("developer-toolbar-closebutton").doCommand();
diff --git a/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js b/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
index 9dfbdc12c00..ee5e36c5747 100644
--- a/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
+++ b/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
@@ -4,13 +4,20 @@
 // Tests that the developer toolbar errors count works properly.
 
 function test() {
-  const TEST_URI = "http://example.com/browser/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.html";
+  const TEST_URI = "http://example.com/browser/browser/devtools/shared/test/" +
+                   "browser_toolbar_webconsole_errors_count.html";
 
   let imported = {};
   Components.utils.import("resource:///modules/HUDService.jsm", imported);
   let HUDService = imported.HUDService;
 
-  let webconsole = document.getElementById("developer-toolbar-webconsole");
+  Components.utils.import("resource:///modules/devtools/gDevTools.jsm", imported);
+  let gDevTools = imported.gDevTools;
+
+  Components.utils.import("resource:///modules/devtools/Target.jsm", imported);
+  let TargetFactory = imported.TargetFactory;
+
+  let webconsole = document.getElementById("developer-toolbar-toolbox-button");
   let toolbar = document.getElementById("Tools:DevToolbar");
   let tab1, tab2;
 
@@ -104,7 +111,8 @@ function test() {
 
     oneTimeObserve("web-console-created", _onWebConsoleOpen);
 
-    HUDService.activateHUDForContext(tab);
+    let target = TargetFactory.forTab(tab);
+    gDevTools.openToolboxForTab(target, "webconsole");
   }
 
   function onWebConsoleOpen(hud) {
@@ -206,7 +214,8 @@ function test() {
 
   function testEnd() {
     document.getElementById("developer-toolbar-closebutton").doCommand();
-    HUDService.deactivateHUDForContext(tab1);
+    let target1 = TargetFactory.forTab(tab1);
+    gDevTools.closeToolbox(target1);
     gBrowser.removeTab(tab1);
     gBrowser.removeTab(tab2);
     finish();
diff --git a/browser/devtools/shared/test/head.js b/browser/devtools/shared/test/head.js
index abb1dc76f14..6c299965980 100644
--- a/browser/devtools/shared/test/head.js
+++ b/browser/devtools/shared/test/head.js
@@ -8,6 +8,12 @@ let console = (function() {
   return tempScope.console;
 })();
 
+let TargetFactory = (function() {
+  let tempScope = {};
+  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
+  return tempScope.TargetFactory;
+})();
+
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
diff --git a/browser/devtools/shared/test/leakhunt.js b/browser/devtools/shared/test/leakhunt.js
index c5b95698131..66d067a3c85 100644
--- a/browser/devtools/shared/test/leakhunt.js
+++ b/browser/devtools/shared/test/leakhunt.js
@@ -10,22 +10,12 @@
  *   otherthing: otherthing
  * });
  */
-
-var noRecurse = [
-  /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/,
-  /^Window$/, /^Document$/,
-  /^XULDocument$/, /^XULElement$/,
-  /^DOMWindow$/, /^HTMLDocument$/, /^HTML.*Element$/
-];
-
-var hide = [ /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/ ];
-
-function leakHunt(root, path, seen) {
-  path = path || [];
-  seen = seen || [];
+function leakHunt(root) {
+  var path = [];
+  var seen = [];
 
   try {
-    var output = leakHuntInner(root, path, seen);
+    var output = leakHunt.inner(root, path, seen);
     output.forEach(function(line) {
       dump(line + '\n');
     });
@@ -35,7 +25,7 @@ function leakHunt(root, path, seen) {
   }
 }
 
-function leakHuntInner(root, path, seen) {
+leakHunt.inner = function LH_inner(root, path, seen) {
   var prefix = new Array(path.length).join('  ');
 
   var reply = [];
@@ -52,70 +42,93 @@ function leakHuntInner(root, path, seen) {
     return reply;
   }
 
-  for (var prop in root) {
-    var newPath = path.slice();
-    newPath.push(prop);
-    prefix = new Array(newPath.length).join('  ');
+  try {
+    var index = 0;
+    for (var data of root) {
+      var prop = '' + index;
+      leakHunt.digProperty(prop, data, path, seen, direct, log);
+      index++;
+    }
+  }
+  catch (ex) { /* Ignore things that are not enumerable */ }
 
+  for (var prop in root) {
     var data;
     try {
       data = root[prop];
     }
     catch (ex) {
-      log(prefix + prop + '  Error reading: ' + ex);
+      log(prefix + '  ' + prop + ' = Error: ' + ex.toString().substring(0, 30));
       continue;
     }
 
-    var recurse = true;
-    var message = getType(data);
-
-    if (matchesAnyPattern(message, hide)) {
-      continue;
-    }
-
-    if (message === 'function' && direct.indexOf(prop) == -1) {
-      continue;
-    }
-
-    if (message === 'string') {
-      var extra = data.length > 10 ? data.substring(0, 9) + '_' : data;
-      message += ' "' + extra.replace(/\n/g, "|") + '"';
-      recurse = false;
-    }
-    else if (matchesAnyPattern(message, noRecurse)) {
-      message += ' (no recurse)'
-      recurse = false;
-    }
-    else if (seen.indexOf(data) !== -1) {
-      message += ' (already seen)';
-      recurse = false;
-    }
-
-    if (recurse) {
-      seen.push(data);
-      var lines = leakHuntInner(data, newPath, seen);
-      if (lines.length == 0) {
-        if (message !== 'function') {
-          log(prefix + prop + ' = ' + message + ' { }');
-        }
-      }
-      else {
-        log(prefix + prop + ' = ' + message + ' {');
-        lines.forEach(function(line) {
-          reply.push(line);
-        });
-        log(prefix + '}');
-      }
-    }
-    else {
-      log(prefix + prop + ' = ' + message);
-    }
+    leakHunt.digProperty(prop, data, path, seen, direct, log);
   }
 
   return reply;
 }
 
-function matchesAnyPattern(str, patterns) {
+leakHunt.hide = [ /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/ ];
+
+leakHunt.noRecurse = [
+  /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/,
+  /^Window$/, /^Document$/,
+  /^XULDocument$/, /^XULElement$/,
+  /^DOMWindow$/, /^HTMLDocument$/, /^HTML.*Element$/, /^ChromeWindow$/
+];
+
+leakHunt.digProperty = function LH_digProperty(prop, data, path, seen, direct, log) {
+  var newPath = path.slice();
+  newPath.push(prop);
+  var prefix = new Array(newPath.length).join('  ');
+
+  var recurse = true;
+  var message = leakHunt.getType(data);
+
+  if (leakHunt.matchesAnyPattern(message, leakHunt.hide)) {
+    return;
+  }
+
+  if (message === 'function' && direct.indexOf(prop) == -1) {
+    return;
+  }
+
+  if (message === 'string') {
+    var extra = data.length > 10 ? data.substring(0, 9) + '_' : data;
+    message += ' "' + extra.replace(/\n/g, "|") + '"';
+    recurse = false;
+  }
+  else if (leakHunt.matchesAnyPattern(message, leakHunt.noRecurse)) {
+    message += ' (no recurse)'
+    recurse = false;
+  }
+  else if (seen.indexOf(data) !== -1) {
+    message += ' (already seen)';
+    recurse = false;
+  }
+
+  if (recurse) {
+    seen.push(data);
+    var lines = leakHunt.inner(data, newPath, seen);
+    if (lines.length == 0) {
+      if (message !== 'function') {
+        log(prefix + prop + ' = ' + message + ' { }');
+      }
+    }
+    else {
+      log(prefix + prop + ' = ' + message + ' {');
+      lines.forEach(function(line) {
+        log(line);
+      });
+      log(prefix + '}');
+    }
+  }
+  else {
+    log(prefix + prop + ' = ' + message);
+  }
+};
+
+leakHunt.matchesAnyPattern = function LH_matchesAnyPattern(str, patterns) {
   var match = false;
   patterns.forEach(function(pattern) {
     if (str.match(pattern)) {
@@ -123,9 +136,9 @@ function matchesAnyPattern(str, patterns) {
     }
   });
   return match;
-}
+};
 
-function getType(data) {
+leakHunt.getType = function LH_getType(data) {
   if (data === null) {
     return 'null';
   }
@@ -135,13 +148,13 @@ function getType(data) {
 
   var type = typeof data;
   if (type === 'object' || type === 'Object') {
-    type = getCtorName(data);
+    type = leakHunt.getCtorName(data);
   }
 
   return type;
-}
+};
 
-function getCtorName(aObj) {
+leakHunt.getCtorName = function LH_getCtorName(aObj) {
   try {
     if (aObj.constructor && aObj.constructor.name) {
       return aObj.constructor.name;
@@ -154,4 +167,4 @@ function getCtorName(aObj) {
   // If that fails, use Objects toString which sometimes gives something
   // better than 'Object', and at least defaults to Object if nothing better
   return Object.prototype.toString.call(aObj).slice(8, -1);
-}
+};
diff --git a/browser/devtools/styleeditor/StyleEditor.jsm b/browser/devtools/styleeditor/StyleEditor.jsm
index 685d039d2a0..c7464162268 100644
--- a/browser/devtools/styleeditor/StyleEditor.jsm
+++ b/browser/devtools/styleeditor/StyleEditor.jsm
@@ -5,7 +5,7 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags", "StyleEditorManager"];
+this.EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags"];
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
@@ -298,7 +298,7 @@ StyleEditor.prototype = {
           }
           let source = NetUtil.readInputStreamToString(aStream, aStream.available());
           aStream.close();
-    
+
           this._appendNewStyleSheet(source);
           this.clearFlag(StyleEditorFlags.ERROR);
         }.bind(this));
@@ -1120,6 +1120,7 @@ StyleEditor.prototype = {
       accel: true,
       callback: function save() {
         this.saveToFile(this._savedFile);
+        return true;
       }.bind(this)
     });
 
@@ -1130,6 +1131,7 @@ StyleEditor.prototype = {
       shift: true,
       callback: function saveAs() {
         this.saveToFile();
+        return true;
       }.bind(this)
     });
 
@@ -1277,134 +1279,3 @@ function setupBracketCompletion(aSourceEditor)
     aSourceEditor.setCaretOffset(aSourceEditor.getCaretOffset() - 1);
   }, false);
 }
-
-/**
-  * Manage the different editors instances.
-  */
-
-this.StyleEditorManager = function StyleEditorManager(aWindow) {
-  this.chromeWindow = aWindow;
-  this.listenToTabs();
-  this.editors = new WeakMap();
-}
-
-StyleEditorManager.prototype = {
-
-  /**
-   * Get the editor for a specific content window.
-   */
-  getEditorForWindow: function SEM_getEditorForWindow(aContentWindow) {
-    return this.editors.get(aContentWindow);
-  },
-
-  /**
-   * Focus the editor and select a stylesheet.
-   *
-   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
-   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
-   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
-   */
-  selectEditor: function SEM_selectEditor(aWindow, aSelectedStyleSheet, aLine, aCol) {
-    if (aSelectedStyleSheet) {
-      aWindow.styleEditorChrome.selectStyleSheet(aSelectedStyleSheet, aLine, aCol);
-    }
-    aWindow.focus();
-  },
-
-  /**
-   * Open a new editor.
-   *
-   * @param {Window} content window.
-   * @param {Window} chrome window.
-   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
-   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
-   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
-   */
-  newEditor: function SEM_newEditor(aContentWindow, aChromeWindow, aSelectedStyleSheet, aLine, aCol) {
-    const CHROME_URL = "chrome://browser/content/styleeditor.xul";
-    const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
-
-    let args = {
-      contentWindow: aContentWindow,
-      selectedStyleSheet: aSelectedStyleSheet,
-      line: aLine,
-      col: aCol
-    };
-    args.wrappedJSObject = args;
-    let chromeWindow = Services.ww.openWindow(aChromeWindow, CHROME_URL, "_blank",
-                                              CHROME_WINDOW_FLAGS, args);
-
-    chromeWindow.onunload = function() {
-      if (chromeWindow.location == CHROME_URL) {
-        // not about:blank being unloaded
-        this.unregisterEditor(aContentWindow);
-      }
-    }.bind(this);
-    chromeWindow.focus();
-
-    this.editors.set(aContentWindow, chromeWindow);
-
-    this.refreshCommand();
-
-    return chromeWindow;
-  },
-
-  /**
-   * Toggle an editor.
-   *
-   * @param {Window} associated content window.
-   */
-  toggleEditor: function SEM_toggleEditor(aContentWindow, aChromeWindow) {
-    let editor = this.getEditorForWindow(aContentWindow);
-    if (editor) {
-      editor.close();
-    } else {
-      this.newEditor(aContentWindow, aChromeWindow);
-    }
-  },
-
-  /**
-   * Close an editor.
-   *
-   * @param {Window} associated content window.
-   */
-  unregisterEditor: function SEM_unregisterEditor(aContentWindow) {
-    let chromeWindow = this.editors.get(aContentWindow);
-    if (chromeWindow) {
-      chromeWindow.close();
-    }
-    this.editors.delete(aContentWindow);
-    this.refreshCommand();
-  },
-
-  /**
-   * Update the status of tool's menuitems and buttons.
-   */
-  refreshCommand: function SEM_refreshCommand() {
-    let contentWindow = this.chromeWindow.gBrowser.contentWindow;
-    let command = this.chromeWindow.document.getElementById("Tools:StyleEditor");
-
-    let win = this.getEditorForWindow(contentWindow);
-    if (win) {
-      command.setAttribute("checked", "true");
-    } else {
-      command.setAttribute("checked", "false");
-    }
-  },
-
-  /**
-   * Trigger refreshCommand when needed.
-   */
-  listenToTabs: function SEM_listenToTabs() {
-    let win = this.chromeWindow;
-    let tabs = win.gBrowser.tabContainer;
-
-    let bound_refreshCommand = this.refreshCommand.bind(this);
-    tabs.addEventListener("TabSelect", bound_refreshCommand, true);
-
-    win.addEventListener("unload", function onClose(aEvent) {
-      tabs.removeEventListener("TabSelect", bound_refreshCommand, true);
-      win.removeEventListener("unload", onClose, false);
-    }, false);
-  },
-}
diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
index ca9dccd9e2f..7c2aeb6099e 100644
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -69,6 +69,8 @@ this.StyleEditorChrome = function StyleEditorChrome(aRoot, aContentWindow)
 }
 
 StyleEditorChrome.prototype = {
+  _styleSheetToSelect: null,
+
   /**
    * Retrieve the content window attached to this chrome.
    *
@@ -274,7 +276,7 @@ StyleEditorChrome.prototype = {
   /**
    * Reset the chrome UI to an empty and ready state.
    */
-  _resetChrome: function SEC__resetChrome()
+  resetChrome: function SEC__resetChrome()
   {
     this._editors.forEach(function (aEditor) {
       aEditor.removeActionListener(this);
@@ -297,7 +299,7 @@ StyleEditorChrome.prototype = {
    */
   _populateChrome: function SEC__populateChrome()
   {
-    this._resetChrome();
+    this.resetChrome();
 
     let document = this.contentDocument;
     this._document.title = _("chromeWindowTitle",
@@ -337,49 +339,60 @@ StyleEditorChrome.prototype = {
    */
   selectStyleSheet: function SEC_selectSheet(aSheet, aLine, aCol)
   {
-    let select = function DEC_select(aEditor) {
-      let summary = aSheet ? this.getSummaryElementForEditor(aEditor)
-                           : this._view.getSummaryElementByOrdinal(0);
-      let setCaret = false;
+    let alreadyCalled = !!this._styleSheetToSelect;
 
-      if (aLine || aCol) {
-        aLine = aLine || 1;
-        aCol = aCol || 1;
-        setCaret = true;
-      }
-      if (!aEditor.sourceEditor) {
-        // If a line or column was specified we move the caret appropriately.
-        if (setCaret) {
+    this._styleSheetToSelect = {
+      sheet: aSheet,
+      line: aLine,
+      col: aCol,
+    };
+
+    if (alreadyCalled) {
+      return;
+    }
+
+    let select = function DEC_select(aEditor) {
+      let sheet = this._styleSheetToSelect.sheet;
+      let line = this._styleSheetToSelect.line;
+      let col = this._styleSheetToSelect.col;
+      let summary = sheet ? this.getSummaryElementForEditor(aEditor)
+                          : this._view.getSummaryElementByOrdinal(0);
+
+      if (line) {
+        col = col || 1;
+
+        if (!aEditor.sourceEditor) {
+          // If a line or column was specified we move the caret appropriately.
           let self = this;
           aEditor.addActionListener({
             onAttach: function SEC_selectSheet_onAttach()
             {
               aEditor.removeActionListener(this);
               self.selectedStyleSheetIndex = aEditor.styleSheetIndex;
-              aEditor.sourceEditor.setCaretPosition(aLine - 1, aCol - 1);
+              aEditor.sourceEditor.setCaretPosition(line - 1, col - 1);
             }
           });
-        }
-        this._view.activeSummary = summary;
-      } else {
-        this._view.activeSummary = summary;
-
-        // If a line or column was specified we move the caret appropriately.
-        if (setCaret) {
-          aEditor.sourceEditor.setCaretPosition(aLine - 1, aCol - 1);
+        } else {
+          // If a line or column was specified we move the caret appropriately.
+          aEditor.sourceEditor.setCaretPosition(line - 1, col - 1);
         }
       }
+
+      this._view.activeSummary = summary;
       this.selectedStyleSheetIndex = aEditor.styleSheetIndex;
+      this._styleSheetToSelect = null;
     }.bind(this);
 
     if (!this.editors.length) {
       // We are in the main initialization phase so we wait for the editor
       // containing the target stylesheet to be added and select the target
       // stylesheet, optionally moving the cursor to a selected line.
+      let self = this;
       this.addChromeListener({
         onEditorAdded: function SEC_selectSheet_onEditorAdded(aChrome, aEditor) {
-          if ((!aSheet && aEditor.styleSheetIndex == 0) ||
-              aEditor.styleSheet == aSheet) {
+          let sheet = self._styleSheetToSelect.sheet;
+          if ((sheet && aEditor.styleSheet == sheet) ||
+              aEditor.styleSheetIndex == 0) {
             aChrome.removeChromeListener(this);
             select(aEditor);
           }
diff --git a/browser/devtools/styleeditor/StyleEditorDefinition.jsm b/browser/devtools/styleeditor/StyleEditorDefinition.jsm
new file mode 100644
index 00000000000..654e304d420
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditorDefinition.jsm
@@ -0,0 +1,56 @@
+/* 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = [ "StyleEditorDefinition" ];
+
+const Cu = Components.utils;
+const STRINGS_URI = "chrome://browser/locale/devtools/styleeditor.properties";
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorChrome.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
+XPCOMUtils.defineLazyGetter(this, "_strings",
+  function() Services.strings.createBundle(STRINGS_URI));
+
+XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorPanel",
+  "resource:///modules/devtools/StyleEditorPanel.jsm");
+
+/**
+ * The external API allowing us to be registered with DevTools.jsm
+ */
+this.StyleEditorDefinition = {
+  id: "styleeditor",
+  key: l10n("open.commandkey"),
+  ordinal: 3,
+  accesskey: l10n("open.accesskey"),
+  modifiers: "shift",
+  label: l10n("ToolboxStyleEditor.label"),
+  url: "chrome://browser/content/styleeditor.xul",
+
+  isTargetSupported: function(target) {
+    return !target.isRemote && !target.isChrome;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new StyleEditorPanel(iframeWindow, toolbox);
+  }
+};
+
+/**
+ * Lookup l10n string from a string bundle.
+ * @param {string} aName The key to lookup.
+ * @returns A localized version of the given key.
+ */
+function l10n(aName)
+{
+  try {
+    return _strings.GetStringFromName(aName);
+  } catch (ex) {
+    Services.console.logStringMessage("Error reading '" + aName + "'");
+    throw new Error("l10n error with " + aName);
+  }
+}
diff --git a/browser/devtools/styleeditor/StyleEditorPanel.jsm b/browser/devtools/styleeditor/StyleEditorPanel.jsm
new file mode 100644
index 00000000000..ff0d3c18e16
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditorPanel.jsm
@@ -0,0 +1,109 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+
+this.EXPORTED_SYMBOLS = ["StyleEditorPanel"];
+
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorChrome.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+this.StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
+  new EventEmitter(this);
+
+  this._toolbox = toolbox;
+  this._target = toolbox.target;
+
+  this.reset = this.reset.bind(this);
+  this.newPage = this.newPage.bind(this);
+  this.destroy = this.destroy.bind(this);
+
+  this._target.on("will-navigate", this.reset);
+  this._target.on("navigate", this.newPage);
+  this._target.on("close", this.destroy);
+
+  this._panelWin = panelWin;
+  this._panelDoc = panelWin.document;
+
+  let contentWin = toolbox.target.tab.linkedBrowser.contentWindow;
+  this.setPage(contentWin);
+
+  this.isReady = true;
+}
+
+StyleEditorPanel.prototype = {
+  /**
+   * Target getter.
+   */
+  get target() {
+    return this._target;
+  },
+
+  /**
+   * Panel window getter.
+   */
+  get panelWindow() this._panelWin,
+
+  /**
+   * StyleEditorChrome instance getter.
+   */
+  get styleEditorChrome() this._panelWin.styleEditorChrome,
+
+  /**
+   * Set the page to target.
+   */
+  setPage: function StyleEditor_setPage(contentWindow) {
+    if (this._panelWin.styleEditorChrome) {
+      this._panelWin.styleEditorChrome.contentWindow = contentWindow;
+    } else {
+      let chromeRoot = this._panelDoc.getElementById("style-editor-chrome");
+      let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
+      this._panelWin.styleEditorChrome = chrome;
+    }
+    this.selectStyleSheet(null, null, null);
+  },
+
+  /**
+   * Navigated to a new page.
+   */
+  newPage: function StyleEditor_newPage(event, window) {
+    this.setPage(window);
+  },
+
+  /**
+   * No window available anymore.
+   */
+  reset: function StyleEditor_reset() {
+    this._panelWin.styleEditorChrome.resetChrome();
+  },
+
+  /**
+   * Select a stylesheet.
+   */
+  selectStyleSheet: function StyleEditor_selectStyleSheet(stylesheet, line, col) {
+    this._panelWin.styleEditorChrome.selectStyleSheet(stylesheet, line, col);
+  },
+
+  /**
+   * Destroy StyleEditor
+   */
+  destroy: function StyleEditor_destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+
+    this._target.off("will-navigate", this.reset);
+    this._target.off("navigate", this.newPage);
+    this._target.off("close", this.destroy);
+    this._target = null;
+    this._toolbox = null;
+    this._panelWin = null;
+    this._panelDoc = null;
+  },
+}
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
index 93887d1e125..6a3cff7c5f6 100644
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -16,117 +16,95 @@
 <?xul-overlay href="chrome://browser/content/source-editor-overlay.xul"?>
 <xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.w3.org/1999/xhtml"
-        id="style-editor-chrome-window"
-        title="&window.title;"
-        windowtype="Tools:StyleEditor"
-        width="800" height="280"
-        persist="screenX screenY width height sizemode">
-<xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
+        id="style-editor-chrome-window">
 
-<xul:popupset id="style-editor-popups">
-  <xul:menupopup id="sourceEditorContextMenu"
-                 onpopupshowing="goUpdateSourceEditorMenuItems()">
-    <xul:menuitem id="se-cMenu-undo"/>
-    <xul:menuseparator/>
-    <xul:menuitem id="se-cMenu-cut"/>
-    <xul:menuitem id="se-cMenu-copy"/>
-    <xul:menuitem id="se-cMenu-paste"/>
-    <xul:menuitem id="se-cMenu-delete"/>
-    <xul:menuseparator/>
-    <xul:menuitem id="se-cMenu-selectAll"/>
-    <xul:menuseparator/>
-    <xul:menuitem id="se-cMenu-find"/>
-    <xul:menuitem id="se-cMenu-findAgain"/>
-    <xul:menuseparator/>
-    <xul:menuitem id="se-cMenu-gotoLine"/>
-  </xul:menupopup>
-</xul:popupset>
+  <xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 
-<xul:commandset id="editMenuCommands"/>
-<xul:commandset id="sourceEditorCommands"/>
-<xul:commandset id="style-editor-commandset">
-  <xul:command id="style-editor-cmd-close" oncommand="window.close();"/>
-</xul:commandset>
+  <xul:popupset id="style-editor-popups">
+    <xul:menupopup id="sourceEditorContextMenu"
+                  onpopupshowing="goUpdateSourceEditorMenuItems()">
+      <xul:menuitem id="se-cMenu-undo"/>
+      <xul:menuseparator/>
+      <xul:menuitem id="se-cMenu-cut"/>
+      <xul:menuitem id="se-cMenu-copy"/>
+      <xul:menuitem id="se-cMenu-paste"/>
+      <xul:menuitem id="se-cMenu-delete"/>
+      <xul:menuseparator/>
+      <xul:menuitem id="se-cMenu-selectAll"/>
+      <xul:menuseparator/>
+      <xul:menuitem id="se-cMenu-find"/>
+      <xul:menuitem id="se-cMenu-findAgain"/>
+      <xul:menuseparator/>
+      <xul:menuitem id="se-cMenu-gotoLine"/>
+    </xul:menupopup>
+  </xul:popupset>
 
-<xul:keyset id="sourceEditorKeys"/>
-<xul:keyset id="style-editor-keyset">
-  <xul:key id="style-editor-key-close"
-           key="&closeCmd.key;"
-           command="style-editor-cmd-close"
-           modifiers="accel"/>
-</xul:keyset>
+  <xul:commandset id="editMenuCommands"/>
+  <xul:commandset id="sourceEditorCommands"/>
 
-<xul:box id="style-editor-chrome" class="splitview-root loading">
-  <xul:box class="splitview-controller">
-    <xul:box class="splitview-main">
-      <xul:toolbar class="devtools-toolbar">
-        <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
-                    accesskey="&newButton.accesskey;"
-                    tooltiptext="&newButton.tooltip;"
-                    label="&newButton.label;"
-                    disabled="true"/>
-        <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
-                    accesskey="&importButton.accesskey;"
-                    tooltiptext="&importButton.tooltip;"
-                    label="&importButton.label;"
-                    disabled="true"/>
-      </xul:toolbar>
-    </xul:box>
-    <xul:box id="splitview-resizer-target" class="splitview-nav-container"
-             persist="width height">
-      <ol class="splitview-nav" tabindex="0"></ol>
-      <div class="splitview-nav placeholder empty">
-        <p><strong>&noStyleSheet.label;</strong></p>
-        <p>&noStyleSheet-tip-start.label;
-          <a href="#"
-             class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
-          &noStyleSheet-tip-end.label;</p>
-      </div>
-    </xul:box> <!-- .splitview-nav-container -->
-  </xul:box>   <!-- .splitview-controller -->
-  <xul:box class="splitview-side-details"/>
+  <xul:keyset id="sourceEditorKeys"/>
 
-  <div id="splitview-templates" hidden="true">
-    <li id="splitview-tpl-summary-stylesheet" tabindex="0">
-      <a class="stylesheet-enabled" tabindex="0" href="#"
-         title="&visibilityToggle.tooltip;"
-         accesskey="&saveButton.accesskey;"></a>
-      <hgroup class="stylesheet-info">
-        <h1><a class="stylesheet-name" href="#"><xul:label crop="start"/></a></h1>
-        <div class="stylesheet-more">
-          <h3 class="stylesheet-title"></h3>
-          <h3 class="stylesheet-rule-count"></h3>
-          <h3 class="stylesheet-error-message"></h3>
-          <xul:spacer/>
-          <h3><a class="stylesheet-saveButton" href="#"
-                 title="&saveButton.tooltip;"
-                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
+  <xul:box id="style-editor-chrome" class="splitview-root loading">
+    <xul:box class="splitview-controller">
+      <xul:box class="splitview-main">
+        <xul:toolbar class="devtools-toolbar">
+          <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
+                      accesskey="&newButton.accesskey;"
+                      tooltiptext="&newButton.tooltip;"
+                      label="&newButton.label;"
+                      disabled="true"/>
+          <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
+                      accesskey="&importButton.accesskey;"
+                      tooltiptext="&importButton.tooltip;"
+                      label="&importButton.label;"
+                      disabled="true"/>
+        </xul:toolbar>
+      </xul:box>
+      <xul:box id="splitview-resizer-target" class="splitview-nav-container"
+              persist="width height">
+        <ol class="splitview-nav" tabindex="0"></ol>
+        <div class="splitview-nav placeholder empty">
+          <p><strong>&noStyleSheet.label;</strong></p>
+          <p>&noStyleSheet-tip-start.label;
+            <a href="#"
+              class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
+            &noStyleSheet-tip-end.label;</p>
         </div>
-      </hgroup>
-    </li>
+      </xul:box> <!-- .splitview-nav-container -->
+    </xul:box>   <!-- .splitview-controller -->
+    <xul:box class="splitview-side-details"/>
 
-    <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
-      <xul:resizer class="splitview-portrait-resizer"
-                   dir="bottom"
-                   element="splitview-resizer-target"/>
-      <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
-        <xul:resizer class="splitview-landscape-resizer"
-                     dir="bottomend"
-                     element="splitview-resizer-target"/>
-      </xul:toolbar>
-      <xul:box class="stylesheet-editor-input textbox"
-               data-placeholder="&editorTextbox.placeholder;"/>
-    </xul:box>
-  </div> <!-- #splitview-templates -->
-</xul:box>   <!-- .splitview-root -->
+    <div id="splitview-templates" hidden="true">
+      <li id="splitview-tpl-summary-stylesheet" tabindex="0">
+        <a class="stylesheet-enabled" tabindex="0" href="#"
+          title="&visibilityToggle.tooltip;"
+          accesskey="&saveButton.accesskey;"></a>
+        <hgroup class="stylesheet-info">
+          <h1><a class="stylesheet-name" href="#"><xul:label crop="start"/></a></h1>
+          <div class="stylesheet-more">
+            <h3 class="stylesheet-title"></h3>
+            <h3 class="stylesheet-rule-count"></h3>
+            <h3 class="stylesheet-error-message"></h3>
+            <xul:spacer/>
+            <h3><a class="stylesheet-saveButton" href="#"
+                  title="&saveButton.tooltip;"
+                  accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
+          </div>
+        </hgroup>
+      </li>
 
-<xul:script type="application/javascript"><![CDATA[
-Components.utils.import("resource:///modules/devtools/StyleEditorChrome.jsm");
-let chromeRoot = document.getElementById("style-editor-chrome");
-let args = window.arguments[0].wrappedJSObject;
-let contentWindow = args.contentWindow;
-let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
-chrome.selectStyleSheet(args.selectedStyleSheet, args.line, args.col);
-window.styleEditorChrome = chrome;
-]]></xul:script>
+      <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
+        <xul:resizer class="splitview-portrait-resizer"
+                    dir="bottom"
+                    element="splitview-resizer-target"/>
+        <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
+          <xul:resizer class="splitview-landscape-resizer"
+                      dir="bottomend"
+                      element="splitview-resizer-target"/>
+        </xul:toolbar>
+        <xul:box class="stylesheet-editor-input textbox"
+                data-placeholder="&editorTextbox.placeholder;"/>
+      </xul:box>
+    </div> <!-- #splitview-templates -->
+  </xul:box>   <!-- .splitview-root -->
 </xul:window>
diff --git a/browser/devtools/styleeditor/test/Makefile.in b/browser/devtools/styleeditor/test/Makefile.in
index 4ca04ee26ba..95ef1121f73 100644
--- a/browser/devtools/styleeditor/test/Makefile.in
+++ b/browser/devtools/styleeditor/test/Makefile.in
@@ -23,9 +23,11 @@ _BROWSER_TEST_FILES = \
                  browser_styleeditor_passedinsheet.js \
                  browser_styleeditor_pretty.js \
                  browser_styleeditor_readonly.js \
-		 $(filter disabled-for-intermittent-failures--bug-707891, browser_styleeditor_reopen.js) \
+                 $(filter disabled-for-intermittent-failures--bug-707891, browser_styleeditor_reopen.js) \
                  browser_styleeditor_sv_keynav.js \
                  browser_styleeditor_sv_resize.js \
+                 head.js \
+                 helpers.js \
                  four.html \
                  head.js \
                  helpers.js \
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
index 51f8663aee9..7835c7c15ba 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_init.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
@@ -32,19 +32,11 @@ function run(aChrome)
   let SEC = gChromeWindow.styleEditorChrome;
   is(SEC, aChrome, "StyleEditorChrome object exists as new window property");
 
-  ok(gChromeWindow.document.title.indexOf("simple testcase") >= 0,
-     "the Style Editor window title contains the document's title");
-
   // check editors are instantiated
   is(SEC.editors.length, 2,
      "there is two StyleEditor instances managed");
   ok(SEC.editors[0].styleSheetIndex < SEC.editors[1].styleSheetIndex,
      "editors are ordered by styleSheetIndex");
-
-  // check StyleEditorChrome is a singleton wrt to the same DOMWindow
-  let chromeWindow = StyleEditor.openChrome();
-  is(chromeWindow, gChromeWindow,
-     "attempt to edit the same document returns the same Style Editor window");
 }
 
 let gEditorAddedCount = 0;
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
index 9b5e86e4d83..07331c6e092 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
@@ -15,31 +15,32 @@ function test()
   // this checks that the Style Editor still launches correctly when it is opened
   // *while* the page is still loading
   launchStyleEditorChrome(function (aChrome) {
-    isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
-          "content document is still loading");
+    content.location = TESTCASE_URI;
+    executeSoon(function() {
+      isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
+            "content document is still loading");
 
-    let root = gChromeWindow.document.querySelector(".splitview-root");
-    ok(root.classList.contains("loading"),
-       "style editor root element has 'loading' class name");
+      let root = gChromeWindow.document.querySelector(".splitview-root");
+      ok(root.classList.contains("loading"),
+        "style editor root element has 'loading' class name");
 
-    let button = gChromeWindow.document.querySelector(".style-editor-newButton");
-    ok(button.hasAttribute("disabled"),
-       "new style sheet button is disabled");
+      let button = gChromeWindow.document.querySelector(".style-editor-newButton");
+      ok(button.hasAttribute("disabled"),
+        "new style sheet button is disabled");
 
-    button = gChromeWindow.document.querySelector(".style-editor-importButton");
-    ok(button.hasAttribute("disabled"),
-       "import button is disabled");
+      button = gChromeWindow.document.querySelector(".style-editor-importButton");
+      ok(button.hasAttribute("disabled"),
+        "import button is disabled");
 
-    if (!aChrome.isContentAttached) {
-      aChrome.addChromeListener({
-        onContentAttach: run
-      });
-    } else {
-      run(aChrome);
-    }
+      if (!aChrome.isContentAttached) {
+        aChrome.addChromeListener({
+          onContentAttach: run
+        });
+      } else {
+        run(aChrome);
+      }
+    });
   });
-
-  content.location = TESTCASE_URI;
 }
 
 function run(aChrome)
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js b/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
index 05b37019e49..d095d1a48c6 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
@@ -6,56 +6,53 @@ const TESTCASE_URI = TEST_BASE + "simple.html";
 const LINE = 6;
 const COL = 2;
 
-let editor = null;
-let sheet = null;
-
 function test()
 {
+  let editor = null;
+  let sheet = null;
+
   waitForExplicitFinish();
-  gBrowser.selectedBrowser.addEventListener("load", function () {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
     run();
   }, true);
   content.location = TESTCASE_URI;
-}
 
-function run()
-{
-  sheet = content.document.styleSheets[1];
-  launchStyleEditorChrome(function attachListeners(aChrome) {
-    aChrome.addChromeListener({
-      onEditorAdded: checkSourceEditor
-    });
-  }, sheet, LINE, COL);
-}
+  function run()
+  {
+    sheet = content.document.styleSheets[1];
+    launchStyleEditorChrome(function attachListeners(aChrome) {
+      aChrome.addChromeListener({
+        onEditorAdded: checkSourceEditor
+      });
+    }, sheet, LINE, COL);
+  }
 
-function checkSourceEditor(aChrome, aEditor)
-{
-  if (!aEditor.sourceEditor) {
-    aEditor.addActionListener({
-      onAttach: function (aEditor) {
-        aEditor.removeActionListener(this);
-        validate(aEditor);
-      }
-    });
-  } else {
-    validate(aEditor);
+  function checkSourceEditor(aChrome, aEditor)
+  {
+    aChrome.removeChromeListener(this);
+    if (!aEditor.sourceEditor) {
+      aEditor.addActionListener({
+        onAttach: function (aEditor) {
+          aEditor.removeActionListener(this);
+          validate(aEditor);
+        }
+      });
+    } else {
+      validate(aEditor);
+    }
+  }
+
+  function validate(aEditor)
+  {
+    info("validating style editor");
+    let sourceEditor = aEditor.sourceEditor;
+    let caretPosition = sourceEditor.getCaretPosition();
+    is(caretPosition.line, LINE - 1, "caret row is correct"); // index based
+    is(caretPosition.col, COL - 1, "caret column is correct");
+    is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
+    finish();
   }
 }
-
-function validate(aEditor)
-{
-  info("validating style editor");
-  let sourceEditor = aEditor.sourceEditor;
-  let caretPosition = sourceEditor.getCaretPosition();
-  is(caretPosition.line, LINE - 1, "caret row is correct"); // index based
-  is(caretPosition.col, COL - 1, "caret column is correct");
-  is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
-  finishUp();
-}
-
-function finishUp()
-{
-  editor = sheet = null;
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_private.js b/browser/devtools/styleeditor/test/browser_styleeditor_private.js
index 4172caf5e4c..e3677e7c5d5 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_private.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_private.js
@@ -19,23 +19,33 @@ function test() {
     finish();
   }
 
+  gBrowser.selectedTab = gBrowser.addTab();
+
   gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
     gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
     cache.evictEntries(Ci.nsICache.STORE_ANYWHERE);
     launchStyleEditorChrome(function(aChrome) {
-      aChrome.addChromeListener({
-        onEditorAdded: function(aChrome, aEditor) {
-          if (aEditor.isLoaded) {
-            checkCache();
-          } else {
-            aEditor.addActionListener({
-              onLoad: checkCache
-            });
-          }
-        }
-      });
+      if (aChrome.isContentAttached) {
+        onEditorAdded(aChrome, aChrome.editors[0]);
+      } else {
+        aChrome.addChromeListener({
+          onEditorAdded: onEditorAdded
+        });
+      }
     });
   }, true);
 
+  function onEditorAdded(aChrome, aEditor) {
+    aChrome.removeChromeListener(this);
+
+    if (aEditor.isLoaded) {
+      checkCache();
+    } else {
+      aEditor.addActionListener({
+        onLoad: checkCache
+      });
+    }
+  }
+
   content.location = 'http://' + TEST_HOST + '/browser/browser/devtools/styleeditor/test/test_private.html';
 }
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
index bf3045a8322..d2743161722 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
@@ -2,22 +2,30 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-// http rather than chrome to improve coverage
-const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
-
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-
 let tempScope = {};
-Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
-let FileUtils = tempScope.FileUtils;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
+function test() {
+
+  // http rather than chrome to improve coverage
+  const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
+
+  const Cc = Components.classes;
+  const Ci = Components.interfaces;
+
+  let toolbox;
+  let tempScope = {};
+  Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
+  let FileUtils = tempScope.FileUtils;
 
 
-function test()
-{
   waitForExplicitFinish();
 
   addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    toolbox = gDevTools.getToolboxForTarget(target);
+
     aChrome.addChromeListener({
       onEditorAdded: function (aChrome, aEditor) {
         if (aEditor.styleSheetIndex != 0) {
@@ -34,8 +42,7 @@ function test()
       }
     });
 
-    gChromeWindow.addEventListener("unload", function onClose() {
-      gChromeWindow.removeEventListener("unload", onClose, true);
+    toolbox.once("destroyed", function onClose() {
       gChromeWindow = null;
       executeSoon(function () {
         waitForFocus(function () {
@@ -43,8 +50,8 @@ function test()
           // open StyleEditorChrome again (a new one since we closed the previous one)
           launchStyleEditorChrome(function (aChrome) {
             is(gChromeWindow.document.documentElement.hasAttribute("data-marker"),
-               false,
-               "opened a completely new StyleEditorChrome window");
+              false,
+              "opened a completely new StyleEditorChrome window");
 
             aChrome.addChromeListener({
               onEditorAdded: function (aChrome, aEditor) {
@@ -68,91 +75,91 @@ function test()
   });
 
   content.location = TESTCASE_URI;
-}
 
-let gFilename;
+  let gFilename;
 
-function run(aEditor)
-{
-  gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
+  function run(aEditor)
+  {
+    gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
 
-  aEditor.saveToFile(gFilename, function (aFile) {
-    ok(aFile, "file got saved successfully");
+    aEditor.saveToFile(gFilename, function (aFile) {
+      ok(aFile, "file got saved successfully");
 
-    aEditor.addActionListener({
-      onFlagChange: function (aEditor, aFlag) {
-        if (aFlag != "unsaved") {
-          return;
+      aEditor.addActionListener({
+        onFlagChange: function (aEditor, aFlag) {
+          if (aFlag != "unsaved") {
+            return;
+          }
+
+          ok(aEditor.hasFlag("unsaved"),
+            "first stylesheet has UNSAVED flag after making a change");
+
+          // marker used to check it does not exist when we reopen
+          // ie. the window we opened is indeed a new one
+          gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
+          toolbox.destroy();
         }
+      });
 
-        ok(aEditor.hasFlag("unsaved"),
-           "first stylesheet has UNSAVED flag after making a change");
-
-        // marker used to check it does not exist when we reopen
-        // ie. the window we opened is indeed a new one
-        gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
-        gChromeWindow.close();
-      }
-    });
-
-    waitForFocus(function () {
-      // insert char so that this stylesheet has the UNSAVED flag
-      EventUtils.synthesizeKey("x", {}, gChromeWindow);
-    }, gChromeWindow);
-  });
-}
-
-function testNewChrome(aEditor)
-{
-  ok(aEditor.savedFile,
-     "first stylesheet editor will save directly into the same file");
-
-  is(aEditor.getFriendlyName(), gFilename.leafName,
-     "first stylesheet still has the filename as it was saved");
-  gFilename = null;
-
-  ok(aEditor.hasFlag("unsaved"),
-     "first stylesheet still has UNSAVED flag at reopening");
-
-  ok(!aEditor.hasFlag("inline"),
-     "first stylesheet does not have INLINE flag");
-
-  ok(!aEditor.hasFlag("error"),
-     "editor does not have error flag initially");
-  let hadError = false;
-
-  let onSaveCallback = function (aFile) {
-    aEditor.addActionListener({
-      onFlagChange: function (aEditor, aFlag) {
-        if (!hadError && aFlag == "error") {
-          ok(aEditor.hasFlag("error"),
-             "editor has ERROR flag after attempting to save with invalid path");
-          hadError = true;
-
-          // save using source editor key binding (previous successful path)
-          waitForFocus(function () {
-            EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
-          }, gChromeWindow);
-          return;
-        }
-
-        if (hadError && aFlag == "unsaved") {
-          executeSoon(function () {
-            ok(!aEditor.hasFlag("unsaved"),
-               "first stylesheet has no UNSAVED flag after successful save");
-            ok(!aEditor.hasFlag("error"),
-               "ERROR flag has been removed since last operation succeeded");
-            finish();
-          });
-        }
-      }
+      waitForFocus(function () {
+        // insert char so that this stylesheet has the UNSAVED flag
+        EventUtils.synthesizeKey("x", {}, gChromeWindow);
+      }, gChromeWindow);
     });
   }
 
-  let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
-  if (os == "WINNT") {
-    aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
-  } else {
-    aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
+  function testNewChrome(aEditor)
+  {
+    ok(aEditor.savedFile,
+      "first stylesheet editor will save directly into the same file");
+
+    is(aEditor.getFriendlyName(), gFilename.leafName,
+      "first stylesheet still has the filename as it was saved");
+    gFilename = null;
+
+    ok(aEditor.hasFlag("unsaved"),
+      "first stylesheet still has UNSAVED flag at reopening");
+
+    ok(!aEditor.hasFlag("inline"),
+      "first stylesheet does not have INLINE flag");
+
+    ok(!aEditor.hasFlag("error"),
+      "editor does not have error flag initially");
+    let hadError = false;
+
+    let onSaveCallback = function (aFile) {
+      aEditor.addActionListener({
+        onFlagChange: function (aEditor, aFlag) {
+          if (!hadError && aFlag == "error") {
+            ok(aEditor.hasFlag("error"),
+              "editor has ERROR flag after attempting to save with invalid path");
+            hadError = true;
+
+            // save using source editor key binding (previous successful path)
+            waitForFocus(function () {
+              EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
+            }, gChromeWindow);
+            return;
+          }
+
+          if (hadError && aFlag == "unsaved") {
+            executeSoon(function () {
+              ok(!aEditor.hasFlag("unsaved"),
+                "first stylesheet has no UNSAVED flag after successful save");
+              ok(!aEditor.hasFlag("error"),
+                "ERROR flag has been removed since last operation succeeded");
+              finish();
+            });
+          }
+        }
+      });
+    }
+
+    let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
+    if (os == "WINNT") {
+      aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
+    } else {
+      aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
+    }
   }
 }
diff --git a/browser/devtools/styleeditor/test/head.js b/browser/devtools/styleeditor/test/head.js
index f2e646a4706..d08249dca05 100644
--- a/browser/devtools/styleeditor/test/head.js
+++ b/browser/devtools/styleeditor/test/head.js
@@ -6,6 +6,10 @@ const TEST_BASE_HTTP = "http://example.com/browser/browser/devtools/styleeditor/
 const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleeditor/test/";
 const TEST_HOST = 'mochi.test:8888';
 
+let tempScope = {};
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 let gChromeWindow;               //StyleEditorChrome window
 let cache = Cc["@mozilla.org/network/cache-service;1"]
               .getService(Ci.nsICacheService);
@@ -17,10 +21,7 @@ Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
 function cleanup()
 {
-  if (gChromeWindow) {
-    gChromeWindow.close();
-    gChromeWindow = null;
-  }
+  gChromeWindow = null;
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
@@ -28,16 +29,26 @@ function cleanup()
 
 function launchStyleEditorChrome(aCallback, aSheet, aLine, aCol)
 {
-  gChromeWindow = StyleEditor.openChrome(aSheet, aLine, aCol);
-  if (gChromeWindow.document.readyState != "complete") {
-    gChromeWindow.addEventListener("load", function onChromeLoad() {
-      gChromeWindow.removeEventListener("load", onChromeLoad, true);
-      gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
-      aCallback(gChromeWindow.styleEditorChrome);
-    }, true);
-  } else {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let panel = gDevTools.getPanelForTarget("styleeditor", target);
+  if (panel && panel.isReady) {
+    gChromeWindow = panel._panelWin;
     gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
+    if (aSheet) {
+      panel.selectStyleSheet(aSheet, aLine, aCol);
+    }
     aCallback(gChromeWindow.styleEditorChrome);
+  } else {
+    let toolbox = gDevTools.openToolboxForTab(target, "styleeditor");
+    toolbox.once("styleeditor-ready", function(event, panel) {
+      gChromeWindow = panel._panelWin;
+      gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
+      if (aSheet) {
+        panel.selectStyleSheet(aSheet, aLine, aCol);
+      }
+      aCallback(gChromeWindow.styleEditorChrome);
+    });
   }
 }
 
diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index 0e1ddb30da1..35f3bcbfcec 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -17,6 +17,10 @@ Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/CssLogic.jsm");
 Cu.import("resource:///modules/devtools/Templater.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 this.EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
 
@@ -118,14 +122,16 @@ UpdateProcess.prototype = {
  */
 this.CssHtmlTree = function CssHtmlTree(aStyleInspector)
 {
-  this.styleWin = aStyleInspector.iframe;
+  this.styleWindow = aStyleInspector.window;
+  this.styleDocument = aStyleInspector.window.document;
   this.styleInspector = aStyleInspector;
   this.cssLogic = aStyleInspector.cssLogic;
-  this.doc = aStyleInspector.document;
-  this.win = aStyleInspector.window;
-  this.getRTLAttr = this.win.getComputedStyle(this.win.gBrowser).direction;
   this.propertyViews = [];
 
+  let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].
+    getService(Ci.nsIXULChromeRegistry);
+  this.getRTLAttr = chromeReg.isLocaleRTL("global") ? "rtl" : "ltr";
+
   // Create bound methods.
   this.siBoundMenuUpdate = this.computedViewMenuUpdate.bind(this);
   this.siBoundCopy = this.computedViewCopy.bind(this);
@@ -133,9 +139,6 @@ this.CssHtmlTree = function CssHtmlTree(aStyleInspector)
   this.siBoundCopyProperty = this.computedViewCopyProperty.bind(this);
   this.siBoundCopyPropertyValue = this.computedViewCopyPropertyValue.bind(this);
 
-  // The document in which we display the results (csshtmltree.xul).
-  this.styleDocument = this.styleWin.contentWindow.document;
-
   this.styleDocument.addEventListener("copy", this.siBoundCopy);
 
   // Nodes used in templating
@@ -266,8 +269,8 @@ CssHtmlTree.prototype = {
       // processed.
       this.refreshSourceFilter();
       this.numVisibleProperties = 0;
-      let fragment = this.doc.createDocumentFragment();
-      this._refreshProcess = new UpdateProcess(this.win, CssHtmlTree.propertyNames, {
+      let fragment = this.styleDocument.createDocumentFragment();
+      this._refreshProcess = new UpdateProcess(this.styleWindow, CssHtmlTree.propertyNames, {
         onItem: function(aPropertyName) {
           // Per-item callback.
           let propView = new PropertyView(this, aPropertyName);
@@ -327,7 +330,7 @@ CssHtmlTree.prototype = {
     this._darkStripe = true;
 
     let display = this.propertyContainer.style.display;
-    this._refreshProcess = new UpdateProcess(this.win, this.propertyViews, {
+    this._refreshProcess = new UpdateProcess(this.styleWindow, this.propertyViews, {
       onItem: function(aPropView) {
         aPropView.refresh();
       }.bind(this),
@@ -347,7 +350,7 @@ CssHtmlTree.prototype = {
    */
   filterChanged: function CssHtmlTree_filterChanged(aEvent)
   {
-    let win = this.styleWin.contentWindow;
+    let win = this.styleWindow;
 
     if (this._filterChangedTimeout) {
       win.clearTimeout(this._filterChangedTimeout);
@@ -397,7 +400,7 @@ CssHtmlTree.prototype = {
 
     // Here we build and cache a list of css properties supported by the browser
     // We could use any element but let's use the main document's root element
-    let styles = this.styleWin.contentWindow.getComputedStyle(this.styleDocument.documentElement);
+    let styles = this.styleWindow.getComputedStyle(this.styleDocument.documentElement);
     let mozProps = [];
     for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
       let prop = styles.item(i);
@@ -468,9 +471,12 @@ CssHtmlTree.prototype = {
    */
   createContextMenu: function SI_createContextMenu()
   {
-    let popupSet = this.doc.getElementById("mainPopupSet");
+    let iframe = this.styleInspector.outerIFrame;
+    let outerDoc = iframe.ownerDocument;
 
-    let menu = this.doc.createElement("menupopup");
+    let popupSet = outerDoc.getElementById("inspectorPopupSet");
+
+    let menu = outerDoc.createElement("menupopup");
     menu.addEventListener("popupshowing", this.siBoundMenuUpdate);
     menu.id = "computed-view-context-menu";
     popupSet.appendChild(menu);
@@ -478,7 +484,7 @@ CssHtmlTree.prototype = {
     // Copy selection
     let label = CssHtmlTree.l10n("style.contextmenu.copyselection");
     let accessKey = CssHtmlTree.l10n("style.contextmenu.copyselection.accesskey");
-    let item = this.doc.createElement("menuitem");
+    let item = outerDoc.createElement("menuitem");
     item.id = "computed-view-copy";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -488,7 +494,7 @@ CssHtmlTree.prototype = {
     // Copy declaration
     label = CssHtmlTree.l10n("style.contextmenu.copydeclaration");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copydeclaration.accesskey");
-    item = this.doc.createElement("menuitem");
+    item = outerDoc.createElement("menuitem");
     item.id = "computed-view-copy-declaration";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -498,7 +504,7 @@ CssHtmlTree.prototype = {
     // Copy property name
     label = CssHtmlTree.l10n("style.contextmenu.copyproperty");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copyproperty.accesskey");
-    item = this.doc.createElement("menuitem");
+    item = outerDoc.createElement("menuitem");
     item.id = "computed-view-copy-property";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -508,14 +514,14 @@ CssHtmlTree.prototype = {
     // Copy property value
     label = CssHtmlTree.l10n("style.contextmenu.copypropertyvalue");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copypropertyvalue.accesskey");
-    item = this.doc.createElement("menuitem");
+    item = outerDoc.createElement("menuitem");
     item.id = "computed-view-copy-property-value";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
     item.addEventListener("command", this.siBoundCopyPropertyValue);
     menu.appendChild(item);
 
-    this.styleWin.setAttribute("context", menu.id);
+    iframe.setAttribute("context", menu.id);
   },
 
   /**
@@ -524,12 +530,13 @@ CssHtmlTree.prototype = {
    */
   computedViewMenuUpdate: function si_computedViewMenuUpdate()
   {
-    let win = this.styleDocument.defaultView;
-    let disable = win.getSelection().isCollapsed;
-    let menuitem = this.doc.querySelector("#computed-view-copy");
+    let disable = this.styleWindow.getSelection().isCollapsed;
+
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    let menuitem = outerDoc.querySelector("#computed-view-copy");
     menuitem.disabled = disable;
 
-    let node = this.doc.popupNode;
+    let node = outerDoc.popupNode;
     if (!node) {
       return;
     }
@@ -542,11 +549,11 @@ CssHtmlTree.prototype = {
       }
     }
     let disablePropertyItems = !node;
-    menuitem = this.doc.querySelector("#computed-view-copy-declaration");
+    menuitem = outerDoc.querySelector("#computed-view-copy-declaration");
     menuitem.disabled = disablePropertyItems;
-    menuitem = this.doc.querySelector("#computed-view-copy-property");
+    menuitem = outerDoc.querySelector("#computed-view-copy-property");
     menuitem.disabled = disablePropertyItems;
-    menuitem = this.doc.querySelector("#computed-view-copy-property-value");
+    menuitem = outerDoc.querySelector("#computed-view-copy-property-value");
     menuitem.disabled = disablePropertyItems;
   },
 
@@ -566,7 +573,8 @@ CssHtmlTree.prototype = {
 
     // Remove any MDN link titles
     text = text.replace(CssHtmlTree.HELP_LINK_TITLE, "");
-    clipboardHelper.copyString(text, this.doc);
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    clipboardHelper.copyString(text, outerDoc);
 
     if (aEvent) {
       aEvent.preventDefault();
@@ -580,7 +588,8 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyDeclaration: function si_computedViewCopyDeclaration(aEvent)
   {
-    let node = this.doc.popupNode;
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    let node = outerDoc.popupNode;
     if (!node) {
       return;
     }
@@ -596,7 +605,7 @@ CssHtmlTree.prototype = {
       let name = node.querySelector(".property-name").textContent;
       let value = node.querySelector(".property-value").textContent;
 
-      clipboardHelper.copyString(name + ": " + value + ";", this.doc);
+      clipboardHelper.copyString(name + ": " + value + ";", outerDoc);
     }
   },
 
@@ -607,7 +616,8 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyProperty: function si_computedViewCopyProperty(aEvent)
   {
-    let node = this.doc.popupNode;
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    let node = outerDoc.popupNode;
     if (!node) {
       return;
     }
@@ -621,7 +631,7 @@ CssHtmlTree.prototype = {
     }
     if (node) {
       node = node.querySelector(".property-name");
-      clipboardHelper.copyString(node.textContent, this.doc);
+      clipboardHelper.copyString(node.textContent, outerDoc);
     }
   },
 
@@ -632,7 +642,8 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyPropertyValue: function si_computedViewCopyPropertyValue(aEvent)
   {
-    let node = this.doc.popupNode;
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    let node = outerDoc.popupNode;
     if (!node) {
       return;
     }
@@ -646,7 +657,7 @@ CssHtmlTree.prototype = {
     }
     if (node) {
       node = node.querySelector(".property-value");
-      clipboardHelper.copyString(node.textContent, this.doc);
+      clipboardHelper.copyString(node.textContent, outerDoc);
     }
   },
 
@@ -668,22 +679,23 @@ CssHtmlTree.prototype = {
     }
 
     // Remove context menu
-    let menu = this.doc.querySelector("#computed-view-context-menu");
+    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
+    let menu = outerDoc.querySelector("#computed-view-context-menu");
     if (menu) {
       // Copy selected
-      let menuitem = this.doc.querySelector("#computed-view-copy");
+      let menuitem = outerDoc.querySelector("#computed-view-copy");
       menuitem.removeEventListener("command", this.siBoundCopy);
 
       // Copy property
-      menuitem = this.doc.querySelector("#computed-view-copy-declaration");
+      menuitem = outerDoc.querySelector("#computed-view-copy-declaration");
       menuitem.removeEventListener("command", this.siBoundCopyDeclaration);
 
       // Copy property name
-      menuitem = this.doc.querySelector("#computed-view-copy-property");
+      menuitem = outerDoc.querySelector("#computed-view-copy-property");
       menuitem.removeEventListener("command", this.siBoundCopyProperty);
 
       // Copy property value
-      menuitem = this.doc.querySelector("#computed-view-copy-property-value");
+      menuitem = outerDoc.querySelector("#computed-view-copy-property-value");
       menuitem.removeEventListener("command", this.siBoundCopyPropertyValue);
 
       menu.removeEventListener("popupshowing", this.siBoundMenuUpdate);
@@ -703,10 +715,9 @@ CssHtmlTree.prototype = {
 
     // The element that we're inspecting, and the document that it comes from.
     delete this.propertyViews;
-    delete this.styleWin;
+    delete this.styleWindow;
+    delete this.styleDocument;
     delete this.cssLogic;
-    delete this.doc;
-    delete this.win;
     delete this.styleInspector;
   },
 };
@@ -862,7 +873,7 @@ PropertyView.prototype = {
 
   buildMain: function PropertyView_buildMain()
   {
-    let doc = this.tree.doc;
+    let doc = this.tree.styleDocument;
     this.element = doc.createElementNS(HTML_NS, "tr");
     this.element.setAttribute("class", this.propertyHeaderClassName);
 
@@ -917,7 +928,7 @@ PropertyView.prototype = {
 
   buildSelectorContainer: function PropertyView_buildSelectorContainer()
   {
-    let doc = this.tree.doc;
+    let doc = this.tree.styleDocument;
     let element = doc.createElementNS(HTML_NS, "tr");
     element.setAttribute("class", this.propertyContentClassName);
     this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "td");
@@ -1086,7 +1097,12 @@ PropertyView.prototype = {
    */
   mdnLinkClick: function PropertyView_mdnLinkClick(aEvent)
   {
-    this.tree.win.openUILinkIn(this.link, "tab");
+    let inspector = this.tree.styleInspector.inspector;
+
+    if (inspector.target.tab) {
+      let browserWin = inspector.target.tab.ownerDocument.defaultView;
+      browserWin.openUILinkIn(this.link, "tab");
+    }
     aEvent.preventDefault();
   },
 };
@@ -1197,27 +1213,35 @@ SelectorView.prototype = {
 
   /**
    * When a css link is clicked this method is called in order to either:
-   *   1. Open the link in view source (for element style attributes).
+   *   1. Open the link in view source (for chrome stylesheets).
    *   2. Open the link in the style editor.
    *
-   *   Like the style editor, we only view stylesheets contained in
-   *   document.styleSheets inside the style editor.
+   *   We can only view stylesheets contained in document.styleSheets inside the
+   *   style editor.
    *
    * @param aEvent The click event
    */
   openStyleEditor: function(aEvent)
   {
-    let rule = this.selectorInfo.selector._cssRule;
-    let doc = this.tree.win.content.document;
+    let inspector = this.tree.styleInspector.inspector;
+    let contentDoc = inspector.selection.document;
+    let cssSheet = this.selectorInfo.selector._cssRule._cssSheet;
     let line = this.selectorInfo.ruleLine || 0;
-    let cssSheet = rule._cssSheet;
     let contentSheet = false;
     let styleSheet;
     let styleSheets;
 
+    // The style editor can only display stylesheets coming from content because
+    // chrome stylesheets are not listed in the editor's stylesheet selector.
+    //
+    // If the stylesheet is a content stylesheet we send it to the style
+    // editor else we display it in the view source window.
+    //
+    // We check if cssSheet exists in case of inline styles (which contain no
+    // sheet)
     if (cssSheet) {
       styleSheet = cssSheet.domSheet;
-      styleSheets = doc.styleSheets;
+      styleSheets = contentDoc.styleSheets;
 
       // Array.prototype.indexOf always returns -1 here so we loop through
       // the styleSheets array instead.
@@ -1230,15 +1254,24 @@ SelectorView.prototype = {
     }
 
     if (contentSheet) {
-      this.tree.win.StyleEditor.openChrome(styleSheet, line);
+      let target = inspector.target;
+
+      if (StyleEditorDefinition.isTargetSupported(target)) {
+        let toolbox = gDevTools.getToolboxForTarget(target);
+
+        toolbox.once("styleeditor-selected", function SE_selected(id, styleEditor) {
+          styleEditor.selectStyleSheet(styleSheet, line);
+        });
+        toolbox.selectTool("styleeditor");
+      }
     } else {
       let href = styleSheet ? styleSheet.href : "";
-      let viewSourceUtils = this.tree.win.gViewSourceUtils;
+      let viewSourceUtils = inspector.viewSourceUtils;
 
       if (this.selectorInfo.sourceElement) {
         href = this.selectorInfo.sourceElement.ownerDocument.location.href;
       }
-      viewSourceUtils.viewSource(href, null, doc, line);
+      viewSourceUtils.viewSource(href, null, contentDoc, line);
     }
   },
 };
diff --git a/browser/devtools/styleinspector/StyleInspector.jsm b/browser/devtools/styleinspector/StyleInspector.jsm
index 0496c381de4..d724a821409 100644
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/StyleInspector.jsm
@@ -11,83 +11,44 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/CssRuleView.jsm");
-Cu.import("resource:///modules/inspector.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 // This module doesn't currently export any symbols directly, it only
 // registers inspector tools.
-this.EXPORTED_SYMBOLS = [];
+this.EXPORTED_SYMBOLS = ["RuleViewTool", "ComputedViewTool"];
 
-/**
- * Lookup l10n string from a string bundle.
- * @param {string} aName The key to lookup.
- * @returns A localized version of the given key.
- */
-function l10n(aName)
-{
-  try {
-    return _strings.GetStringFromName(aName);
-  } catch (ex) {
-    Services.console.logStringMessage("Error reading '" + aName + "'");
-    throw new Error("l10n error with " + aName);
-  }
-}
-
-function RegisterStyleTools()
-{
-  // Register the rules view
-  if (Services.prefs.getBoolPref("devtools.ruleview.enabled")) {
-    InspectorUI.registerSidebar({
-      id: "ruleview",
-      label: l10n("ruleView.label"),
-      tooltiptext: l10n("ruleView.tooltiptext"),
-      accesskey: l10n("ruleView.accesskey"),
-      contentURL: "chrome://browser/content/devtools/cssruleview.xul",
-      load: function(aInspector, aFrame) new RuleViewTool(aInspector, aFrame),
-      destroy: function(aContext) aContext.destroy()
-    });
-  }
-
-  // Register the computed styles view
-  if (Services.prefs.getBoolPref("devtools.styleinspector.enabled")) {
-    InspectorUI.registerSidebar({
-      id: "computedview",
-      label: this.l10n("style.highlighter.button.label2"),
-      tooltiptext: this.l10n("style.highlighter.button.tooltip2"),
-      accesskey: this.l10n("style.highlighter.accesskey2"),
-      contentURL: "chrome://browser/content/devtools/csshtmltree.xul",
-      load: function(aInspector, aFrame) new ComputedViewTool(aInspector, aFrame),
-      destroy: function(aContext) aContext.destroy()
-    });
-  }
-}
-
-function RuleViewTool(aInspector, aFrame)
+this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
 {
   this.inspector = aInspector;
-  this.chromeWindow = this.inspector.chromeWindow;
-  this.doc = aFrame.contentDocument;
+  this.doc = aWindow.document;
+  this.outerIFrame = aIFrame;
 
-  if (!this.inspector._ruleViewStore) {
-   this.inspector._ruleViewStore = {};
-  }
-  this.view = new CssRuleView(this.doc, this.inspector._ruleViewStore);
+  this.view = new CssRuleView(this.doc);
   this.doc.documentElement.appendChild(this.view.element);
 
   this._changeHandler = function() {
     this.inspector.markDirty();
-    this.inspector.change("ruleview");
   }.bind(this);
 
   this.view.element.addEventListener("CssRuleViewChanged", this._changeHandler)
 
   this._cssLinkHandler = function(aEvent) {
+    let contentDoc = this.inspector.selection.document;
     let rule = aEvent.detail.rule;
-    let styleSheet = rule.sheet;
-    let doc = this.chromeWindow.content.document;
-    let styleSheets = doc.styleSheets;
-    let contentSheet = false;
     let line = rule.ruleLine || 0;
+    let styleSheet = rule.sheet;
+    let styleSheets = contentDoc.styleSheets;
+    let contentSheet = false;
 
+    // The style editor can only display stylesheets coming from content because
+    // chrome stylesheets are not listed in the editor's stylesheet selector.
+    //
+    // If the stylesheet is a content stylesheet we send it to the style
+    // editor else we display it in the view source window.
+    //
     // Array.prototype.indexOf always returns -1 here so we loop through
     // the styleSheets object instead.
     for each (let sheet in styleSheets) {
@@ -98,14 +59,23 @@ function RuleViewTool(aInspector, aFrame)
     }
 
     if (contentSheet)  {
-      this.chromeWindow.StyleEditor.openChrome(styleSheet, line);
+      let target = this.inspector.target;
+
+      if (StyleEditorDefinition.isTargetSupported(target)) {
+        let toolbox = gDevTools.getToolboxForTarget(target);
+
+        toolbox.once("styleeditor-selected", function SE_selected(id, styleEditor) {
+          styleEditor.selectStyleSheet(styleSheet, line);
+        });
+        toolbox.selectTool("styleeditor");
+      }
     } else {
       let href = styleSheet ? styleSheet.href : "";
       if (rule.elementStyle.element) {
         href = rule.elementStyle.element.ownerDocument.location.href;
       }
-      let viewSourceUtils = this.chromeWindow.gViewSourceUtils;
-      viewSourceUtils.viewSource(href, null, doc, line);
+      let viewSourceUtils = this.inspector.viewSourceUtils;
+      viewSourceUtils.viewSource(href, null, contentDoc, line);
     }
   }.bind(this);
 
@@ -113,75 +83,93 @@ function RuleViewTool(aInspector, aFrame)
                                      this._cssLinkHandler);
 
   this._onSelect = this.onSelect.bind(this);
-  this.inspector.on("select", this._onSelect);
-
-  this._onChange = this.onChange.bind(this);
-  this.inspector.on("change", this._onChange);
-  this.inspector.on("sidebaractivated-ruleview", this._onChange);
+  this.inspector.selection.on("new-node", this._onSelect);
+  this.refresh = this.refresh.bind(this);
+  this.inspector.on("layout-change", this.refresh);
+  this.inspector.sidebar.on("ruleview-selected", this.refresh);
+  this.inspector.selection.on("pseudoclass", this.refresh);
+  if (this.inspector.highlighter) {
+    this.inspector.highlighter.on("locked", this._onSelect);
+  }
 
   this.onSelect();
 }
 
 RuleViewTool.prototype = {
-  onSelect: function RVT_onSelect(aEvent, aFrom) {
-    let node = this.inspector.selection;
-    if (!node) {
+  onSelect: function RVT_onSelect(aEvent) {
+    if (!this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()) {
       this.view.highlight(null);
       return;
     }
 
-    if (this.inspector.locked) {
-      this.view.highlight(node);
+    if (!aEvent || aEvent == "new-node") {
+      if (this.inspector.selection.reason == "highlighter") {
+        this.view.highlight(null);
+      } else {
+        this.view.highlight(this.inspector.selection.node);
+      }
+    }
+
+    if (aEvent == "locked") {
+      this.view.highlight(this.inspector.selection.node);
     }
   },
 
-  onChange: function RVT_onChange(aEvent, aFrom) {
-    if (aFrom == "ruleview" || aFrom == "createpanel") {
-      return;
-    }
+  isActive: function RVT_isActive() {
+    return this.inspector.sidebar.getCurrentTabID() == "ruleview";
+  },
 
-    if (this.inspector.locked && this.inspector.isPanelVisible("ruleview")) {
+  refresh: function RVT_refresh() {
+    if (this.isActive()) {
       this.view.nodeChanged();
     }
   },
 
   destroy: function RVT_destroy() {
-    this.inspector.off("select", this._onSelect);
-    this.inspector.off("change", this._onChange);
-    this.inspector.off("sidebaractivated-ruleview", this._onChange);
-    this.view.element.removeEventListener("CssRuleViewChanged",
-                                          this._changeHandler);
+    this.inspector.off("layout-change", this.refresh);
+    this.inspector.sidebar.off("ruleview-selected", this.refresh);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node", this._onSelect);
+    if (this.inspector.highlighter) {
+      this.inspector.highlighter.off("locked", this._onSelect);
+    }
+
     this.view.element.removeEventListener("CssRuleViewCSSLinkClicked",
-                                          this._cssLinkHandler);
+      this._cssLinkHandler);
+
+    this.view.element.removeEventListener("CssRuleViewChanged",
+      this._changeHandler);
+
     this.doc.documentElement.removeChild(this.view.element);
 
     this.view.destroy();
 
-    delete this._changeHandler;
+    delete this.outerIFrame;
     delete this.view;
     delete this.doc;
     delete this.inspector;
   }
 }
 
-function ComputedViewTool(aInspector, aFrame)
+this.ComputedViewTool = function CVT_ComputedViewTool(aInspector, aWindow, aIFrame)
 {
   this.inspector = aInspector;
-  this.iframe = aFrame;
-  this.window = aInspector.chromeWindow;
-  this.document = this.window.document;
+  this.window = aWindow;
+  this.document = aWindow.document;
+  this.outerIFrame = aIFrame;
   this.cssLogic = new CssLogic();
   this.view = new CssHtmlTree(this);
 
   this._onSelect = this.onSelect.bind(this);
-  this.inspector.on("select", this._onSelect);
-  this._onChange = this.onChange.bind(this);
-  this.inspector.on("change", this._onChange);
-
-  // Since refreshes of the computed view are non-destructive,
-  // refresh when the tab is changed so we can notice script-driven
-  // changes.
-  this.inspector.on("sidebaractivated-computedview", this._onChange);
+  this.inspector.selection.on("new-node", this._onSelect);
+  if (this.inspector.highlighter) {
+    this.inspector.highlighter.on("locked", this._onSelect);
+  }
+  this.refresh = this.refresh.bind(this);
+  this.inspector.on("layout-change", this.refresh);
+  this.inspector.sidebar.on("computedview-selected", this.refresh);
+  this.inspector.selection.on("pseudoclass", this.refresh);
 
   this.cssLogic.highlight(null);
   this.view.highlight(null);
@@ -192,39 +180,57 @@ function ComputedViewTool(aInspector, aFrame)
 ComputedViewTool.prototype = {
   onSelect: function CVT_onSelect(aEvent)
   {
-    if (this.inspector.locked) {
-      this.cssLogic.highlight(this.inspector.selection);
-      this.view.highlight(this.inspector.selection);
-    }
-  },
-
-  onChange: function CVT_change(aEvent, aFrom)
-  {
-    if (aFrom == "computedview" ||
-        aFrom == "createpanel" ||
-        this.inspector.selection != this.cssLogic.viewedElement) {
+    if (!this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()) {
+      // FIXME: We should hide view's content
       return;
     }
 
-    if (this.inspector.locked && this.inspector.isPanelVisible("computedview")) {
-      this.cssLogic.highlight(this.inspector.selection);
+    if (!aEvent || aEvent == "new-node") {
+      if (this.inspector.selection.reason == "highlighter") {
+        // FIXME: We should hide view's content
+      } else {
+        this.cssLogic.highlight(this.inspector.selection.node);
+        this.view.highlight(this.inspector.selection.node);
+      }
+    }
+
+    if (aEvent == "locked") {
+      this.cssLogic.highlight(this.inspector.selection.node);
+      this.view.highlight(this.inspector.selection.node);
+    }
+  },
+
+  isActive: function CVT_isActive() {
+    return this.inspector.sidebar.getCurrentTabID() == "computedview";
+  },
+
+  refresh: function CVT_refresh() {
+    if (this.isActive()) {
+      this.cssLogic.highlight(this.inspector.selection.node);
       this.view.refreshPanel();
     }
   },
 
   destroy: function CVT_destroy(aContext)
   {
-    this.inspector.off("select", this._onSelect);
-    this.inspector.off("change", this._onChange);
-    this.inspector.off("sidebaractivated-computedview", this._onChange);
+    this.inspector.off("layout-change", this.refresh);
+    this.inspector.sidebar.off("computedview-selected", this.refresh);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node", this._onSelect);
+    if (this.inspector.highlighter) {
+      this.inspector.highlighter.off("locked", this._onSelect);
+    }
+
     this.view.destroy();
     delete this.view;
 
+    delete this.outerIFrame;
     delete this.cssLogic;
     delete this.cssHtmlTree;
-    delete this.iframe;
     delete this.window;
     delete this.document;
+    delete this.inspector;
   }
 }
 
@@ -242,5 +248,3 @@ XPCOMUtils.defineLazyGetter(this, "CssHtmlTree", function() {
   Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tmp);
   return tmp.CssHtmlTree;
 });
-
-RegisterStyleTools();
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 216ffa30b7a..dfac610dd95 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -24,7 +24,20 @@
 ]>
 
 <xul:window xmlns="http://www.w3.org/1999/xhtml"
-            xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+            xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+            title="&computedViewTitle;">
+
+<script type="application/javascript;version=1.8">
+  window.setPanel = function(panel, iframe) {
+    Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
+    this.computedview = new ComputedViewTool(panel, window, iframe);
+  }
+  window.onunload = function() {
+    if (this.computedview) {
+      this.computedview.destroy();
+    }
+  }
+</script>
 
 <!-- The output from #templateRoot (below) is inserted here. -->
 <div id="root"></div>
diff --git a/browser/devtools/styleinspector/cssruleview.xul b/browser/devtools/styleinspector/cssruleview.xul
index 6ba8220ad0a..058f478257f 100644
--- a/browser/devtools/styleinspector/cssruleview.xul
+++ b/browser/devtools/styleinspector/cssruleview.xul
@@ -9,4 +9,16 @@
   <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
   %inspectorDTD;
 ]>
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&ruleViewTitle;">
+  <script type="application/javascript;version=1.8">
+    window.setPanel = function(panel, iframe) {
+      Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
+      this.ruleview = new RuleViewTool(panel, window, iframe);
+    }
+    window.onunload = function() {
+      if (this.ruleview) {
+        this.ruleview.destroy();
+      }
+    }
+  </script>
+</window>
diff --git a/browser/devtools/styleinspector/test/Makefile.in b/browser/devtools/styleinspector/test/Makefile.in
index ee9180408e4..b923418b636 100644
--- a/browser/devtools/styleinspector/test/Makefile.in
+++ b/browser/devtools/styleinspector/test/Makefile.in
@@ -16,27 +16,27 @@ MOCHITEST_BROWSER_FILES = \
   browser_bug683672.js \
   browser_styleinspector_bug_672746_default_styles.js \
   browser_styleinspector_bug_672744_search_filter.js \
-  browser_bug589375_keybindings.js \
+  $(filter awaiting-promise-based-init, browser_bug589375_keybindings.js) \
   browser_styleinspector_bug_689759_no_results_placeholder.js \
   browser_bug_692400_element_style.js \
   browser_csslogic_inherited.js \
+  browser_ruleview_734259_style_editor_link.js \
   browser_ruleview_editor.js \
   browser_ruleview_editor_changedvalues.js \
+  browser_ruleview_bug_703643_context_menu_copy.js \
+  browser_ruleview_focus.js \
   browser_ruleview_inherit.js \
   browser_ruleview_manipulation.js \
   browser_ruleview_override.js \
   browser_ruleview_ui.js \
   browser_ruleview_update.js \
-  browser_ruleview_focus.js \
   browser_bug705707_is_content_stylesheet.js \
   browser_bug722196_property_view_media_queries.js \
   browser_bug722196_rule_view_media_queries.js \
   browser_bug_592743_specificity.js \
-  browser_ruleview_bug_703643_context_menu_copy.js \
-  browser_computedview_bug_703643_context_menu_copy.js \
-  browser_ruleview_734259_style_editor_link.js \
-  browser_computedview_734259_style_editor_link.js \
   browser_bug722691_rule_view_increment.js \
+  browser_computedview_734259_style_editor_link.js \
+  browser_computedview_bug_703643_context_menu_copy.js\
   head.js \
   $(NULL)
 
diff --git a/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js b/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
index 0e8bacbfbd0..ecbd05aaa40 100644
--- a/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
+++ b/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
@@ -5,7 +5,9 @@
 // Tests that the key bindings work properly.
 
 let doc;
-let stylePanel;
+let inspector;
+let computedView;
+let iframe;
 
 function createDocument()
 {
@@ -14,38 +16,38 @@ function createDocument()
     '<span class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector key binding test";
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runStyleInspectorTests);
+
+  openInspector(openComputedView);
 }
 
-function runStyleInspectorTests()
+function openComputedView(aInspector)
 {
-  Services.obs.addObserver(SI_test, "StyleInspector-populated", false);
-  SI_inspectNode();
+  inspector = aInspector;
+  iframe = inspector._toolbox.frame;
+
+  Services.obs.addObserver(runTests, "StyleInspector-populated", false);
+
+  inspector.sidebar.select("computedview");
 }
 
-function SI_inspectNode()
+function runTests()
 {
+  Services.obs.removeObserver(runTests, "StyleInspector-populated");
+  computedView = getComputedView(inspector);
+
   var span = doc.querySelector(".matches");
   ok(span, "captain, we have the matches span");
 
-  let htmlTree = stylePanel.cssHtmlTree;
-  stylePanel.selectNode(span);
+  inspector.selection.setNode(span);
 
-  is(span, htmlTree.viewedElement,
+  is(span, computedView.viewedElement,
     "style inspector node matches the selected node");
-  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
-}
-
-function SI_test()
-{
-  Services.obs.removeObserver(SI_test, "StyleInspector-populated", false);
 
   info("checking keybindings");
 
-  let iframe = stylePanel.iframe;
-  let searchbar = stylePanel.cssHtmlTree.searchField;
+  let searchbar = computedView.searchField;
   let propView = getFirstVisiblePropertyView();
   let rulesTable = propView.matchedSelectorsContainer;
   let matchedExpander = propView.matchedExpander;
@@ -59,7 +61,7 @@ function SI_test()
     testKey(iframe.contentWindow, "VK_RETURN", rulesTable);
 
     checkHelpLinkKeybinding();
-    stylePanel.destroy();
+    computedView.destroy();
     finishUp();
   });
 
@@ -76,13 +78,13 @@ function SI_test()
     info("window is focused");
     info("focusing search filter");
     searchbar.focus();
-  }, stylePanel.iframe.contentWindow);
+  }, iframe.contentWindow);
 }
 
 function getFirstVisiblePropertyView()
 {
   let propView = null;
-  stylePanel.cssHtmlTree.propertyViews.some(function(aPropView) {
+  computedView.propertyViews.some(function(aPropView) {
     if (aPropView.visible) {
       propView = aPropView;
       return true;
@@ -107,7 +109,6 @@ function testKey(aContext, aVirtKey, aRulesTable)
 function checkHelpLinkKeybinding()
 {
   info("checking help link keybinding");
-  let iframe = stylePanel.iframe;
   let propView = getFirstVisiblePropertyView();
 
   info("check that MDN link is opened on \"F1\"");
@@ -121,7 +122,7 @@ function checkHelpLinkKeybinding()
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = inspector = iframe = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug683672.js b/browser/devtools/styleinspector/test/browser_bug683672.js
index fc0388cce2d..bd9064df0de 100644
--- a/browser/devtools/styleinspector/test/browser_bug683672.js
+++ b/browser/devtools/styleinspector/test/browser_bug683672.js
@@ -5,7 +5,9 @@
 // Tests that the style inspector works properly
 
 let doc;
-let stylePanel;
+let inspector;
+let div;
+let computedView;
 
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/test/browser_bug683672.html";
 
@@ -25,9 +27,24 @@ function tabLoaded()
 {
   browser.removeEventListener("load", tabLoaded, true);
   doc = content.document;
-  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runTests);
+  openInspector(selectNode);
+}
+
+function selectNode(aInspector)
+{
+  inspector = aInspector;
+
+  div = content.document.getElementById("test");
+  ok(div, "captain, we have the div");
+
+  inspector.selection.setNode(div);
+
+  inspector.sidebar.once("computedview-ready", function() {
+    computedView = getComputedView(inspector);
+
+    inspector.sidebar.select("computedview");
+    runTests();
+  });
 }
 
 function runTests()
@@ -36,25 +53,17 @@ function runTests()
   //testUnmatchedSelectors();
 
   info("finishing up");
-  stylePanel.destroy();
   finishUp();
 }
 
 function testMatchedSelectors()
 {
   info("checking selector counts, matched rules and titles");
-  let div = content.document.getElementById("test");
-  ok(div, "captain, we have the div");
 
-  info("selecting the div");
-  stylePanel.selectNode(div);
-
-  let htmlTree = stylePanel.cssHtmlTree;
-
-  is(div, htmlTree.viewedElement,
+  is(div, computedView.viewedElement,
       "style inspector node matches the selected node");
 
-  let propertyView = new PropertyView(htmlTree, "color");
+  let propertyView = new PropertyView(computedView, "color");
   let numMatchedSelectors = propertyView.propertyInfo.matchedSelectors.length;
 
   is(numMatchedSelectors, 6,
@@ -71,14 +80,12 @@ function testUnmatchedSelectors()
   ok(body, "captain, we have a body");
 
   info("selecting content.document.body");
-  stylePanel.selectNode(body);
+  inspector.selection.setNode(body);
 
-  let htmlTree = stylePanel.cssHtmlTree;
-
-  is(body, htmlTree.viewedElement,
+  is(body, computedView.viewedElement,
       "style inspector node matches the selected node");
 
-  let propertyView = new PropertyView(htmlTree, "color");
+  let propertyView = new PropertyView(computedView, "color");
   let numUnmatchedSelectors = propertyView.propertyInfo.unmatchedSelectors.length;
 
   is(numUnmatchedSelectors, 13,
@@ -90,7 +97,7 @@ function testUnmatchedSelectors()
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = inspector = div = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js b/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
index c2f94a24c69..9fe1b464a51 100644
--- a/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
+++ b/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
@@ -6,7 +6,7 @@
 // property view.
 
 let doc;
-let stylePanel;
+let computedView;
 
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/" +
   "test/browser_bug722196_identify_media_queries.html";
@@ -22,18 +22,27 @@ function docLoaded()
 {
   browser.removeEventListener("load", docLoaded, true);
   doc = content.document;
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, checkSheets);
+
+  openInspector(selectNode);
 }
 
-function checkSheets()
+function selectNode(aInspector)
 {
   var div = doc.querySelector("div");
   ok(div, "captain, we have the div");
 
-  stylePanel.selectNode(div);
+  aInspector.selection.setNode(div);
 
-  let cssLogic = stylePanel.cssLogic;
+  aInspector.sidebar.once("computedview-ready", function() {
+    aInspector.sidebar.select("computedview");
+    computedView = getComputedView(aInspector);
+    checkSheets();
+  });
+}
+
+function checkSheets()
+{
+  let cssLogic = computedView.cssLogic;
   cssLogic.processMatchedSelectors();
 
   let _strings = Services.strings
@@ -48,13 +57,12 @@ function checkSheets()
   is(cssLogic._matchedRules[1][0].source, source2,
     "rule.source gives correct output for rule 2");
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = null;
+  doc = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js b/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
index 56175d968d1..8a5653989a4 100644
--- a/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
+++ b/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
@@ -5,21 +5,31 @@
 // Tests for selector text errors.
 
 let doc;
-let stylePanel;
+let computedView;
 
 function createDocument()
 {
   doc.body.innerHTML = "<div style='color:blue;'></div>";
 
   doc.title = "Style Inspector Selector Text Test";
-  stylePanel = new ComputedViewPanel(window);
 
-  Services.obs.addObserver(SI_checkText, "StyleInspector-populated", false);
+  openInspector(openComputedView);
+}
 
-  let span = doc.querySelector("div");
-  ok(span, "captain, we have the test div");
 
-  stylePanel.createPanel(span);
+function openComputedView(aInspector)
+{
+  let div = doc.querySelector("div");
+  ok(div, "captain, we have the test div");
+
+  aInspector.selection.setNode(div);
+
+  aInspector.sidebar.once("computedview-ready", function() {
+    aInspector.sidebar.select("computedview");
+    computedView = getComputedView(aInspector);
+
+    Services.obs.addObserver(SI_checkText, "StyleInspector-populated", false);
+  });
 }
 
 function SI_checkText()
@@ -27,7 +37,7 @@ function SI_checkText()
   Services.obs.removeObserver(SI_checkText, "StyleInspector-populated", false);
 
   let propertyView = null;
-  stylePanel.cssHtmlTree.propertyViews.some(function(aView) {
+  computedView.propertyViews.some(function(aView) {
     if (aView.name == "color") {
       propertyView = aView;
       return true;
@@ -56,13 +66,12 @@ function SI_checkText()
     ok(false, "getting the selector text should not raise an exception");
   }
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js b/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
index 3e6c40fbb6e..0fcdfdf9933 100644
--- a/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
@@ -3,8 +3,8 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 let doc;
-let win;
-let stylePanel;
+let inspector;
+let computedView;
 
 function createDocument()
 {
@@ -27,12 +27,26 @@ function createDocument()
     '</div>';
   doc.title = "Rule view style editor link test";
 
+  openInspector(selectNode);
+}
+
+
+function selectNode(aInspector)
+{
+  inspector = aInspector;
+
   let span = doc.querySelector("span");
   ok(span, "captain, we have the span");
 
-  Services.obs.addObserver(testInlineStyle, "StyleInspector-populated", false);
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(span);
+  aInspector.selection.setNode(span);
+
+  aInspector.sidebar.once("computedview-ready", function() {
+    aInspector.sidebar.select("computedview");
+
+    computedView = getComputedView(aInspector);
+
+    Services.obs.addObserver(testInlineStyle, "StyleInspector-populated", false);
+  });
 }
 
 function testInlineStyle()
@@ -46,7 +60,7 @@ function testInlineStyle()
         return;
       }
       info("window opened");
-      win = aSubject.QueryInterface(Ci.nsIDOMWindow);
+      let win = aSubject.QueryInterface(Ci.nsIDOMWindow);
       win.addEventListener("load", function windowLoad() {
         win.removeEventListener("load", windowLoad);
         info("window load completed");
@@ -67,35 +81,28 @@ function testInlineStyleSheet()
 {
   info("clicking an inline stylesheet");
 
-  Services.ww.registerNotification(function onWindow(aSubject, aTopic) {
-    if (aTopic != "domwindowopened") {
-      return;
-    }
-    info("window opened");
-    win = aSubject.QueryInterface(Ci.nsIDOMWindow);
-    win.addEventListener("load", function windowLoad() {
-      win.removeEventListener("load", windowLoad);
-      info("window load completed");
-      let windowType = win.document.documentElement.getAttribute("windowtype");
-      is(windowType, "Tools:StyleEditor", "style editor window is open");
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.openToolboxForTab(target, "styleeditor");
 
-      win.styleEditorChrome.addChromeListener({
-        onEditorAdded: function checkEditor(aChrome, aEditor) {
-          if (!aEditor.sourceEditor) {
-            aEditor.addActionListener({
-              onAttach: function (aEditor) {
-                aEditor.removeActionListener(this);
-                validateStyleEditorSheet(aEditor);
-              }
-            });
-          } else {
-            validateStyleEditorSheet(aEditor);
-          }
+  toolbox.once("styleeditor-ready", function(event, panel) {
+    let win = panel._panelWin;
+
+    win.styleEditorChrome.addChromeListener({
+      onEditorAdded: function checkEditor(aChrome, aEditor) {
+        if (!aEditor.sourceEditor) {
+          aEditor.addActionListener({
+            onAttach: function (aEditor) {
+              aEditor.removeActionListener(this);
+              validateStyleEditorSheet(aEditor);
+            }
+          });
+        } else {
+          validateStyleEditorSheet(aEditor);
         }
-      });
-      Services.ww.unregisterNotification(onWindow);
+      }
     });
   });
+
   let link = getLinkByIndex(1);
   link.click();
 }
@@ -106,18 +113,13 @@ function validateStyleEditorSheet(aEditor)
 
   let sheet = doc.styleSheets[0];
   is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
-  info("closing window");
-  win.close();
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function expandProperty(aIndex, aCallback)
 {
-  let iframe = stylePanel.iframe;
-  let contentDoc = iframe.contentDocument;
-  let contentWindow = iframe.contentWindow;
+  let contentDoc = computedView.styleDocument;
   let expando = contentDoc.querySelectorAll(".expandable")[aIndex];
   expando.click();
 
@@ -127,14 +129,14 @@ function expandProperty(aIndex, aCallback)
 
 function getLinkByIndex(aIndex)
 {
-  let contentDoc = stylePanel.iframe.contentDocument;
+  let contentDoc = computedView.styleDocument;
   let links = contentDoc.querySelectorAll(".rule-link .link");
   return links[aIndex];
 }
 
 function finishUp()
 {
-  doc = win = stylePanel = null;
+  doc = inspector = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js b/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
index 4f7bad0a241..4b1046446c3 100644
--- a/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
@@ -5,8 +5,8 @@
 // Tests that the style inspector works properly
 
 let doc;
-let stylePanel;
-let cssHtmlTree;
+let win;
+let computedView;
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
@@ -32,30 +32,42 @@ function createDocument()
     '</div>';
   doc.title = "Computed view context menu test";
 
+  openInspector(selectNode)
+}
+
+function selectNode(aInspector)
+{
   let span = doc.querySelector("span");
   ok(span, "captain, we have the span");
 
-  stylePanel = new ComputedViewPanel(window);
-  Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-populated", false);
-  stylePanel.createPanel(span);
+  aInspector.selection.setNode(span);
+
+  aInspector.sidebar.once("computedview-ready", function() {
+    aInspector.sidebar.select("computedview");
+
+    computedView = getComputedView(aInspector);
+    win = aInspector.sidebar.getWindowForTab("computedview");
+
+    Services.obs.addObserver(runStyleInspectorTests,
+      "StyleInspector-populated", false);
+  });
 }
 
+
 function runStyleInspectorTests()
 {
-  Services.obs.removeObserver(runStyleInspectorTests, "StyleInspector-populated", false);
+  Services.obs.removeObserver(runStyleInspectorTests,
+    "StyleInspector-populated", false);
 
-  cssHtmlTree = stylePanel.cssHtmlTree;
-
-  let contentDocument = stylePanel.iframe.contentDocument;
+  let contentDocument = computedView.styleDocument;
   let prop = contentDocument.querySelector(".property-view");
   ok(prop, "captain, we have the property-view node");
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
-    stylePanel.iframe.contentWindow);
+  contextMenuClick(prop);
 
-  checkCopyProperty()
+  checkCopyProperty();
 }
 
 function checkCopyProperty()
@@ -67,7 +79,7 @@ function checkCopyProperty()
   SimpleTest.waitForClipboard(function CS_boundCopyPropCheck() {
       return checkClipboardData(expectedPattern);
     },
-    cssHtmlTree.siBoundCopyDeclaration,
+    computedView.siBoundCopyDeclaration,
     checkCopyPropertyName, function() {
       failedClipboard(expectedPattern, checkCopyPropertyName);
     });
@@ -82,7 +94,7 @@ function checkCopyPropertyName()
   SimpleTest.waitForClipboard(function CS_boundCopyPropNameCheck() {
       return checkClipboardData(expectedPattern);
     },
-    cssHtmlTree.siBoundCopyProperty,
+    computedView.siBoundCopyProperty,
     checkCopyPropertyValue, function() {
       failedClipboard(expectedPattern, checkCopyPropertyValue);
     });
@@ -97,7 +109,7 @@ function checkCopyPropertyValue()
   SimpleTest.waitForClipboard(function CS_boundCopyPropValueCheck() {
       return checkClipboardData(expectedPattern);
     },
-    cssHtmlTree.siBoundCopyPropertyValue,
+    computedView.siBoundCopyPropertyValue,
     checkCopySelection, function() {
       failedClipboard(expectedPattern, checkCopySelection);
     });
@@ -105,15 +117,14 @@ function checkCopyPropertyValue()
 
 function checkCopySelection()
 {
-  let contentDocument = stylePanel.iframe.contentDocument;
-  let contentWindow = stylePanel.iframe.contentWindow;
+  let contentDocument = computedView.styleDocument;
   let props = contentDocument.querySelectorAll(".property-view");
   ok(props, "captain, we have the property-view nodes");
 
   let range = document.createRange();
   range.setStart(props[0], 0);
   range.setEnd(props[3], 4);
-  contentWindow.getSelection().addRange(range);
+  win.getSelection().addRange(range);
 
   info("Checking that cssHtmlTree.siBoundCopy() " +
        " returns the correct clipboard value");
@@ -126,7 +137,7 @@ function checkCopySelection()
   SimpleTest.waitForClipboard(function CS_boundCopyCheck() {
       return checkClipboardData(expectedPattern);
     },
-    cssHtmlTree.siBoundCopy, closeStyleInspector, function() {
+    computedView.siBoundCopy, closeStyleInspector, function() {
       failedClipboard(expectedPattern, closeStyleInspector);
     });
 }
@@ -162,13 +173,12 @@ function failedClipboard(aExpectedPattern, aCallback)
 
 function closeStyleInspector()
 {
-  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = stylePanel = cssHtmlTree = null;
+  computedView = doc = win = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
index 0d933c700e0..86e36378bc3 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
@@ -5,6 +5,8 @@
 let win;
 let doc;
 let contentWindow;
+let inspector;
+let toolbox;
 
 let tempScope = {};
 Cu.import("resource://gre/modules/Services.jsm", tempScope);
@@ -31,41 +33,27 @@ function createDocument()
     '</div>';
   doc.title = "Rule view style editor link test";
 
-  openInspector();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  toolbox = gDevTools.openToolboxForTab(target, "inspector");
+  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
+    inspector = aInspector;
+    inspector.sidebar.select("ruleview");
+    highlightNode();
+  });
 }
 
-function openInspector()
+function highlightNode()
 {
-  ok(window.InspectorUI, "InspectorUI variable exists");
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
-
-  Services.obs.addObserver(inspectorUIOpen,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function inspectorUIOpen()
-{
-  Services.obs.removeObserver(inspectorUIOpen,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is open.
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
-  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
-  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
-
   // Highlight a node.
   let div = content.document.getElementsByTagName("div")[0];
-  InspectorUI.inspectNode(div);
-  InspectorUI.stopInspecting();
-  is(InspectorUI.selection, div, "selection matches the div element");
 
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", testInlineStyle);
-
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("ruleview");
+  inspector.selection.once("new-node", function() {
+    is(inspector.selection.node, div, "selection matches the div element");
+    testInlineStyle();
+  });
+  executeSoon(function() {
+    inspector.selection.setNode(div);
+  });
 }
 
 function testInlineStyle()
@@ -88,7 +76,10 @@ function testInlineStyle()
         testInlineStyleSheet();
       });
     });
-    EventUtils.synthesizeMouseAtCenter(getLinkByIndex(0), { }, contentWindow);
+
+    let link = getLinkByIndex(0);
+    link.scrollIntoView();
+    link.click();
   });
 }
 
@@ -96,41 +87,18 @@ function testInlineStyleSheet()
 {
   info("clicking an inline stylesheet");
 
-  Services.ww.registerNotification(function onWindow(aSubject, aTopic) {
-    if (aTopic != "domwindowopened") {
-      return;
-    }
-
-    win = aSubject.QueryInterface(Ci.nsIDOMWindow);
-    win.addEventListener("load", function windowLoad() {
-      win.removeEventListener("load", windowLoad);
-
-      let windowType = win.document.documentElement.getAttribute("windowtype");
-      is(windowType, "Tools:StyleEditor", "style editor window is open");
-
-      win.styleEditorChrome.addChromeListener({
-        onEditorAdded: function checkEditor(aChrome, aEditor) {
-          if (!aEditor.sourceEditor) {
-            aEditor.addActionListener({
-              onAttach: function (aEditor) {
-                aEditor.removeActionListener(this);
-                validateStyleEditorSheet(aEditor);
-              }
-            });
-          } else {
-            validateStyleEditorSheet(aEditor);
-          }
-        }
-      });
-
-      Services.ww.unregisterNotification(onWindow);
+  toolbox.once("styleeditor-ready", function(id, aToolbox) {
+    aToolbox.panelWindow.styleEditorChrome.addChromeListener({
+      onEditorAdded: validateStyleEditorSheet
     });
   });
 
-  EventUtils.synthesizeMouse(getLinkByIndex(1), 5, 5, { }, contentWindow);
+  let link = getLinkByIndex(1);
+  link.scrollIntoView();
+  link.click();
 }
 
-function validateStyleEditorSheet(aEditor)
+function validateStyleEditorSheet(aChrome, aEditor)
 {
   info("validating style editor stylesheet");
 
@@ -152,10 +120,8 @@ function getLinkByIndex(aIndex)
 
 function finishup()
 {
-  InspectorUI.sidebar.hide();
-  InspectorUI.closeInspectorUI();
   gBrowser.removeCurrentTab();
-  doc = contentWindow = win = null;
+  contentWindow = doc = inspector = toolbox = win = null;
   finish();
 }
 
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js b/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
index 0183314d1db..62060b704a0 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
@@ -6,16 +6,13 @@ let doc;
 let tempScope = {};
 Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
 let inplaceEditor = tempScope._getInplaceEditorForSpan;
+let inspector;
+let win;
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
-function ruleViewFrame()
-{
-  return InspectorUI.sidebar._tools["ruleview"].frame;
-}
-
 function createDocument()
 {
   doc.body.innerHTML = '<style type="text/css"> ' +
@@ -37,40 +34,28 @@ function createDocument()
     '</div>';
   doc.title = "Rule view context menu test";
 
-  openInspector();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
+    inspector = aInspector;
+    inspector.sidebar.select("ruleview");
+    win = inspector.sidebar.getWindowForTab("ruleview");
+    highlightNode();
+  });
 }
 
-function openInspector()
+function highlightNode()
 {
-  ok(window.InspectorUI, "InspectorUI variable exists");
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
-
-  Services.obs.addObserver(inspectorUIOpen,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
-}
-
-function inspectorUIOpen()
-{
-  Services.obs.removeObserver(inspectorUIOpen,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-
-  // Make sure the inspector is open.
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
-  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
-  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
-
   // Highlight a node.
   let div = content.document.getElementsByTagName("div")[0];
-  InspectorUI.inspectNode(div);
-  InspectorUI.stopInspecting();
-  is(InspectorUI.selection, div, "selection matches the div element");
 
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", testClip)
-  InspectorUI.sidebar.show();
-  InspectorUI.sidebar.activatePanel("ruleview");
+  inspector.selection.once("new-node", function() {
+    is(inspector.selection.node, div, "selection matches the div element");
+    testClip();
+  });
+  executeSoon(function() {
+    inspector.selection.setNode(div);
+  });
 }
 
 function testClip()
@@ -95,7 +80,7 @@ function testClip()
 }
 
 function checkCopyRule() {
-  let contentDoc = ruleViewFrame().contentDocument;
+  let contentDoc = win.document;
   let props = contentDoc.querySelectorAll(".ruleview-property");
 
   is(props.length, 5, "checking property length");
@@ -109,8 +94,7 @@ function checkCopyRule() {
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
-    ruleViewFrame().contentWindow);
+  contextMenuClick(prop);
 
   ruleView()._boundCopyRule();
   let menu = contentDoc.querySelector("#rule-view-context-menu");
@@ -120,7 +104,7 @@ function checkCopyRule() {
 
 function checkCopyProperty()
 {
-  let contentDoc = ruleViewFrame().contentDocument;
+  let contentDoc = win.document;
   let props = contentDoc.querySelectorAll(".ruleview-property");
   let prop = props[2];
 
@@ -130,8 +114,7 @@ function checkCopyProperty()
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
-    ruleViewFrame().contentWindow);
+  contextMenuClick(prop);
 
   SimpleTest.waitForClipboard(function IUI_boundCopyPropCheck() {
     return checkClipboardData(expectedPattern);
@@ -174,7 +157,7 @@ function checkCopyPropertyValue()
 
 function checkCopySelection()
 {
-  let contentDoc = ruleViewFrame().contentDocument;
+  let contentDoc = win.document;
   let props = contentDoc.querySelectorAll(".ruleview-property");
   let values = contentDoc.querySelectorAll(".ruleview-propertycontainer");
 
@@ -182,7 +165,7 @@ function checkCopySelection()
   range.setStart(props[0], 0);
   range.setEnd(values[4], 2);
 
-  let selection = ruleViewFrame().contentWindow.getSelection();
+  let selection = win.getSelection();
   selection.addRange(range);
 
   info("Checking that _boundCopy() returns the correct " +
@@ -223,7 +206,7 @@ function testSimpleCopy()
 }
 
 function checkSimpleCopy() {
-  let contentDoc = ruleViewFrame().contentDocument;
+  let contentDoc = win.document;
   let props = contentDoc.querySelectorAll(".ruleview-code");
 
   is(props.length, 2, "checking property length");
@@ -234,8 +217,7 @@ function checkSimpleCopy() {
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
-    ruleViewFrame().contentWindow);
+  contextMenuClick(prop);
 
   ruleView()._boundCopy();
   let menu = contentDoc.querySelector("#rule-view-context-menu");
@@ -283,10 +265,8 @@ function failedClipboard(aExpectedPattern, aCallback)
 
 function finishup()
 {
-  InspectorUI.sidebar.hide();
-  InspectorUI.closeInspectorUI();
   gBrowser.removeCurrentTab();
-  doc = null;
+  doc = inspector = null;
   finish();
 }
 
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_focus.js b/browser/devtools/styleinspector/test/browser_ruleview_focus.js
index 10f38c31bf4..d9f49f57c2c 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_focus.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_focus.js
@@ -9,39 +9,31 @@ let tempScope = {};
 Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
 let inplaceEditor = tempScope._getInplaceEditorForSpan;
 let doc;
+let inspector;
 let stylePanel;
 
-function waitForRuleView(aCallback)
-{
-  InspectorUI.currentInspector.once("sidebaractivated-ruleview", aCallback);
-}
-
 function openRuleView()
 {
-  Services.obs.addObserver(function onOpened() {
-    Services.obs.removeObserver(onOpened,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  var target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
+    inspector = aInspector;
+    inspector.sidebar.select("ruleview");
 
     // Highlight a node.
     let node = content.document.getElementsByTagName("h1")[0];
-    InspectorUI.inspectNode(node);
-    InspectorUI.stopInspecting();
-
-    // Open the rule view sidebar.
-    waitForRuleView(testFocus);
-
-    InspectorUI.sidebar.show();
-    InspectorUI.sidebar.activatePanel("ruleview");
-
-    testFocus();
-  }, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.openInspectorUI();
+    inspector.selection.once("new-node", testFocus);
+    executeSoon(function() {
+      inspector.selection.setNode(doc.body);
+    });
+  });
 }
 
 function testFocus()
 {
-  let ruleViewFrame = InspectorUI.sidebar._tools["ruleview"].frame;
-  let brace = ruleViewFrame.contentDocument.querySelectorAll(".ruleview-ruleclose")[0];
+  let win = inspector.sidebar.getWindowForTab("ruleview");
+  let brace = win.document.querySelectorAll(".ruleview-ruleclose")[0];
+
   waitForEditorFocus(brace.parentNode, function onNewElement(aEditor) {
     aEditor.input.value = "color";
     waitForEditorFocus(brace.parentNode, function onEditingValue(aEditor) {
@@ -65,9 +57,7 @@ function testFocus()
 
 function finishUp()
 {
-  InspectorUI.sidebar.hide();
-  InspectorUI.closeInspectorUI();
-  doc = stylePanel = null;
+  doc = inspector = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector.js b/browser/devtools/styleinspector/test/browser_styleinspector.js
index c397b2f2097..ea8e01203ee 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector.js
@@ -5,7 +5,8 @@
 // Tests that the style inspector works properly
 
 let doc;
-let stylePanel;
+let inspector;
+let computedView;
 
 function createDocument()
 {
@@ -26,8 +27,20 @@ function createDocument()
     '<p>Inspect using inspectstyle(document.querySelectorAll("span")[0])</p>' +
     '</div>';
   doc.title = "Style Inspector Test";
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runStyleInspectorTests);
+
+  openInspector(openComputedView);
+}
+
+function openComputedView(aInspector)
+{
+  inspector = aInspector;
+
+  inspector.sidebar.once("computedview-ready", function() {
+    computedView = getComputedView(inspector);
+
+    inspector.sidebar.select("computedview");
+    runStyleInspectorTests();
+  });
 }
 
 function runStyleInspectorTests()
@@ -35,25 +48,22 @@ function runStyleInspectorTests()
   var spans = doc.querySelectorAll("span");
   ok(spans, "captain, we have the spans");
 
-  let htmlTree = stylePanel.cssHtmlTree;
-
   for (var i = 0, numSpans = spans.length; i < numSpans; i++) {
-    stylePanel.selectNode(spans[i]);
+    inspector.selection.setNode(spans[i]);
 
-    is(spans[i], htmlTree.viewedElement,
+    is(spans[i], computedView.viewedElement,
       "style inspector node matches the selected node");
-    is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+    is(computedView.viewedElement, computedView.cssLogic.viewedElement,
        "cssLogic node matches the cssHtmlTree node");
   }
 
   SI_CheckProperty();
-  stylePanel.destroy();
   finishUp();
 }
 
 function SI_CheckProperty()
 {
-  let cssLogic = stylePanel.cssLogic;
+  let cssLogic = computedView.cssLogic;
   let propertyInfo = cssLogic.getPropertyInfo("color");
   ok(propertyInfo.matchedRuleCount > 0, "color property has matching rules");
   //ok(propertyInfo.unmatchedRuleCount > 0, "color property has unmatched rules");
@@ -61,7 +71,7 @@ function SI_CheckProperty()
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
index b7376923337..a7c48a0befa 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
@@ -5,7 +5,8 @@
 // Tests that the search filter works properly.
 
 let doc;
-let stylePanel;
+let inspector;
+let computedView;
 
 function createDocument()
 {
@@ -14,9 +15,20 @@ function createDocument()
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector Search Filter Test";
-  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runStyleInspectorTests);
+
+  openInspector(openComputedView);
+}
+
+function openComputedView(aInspector)
+{
+  inspector = aInspector;
+
+  inspector.sidebar.once("computedview-ready", function() {
+    inspector.sidebar.select("computedview");
+    computedView = getComputedView(inspector);
+
+    runStyleInspectorTests();
+  });
 }
 
 function runStyleInspectorTests()
@@ -30,12 +42,11 @@ function SI_inspectNode()
   var span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  let htmlTree = stylePanel.cssHtmlTree;
-  stylePanel.selectNode(span);
+  inspector.selection.setNode(span);
 
-  is(span, htmlTree.viewedElement,
+  is(span, computedView.viewedElement,
     "style inspector node matches the selected node");
-  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -45,32 +56,34 @@ function SI_toggleDefaultStyles()
 
   info("clearing \"only user styles\" checkbox");
 
-  let iframe = stylePanel.iframe;
-  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
+  let doc = computedView.styleDocument;
+  let checkbox = doc.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
-  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
+  checkbox.click();
 }
 
 function SI_AddFilterText()
 {
   Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
 
-  let iframe = stylePanel.iframe;
-  let searchbar = iframe.contentDocument.querySelector(".searchfield");
+  let doc = computedView.styleDocument;
+  let searchbar = doc.querySelector(".searchfield");
   Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
   info("setting filter text to \"color\"");
   searchbar.focus();
-  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
-  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
-  EventUtils.synthesizeKey("l", {}, iframe.contentWindow);
-  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
-  EventUtils.synthesizeKey("r", {}, iframe.contentWindow);
+
+  let win =computedView.styleWindow;
+  EventUtils.synthesizeKey("c", {}, win);
+  EventUtils.synthesizeKey("o", {}, win);
+  EventUtils.synthesizeKey("l", {}, win);
+  EventUtils.synthesizeKey("o", {}, win);
+  EventUtils.synthesizeKey("r", {}, win);
 }
 
 function SI_checkFilter()
 {
   Services.obs.removeObserver(SI_checkFilter, "StyleInspector-populated", false);
-  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
+  let propertyViews = computedView.propertyViews;
 
   info("check that the correct properties are visible");
   propertyViews.forEach(function(propView) {
@@ -79,13 +92,12 @@ function SI_checkFilter()
       "span " + name + " property visibility check");
   });
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = inspector = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
index c9a9913f394..059134f19f0 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
@@ -5,7 +5,8 @@
 // Tests that the checkbox to show only user styles works properly.
 
 let doc;
-let stylePanel;
+let inspector;
+let computedView;
 
 function createDocument()
 {
@@ -14,9 +15,20 @@ function createDocument()
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector Default Styles Test";
-  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runStyleInspectorTests);
+
+  openInspector(openComputedView);
+}
+
+function openComputedView(aInspector)
+{
+  inspector = aInspector;
+
+  inspector.sidebar.once("computedview-ready", function() {
+    inspector.sidebar.select("computedview");
+    computedView = getComputedView(inspector);
+
+    runStyleInspectorTests();
+  });
 }
 
 function runStyleInspectorTests()
@@ -30,12 +42,11 @@ function SI_inspectNode()
   let span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  let htmlTree = stylePanel.cssHtmlTree;
-  stylePanel.selectNode(span);
+  inspector.selection.setNode(span);
 
-  is(span, htmlTree.viewedElement,
+  is(span, computedView.viewedElement,
     "style inspector node matches the selected node");
-  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -53,10 +64,11 @@ function SI_check()
 function SI_toggleDefaultStyles()
 {
   // Click on the checkbox.
-  let iframe = stylePanel.iframe;
-  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
+  let doc = computedView.styleDocument;
+  let checkbox = doc.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
-  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
+
+  checkbox.click();
 }
 
 function SI_checkDefaultStyles()
@@ -68,14 +80,13 @@ function SI_checkDefaultStyles()
   is(propertyVisible("background-color"), true,
       "span background-color property is visible");
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function propertyVisible(aName)
 {
   info("Checking property visibility for " + aName);
-  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
+  let propertyViews = computedView.propertyViews;
   for each (let propView in propertyViews) {
     if (propView.name == aName) {
       return propView.visible;
@@ -86,7 +97,7 @@ function propertyVisible(aName)
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = inspector = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
index b16871fa4f7..047bebf8f8e 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
@@ -5,7 +5,8 @@
 // Tests that the no results placeholder works properly.
 
 let doc;
-let stylePanel;
+let inspector;
+let computedView;
 
 function createDocument()
 {
@@ -13,10 +14,23 @@ function createDocument()
     '.matches {color: #F00;}</style>' +
     '<span id="matches" class="matches">Some styled text</span>';
   doc.title = "Tests that the no results placeholder works properly";
-  stylePanel = new ComputedViewPanel(window);
-  stylePanel.createPanel(doc.body, runStyleInspectorTests);
+
+  openInspector(openComputedView);
 }
 
+function openComputedView(aInspector)
+{
+  inspector = aInspector;
+
+  inspector.sidebar.once("computedview-ready", function() {
+    inspector.sidebar.select("computedview");
+    computedView = getComputedView(inspector);
+
+    runStyleInspectorTests();
+  });
+}
+
+
 function runStyleInspectorTests()
 {
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
@@ -24,12 +38,11 @@ function runStyleInspectorTests()
   let span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  let htmlTree = stylePanel.cssHtmlTree;
-  stylePanel.selectNode(span);
+  inspector.selection.setNode(span);
 
-  is(span, htmlTree.viewedElement,
+  is(span, computedView.viewedElement,
     "style inspector node matches the selected node");
-  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -37,15 +50,14 @@ function SI_AddFilterText()
 {
   Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
 
-  let iframe = stylePanel.iframe;
-  let searchbar = stylePanel.cssHtmlTree.searchField;
+  let searchbar = computedView.searchField;
   let searchTerm = "xxxxx";
 
   Services.obs.addObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
   info("setting filter text to \"" + searchTerm + "\"");
   searchbar.focus();
   for each (let c in searchTerm) {
-    EventUtils.synthesizeKey(c, {}, iframe.contentWindow);
+    EventUtils.synthesizeKey(c, {}, computedView.styleWindow);
   }
 }
 
@@ -53,9 +65,9 @@ function SI_checkPlaceholderVisible()
 {
   Services.obs.removeObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
   info("SI_checkPlaceholderVisible called");
-  let placeholder = stylePanel.cssHtmlTree.noResults;
-  let iframe = stylePanel.iframe;
-  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
+  let placeholder = computedView.noResults;
+  let win = computedView.styleWindow;
+  let display = win.getComputedStyle(placeholder).display;
 
   is(display, "block", "placeholder is visible");
 
@@ -64,32 +76,30 @@ function SI_checkPlaceholderVisible()
 
 function SI_ClearFilterText()
 {
-  let iframe = stylePanel.iframe;
-  let searchbar = stylePanel.cssHtmlTree.searchField;
+  let searchbar = computedView.searchField;
 
   Services.obs.addObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
   info("clearing filter text");
   searchbar.focus();
   searchbar.value = "";
-  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
 }
 
 function SI_checkPlaceholderHidden()
 {
   Services.obs.removeObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
-  let placeholder = stylePanel.cssHtmlTree.noResults;
-  let iframe = stylePanel.iframe;
-  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
+  let placeholder = computedView.noResults;
+  let win = computedView.styleWindow;
+  let display = win.getComputedStyle(placeholder).display;
 
   is(display, "none", "placeholder is hidden");
 
-  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = stylePanel = null;
+  doc = inspector = computedView = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/head.js b/browser/devtools/styleinspector/test/head.js
index cf2827811be..7c2ee991d62 100644
--- a/browser/devtools/styleinspector/test/head.js
+++ b/browser/devtools/styleinspector/test/head.js
@@ -6,122 +6,36 @@
 let tempScope = {};
 Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
 Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tempScope);
-Cu.import("resource:///modules/HUDService.jsm", tempScope);
-let HUDService = tempScope.HUDService;
+Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
 let ConsoleUtils = tempScope.ConsoleUtils;
 let CssLogic = tempScope.CssLogic;
 let CssHtmlTree = tempScope.CssHtmlTree;
+let gDevTools = tempScope.gDevTools;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
 
-function log(aMsg)
-{
-  dump("*** WebConsoleTest: " + aMsg + "\n");
-}
-
-function pprint(aObj)
-{
-  for (let prop in aObj) {
-    if (typeof aObj[prop] == "function") {
-      log("function " + prop);
-    }
-    else {
-      log(prop + ": " + aObj[prop]);
-    }
-  }
-}
-
-let tab, browser, hudId, hud, hudBox, filterBox, outputNode, cs;
+let browser, hudId, hud, hudBox, filterBox, outputNode, cs;
 
 function addTab(aURL)
 {
   gBrowser.selectedTab = gBrowser.addTab();
   content.location = aURL;
-  tab = gBrowser.selectedTab;
-  browser = gBrowser.getBrowserForTab(tab);
+  browser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
 }
 
-function afterAllTabsLoaded(callback, win) {
-  win = win || window;
-
-  let stillToLoad = 0;
-
-  function onLoad() {
-    this.removeEventListener("load", onLoad, true);
-    stillToLoad--;
-    if (!stillToLoad)
-      callback();
-  }
-
-  for (let a = 0; a < win.gBrowser.tabs.length; a++) {
-    let browser = win.gBrowser.tabs[a].linkedBrowser;
-    if (browser.contentDocument.readyState != "complete") {
-      stillToLoad++;
-      browser.addEventListener("load", onLoad, true);
-    }
-  }
-
-  if (!stillToLoad)
-    callback();
-}
-
-/**
- * Check if a log entry exists in the HUD output node.
- *
- * @param {Element} aOutputNode
- *        the HUD output node.
- * @param {string} aMatchString
- *        the string you want to check if it exists in the output node.
- * @param {string} aMsg
- *        the message describing the test
- * @param {boolean} [aOnlyVisible=false]
- *        find only messages that are visible, not hidden by the filter.
- * @param {boolean} [aFailIfFound=false]
- *        fail the test if the string is found in the output node.
- * @param {string} aClass [optional]
- *        find only messages with the given CSS class.
- */
-function testLogEntry(aOutputNode, aMatchString, aMsg, aOnlyVisible,
-                      aFailIfFound, aClass)
+function openInspector(callback)
 {
-  let selector = ".hud-msg-node";
-  // Skip entries that are hidden by the filter.
-  if (aOnlyVisible) {
-    selector += ":not(.hud-filtered-by-type)";
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+  if (inspector && inspector.isReady) {
+    callback(inspector);
+  } else {
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-ready", function(event, panel) {
+      let inspector = gDevTools.getPanelForTarget("inspector", target);
+      callback(inspector);
+    });
   }
-  if (aClass) {
-    selector += "." + aClass;
-  }
-
-  let msgs = aOutputNode.querySelectorAll(selector);
-  let found = false;
-  for (let i = 0, n = msgs.length; i < n; i++) {
-    let message = msgs[i].textContent.indexOf(aMatchString);
-    if (message > -1) {
-      found = true;
-      break;
-    }
-
-    // Search the labels too.
-    let labels = msgs[i].querySelectorAll("label");
-    for (let j = 0; j < labels.length; j++) {
-      if (labels[j].getAttribute("value").indexOf(aMatchString) > -1) {
-        found = true;
-        break;
-      }
-    }
-  }
-
-  is(found, !aFailIfFound, aMsg);
-}
-
-/**
- * A convenience method to call testLogEntry().
- *
- * @param string aString
- *        The string to find.
- */
-function findLogEntry(aString)
-{
-  testLogEntry(outputNode, aString, "found " + aString);
 }
 
 function addStyle(aDocument, aString)
@@ -133,16 +47,6 @@ function addStyle(aDocument, aString)
   return node;
 }
 
-function openConsole()
-{
-  HUDService.activateHUDForContext(tab);
-}
-
-function closeConsole()
-{
-  HUDService.deactivateHUDForContext(tab);
-}
-
 function finishTest()
 {
   finish();
@@ -151,158 +55,25 @@ function finishTest()
 function tearDown()
 {
   try {
-    HUDService.deactivateHUDForContext(gBrowser.selectedTab);
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
   }
   catch (ex) {
-    log(ex);
+    dump(ex);
   }
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
-  tab = browser = hudId = hud = filterBox = outputNode = cs = null;
+  browser = hudId = hud = filterBox = outputNode = cs = null;
 }
 
-/**
- * Shows the computed view in its own panel.
- */
-function ComputedViewPanel(aContext)
-{
-  this._init(aContext);
+function getComputedView(inspector) {
+  return inspector.sidebar.getWindowForTab("computedview").computedview.view;
 }
 
-ComputedViewPanel.prototype = {
-  _init: function CVP_init(aContext)
-  {
-    this.window = aContext;
-    this.document = this.window.document;
-    this.cssLogic = new CssLogic();
-    this.panelReady = false;
-    this.iframeReady = false;
-  },
-
-  /**
-   * Factory method to create the actual style panel
-   * @param {function} aCallback (optional) callback to fire when ready.
-   */
-  createPanel: function SI_createPanel(aSelection, aCallback)
-  {
-    let popupSet = this.document.getElementById("mainPopupSet");
-    let panel = this.document.createElement("panel");
-
-    panel.setAttribute("class", "styleInspector");
-    panel.setAttribute("orient", "vertical");
-    panel.setAttribute("ignorekeys", "true");
-    panel.setAttribute("noautofocus", "true");
-    panel.setAttribute("noautohide", "true");
-    panel.setAttribute("titlebar", "normal");
-    panel.setAttribute("close", "true");
-    panel.setAttribute("label", "Computed View");
-    panel.setAttribute("width", 350);
-    panel.setAttribute("height", this.window.screen.height / 2);
-
-    this._openCallback = aCallback;
-    this.selectedNode = aSelection;
-
-    let iframe = this.document.createElement("iframe");
-    let boundIframeOnLoad = function loadedInitializeIframe()
-    {
-      this.iframeReady = true;
-      this.iframe.removeEventListener("load", boundIframeOnLoad, true);
-      this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
-    }.bind(this);
-
-    iframe.flex = 1;
-    iframe.setAttribute("tooltip", "aHTMLTooltip");
-    iframe.addEventListener("load", boundIframeOnLoad, true);
-    iframe.setAttribute("src", "chrome://browser/content/devtools/csshtmltree.xul");
-
-    panel.appendChild(iframe);
-    popupSet.appendChild(panel);
-
-    this._boundPopupShown = this.popupShown.bind(this);
-    panel.addEventListener("popupshown", this._boundPopupShown, false);
-
-    this.panel = panel;
-    this.iframe = iframe;
-
-    return panel;
-  },
-
-  /**
-   * Event handler for the popupshown event.
-   */
-  popupShown: function SI_popupShown()
-  {
-    this.panelReady = true;
-    this.cssHtmlTree = new CssHtmlTree(this);
-    let selectedNode = this.selectedNode || null;
-    this.cssLogic.highlight(selectedNode);
-    this.cssHtmlTree.highlight(selectedNode);
-    if (this._openCallback) {
-      this._openCallback();
-      delete this._openCallback;
-    }
-  },
-
-  isLoaded: function SI_isLoaded()
-  {
-    return this.iframeReady && this.panelReady;
-  },
-
-  /**
-   * Select from Path (via CssHtmlTree_pathClick)
-   * @param aNode The node to inspect.
-   */
-  selectFromPath: function SI_selectFromPath(aNode)
-  {
-    this.selectNode(aNode);
-  },
-
-  /**
-   * Select a node to inspect in the Style Inspector panel
-   * @param aNode The node to inspect.
-   */
-  selectNode: function SI_selectNode(aNode)
-  {
-    this.selectedNode = aNode;
-
-    if (this.isLoaded()) {
-      this.cssLogic.highlight(aNode);
-      this.cssHtmlTree.highlight(aNode);
-    }
-  },
-
-  /**
-   * Destroy the style panel, remove listeners etc.
-   */
-  destroy: function SI_destroy()
-  {
-    this.panel.hidePopup();
-
-    if (this.cssHtmlTree) {
-      this.cssHtmlTree.destroy();
-      delete this.cssHtmlTree;
-    }
-
-    if (this.iframe) {
-      this.iframe.parentNode.removeChild(this.iframe);
-      delete this.iframe;
-    }
-
-    delete this.cssLogic;
-    this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
-    delete this._boundPopupShown;
-    this.panel.parentNode.removeChild(this.panel);
-    delete this.panel;
-    delete this.doc;
-    delete this.win;
-    delete CssHtmlTree.win;
-  },
-};
-
 function ruleView()
 {
-  return InspectorUI.sidebar._toolContext("ruleview").view;
+  return inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
 }
 
 function waitForEditorFocus(aParent, aCallback)
@@ -329,6 +100,18 @@ function waitForEditorBlur(aEditor, aCallback)
   }, false);
 }
 
+function contextMenuClick(element) {
+  var evt = element.ownerDocument.createEvent('MouseEvents');
+
+  var button = 2;  // right click
+
+  evt.initMouseEvent('contextmenu', true, true,
+       element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
+       false, false, false, button, null);
+
+  element.dispatchEvent(evt);
+}
+
 registerCleanupFunction(tearDown);
 
 waitForExplicitFinish();
diff --git a/browser/devtools/tilt/CmdTilt.jsm b/browser/devtools/tilt/CmdTilt.jsm
index ff6d84de145..3c09b3772c1 100644
--- a/browser/devtools/tilt/CmdTilt.jsm
+++ b/browser/devtools/tilt/CmdTilt.jsm
@@ -7,6 +7,7 @@ this.EXPORTED_SYMBOLS = [ ];
 
 Components.utils.import("resource:///modules/devtools/gcli.jsm");
 Components.utils.import("resource:///modules/HUDService.jsm");
+Components.utils.import("resource:///modules/devtools/Tilt.jsm");
 
 
 /**
@@ -26,31 +27,32 @@ gcli.addCommand({
   name: 'tilt open',
   description: gcli.lookup("tiltOpenDesc"),
   manual: gcli.lookup("tiltOpenManual"),
-  params: [
-    {
-      name: "node",
-      type: "node",
-      defaultValue: null,
-      description: gcli.lookup("inspectNodeDesc"),
-      manual: gcli.lookup("inspectNodeManual")
-    }
-  ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let InspectorUI = chromeWindow.InspectorUI;
-    let Tilt = chromeWindow.Tilt;
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    Tilt.initializeForCurrentTab();
+  }
+});
 
-    if (Tilt.currentInstance) {
-      Tilt.update(args.node);
-    } else {
-      let hudId = chromeWindow.HUDConsoleUI.getOpenHUD();
-      let hud = HUDService.getHudReferenceById(hudId);
 
-      if (hud && !hud.consolePanel) {
-        HUDService.deactivateHUDForContext(chromeWindow.gBrowser.selectedTab);
-      }
-      InspectorUI.openInspectorUI(args.node);
-      Tilt.initialize();
+/**
+ * 'tilt toggle' command
+ */
+gcli.addCommand({
+  name: "tilt toggle",
+  buttonId: "command-button-tilt",
+  buttonClass: "command-button",
+  hidden: true,
+  exec: function(args, context) {
+    let chromeWindow = context.environment.chromeDocument.defaultView;
+
+    if (TiltManager._instances.has(chromeWindow)) {
+      let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+      Tilt.destroy(Tilt.currentWindowId);
+    }
+    else {
+      let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+      Tilt.initializeForCurrentTab();
     }
   }
 });
@@ -81,8 +83,7 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = chromeWindow.Tilt;
-
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.translate([args.x, args.y]);
     }
@@ -122,8 +123,7 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = chromeWindow.Tilt;
-
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.rotate([args.x, args.y, args.z]);
     }
@@ -148,7 +148,7 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = chromeWindow.Tilt;
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
 
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.zoom(-args.zoom);
@@ -166,7 +166,7 @@ gcli.addCommand({
   manual: gcli.lookup("tiltResetManual"),
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = chromeWindow.Tilt;
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
 
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.reset();
@@ -184,7 +184,7 @@ gcli.addCommand({
   manual: gcli.lookup("tiltCloseManual"),
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = chromeWindow.Tilt;
+    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
 
     Tilt.destroy(Tilt.currentWindowId);
   }
diff --git a/browser/devtools/tilt/Tilt.jsm b/browser/devtools/tilt/Tilt.jsm
index a32e80a39f3..debbe626a91 100644
--- a/browser/devtools/tilt/Tilt.jsm
+++ b/browser/devtools/tilt/Tilt.jsm
@@ -48,7 +48,21 @@ Cu.import("resource:///modules/devtools/TiltGL.jsm");
 Cu.import("resource:///modules/devtools/TiltUtils.jsm");
 Cu.import("resource:///modules/devtools/TiltVisualizer.jsm");
 
-this.EXPORTED_SYMBOLS = ["Tilt"];
+this.EXPORTED_SYMBOLS = ["TiltManager"];
+
+this.TiltManager = {
+  _instances: new WeakMap(),
+  getTiltForBrowser: function(aChromeWindow)
+  {
+    if (this._instances.has(aChromeWindow)) {
+      return this._instances.get(aChromeWindow);
+    } else {
+      let tilt = new Tilt(aChromeWindow);
+      this._instances.set(aChromeWindow, tilt);
+      return tilt;
+    }
+  },
+}
 
 /**
  * Object managing instances of the visualizer.
@@ -72,6 +86,8 @@ this.Tilt = function Tilt(aWindow)
    * Shortcut for accessing notifications strings.
    */
   this.NOTIFICATIONS = TILT_NOTIFICATIONS;
+
+  this.setup();
 }
 
 Tilt.prototype = {
@@ -79,9 +95,16 @@ Tilt.prototype = {
   /**
    * Initializes a visualizer for the current tab.
    */
-  initialize: function T_initialize()
+  initializeForCurrentTab: function T_initializeForCurrentTab()
   {
+    let contentWindow = this.chromeWindow.gBrowser.selectedBrowser.contentWindow;
     let id = this.currentWindowId;
+    let self = this;
+
+    contentWindow.addEventListener("beforeunload", function onUnload() {
+      contentWindow.removeEventListener("beforeunload", onUnload, false);
+      self.destroy(id, true);
+    }, false);
 
     // if the visualizer for the current tab is already open, destroy it now
     if (this.visualizers[id]) {
@@ -94,7 +117,8 @@ Tilt.prototype = {
       chromeWindow: this.chromeWindow,
       contentWindow: this.chromeWindow.gBrowser.selectedBrowser.contentWindow,
       parentNode: this.chromeWindow.gBrowser.selectedBrowser.parentNode,
-      notifications: this.NOTIFICATIONS
+      notifications: this.NOTIFICATIONS,
+      tab: this.chromeWindow.gBrowser.selectedTab
     });
 
     // make sure the visualizer object was initialized properly
@@ -162,42 +186,6 @@ Tilt.prototype = {
     Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYED, null);
   },
 
-  /**
-   * Handles any supplementary post-initialization work, done immediately
-   * after a TILT_NOTIFICATIONS.INITIALIZING notification.
-   */
-  _whenInitializing: function T__whenInitializing()
-  {
-    this._whenShown();
-  },
-
-  /**
-   * Handles any supplementary post-destruction work, done immediately
-   * after a TILT_NOTIFICATIONS.DESTROYED notification.
-   */
-  _whenDestroyed: function T__whenDestroyed()
-  {
-    this._whenHidden();
-  },
-
-  /**
-   * Handles any necessary changes done when the Tilt surface is shown,
-   * after a TILT_NOTIFICATIONS.SHOWN notification.
-   */
-  _whenShown: function T__whenShown()
-  {
-    this.tiltButton.checked = true;
-  },
-
-  /**
-   * Handles any necessary changes done when the Tilt surface is hidden,
-   * after a TILT_NOTIFICATIONS.HIDDEN notification.
-   */
-  _whenHidden: function T__whenHidden()
-  {
-    this.tiltButton.checked = false;
-  },
-
   /**
    * Handles the event fired when a tab is selected.
    */
@@ -210,80 +198,16 @@ Tilt.prototype = {
     }
   },
 
-  /**
-   * A node was selected in the Inspector.
-   * Called from InspectorUI.
-   *
-   * @param {Element} aNode
-   *                  the newly selected node
-   */
-  update: function T_update(aNode) {
-    if (this.currentInstance) {
-      this.currentInstance.presenter.highlightNode(aNode, "moveIntoView");
-    }
-  },
-
   /**
    * Add the browser event listeners to handle state changes.
-   * Called from InspectorUI.
    */
   setup: function T_setup()
   {
-    if (this._setupFinished) {
-      return;
-    }
-
     // load the preferences from the devtools.tilt branch
     TiltVisualizer.Prefs.load();
 
-    // hide the button in the Inspector toolbar if Tilt is not enabled
-    this.tiltButton.hidden = !this.enabled;
-
-    // add the necessary observers to handle specific notifications
-    Services.obs.addObserver(
-      this._whenInitializing.bind(this), TILT_NOTIFICATIONS.INITIALIZING, false);
-    Services.obs.addObserver(
-      this._whenDestroyed.bind(this), TILT_NOTIFICATIONS.DESTROYED, false);
-    Services.obs.addObserver(
-      this._whenShown.bind(this), TILT_NOTIFICATIONS.SHOWN, false);
-    Services.obs.addObserver(
-      this._whenHidden.bind(this), TILT_NOTIFICATIONS.HIDDEN, false);
-
-    Services.obs.addObserver(function(aSubject, aTopic, aWinId) {
-      this.destroy(aWinId); }.bind(this),
-      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED, false);
-
-    this.chromeWindow.gBrowser.tabContainer.addEventListener("TabSelect",
-      this._onTabSelect.bind(this), false);
-
-
-    // FIXME: this shouldn't be done here, see bug #705131
-    let onOpened = function() {
-      if (this.inspector && this.highlighter && this.currentInstance) {
-        this.inspector.stopInspecting();
-        this.inspectButton.disabled = true;
-        this.highlighter.hide();
-      }
-    }.bind(this);
-
-    let onClosed = function() {
-      if (this.inspector && this.highlighter) {
-        this.inspectButton.disabled = false;
-        this.highlighter.show();
-      }
-    }.bind(this);
-
-    Services.obs.addObserver(onOpened,
-      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-    Services.obs.addObserver(onClosed,
-      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
-    Services.obs.addObserver(onOpened,
-      TILT_NOTIFICATIONS.INITIALIZING, false);
-    Services.obs.addObserver(onClosed,
-      TILT_NOTIFICATIONS.DESTROYED, false);
-
-
-    this._setupFinished = true;
+    this.chromeWindow.gBrowser.tabContainer.addEventListener(
+      "TabSelect", this._onTabSelect.bind(this), false);
   },
 
   /**
@@ -311,35 +235,4 @@ Tilt.prototype = {
   {
     return this.visualizers[this.currentWindowId];
   },
-
-  /**
-   * Gets the current InspectorUI instance.
-   */
-  get inspector()
-  {
-    return this.chromeWindow.InspectorUI;
-  },
-
-  /**
-   * Gets the current Highlighter instance from the InspectorUI.
-   */
-  get highlighter()
-  {
-    return this.inspector.highlighter;
-  },
-
-  /**
-   * Gets the Tilt button in the Inspector toolbar.
-   */
-  get tiltButton()
-  {
-    return this.chromeWindow.document.getElementById("inspector-3D-button");
-  },
-
-  /**
-   * Gets the Inspect button in the Inspector toolbar.
-   */
-  get inspectButton() {
-    return this.chromeWindow.document.getElementById("inspector-inspect-toolbutton");
-  }
 };
diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm
index 05d678ad854..e577b8dfb0c 100644
--- a/browser/devtools/tilt/TiltVisualizer.jsm
+++ b/browser/devtools/tilt/TiltVisualizer.jsm
@@ -51,6 +51,8 @@ const TILT_CRAFTER = "resource:///modules/devtools/TiltWorkerCrafter.js";
 const TILT_PICKER = "resource:///modules/devtools/TiltWorkerPicker.js";
 
 Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource:///modules/devtools/Target.jsm");
 Cu.import("resource:///modules/devtools/TiltGL.jsm");
 Cu.import("resource:///modules/devtools/TiltMath.jsm");
 Cu.import("resource:///modules/devtools/TiltUtils.jsm");
@@ -98,6 +100,8 @@ this.TiltVisualizer = function TiltVisualizer(aProperties)
     aProperties.onError || null,
     aProperties.onLoad || null);
 
+  this.bindToInspector(aProperties.tab);
+
   /**
    * Visualization mouse and keyboard controller.
    */
@@ -132,6 +136,8 @@ TiltVisualizer.prototype = {
    */
   cleanup: function TV_cleanup()
   {
+    this.unbindInspector();
+
     if (this.controller) {
       TiltUtils.destroyObject(this.controller);
     }
@@ -144,7 +150,124 @@ TiltVisualizer.prototype = {
     TiltUtils.destroyObject(this);
     TiltUtils.clearCache();
     TiltUtils.gc(chromeWindow);
-  }
+  },
+
+  /**
+   * Listen to the inspector activity.
+   */
+  bindToInspector: function TV_bindToInspector(aTab)
+  {
+    this._browserTab = aTab;
+
+    this.onNewNodeFromInspector = this.onNewNodeFromInspector.bind(this);
+    this.onNewNodeFromTilt = this.onNewNodeFromTilt.bind(this);
+    this.onInspectorReady = this.onInspectorReady.bind(this);
+    this.onToolboxDestroyed = this.onToolboxDestroyed.bind(this);
+
+    gDevTools.on("inspector-ready", this.onInspectorReady);
+    gDevTools.on("toolbox-destroyed", this.onToolboxDestroyed);
+
+    Services.obs.addObserver(this.onNewNodeFromTilt,
+                             this.presenter.NOTIFICATIONS.HIGHLIGHTING,
+                             false);
+    Services.obs.addObserver(this.onNewNodeFromTilt,
+                             this.presenter.NOTIFICATIONS.UNHIGHLIGHTING,
+                             false);
+
+    let target = TargetFactory.forTab(aTab);
+    let inspector = gDevTools.getPanelForTarget("inspector", target);
+    if (inspector) {
+      this.inspector = inspector;
+      this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
+      this.inspector.selection.on("detached", this.onNewNodeFromInspector);
+      this.onNewNodeFromInspector();
+    }
+  },
+
+  /**
+   * Unregister inspector event listeners.
+   */
+  unbindInspector: function TV_unbindInspector()
+  {
+    this._browserTab = null;
+
+    if (this.inspector) {
+      this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
+      this.inspector.selection.off("detached", this.onNewNodeFromInspector);
+      this.inspector = null;
+    }
+
+    gDevTools.off("inspector-ready", this.onInspectorReady);
+    gDevTools.off("toolbox-destroyed", this.onToolboxDestroyed);
+
+    Services.obs.removeObserver(this.onNewNodeFromTilt,
+                                this.presenter.NOTIFICATIONS.HIGHLIGHTING);
+    Services.obs.removeObserver(this.onNewNodeFromTilt,
+                                this.presenter.NOTIFICATIONS.UNHIGHLIGHTING);
+  },
+
+  /**
+   * When a new inspector is started.
+   */
+  onInspectorReady: function TV_onInspectorReady(event, toolbox, panel)
+  {
+    if (toolbox.target.tab === this._browserTab) {
+      this.inspector = panel;
+      this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
+      this.inspector.selection.on("detached", this.onNewNodeFromInspector);
+      this.onNewNodeFromTilt();
+    }
+  },
+
+  /**
+   * When the toolbox, therefor the inspector, is closed.
+   */
+  onToolboxDestroyed: function TV_onToolboxDestroyed(event, tab)
+  {
+    if (tab === this._browserTab &&
+        this.inspector) {
+      if (this.inspector.selection) {
+        this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
+        this.inspector.selection.off("detached", this.onNewNodeFromInspector);
+      }
+      this.inspector = null;
+    }
+  },
+
+  /**
+   * When a new node is selected in the inspector.
+   */
+  onNewNodeFromInspector: function TV_onNewNodeFromInspector()
+  {
+    if (this.inspector &&
+        this.inspector.selection.reason != "tilt") {
+      let selection = this.inspector.selection;
+      let canHighlightNode = selection.isNode() &&
+                              selection.isConnected() &&
+                              selection.isElementNode();
+      if (canHighlightNode) {
+        this.presenter.highlightNode(selection.node);
+      } else {
+        this.presenter.highlightNodeFor(-1);
+      }
+    }
+  },
+
+  /**
+   * When a new node is selected in Tilt.
+   */
+  onNewNodeFromTilt: function TV_onNewNodeFromTilt()
+  {
+    if (!this.inspector) {
+      return;
+    }
+    let nodeIndex = this.presenter._currentSelection;
+    if (nodeIndex < 0) {
+      this.inspector.selection.setNode(null, "tilt");
+    }
+    let node = this.presenter._traverseData.nodes[nodeIndex];
+    this.inspector.selection.setNode(node, "tilt");
+  },
 };
 
 /**
@@ -172,7 +295,7 @@ TiltVisualizer.Presenter = function TV_Presenter(
   this.canvas = aCanvas;
 
   /**
-   * Save a reference to the top-level window, to access InspectorUI or Tilt.
+   * Save a reference to the top-level window, to access Tilt.
    */
   this.chromeWindow = aChromeWindow;
 
@@ -231,7 +354,6 @@ TiltVisualizer.Presenter = function TV_Presenter(
    * Variables holding information about the initial and current node selected.
    */
   this._currentSelection = -1; // the selected node index
-  this._initialSelection = false; // true if an initial selection was made
   this._initialMeshConfiguration = false; // true if the 3D mesh was configured
 
   /**
@@ -267,7 +389,6 @@ TiltVisualizer.Presenter.prototype = {
   _setup: function TVP__setup()
   {
     let renderer = this._renderer;
-    let inspector = this.chromeWindow.InspectorUI;
 
     // if the renderer was destroyed, don't continue setup
     if (!renderer || !renderer.context) {
@@ -283,9 +404,7 @@ TiltVisualizer.Presenter.prototype = {
     });
 
     // get the document zoom to properly scale the visualization
-    if (inspector.highlighter) {
-      this.transforms.zoom = inspector.highlighter.zoom;
-    }
+    this.transforms.zoom = this._getPageZoom();
 
     // bind the owner object to the necessary functions
     TiltUtils.bindObjectFunc(this, "^_on");
@@ -297,6 +416,17 @@ TiltVisualizer.Presenter.prototype = {
     this.canvas.focus();
   },
 
+  /**
+   * Get page zoom factor.
+   * @return {Number}
+   */
+  _getPageZoom: function TVP__getPageZoom() {
+    return this.contentWindow
+      .QueryInterface(Ci.nsIInterfaceRequestor)
+      .getInterface(Ci.nsIDOMWindowUtils)
+      .fullZoom;
+  },
+
   /**
    * The animation logic.
    */
@@ -553,16 +683,6 @@ TiltVisualizer.Presenter.prototype = {
       });
     }
 
-    // if there's no initial selection made, highlight the required node
-    if (!this._initialSelection) {
-      this._initialSelection = true;
-      this.highlightNode(this.chromeWindow.InspectorUI.selection);
-
-      if (this._currentSelection === 0) { // if the "html" node is selected
-        this._highlight.disabled = true;
-      }
-    }
-
     // configure the required mesh transformations and background only once
     if (!this._initialMeshConfiguration) {
       this._initialMeshConfiguration = true;
@@ -635,7 +755,7 @@ TiltVisualizer.Presenter.prototype = {
    */
   _onResize: function TVP_onResize(e)
   {
-    let zoom = this.chromeWindow.InspectorUI.highlighter.zoom;
+    let zoom = this._getPageZoom();
     let width = e.target.innerWidth * zoom;
     let height = e.target.innerHeight * zoom;
 
@@ -738,7 +858,6 @@ TiltVisualizer.Presenter.prototype = {
 
     let highlight = this._highlight;
     let info = this._traverseData.info[aNodeIndex];
-    let node = this._traverseData.nodes[aNodeIndex];
     let style = TiltVisualizerStyle.nodes;
 
     highlight.disabled = false;
@@ -759,10 +878,6 @@ TiltVisualizer.Presenter.prototype = {
 
     this._currentSelection = aNodeIndex;
 
-    this.chromeWindow.InspectorUI.inspectNode(node,
-      this.contentWindow.innerHeight < y ||
-      this.contentWindow.pageYOffset > 0);
-
     // if something is highlighted, make sure it's inside the current viewport;
     // the point which should be moved into view is considered the center [x, y]
     // position along the top edge of the currently selected node
@@ -846,7 +961,7 @@ TiltVisualizer.Presenter.prototype = {
       }
     }, false);
 
-    let zoom = this.chromeWindow.InspectorUI.highlighter.zoom;
+    let zoom = this._getPageZoom();
     let width = this._renderer.width * zoom;
     let height = this._renderer.height * zoom;
     x *= zoom;
@@ -1283,9 +1398,11 @@ TiltVisualizer.Controller.prototype = {
    */
   _onKeyPress: function TVC__onKeyPress(e)
   {
-    let tilt = this.presenter.chromeWindow.Tilt;
-
     if (e.keyCode === e.DOM_VK_ESCAPE) {
+      let mod = {};
+      Cu.import("resource:///modules/devtools/Tilt.jsm", mod);
+      let tilt =
+        mod.TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
       e.preventDefault();
       e.stopPropagation();
       tilt.destroy(tilt.currentWindowId, true);
@@ -1304,7 +1421,7 @@ TiltVisualizer.Controller.prototype = {
    */
   _onResize: function TVC__onResize(e)
   {
-    let zoom = this.presenter.chromeWindow.InspectorUI.highlighter.zoom;
+    let zoom = this.presenter._getPageZoom();
     let width = e.target.innerWidth * zoom;
     let height = e.target.innerHeight * zoom;
 
diff --git a/browser/devtools/tilt/test/Makefile.in b/browser/devtools/tilt/test/Makefile.in
index 0083aa51295..83794742fb4 100644
--- a/browser/devtools/tilt/test/Makefile.in
+++ b/browser/devtools/tilt/test/Makefile.in
@@ -16,7 +16,6 @@ MOCHITEST_BROWSER_FILES = \
 	browser_tilt_02_notifications-seq.js \
 	browser_tilt_02_notifications.js \
 	browser_tilt_03_tab_switch.js \
-	browser_tilt_04_initialization-key.js \
 	browser_tilt_04_initialization.js \
 	browser_tilt_05_destruction-esc.js \
 	browser_tilt_05_destruction-url.js \
diff --git a/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js b/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
index 62b599328b9..0ea5c886f4e 100644
--- a/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
+++ b/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
@@ -26,22 +26,8 @@ function createTab1() {
 
   tab1 = createTab(function() {
     createTilt({
-      onInspectorOpen: function()
-      {
-        ok(Tilt.tiltButton.checked === false,
-          "The toolbar tilt button shouldn't be pressed before Tilt is open.");
-        ok(InspectorUI.inspecting,
-          "The Inspector should be inspecting for tab1.");
-        ok(InspectorUI.highlighter.hidden === false,
-          "The Highlighter should be visible for tab1.");
-      },
       onTiltOpen: function()
       {
-        ok(InspectorUI.inspecting === false,
-          "The Inspector should not be inspecting for tab1 after Tilt is open.");
-        ok(InspectorUI.highlighter.hidden,
-          "The Highlighter should not be visible for tab1 after Tilt is open.");
-
         createTab2();
       }
     }, false, function suddenDeath()
@@ -56,22 +42,8 @@ function createTab2() {
   tab2 = createTab(function() {
 
     createTilt({
-      onInspectorOpen: function()
-      {
-        ok(Tilt.tiltButton.checked === false,
-          "The toolbar tilt button shouldn't be pressed before Tilt is open.");
-        ok(InspectorUI.inspecting,
-          "The Inspector should be inspecting for tab2.");
-        ok(InspectorUI.highlighter.hidden === false,
-          "The Highlighter should be visible for tab2.");
-      },
       onTiltOpen: function()
       {
-        ok(InspectorUI.inspecting === false,
-          "The Inspector should not be inspecting for tab2 after Tilt is open.");
-        ok(InspectorUI.highlighter.hidden,
-          "The Highlighter should be visible for tab2 after Tilt is open.");
-
         testStep = 0;
         tabSelect();
       }
@@ -85,77 +57,28 @@ function createTab2() {
 
 let testSteps = [
   function step0() {
-    ok(Tilt.tiltButton.checked === true,
-      "The toolbar tilt button should have been pressed at step0 (tab 2).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step0.");
-    ok(InspectorUI.highlighter.hidden,
-      "The Highlighter should be hidden at step0.");
-
     gBrowser.selectedTab = tab1;
   },
   function step1() {
-    ok(Tilt.tiltButton.checked === true,
-      "The toolbar tilt button should have been pressed at step1 (tab 1).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step1.");
-    ok(InspectorUI.highlighter.hidden,
-      "The Highlighter should be hidden at step1.");
-
     gBrowser.selectedTab = tab0;
   },
   function step2() {
-    ok(Tilt.tiltButton.checked === false,
-      "The toolbar tilt button shouldn't have been pressed at step2 (tab 0).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step2.");
-    is(InspectorUI.highlighter, null,
-      "The Highlighter should be dead while in step2.");
-
     gBrowser.selectedTab = tab1;
   },
   function step3() {
-    ok(Tilt.tiltButton.checked === true,
-      "The toolbar tilt button should have been pressed at step3 (tab 1).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step3.");
-    ok(InspectorUI.highlighter.hidden,
-      "The Highlighter should be hidden at step3.");
-
     gBrowser.selectedTab = tab2;
   },
   function step4() {
-    ok(Tilt.tiltButton.checked === true,
-      "The toolbar tilt button should have been pressed at step4 (tab 2).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step4.");
-    ok(InspectorUI.highlighter.hidden,
-      "The Highlighter should be hidden at step4.");
-
     Tilt.destroy(Tilt.currentWindowId);
     gBrowser.removeCurrentTab();
     tab2 = null;
   },
   function step5() {
-    ok(Tilt.tiltButton.checked === true,
-      "The toolbar tilt button should have been pressed at step5 (tab 1).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step5.");
-    ok(InspectorUI.highlighter.hidden,
-      "The Highlighter should be hidden at step5.");
-
     Tilt.destroy(Tilt.currentWindowId);
     gBrowser.removeCurrentTab();
     tab1 = null;
   },
   function step6_cleanup() {
-    ok(Tilt.tiltButton.checked === false,
-      "The toolbar tilt button shouldn't have been pressed at step6 (tab 0).");
-    ok(InspectorUI.inspecting === false,
-      "The Inspector should not be inspecting at step6.");
-    is(InspectorUI.highlighter, null,
-      "The Highlighter should be dead while in step6.");
-
     cleanup();
   }
 ];
diff --git a/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js b/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
deleted file mode 100644
index 0acd791dfd3..00000000000
--- a/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-"use strict";
-
-let id;
-let tiltKey;
-let eventType;
-
-function test() {
-  if (!isTiltEnabled()) {
-    info("Skipping initialization key test because Tilt isn't enabled.");
-    return;
-  }
-  if (!isWebGLSupported()) {
-    info("Skipping initialization key test because WebGL isn't supported.");
-    return;
-  }
-
-  waitForExplicitFinish();
-
-  id = TiltUtils.getWindowId(gBrowser.selectedBrowser.contentWindow);
-  tiltKey = Tilt.tiltButton.getAttribute("accesskey");
-
-  if ("nsILocalFileMac" in Ci) {
-    eventType = { type: "keypress", ctrlKey: true };
-  } else {
-    eventType = { type: "keypress", altKey: true };
-  }
-
-  Services.obs.addObserver(onInspectorOpen, INSPECTOR_OPENED, false);
-  InspectorUI.toggleInspectorUI();
-}
-
-function suddenDeath() {
-  Services.obs.removeObserver(onTiltOpen, INITIALIZING);
-  cleanup();
-}
-
-function onInspectorOpen() {
-  Services.obs.removeObserver(onInspectorOpen, INSPECTOR_OPENED);
-
-  executeSoon(function() {
-    is(Tilt.visualizers[id], null,
-      "A instance of the visualizer shouldn't be initialized yet.");
-
-    info("Pressing the accesskey should open Tilt.");
-
-    Tilt.failureCallback = suddenDeath;
-
-    Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
-    EventUtils.synthesizeKey(tiltKey, eventType);
-  });
-}
-
-function onTiltOpen() {
-  Services.obs.removeObserver(onTiltOpen, INITIALIZING);
-
-  executeSoon(function() {
-    ok(Tilt.visualizers[id] instanceof TiltVisualizer,
-      "A new instance of the visualizer wasn't created properly.");
-    ok(Tilt.visualizers[id].isInitialized(),
-      "The new instance of the visualizer wasn't initialized properly.");
-
-    info("Pressing the accesskey again should close Tilt.");
-
-    Services.obs.addObserver(onTiltClose, DESTROYED, false);
-    EventUtils.synthesizeKey(tiltKey, eventType);
-  });
-}
-
-function onTiltClose() {
-  is(Tilt.visualizers[id], null,
-    "The current instance of the visualizer wasn't destroyed properly.");
-
-  cleanup();
-}
-
-function cleanup() {
-  Tilt.failureCallback = null;
-  InspectorUI.closeInspectorUI();
-  finish();
-}
diff --git a/browser/devtools/tilt/test/browser_tilt_04_initialization.js b/browser/devtools/tilt/test/browser_tilt_04_initialization.js
index b4f34869c3d..314fb22e664 100644
--- a/browser/devtools/tilt/test/browser_tilt_04_initialization.js
+++ b/browser/devtools/tilt/test/browser_tilt_04_initialization.js
@@ -21,10 +21,6 @@ function test() {
       "The unique window identifiers should match for the same window.");
 
     createTilt({
-      onInspectorOpen: function() {
-        is(Tilt.visualizers[id], null,
-          "A instance of the visualizer shouldn't be initialized yet.");
-      },
       onTiltOpen: function(instance)
       {
         is(document.activeElement, instance.presenter.canvas,
diff --git a/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js b/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
index c3e1fbfb563..503f7925451 100644
--- a/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
+++ b/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
@@ -39,9 +39,6 @@ function finalize() {
   is(Tilt.visualizers[id], null,
     "The current instance of the visualizer wasn't destroyed properly.");
 
-  ok(InspectorUI.highlighter && InspectorUI.breadcrumbs,
-    "The Inspector should not close while Tilt is opened.");
-
   cleanup();
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_05_destruction.js b/browser/devtools/tilt/test/browser_tilt_05_destruction.js
index 0f78eb3aaa0..a083fa1bcbc 100644
--- a/browser/devtools/tilt/test/browser_tilt_05_destruction.js
+++ b/browser/devtools/tilt/test/browser_tilt_05_destruction.js
@@ -23,7 +23,7 @@ function test() {
         tiltOpened = true;
 
         Services.obs.addObserver(finalize, DESTROYED, false);
-        InspectorUI.closeInspectorUI();
+        Tilt.destroy(Tilt.currentWindowId);
       }
     }, false, function suddenDeath()
     {
diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
index f70223be939..366bfa32318 100644
--- a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
+++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
@@ -31,7 +31,7 @@ function test() {
 
           Services.prefs.setBoolPref("accessibility.typeaheadfind", false);
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          InspectorUI.closeInspectorUI();
+          Tilt.destroy(Tilt.currentWindowId);
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
index 4d64d9be8de..72e11236e67 100644
--- a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
+++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
@@ -29,7 +29,7 @@ function test() {
           info("Killing arcball reset test.");
 
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          InspectorUI.closeInspectorUI();
+          Tilt.destroy(Tilt.currentWindowId);
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/browser_tilt_picking.js b/browser/devtools/tilt/test/browser_tilt_picking.js
index ba7a0b968e7..c79056a3b4c 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking.js
@@ -34,7 +34,7 @@ function test() {
 
               pickDone = true;
               Services.obs.addObserver(cleanup, DESTROYED, false);
-              InspectorUI.closeInspectorUI();
+              Tilt.destroy(Tilt.currentWindowId);
             }
           });
         };
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_delete.js b/browser/devtools/tilt/test/browser_tilt_picking_delete.js
index 95e6b7c6933..c45d44b0344 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_delete.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_delete.js
@@ -65,7 +65,7 @@ function whenNodeRemoved() {
 
   executeSoon(function() {
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
index 4c3624d90a1..abfd4f586ff 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
@@ -64,7 +64,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
index b498d2ac07c..82871270ef3 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
@@ -64,7 +64,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
index 9d873d1ea18..fc8d0fc5157 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
@@ -59,7 +59,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
index 0412b76b586..721189f65c3 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
@@ -59,7 +59,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_miv.js b/browser/devtools/tilt/test/browser_tilt_picking_miv.js
index ebac1272174..64b911a0020 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_miv.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_miv.js
@@ -65,7 +65,7 @@ function whenBringingIntoView() {
   executeSoon(function() {
     Services.obs.removeObserver(whenHighlighting, HIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    InspectorUI.closeInspectorUI();
+    Tilt.destroy(Tilt.currentWindowId);
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_visualizer.js b/browser/devtools/tilt/test/browser_tilt_visualizer.js
index fbbcb737317..0f25a04fd84 100644
--- a/browser/devtools/tilt/test/browser_tilt_visualizer.js
+++ b/browser/devtools/tilt/test/browser_tilt_visualizer.js
@@ -19,7 +19,8 @@ function test() {
     chromeWindow: window,
     contentWindow: gBrowser.selectedBrowser.contentWindow,
     parentNode: gBrowser.selectedBrowser.parentNode,
-    inspectorUI: window.InspectorUI,
+    notifications: Tilt.NOTIFICATIONS,
+    tab: gBrowser.selectedTab,
 
     onError: function onWebGLError()
     {
diff --git a/browser/devtools/tilt/test/browser_tilt_zoom.js b/browser/devtools/tilt/test/browser_tilt_zoom.js
index 104bd113a05..af6ac2c9141 100644
--- a/browser/devtools/tilt/test/browser_tilt_zoom.js
+++ b/browser/devtools/tilt/test/browser_tilt_zoom.js
@@ -19,16 +19,14 @@ function test() {
   waitForExplicitFinish();
 
   createTab(function() {
+    TiltUtils.setDocumentZoom(window, ZOOM);
+
     createTilt({
-      onInspectorOpen: function()
-      {
-        TiltUtils.setDocumentZoom(window, ZOOM);
-      },
       onTiltOpen: function(instance)
       {
         tiltOpened = true;
 
-        ok(isApprox(InspectorUI.highlighter.zoom, ZOOM),
+        ok(isApprox(instance.presenter._getPageZoom(), ZOOM),
           "The Highlighter zoom doesn't have the expected results.");
 
         ok(isApprox(instance.presenter.transforms.zoom, ZOOM),
@@ -75,7 +73,7 @@ function test() {
 
 
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          InspectorUI.closeInspectorUI();
+          Tilt.destroy(Tilt.currentWindowId);
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/head.js b/browser/devtools/tilt/test/head.js
index 83fe62c1a6c..349cf6f6dc1 100644
--- a/browser/devtools/tilt/test/head.js
+++ b/browser/devtools/tilt/test/head.js
@@ -3,11 +3,13 @@
 "use strict";
 
 let tempScope = {};
+Components.utils.import("resource:///modules/devtools/Tilt.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltGL.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltMath.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltUtils.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltVisualizer.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
+let TiltManager = tempScope.TiltManager;
 let TiltGL = tempScope.TiltGL;
 let EPSILON = tempScope.EPSILON;
 let TiltMath = tempScope.TiltMath;
@@ -46,8 +48,7 @@ const DEFAULT_HTML = "data:text/html," +
     "<body>" +
   "</html>";
 
-const INSPECTOR_OPENED = InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED;
-const INSPECTOR_CLOSED = InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED;
+let Tilt = TiltManager.getTiltForBrowser(window);
 
 const INITIALIZING = Tilt.NOTIFICATIONS.INITIALIZING;
 const INITIALIZED = Tilt.NOTIFICATIONS.INITIALIZED;
@@ -143,30 +144,14 @@ function createTilt(callbacks, close, suddenDeath) {
                    ", autoclose param " + close +
           ", and sudden death handler " + typeof suddenDeath + ".");
 
+  handleFailure(suddenDeath);
+
   Services.prefs.setBoolPref("webgl.verbose", true);
   TiltUtils.Output.suppressAlerts = true;
 
-  info("Attempting to start the inspector.");
-  Services.obs.addObserver(onInspectorOpen, INSPECTOR_OPENED, false);
-  InspectorUI.toggleInspectorUI();
-
-  function onInspectorOpen() {
-    info("Inspector was opened.");
-    Services.obs.removeObserver(onInspectorOpen, INSPECTOR_OPENED);
-
-    executeSoon(function() {
-      if ("function" === typeof callbacks.onInspectorOpen) {
-        info("Calling 'onInspectorOpen'.");
-        callbacks.onInspectorOpen();
-      }
-      executeSoon(function() {
-        info("Attempting to start Tilt.");
-        Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
-        handleFailure(suddenDeath);
-        Tilt.initialize();
-      });
-    });
-  }
+  info("Attempting to start Tilt.");
+  Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
+  Tilt.initializeForCurrentTab();
 
   function onTiltOpen() {
     info("Tilt was opened.");
@@ -196,25 +181,6 @@ function createTilt(callbacks, close, suddenDeath) {
         info("Calling 'onTiltClose'.");
         callbacks.onTiltClose();
       }
-      if (close) {
-        executeSoon(function() {
-          info("Attempting to close the Inspector.");
-          Services.obs.addObserver(onInspectorClose, INSPECTOR_CLOSED, false);
-          InspectorUI.closeInspectorUI();
-        });
-      }
-    });
-  }
-
-  function onInspectorClose() {
-    info("Inspector was closed.");
-    Services.obs.removeObserver(onInspectorClose, INSPECTOR_CLOSED);
-
-    executeSoon(function() {
-      if ("function" === typeof callbacks.onInspectorClose) {
-        info("Calling 'onInspectorClose'.");
-        callbacks.onInspectorClose();
-      }
       if ("function" === typeof callbacks.onEnd) {
         info("Calling 'onEnd'.");
         callbacks.onEnd();
diff --git a/browser/devtools/webconsole/HUDService.jsm b/browser/devtools/webconsole/HUDService.jsm
index 5f901d74a71..e1921251244 100644
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@@ -13,6 +13,10 @@ const Cu = Components.utils;
 const CONSOLEAPI_CLASS_ID = "{b49c18f8-3379-4fc0-8c90-d7772c1a9ff3}";
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Services",
                                   "resource://gre/modules/Services.jsm");
@@ -42,24 +46,6 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
 // The XUL namespace.
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
-
-// Possible directions that can be passed to HUDService.animate().
-const ANIMATE_OUT = 0;
-const ANIMATE_IN = 1;
-
-// Minimum console height, in pixels.
-const MINIMUM_CONSOLE_HEIGHT = 150;
-
-// Minimum page height, in pixels. This prevents the Web Console from
-// remembering a height that covers the whole page.
-const MINIMUM_PAGE_HEIGHT = 50;
-
-// The default console height, as a ratio from the content window inner height.
-const DEFAULT_CONSOLE_HEIGHT = 0.33;
-
-// points to the file to load in the Web Console iframe.
-const UI_IFRAME_URL = "chrome://browser/content/devtools/webconsole.xul";
-
 ///////////////////////////////////////////////////////////////////////////
 //// The HUD service
 
@@ -67,13 +53,8 @@ function HUD_SERVICE()
 {
   // These methods access the "this" object, but they're registered as
   // event listeners. So we hammer in the "this" binding.
-  this.onTabClose = this.onTabClose.bind(this);
-  this.onTabSelect = this.onTabSelect.bind(this);
   this.onWindowUnload = this.onWindowUnload.bind(this);
 
-  // Remembers the last console height, in pixels.
-  this.lastConsoleHeight = Services.prefs.getIntPref("devtools.hud.height");
-
   /**
    * Keeps a reference for each HeadsUpDisplay that is created
    */
@@ -111,19 +92,15 @@ HUD_SERVICE.prototype =
    *
    * @param nsIDOMElement aTab
    *        The xul:tab element.
-   * @param boolean aAnimated
-   *        True if you want to animate the opening of the Web console.
-   * @param object aOptions
-   *        Options for the Web Console:
-   *        - host
-   *          Server to connect to.
-   *        - port
-   *          Port to connect to.
+   * @param nsIDOMElement aIframe
+   *        The iframe element into which to place the web console.
+   * @param RemoteTarget aTarget
+   *        The target that the web console will connect to.
    * @return object
    *         The new HeadsUpDisplay instance.
    */
-  activateHUDForContext:
-  function HS_activateHUDForContext(aTab, aAnimated, aOptions)
+  activateHUDForContext: function HS_activateHUDForContext(aTab, aIframe,
+                                                           aTarget)
   {
     let hudId = "hud_" + aTab.linkedPanel;
     if (hudId in this.hudReferences) {
@@ -135,19 +112,11 @@ HUD_SERVICE.prototype =
     let window = aTab.ownerDocument.defaultView;
     let gBrowser = window.gBrowser;
 
-    gBrowser.tabContainer.addEventListener("TabClose", this.onTabClose, false);
-    gBrowser.tabContainer.addEventListener("TabSelect", this.onTabSelect, false);
     window.addEventListener("unload", this.onWindowUnload, false);
 
-    let hud = new WebConsole(aTab, aOptions);
+    let hud = new WebConsole(aTab, aIframe, aTarget);
     this.hudReferences[hudId] = hud;
 
-    if (!aAnimated || hud.consolePanel) {
-      this.disableAnimation(hudId);
-    }
-
-    HeadsUpDisplayUICommands.refreshCommand();
-
     return hud;
   },
 
@@ -156,21 +125,15 @@ HUD_SERVICE.prototype =
    *
    * @param nsIDOMElement aTab
    *        The xul:tab element you want to enable the Web Console for.
-   * @param boolean aAnimated
-   *        True if you want to animate the closing of the Web console.
    * @return void
    */
-  deactivateHUDForContext: function HS_deactivateHUDForContext(aTab, aAnimated)
+  deactivateHUDForContext: function HS_deactivateHUDForContext(aTab)
   {
     let hudId = "hud_" + aTab.linkedPanel;
     if (!(hudId in this.hudReferences)) {
       return;
     }
 
-    if (!aAnimated) {
-      this.storeHeight(hudId);
-    }
-
     let hud = this.getHudReferenceById(hudId);
     let document = hud.chromeDocument;
 
@@ -194,16 +157,12 @@ HUD_SERVICE.prototype =
 
       let gBrowser = window.gBrowser;
       let tabContainer = gBrowser.tabContainer;
-      tabContainer.removeEventListener("TabClose", this.onTabClose, false);
-      tabContainer.removeEventListener("TabSelect", this.onTabSelect, false);
 
       this.suspend();
     }
 
     let contentWindow = aTab.linkedBrowser.contentWindow;
     contentWindow.focus();
-
-    HeadsUpDisplayUICommands.refreshCommand();
   },
 
   /**
@@ -255,7 +214,7 @@ HUD_SERVICE.prototype =
   shutdown: function HS_shutdown()
   {
     for (let hud of this.hudReferences) {
-      this.deactivateHUDForContext(hud.tab, false);
+      this.deactivateHUDForContext(hud.tab);
     }
   },
 
@@ -330,28 +289,6 @@ HUD_SERVICE.prototype =
     return sequencer(aInt);
   },
 
-  /**
-   * onTabClose event handler function
-   *
-   * @param aEvent
-   * @returns void
-   */
-  onTabClose: function HS_onTabClose(aEvent)
-  {
-    this.deactivateHUDForContext(aEvent.target, false);
-  },
-
-  /**
-   * onTabSelect event handler function
-   *
-   * @param aEvent
-   * @returns void
-   */
-  onTabSelect: function HS_onTabSelect(aEvent)
-  {
-    HeadsUpDisplayUICommands.refreshCommand();
-  },
-
   /**
    * Called whenever a browser window closes. Cleans up any consoles still
    * around.
@@ -369,125 +306,12 @@ HUD_SERVICE.prototype =
     let gBrowser = window.gBrowser;
     let tabContainer = gBrowser.tabContainer;
 
-    tabContainer.removeEventListener("TabClose", this.onTabClose, false);
-    tabContainer.removeEventListener("TabSelect", this.onTabSelect, false);
-
     let tab = tabContainer.firstChild;
     while (tab != null) {
-      this.deactivateHUDForContext(tab, false);
+      this.deactivateHUDForContext(tab);
       tab = tab.nextSibling;
     }
   },
-
-  /**
-   * Animates the Console appropriately.
-   *
-   * @param string aHUDId The ID of the console.
-   * @param string aDirection Whether to animate the console appearing
-   *        (ANIMATE_IN) or disappearing (ANIMATE_OUT).
-   * @param function aCallback An optional callback, which will be called with
-   *        the "transitionend" event passed as a parameter once the animation
-   *        finishes.
-   */
-  animate: function HS_animate(aHUDId, aDirection, aCallback)
-  {
-    let hudBox = this.getHudReferenceById(aHUDId).iframe;
-    if (!hudBox.hasAttribute("animated")) {
-      if (aCallback) {
-        aCallback();
-      }
-      return;
-    }
-
-    switch (aDirection) {
-      case ANIMATE_OUT:
-        hudBox.style.height = 0;
-        break;
-      case ANIMATE_IN:
-        this.resetHeight(aHUDId);
-        break;
-    }
-
-    if (aCallback) {
-      hudBox.addEventListener("transitionend", aCallback, false);
-    }
-  },
-
-  /**
-   * Disables all animation for a console, for unit testing. After this call,
-   * the console will instantly take on a reasonable height, and the close
-   * animation will not occur.
-   *
-   * @param string aHUDId The ID of the console.
-   */
-  disableAnimation: function HS_disableAnimation(aHUDId)
-  {
-    let hudBox = HUDService.hudReferences[aHUDId].iframe;
-    if (hudBox.hasAttribute("animated")) {
-      hudBox.removeAttribute("animated");
-      this.resetHeight(aHUDId);
-    }
-  },
-
-  /**
-   * Reset the height of the Web Console.
-   *
-   * @param string aHUDId The ID of the Web Console.
-   */
-  resetHeight: function HS_resetHeight(aHUDId)
-  {
-    let HUD = this.hudReferences[aHUDId];
-    let innerHeight = HUD.tab.linkedBrowser.clientHeight;
-    let chromeWindow = HUD.chromeWindow;
-    if (!HUD.consolePanel) {
-      let splitterStyle = chromeWindow.getComputedStyle(HUD.splitter, null);
-      innerHeight += parseInt(splitterStyle.height) +
-                     parseInt(splitterStyle.borderTopWidth) +
-                     parseInt(splitterStyle.borderBottomWidth) +
-                     parseInt(splitterStyle.marginTop) +
-                     parseInt(splitterStyle.marginBottom);
-    }
-
-    let boxStyle = chromeWindow.getComputedStyle(HUD.iframe, null);
-    innerHeight += parseInt(boxStyle.height) +
-                   parseInt(boxStyle.borderTopWidth) +
-                   parseInt(boxStyle.borderBottomWidth);
-
-    let height = this.lastConsoleHeight > 0 ? this.lastConsoleHeight :
-      Math.ceil(innerHeight * DEFAULT_CONSOLE_HEIGHT);
-
-    if ((innerHeight - height) < MINIMUM_PAGE_HEIGHT) {
-      height = innerHeight - MINIMUM_PAGE_HEIGHT;
-    }
-
-    if (isNaN(height) || height < MINIMUM_CONSOLE_HEIGHT) {
-      height = MINIMUM_CONSOLE_HEIGHT;
-    }
-
-    HUD.iframe.style.height = height + "px";
-  },
-
-  /**
-   * Remember the height of the given Web Console, such that it can later be
-   * reused when other Web Consoles are open.
-   *
-   * @param string aHUDId The ID of the Web Console.
-   */
-  storeHeight: function HS_storeHeight(aHUDId)
-  {
-    let hudBox = this.hudReferences[aHUDId].iframe;
-    let window = hudBox.ownerDocument.defaultView;
-    let style = window.getComputedStyle(hudBox, null);
-    let height = parseInt(style.height);
-    height += parseInt(style.borderTopWidth);
-    height += parseInt(style.borderBottomWidth);
-    this.lastConsoleHeight = height;
-
-    let pref = Services.prefs.getIntPref("devtools.hud.height");
-    if (pref > -1) {
-      Services.prefs.setIntPref("devtools.hud.height", height);
-    }
-  },
 };
 
 
@@ -500,21 +324,36 @@ HUD_SERVICE.prototype =
  *
  * @param nsIDOMElement aTab
  *        The xul:tab for which you want the WebConsole object.
- * @param object aOptions
- *        Web Console options: host and port, for the remote Web console.
+ * @param nsIDOMElement aIframe
+ *        iframe into which we should create the WebConsole UI.
+ * @param RemoteTarget aTarget
+ *        The target that the web console will connect to.
  */
-function WebConsole(aTab, aOptions = {})
+function WebConsole(aTab, aIframe, aTarget)
 {
   this.tab = aTab;
+  if (this.tab == null) {
+    throw new Error('Missing tab');
+  }
+
+  this.iframe = aIframe;
+  if (this.iframe == null) {
+    console.trace();
+    throw new Error('Missing iframe');
+  }
+
   this.chromeDocument = this.tab.ownerDocument;
   this.chromeWindow = this.chromeDocument.defaultView;
   this.hudId = "hud_" + this.tab.linkedPanel;
 
-  this.remoteHost = aOptions.host;
-  this.remotePort = aOptions.port;
+  this.target = aTarget;
 
   this._onIframeLoad = this._onIframeLoad.bind(this);
-  this._initUI();
+
+  this.iframe.className = "web-console-frame";
+  this.iframe.addEventListener("load", this._onIframeLoad, true);
+
+  this.positionConsole();
 }
 
 WebConsole.prototype = {
@@ -535,12 +374,6 @@ WebConsole.prototype = {
    */
   get lastFinishedRequestCallback() HUDService.lastFinishedRequestCallback,
 
-  /**
-   * The xul:panel that holds the Web Console when it is positioned as a window.
-   * @type nsIDOMElement
-   */
-  consolePanel: null,
-
   /**
    * Getter for the xul:popupset that holds any popups we open.
    * @type nsIDOMElement
@@ -561,28 +394,6 @@ WebConsole.prototype = {
 
   get gViewSourceUtils() this.chromeWindow.gViewSourceUtils,
 
-  /**
-   * Initialize the Web Console UI. This method sets up the iframe.
-   * @private
-   */
-  _initUI: function WC__initUI()
-  {
-    this.splitter = this.chromeDocument.createElement("splitter");
-    this.splitter.className = "devtools-horizontal-splitter";
-
-    this.iframe = this.chromeDocument.createElement("iframe");
-    this.iframe.setAttribute("id", this.hudId);
-    this.iframe.className = "web-console-frame";
-    this.iframe.setAttribute("animated", "true");
-    this.iframe.setAttribute("tooltip", "aHTMLTooltip");
-    this.iframe.style.height = 0;
-    this.iframe.addEventListener("load", this._onIframeLoad, true);
-    this.iframe.setAttribute("src", UI_IFRAME_URL);
-
-    let position = Services.prefs.getCharPref("devtools.webconsole.position");
-    this.positionConsole(position);
-  },
-
   /**
    * The "load" event handler for the Web Console iframe.
    * @private
@@ -591,144 +402,8 @@ WebConsole.prototype = {
   {
     this.iframe.removeEventListener("load", this._onIframeLoad, true);
 
-    let position = Services.prefs.getCharPref("devtools.webconsole.position");
-
     this.iframeWindow = this.iframe.contentWindow.wrappedJSObject;
-    this.ui = new this.iframeWindow.WebConsoleFrame(this, position);
-  },
-
-  /**
-   * Create a panel to open the web console if it should float above
-   * the content in its own window.
-   * @private
-   */
-  _createOwnWindowPanel: function WC__createOwnWindowPanel()
-  {
-    if (this.consolePanel) {
-      return;
-    }
-
-    let width = 0;
-    try {
-      width = Services.prefs.getIntPref("devtools.webconsole.width");
-    }
-    catch (ex) {}
-
-    if (width < 1) {
-      width = this.iframe.clientWidth || this.chromeWindow.innerWidth;
-    }
-
-    let height = this.iframe.clientHeight;
-
-    let top = 0;
-    try {
-      top = Services.prefs.getIntPref("devtools.webconsole.top");
-    }
-    catch (ex) {}
-
-    let left = 0;
-    try {
-      left = Services.prefs.getIntPref("devtools.webconsole.left");
-    }
-    catch (ex) {}
-
-    let panel = this.chromeDocument.createElementNS(XUL_NS, "panel");
-
-    let config = { id: "console_window_" + this.hudId,
-                   label: this.getPanelTitle(),
-                   titlebar: "normal",
-                   noautohide: "true",
-                   norestorefocus: "true",
-                   close: "true",
-                   flex: "1",
-                   hudId: this.hudId,
-                   width: width,
-                   position: "overlap",
-                   top: top,
-                   left: left,
-                 };
-
-    for (let attr in config) {
-      panel.setAttribute(attr, config[attr]);
-    }
-
-    panel.classList.add("web-console-panel");
-
-    let onPopupShown = (function HUD_onPopupShown() {
-      panel.removeEventListener("popupshown", onPopupShown, false);
-
-      // Make sure that the HUDBox size updates when the panel is resized.
-
-      let height = panel.clientHeight;
-
-      this.iframe.style.height = "auto";
-      this.iframe.flex = 1;
-
-      panel.setAttribute("height", height);
-    }).bind(this);
-
-    panel.addEventListener("popupshown", onPopupShown,false);
-
-    let onPopupHidden = (function HUD_onPopupHidden(aEvent) {
-      if (aEvent.target != panel) {
-        return;
-      }
-
-      panel.removeEventListener("popuphidden", onPopupHidden, false);
-
-      let width = 0;
-      try {
-        width = Services.prefs.getIntPref("devtools.webconsole.width");
-      }
-      catch (ex) { }
-
-      if (width > 0) {
-        Services.prefs.setIntPref("devtools.webconsole.width", panel.clientWidth);
-      }
-
-      // Are we destroying the HUD or repositioning it?
-      if (this.consoleWindowUnregisterOnHide) {
-        HUDService.deactivateHUDForContext(this.tab, false);
-      }
-    }).bind(this);
-
-    panel.addEventListener("popuphidden", onPopupHidden, false);
-
-    let lastIndex = -1;
-
-    if (this.outputNode && this.outputNode.getIndexOfFirstVisibleRow) {
-      lastIndex = this.outputNode.getIndexOfFirstVisibleRow() +
-                  this.outputNode.getNumberOfVisibleRows() - 1;
-    }
-
-    if (this.splitter.parentNode) {
-      this.splitter.parentNode.removeChild(this.splitter);
-    }
-
-    this._beforePositionConsole("window", lastIndex);
-
-    panel.appendChild(this.iframe);
-
-    let space = this.chromeDocument.createElement("spacer");
-    space.flex = 1;
-
-    let bottomBox = this.chromeDocument.createElement("hbox");
-
-    let resizer = this.chromeDocument.createElement("resizer");
-    resizer.setAttribute("dir", "bottomend");
-    resizer.setAttribute("element", config.id);
-
-    bottomBox.appendChild(space);
-    bottomBox.appendChild(resizer);
-
-    panel.appendChild(bottomBox);
-
-    this.mainPopupSet.appendChild(panel);
-
-    panel.openPopup(null, "overlay", left, top, false, false);
-
-    this.consolePanel = panel;
-    this.consoleWindowUnregisterOnHide = true;
+    this.ui = new this.iframeWindow.WebConsoleFrame(this);
   },
 
   /**
@@ -743,44 +418,13 @@ WebConsole.prototype = {
     return l10n.getFormatStr("webConsoleWindowTitleAndURL", [url]);
   },
 
-  positions: {
-    above: 0, // the childNode index
-    below: 2,
-    window: null
-  },
-
   consoleWindowUnregisterOnHide: true,
 
   /**
    * Position the Web Console UI.
-   *
-   * @param string aPosition
-   *        The desired Web Console UI location: above, below or window.
    */
-  positionConsole: function WC_positionConsole(aPosition)
+  positionConsole: function WC_positionConsole()
   {
-    if (!(aPosition in this.positions)) {
-      throw new Error("Incorrect argument: " + aPosition +
-        ". Cannot position Web Console");
-    }
-
-    if (aPosition == "window") {
-      this._createOwnWindowPanel();
-      return;
-    }
-
-    let height = this.iframe.clientHeight;
-
-    // get the node position index
-    let nodeIdx = this.positions[aPosition];
-    let nBox = this.chromeDocument.getElementById(this.tab.linkedPanel);
-    let node = nBox.childNodes[nodeIdx];
-
-    // check to see if console is already positioned in aPosition
-    if (node == this.iframe) {
-      return;
-    }
-
     let lastIndex = -1;
 
     if (this.outputNode && this.outputNode.getIndexOfFirstVisibleRow) {
@@ -788,45 +432,18 @@ WebConsole.prototype = {
                   this.outputNode.getNumberOfVisibleRows() - 1;
     }
 
-    // remove the console and splitter and reposition
-    if (this.splitter.parentNode) {
-      this.splitter.parentNode.removeChild(this.splitter);
-    }
-
-    this._beforePositionConsole(aPosition, lastIndex);
-
-    if (aPosition == "below") {
-      nBox.appendChild(this.splitter);
-      nBox.appendChild(this.iframe);
-    }
-    else {
-      nBox.insertBefore(this.splitter, node);
-      nBox.insertBefore(this.iframe, this.splitter);
-    }
-
-    if (this.consolePanel) {
-      // must destroy the consolePanel
-      this.consoleWindowUnregisterOnHide = false;
-      this.consolePanel.hidePopup();
-      this.consolePanel.parentNode.removeChild(this.consolePanel);
-      this.consolePanel = null;   // remove this as we're not in panel anymore
-      this.iframe.removeAttribute("flex");
-      this.iframe.removeAttribute("height");
-      this.iframe.style.height = height + "px";
-    }
+    this._beforePositionConsole(lastIndex);
   },
 
   /**
    * Common code that needs to execute before the Web Console is repositioned.
    * @private
-   * @param string aPosition
-   *        The new position: "above", "below" or "window".
    * @param number aLastIndex
    *        The last visible message in the console output before repositioning
    *        occurred.
    */
   _beforePositionConsole:
-  function WC__beforePositionConsole(aPosition, aLastIndex)
+  function WC__beforePositionConsole(aLastIndex)
   {
     if (!this.ui) {
       return;
@@ -835,14 +452,11 @@ WebConsole.prototype = {
     let onLoad = function() {
       this.iframe.removeEventListener("load", onLoad, true);
       this.iframeWindow = this.iframe.contentWindow.wrappedJSObject;
-      this.ui.positionConsole(aPosition, this.iframeWindow);
+      this.ui.positionConsole(this.iframeWindow);
 
       if (aLastIndex > -1 && aLastIndex < this.outputNode.getRowCount()) {
         this.outputNode.ensureIndexIsVisible(aLastIndex);
       }
-
-      this._currentUIPosition = aPosition;
-      Services.prefs.setCharPref("devtools.webconsole.position", aPosition);
     }.bind(this);
 
     this.iframe.addEventListener("load", onLoad, true);
@@ -858,16 +472,6 @@ WebConsole.prototype = {
     return this.ui ? this.ui.jsterm : null;
   },
 
-  /**
-   * The close button handler.
-   */
-  onCloseButton: function WC_onCloseButton()
-  {
-    HUDService.animate(this.hudId, ANIMATE_OUT, function() {
-      HUDService.deactivateHUDForContext(this.tab, true);
-    }.bind(this));
-  },
-
   /**
    * The clear output button handler.
    * @private
@@ -877,22 +481,6 @@ WebConsole.prototype = {
     this.chromeWindow.DeveloperToolbar.resetErrorsCount(this.tab);
   },
 
-  /**
-   * Handler for page location changes. If the Web Console is
-   * opened in a panel the panel title is updated.
-   *
-   * @param string aURI
-   *        New page location.
-   * @param string aTitle
-   *        New page title.
-   */
-  onLocationChange: function WC_onLocationChange(aURI, aTitle)
-  {
-    if (this.consolePanel) {
-      this.consolePanel.label = this.getPanelTitle();
-    }
-  },
-
   /**
    * Alias for the WebConsoleFrame.setFilterState() method.
    * @see webconsole.js::WebConsoleFrame.setFilterState()
@@ -945,14 +533,14 @@ WebConsole.prototype = {
     let styleSheets = this.tab.linkedBrowser.contentWindow.document.styleSheets;
     for each (let style in styleSheets) {
       if (style.href == aSourceURL) {
-        let SEM = this.chromeWindow.StyleEditor.StyleEditorManager;
-        let win = SEM.getEditorForWindow(this.chromeWindow.content.window);
-        if (win) {
-          SEM.selectEditor(win, style, aSourceLine);
-        }
-        else {
-          this.chromeWindow.StyleEditor.openChrome(style, aSourceLine);
-        }
+        let target = TargetFactory.forTab(this.tab);
+        let gDevTools = this.chromeWindow.gDevTools;
+        let toolbox = gDevTools.getToolboxForTarget(target);
+        toolbox.once("styleeditor-selected",
+          function _onStyleEditorReady(aEvent, aPanel) {
+            aPanel.selectStyleSheet(style, aSourceLine);
+          });
+        toolbox.selectTool("styleeditor");
         return;
       }
     }
@@ -977,9 +565,7 @@ WebConsole.prototype = {
     let popupset = this.mainPopupSet;
     let panels = popupset.querySelectorAll("panel[hudId=" + this.hudId + "]");
     for (let panel of panels) {
-      if (panel != this.consolePanel) {
-        panel.hidePopup();
-      }
+      panel.hidePopup();
     }
 
     let onDestroy = function WC_onDestroyUI() {
@@ -995,10 +581,6 @@ WebConsole.prototype = {
         this.iframe.parentNode.removeChild(this.iframe);
       }
 
-      if (this.splitter.parentNode) {
-        this.splitter.parentNode.removeChild(this.splitter);
-      }
-
       aOnDestroy && aOnDestroy();
     }.bind(this);
 
@@ -1016,53 +598,11 @@ WebConsole.prototype = {
 //////////////////////////////////////////////////////////////////////////
 
 var HeadsUpDisplayUICommands = {
-  refreshCommand: function UIC_refreshCommand() {
-    var window = HUDService.currentContext();
-    if (!window) {
-      return;
-    }
-
-    let command = window.document.getElementById("Tools:WebConsole");
-    if (this.getOpenHUD() != null) {
-      command.setAttribute("checked", true);
-    } else {
-      command.setAttribute("checked", false);
-    }
-  },
-
   toggleHUD: function UIC_toggleHUD(aOptions)
   {
     var window = HUDService.currentContext();
-    var gBrowser = window.gBrowser;
-    var linkedBrowser = gBrowser.selectedTab.linkedBrowser;
-    var tabId = gBrowser.getNotificationBox(linkedBrowser).getAttribute("id");
-    var hudId = "hud_" + tabId;
-    var ownerDocument = gBrowser.selectedTab.ownerDocument;
-    var hud = ownerDocument.getElementById(hudId);
-    var hudRef = HUDService.hudReferences[hudId];
-
-    if (hudRef && hud) {
-      if (hudRef.consolePanel) {
-        hudRef.consolePanel.hidePopup();
-      }
-      else {
-        HUDService.storeHeight(hudId);
-
-        HUDService.animate(hudId, ANIMATE_OUT, function() {
-          // If the user closes the console while the console is animating away,
-          // then these callbacks will queue up, but all the callbacks after the
-          // first will have no console to operate on. This test handles this
-          // case gracefully.
-          if (ownerDocument.getElementById(hudId)) {
-            HUDService.deactivateHUDForContext(gBrowser.selectedTab, true);
-          }
-        });
-      }
-    }
-    else {
-      HUDService.activateHUDForContext(gBrowser.selectedTab, true, aOptions);
-      HUDService.animate(hudId, ANIMATE_IN);
-    }
+    let target = TargetFactory.forTab(window.gBrowser.selectedTab);
+    gDevTools.toggleToolboxForTarget(target, "webconsole");
   },
 
   toggleRemoteHUD: function UIC_toggleRemoteHUD()
@@ -1144,8 +684,5 @@ var WebConsoleObserver = {
   },
 };
 
-
-XPCOMUtils.defineLazyGetter(this, "HUDService", function () {
-  return new HUD_SERVICE();
-});
+const HUDService = new HUD_SERVICE();
 
diff --git a/browser/devtools/webconsole/Makefile.in b/browser/devtools/webconsole/Makefile.in
index ed66e5a9fb7..4e820ee8403 100644
--- a/browser/devtools/webconsole/Makefile.in
+++ b/browser/devtools/webconsole/Makefile.in
@@ -15,6 +15,7 @@ EXTRA_JS_MODULES = \
 		PropertyPanel.jsm \
 		NetworkPanel.jsm \
 		AutocompletePopup.jsm \
+		WebConsolePanel.jsm \
 		$(NULL)
 
 TEST_DIRS = test
diff --git a/browser/devtools/webconsole/WebConsolePanel.jsm b/browser/devtools/webconsole/WebConsolePanel.jsm
new file mode 100644
index 00000000000..feec3d7a4ae
--- /dev/null
+++ b/browser/devtools/webconsole/WebConsolePanel.jsm
@@ -0,0 +1,102 @@
+/* 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/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = [ "WebConsoleDefinition" ];
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "Services",
+                                  "resource://gre/modules/Services.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "WebConsoleUtils",
+                                  "resource://gre/modules/devtools/WebConsoleUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
+                                  "resource:///modules/HUDService.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
+                                  "resource:///modules/devtools/EventEmitter.jsm");
+
+const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
+let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
+
+/**
+ * The external API allowing us to be registered with DevTools.jsm
+ */
+this.WebConsoleDefinition = {
+  id: "webconsole",
+  key: l10n.getStr("cmd.commandkey"),
+  accesskey: l10n.getStr("webConsoleCmd.accesskey"),
+  modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
+  ordinal: 0,
+  icon: "chrome://browser/skin/devtools/webconsole-tool-icon.png",
+  url: "chrome://browser/content/devtools/webconsole.xul",
+  label: l10n.getStr("ToolboxWebconsole.label"),
+  isTargetSupported: function(target) {
+    return true;
+  },
+  build: function(iframeWindow, toolbox) {
+    return new WebConsolePanel(iframeWindow, toolbox);
+  }
+};
+
+/**
+ * A DevToolPanel that controls the Web Console.
+ */
+function WebConsolePanel(iframeWindow, toolbox) {
+  this._frameWindow = iframeWindow;
+  this._toolbox = toolbox;
+  new EventEmitter(this);
+
+  let tab = this._toolbox._getHostTab();
+  let parentDoc = iframeWindow.document.defaultView.parent.document;
+  let iframe = parentDoc.getElementById("toolbox-panel-iframe-webconsole");
+  this.hud = HUDService.activateHUDForContext(tab, iframe, toolbox.target);
+
+  let hudId = this.hud.hudId;
+  let onOpen = function _onWebConsoleOpen(aSubject)
+  {
+    aSubject.QueryInterface(Ci.nsISupportsString);
+    if (hudId == aSubject.data) {
+      Services.obs.removeObserver(onOpen, "web-console-created");
+      this.setReady();
+    }
+  }.bind(this);
+
+  Services.obs.addObserver(onOpen, "web-console-created", false);
+}
+
+WebConsolePanel.prototype = {
+  get target() this._toolbox.target,
+
+  _isReady: false,
+  get isReady() this._isReady,
+
+  destroy: function WCP_destroy()
+  {
+    let hudId = this.hud.hudId;
+
+    let onClose = function _onWebConsoleClose(aSubject)
+    {
+      aSubject.QueryInterface(Ci.nsISupportsString);
+      if (hudId == aSubject.data) {
+        Services.obs.removeObserver(onClose, "web-console-destroyed");
+        this.emit("destroyed");
+      }
+    }.bind(this);
+
+    Services.obs.addObserver(onClose, "web-console-destroyed", false);
+    HUDService.deactivateHUDForContext(this.hud.tab, false);
+  },
+
+  setReady: function WCP_setReady()
+  {
+    this._isReady = true;
+    this.emit("ready");
+  },
+}
diff --git a/browser/devtools/webconsole/test/Makefile.in b/browser/devtools/webconsole/test/Makefile.in
index 28e16c392af..859962aa4c6 100644
--- a/browser/devtools/webconsole/test/Makefile.in
+++ b/browser/devtools/webconsole/test/Makefile.in
@@ -46,7 +46,6 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_property_provider.js \
 	browser_webconsole_bug_587617_output_copy.js \
 	browser_webconsole_bug_585237_line_limit.js \
-	browser_webconsole_bug_581231_close_button.js \
 	browser_webconsole_bug_582201_duplicate_errors.js \
 	browser_webconsole_bug_580454_timestamp_l10n.js \
 	browser_webconsole_netlogging.js \
@@ -61,7 +60,6 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_601352_scroll.js \
 	browser_webconsole_bug_592442_closing_brackets.js \
 	browser_webconsole_bug_593003_iframe_wrong_hud.js \
-	browser_webconsole_bug_601909_remember_height.js \
 	browser_webconsole_bug_613013_console_api_iframe.js \
 	browser_webconsole_bug_597756_reopen_closed_tab.js \
 	browser_webconsole_bug_600183_charset.js \
@@ -92,11 +90,9 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_632275_getters_document_width.js \
 	browser_webconsole_bug_644419_log_limits.js \
 	browser_webconsole_bug_646025_console_file_location.js \
-	browser_webconsole_position_ui.js \
 	browser_webconsole_bug_642615_autocomplete.js \
 	browser_webconsole_bug_585991_autocomplete_popup.js \
 	browser_webconsole_bug_585991_autocomplete_keys.js \
-	browser_webconsole_bug_663443_panel_title.js \
 	browser_webconsole_bug_660806_history_nav.js \
 	browser_webconsole_bug_651501_document_body_autocomplete.js \
 	browser_webconsole_bug_653531_highlighter_console_helper.js \
@@ -106,13 +102,11 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_658368_time_methods.js \
 	browser_webconsole_bug_764572_output_open_url.js \
 	browser_webconsole_bug_622303_persistent_filters.js \
-        browser_webconsole_bug_770099_bad_policyuri.js \
-        browser_webconsole_bug_770099_violation.js \
+	browser_webconsole_bug_770099_bad_policyuri.js \
+	browser_webconsole_bug_770099_violation.js \
 	browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js \
-	browser_webconsole_window_zombie.js \
 	browser_cached_messages.js \
 	browser_bug664688_sandbox_update_after_navigation.js \
-	browser_webconsole_menustatus.js \
 	browser_result_format_as_string.js \
 	browser_webconsole_bug_737873_mixedcontent.js \
 	browser_output_breaks_after_console_dir_uninspectable.js \
@@ -202,10 +196,10 @@ MOCHITEST_BROWSER_FILES += \
 	test-bug-658368-time-methods.html \
 	test-webconsole-error-observer.html \
 	test-for-of.html \
-        test_bug_770099_violation.html \
-        test_bug_770099_violation.html^headers^ \
-        test_bug_770099_bad_policy_uri.html \
-        test_bug_770099_bad_policy_uri.html^headers^ \
+	test_bug_770099_violation.html \
+	test_bug_770099_violation.html^headers^ \
+	test_bug_770099_bad_policy_uri.html \
+	test_bug_770099_bad_policy_uri.html^headers^ \
 	test-result-format-as-string.html \
 	test-bug-737873-mixedcontent.html \
 	$(NULL)
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js b/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
deleted file mode 100644
index afe62c8a21f..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* ***** BEGIN LICENSE BLOCK *****
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- *
- * Contributor(s):
- *  Patrick Walton <pcwalton@mozilla.com>
- *
- * ***** END LICENSE BLOCK ***** */
-
-// Tests that the Web Console close button functions.
-
-const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console.html";
-
-function test() {
-  addTab(TEST_URI);
-  browser.addEventListener("load", function onLoad() {
-    browser.removeEventListener("load", onLoad, true);
-    openConsole(null, testCloseButton);
-  }, true);
-}
-
-function testCloseButton(hud) {
-  let hudId = hud.hudId;
-  HUDService.disableAnimation(hudId);
-  waitForFocus(function() {
-    let closeButton = hud.ui.closeButton;
-    ok(closeButton != null, "we have the close button");
-
-    EventUtils.synthesizeMouse(closeButton, 2, 2, {}, hud.iframeWindow);
-
-    ok(!(hudId in HUDService.hudReferences), "the console is closed when " +
-       "the close button is pressed");
-
-    finishTest();
-  }, hud.iframeWindow);
-}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js b/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
index f1e40dfaa3c..c5fe4505af0 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
@@ -44,18 +44,20 @@ function tab2Loaded(aEvent) {
 
   function openConsoles() {
     try {
-      HUDService.activateHUDForContext(tab1);
+      let target1 = TargetFactory.forTab(tab1);
+      gDevTools.openToolboxForTab(target1, "webconsole");
     }
     catch (ex) {
-      ok(false, "HUDService.activateHUDForContext(tab1) exception: " + ex);
+      ok(false, "gDevTools.openToolboxForTab(target1) exception: " + ex);
       noErrors = false;
     }
 
     try {
-      HUDService.activateHUDForContext(tab2);
+      let target2 = TargetFactory.forTab(tab2);
+      gDevTools.openToolboxForTab(target2, "webconsole");
     }
     catch (ex) {
-      ok(false, "HUDService.activateHUDForContext(tab2) exception: " + ex);
+      ok(false, "gDevTools.openToolboxForTab(target2) exception: " + ex);
       noErrors = false;
     }
   }
@@ -74,18 +76,20 @@ function tab2Loaded(aEvent) {
     Services.obs.addObserver(onWebConsoleClose, "web-console-destroyed", false);
 
     try {
-      HUDService.deactivateHUDForContext(tab1);
+      let target1 = TargetFactory.forTab(tab1);
+      gDevTools.closeToolbox(target1);
     }
     catch (ex) {
-      ok(false, "HUDService.deactivateHUDForContext(tab1) exception: " + ex);
+      ok(false, "gDevTools.closeToolbox(target1) exception: " + ex);
       noErrors = false;
     }
 
     try {
-      HUDService.deactivateHUDForContext(tab2);
+      let target2 = TargetFactory.forTab(tab2);
+      gDevTools.closeToolbox(target2);
     }
     catch (ex) {
-      ok(false, "HUDService.deactivateHUDForContext(tab2) exception: " + ex);
+      ok(false, "gDevTools.closeToolbox(target2) exception: " + ex);
       noErrors = false;
     }
   }
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js b/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
deleted file mode 100644
index de864917915..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* ***** BEGIN LICENSE BLOCK *****
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- *
- * Contributor(s):
- *  Mihai Șucan <mihai.sucan@gmail.com>
- *
- * ***** END LICENSE BLOCK ***** */
-
-// Minimum console height, in pixels.
-const MINIMUM_CONSOLE_HEIGHT = 150;
-
-// Minimum page height, in pixels. This prevents the Web Console from
-// remembering a height that covers the whole page.
-const MINIMUM_PAGE_HEIGHT = 50;
-const HEIGHT_PREF = "devtools.hud.height";
-
-let hud, newHeight, height, innerHeight, testDriver;
-
-function testGen()
-{
-  height = parseInt(hud.style.height);
-
-  toggleConsole();
-  yield;
-
-  is(newHeight, height, "same height after reopening the console");
-  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
-    "pref is correct");
-
-  setHeight(Math.ceil(innerHeight * 0.5));
-  toggleConsole();
-  yield;
-
-  is(newHeight, height, "same height after reopening the console");
-  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
-    "pref is correct");
-
-  setHeight(MINIMUM_CONSOLE_HEIGHT - 1);
-  toggleConsole();
-  yield;
-
-  is(newHeight, MINIMUM_CONSOLE_HEIGHT, "minimum console height is respected");
-  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
-    "pref is correct");
-
-  setHeight(innerHeight - MINIMUM_PAGE_HEIGHT + 1);
-  toggleConsole();
-  yield;
-
-  is(newHeight, innerHeight - MINIMUM_PAGE_HEIGHT,
-    "minimum page height is respected");
-  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
-    "pref is correct");
-
-  setHeight(Math.ceil(innerHeight * 0.6));
-  Services.prefs.setIntPref(HEIGHT_PREF, -1);
-  toggleConsole();
-  yield;
-
-  is(newHeight, height, "same height after reopening the console");
-  is(Services.prefs.getIntPref(HEIGHT_PREF), -1, "pref is not updated");
-
-  closeConsole();
-  HUDService.lastConsoleHeight = 0;
-  Services.prefs.setIntPref(HEIGHT_PREF, 0);
-
-  hud = testDriver = null;
-  executeSoon(finishTest);
-
-  yield;
-}
-
-function toggleConsole()
-{
-  closeConsole(null, function() {
-    openConsole(null, function() {
-      let hudId = HUDService.getHudIdByWindow(content);
-      hud = HUDService.hudReferences[hudId].iframe;
-      newHeight = parseInt(hud.style.height);
-
-      testDriver.next();
-    });
-  });
-}
-
-function setHeight(aHeight)
-{
-  height = aHeight;
-  hud.style.height = height + "px";
-}
-
-function test()
-{
-  addTab("data:text/html;charset=utf-8,Web Console test for bug 601909");
-  browser.addEventListener("load", function onLoad() {
-    browser.removeEventListener("load", onLoad, true);
-    innerHeight = content.innerHeight;
-    openConsole(null, function(aHud) {
-      hud = aHud.iframe;
-      testDriver = testGen();
-      testDriver.next();
-    });
-  }, true);
-}
-
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js b/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
index 5623f52b2cb..d22a50c9b3e 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
@@ -46,7 +46,6 @@ function startTest()
   let win2 = tabs[runCount*2 + 1].linkedBrowser.contentWindow;
   let hudId2 = HUDService.getHudIdByWindow(win2);
   huds[1] = HUDService.hudReferences[hudId2];
-  HUDService.disableAnimation(hudId2);
 
   if (runCount == 0) {
     menuitems[1] = huds[1].ui.rootElement.querySelector("#saveBodies");
@@ -115,7 +114,6 @@ function onpopupshown2b(aEvent)
       let win1 = tabs[runCount*2].linkedBrowser.contentWindow;
       let hudId1 = HUDService.getHudIdByWindow(win1);
       huds[0] = HUDService.hudReferences[hudId1];
-      HUDService.disableAnimation(hudId1);
 
       info("iframe1 height " + huds[0].iframe.clientHeight);
       info("iframe1 root height " + huds[0].ui.rootElement.clientHeight);
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js b/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
index 9e451d0ca17..1fd615fb955 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
@@ -1,8 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let prefService = Services.prefs;
-
 let prefs = {
   "net": [
     "network",
@@ -28,7 +26,7 @@ function test() {
   // Set all prefs to true
   for (let category in prefs) {
     prefs[category].forEach(function(pref) {
-      prefService.setBoolPref("devtools.webconsole.filter." + pref, true);
+      Services.prefs.setBoolPref("devtools.webconsole.filter." + pref, true);
     });
   }
 
@@ -107,12 +105,11 @@ function onConsoleReopen2(hud) {
   // Clear prefs
   for (let category in prefs) {
     prefs[category].forEach(function(pref) {
-      prefService.clearUserPref("devtools.webconsole.filter." + pref);
+      Services.prefs.clearUserPref("devtools.webconsole.filter." + pref);
     });
   }
 
-  prefs = prefService = null;
-  gBrowser.removeCurrentTab();
+  prefs = null;
   finishTest();
 }
 
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
index 4eeaec88a68..22eba17a045 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
@@ -44,18 +44,17 @@ function setupHighlighterTests()
 {
   let h1 = content.document.querySelector("h1");
   ok(h1, "we have the header node");
-  Services.obs.addObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
-  InspectorUI.toggleInspectorUI();
+
+  openInspector(runSelectionTests);
 }
 
-function runSelectionTests()
+function runSelectionTests(aInspector)
 {
-  Services.obs.removeObserver(runSelectionTests,
-    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  aInspector.highlighter.unlock();
+  aInspector.highlighter.outline.setAttribute("disable-transitions", "true");
 
   executeSoon(function() {
-    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
+    aInspector.selection.once("new-node", performTestComparisons);
     let h1 = content.document.querySelector("h1");
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
   });
@@ -63,19 +62,24 @@ function runSelectionTests()
 
 function performTestComparisons()
 {
-  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+  inspector.highlighter.lock();
 
-  InspectorUI.stopInspecting();
+  let isHighlighting =
+    !(inspector.highlighter.outline.getAttribute("hidden") == "true");
+
+  ok(isHighlighting, "inspector is highlighting");
 
   let h1 = content.document.querySelector("h1");
-  is(InspectorUI.highlighter.node, h1, "node selected");
-  is(InspectorUI.selection, h1, "selection matches node");
+  is(inspector.selection.node, h1, "selection matches node");
 
   openConsole(gBrowser.selectedTab, performWebConsoleTests);
 }
 
 function performWebConsoleTests(hud)
 {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
   let jsterm = hud.jsterm;
   outputNode = hud.outputNode;
 
@@ -112,7 +116,8 @@ function performWebConsoleTests(hud)
       let node = outputNode.querySelector(".webconsole-msg-output");
       isnot(node.textContent.indexOf("bug653531"), -1,
             "correct output for $0.textContent");
-      is(InspectorUI.selection.textContent, "bug653531",
+      let inspector = gDevTools.getPanelForTarget("inspector", target);
+      is(inspector.selection.node.textContent, "bug653531",
          "node successfully updated");
 
       executeSoon(finishUp);
@@ -122,7 +127,6 @@ function performWebConsoleTests(hud)
 }
 
 function finishUp() {
-  InspectorUI.closeInspectorUI();
   finishTest();
 }
 
@@ -130,8 +134,8 @@ function test()
 {
   waitForExplicitFinish();
   gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
     waitForFocus(createDocument, content);
   }, true);
 
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js b/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
index 0f685f88e67..ade0c09363a 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
@@ -21,10 +21,11 @@ function consoleOpened(HUD)
 
   let jsterm = HUD.jsterm;
   let popup = jsterm.autocompletePopup;
-  popup._panel.addEventListener("popupshown", function() {
-    popup._panel.removeEventListener("popupshown", arguments.callee, false);
+  let onShown = function() {
     ok(false, "popup shown");
-  }, false);
+  };
+
+  popup._panel.addEventListener("popupshown", onShown, false);
 
   ok(!popup.isOpen, "popup is not open");
 
@@ -41,6 +42,7 @@ function consoleOpened(HUD)
 
   executeSoon(function() {
     ok(!popup.isOpen, "popup is not open");
+    popup._panel.removeEventListener("popupshown", onShown, false);
     executeSoon(finishTest);
   });
 }
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js b/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
deleted file mode 100644
index b485165d706..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 663443. test1";
-
-const POSITION_PREF = "devtools.webconsole.position";
-const POSITION_WINDOW = "window";
-
-function consoleOpened() {
-  document.removeEventListener("popupshown", consoleOpened, false);
-
-  let HUD = HUDService.getHudByWindow(content);
-  ok(HUD.consolePanel, "Web Console opened in a panel");
-
-  let waitForTitleChange = {
-    name: "panel title change",
-    validatorFn: function() {
-      return HUD.consolePanel.label.indexOf("test2") > -1;
-    },
-    successFn: testEnd,
-    failureFn: testEnd,
-  };
-
-  waitForSuccess({
-    name: "initial panel title",
-    validatorFn: function() {
-      return HUD.consolePanel.label.indexOf("test1") > -1;
-    },
-    successFn: function() {
-      content.location = "data:text/html;charset=utf-8,<p>test2 for bug 663443";
-      waitForSuccess(waitForTitleChange);
-    },
-    failureFn: testEnd,
-  });
-}
-
-function testEnd() {
-  closeConsole(null, finishTest);
-}
-
-function test() {
-  addTab(TEST_URI);
-  browser.addEventListener("load", function onLoad() {
-    browser.removeEventListener("load", onLoad, true);
-
-    Services.prefs.setCharPref(POSITION_PREF, POSITION_WINDOW);
-
-    registerCleanupFunction(function() {
-      Services.prefs.clearUserPref(POSITION_PREF);
-    });
-  
-    document.addEventListener("popupshown", consoleOpened, false);
-
-    openConsole();
-  }, true);
-}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js b/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
index 48614c9cc02..e3d214aa528 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
@@ -39,7 +39,9 @@ function testViewSource(aHud)
       nodes = hud.outputNode.querySelectorAll(selector);
       is(nodes.length, 2, "correct number of css messages");
 
-      Services.ww.registerNotification(observer);
+      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let toolbox = gDevTools.getToolboxForTarget(target);
+      toolbox.once("styleeditor-selected", onStyleEditorReady);
 
       EventUtils.sendMouseEvent({ type: "click" }, nodes[0]);
     },
@@ -47,88 +49,75 @@ function testViewSource(aHud)
   });
 }
 
-let observer = {
-  observe: function(aSubject, aTopic, aData)
-  {
-    if (aTopic != "domwindowopened") {
-      return;
-    }
-    Services.ww.unregisterNotification(observer);
-    info("Style Editor window was opened in response to clicking " +
-         "the location node");
+function onStyleEditorReady(aEvent, aPanel)
+{
+  info(aEvent + " event fired");
 
-    function sheetForNode(aNode)
-    {
-      let href = aNode.getAttribute("title");
-      let sheet, i = 0;
-      while((sheet = content.document.styleSheets[i++])) {
-        if (sheet.href == href) {
-          return sheet;
-        }
+  SEC = aPanel.styleEditorChrome;
+  let win = aPanel.panelWindow;
+  ok(win, "Style Editor Window is defined");
+  ok(SEC, "Style Editor Chrome is defined");
+
+  function sheetForNode(aNode)
+  {
+    let href = aNode.getAttribute("title");
+    let sheet, i = 0;
+    while((sheet = content.document.styleSheets[i++])) {
+      if (sheet.href == href) {
+        return sheet;
       }
     }
+  }
 
-    executeSoon(function() {
-      let styleEditorWin = window.StyleEditor.StyleEditorManager
-                          .getEditorForWindow(content.window);
-      ok(styleEditorWin, "Style Editor window is defined");
+  waitForFocus(function() {
+    info("style editor window focused");
 
-      waitForFocus(function() {
-        SEC = styleEditorWin.styleEditorChrome;
-        ok(SEC, "Style Editor Chrome is defined");
+    let sheet = sheetForNode(nodes[0]);
+    ok(sheet, "sheet found");
+    let line = nodes[0].sourceLine;
+    ok(line, "found source line");
 
-        let sheet = sheetForNode(nodes[0]);
-        ok(sheet, "sheet found");
-        let line = nodes[0].sourceLine;
-        ok(line, "found source line");
+    checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
+      info("first check done");
 
-        checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
-          let sheet = sheetForNode(nodes[1]);
-          ok(sheet, "sheet found");
-          let line = nodes[1].sourceLine;
-          ok(line, "found source line");
+      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let toolbox = gDevTools.getToolboxForTarget(target);
 
-          EventUtils.sendMouseEvent({ type: "click" }, nodes[1]);
+      let sheet = sheetForNode(nodes[1]);
+      ok(sheet, "sheet found");
+      let line = nodes[1].sourceLine;
+      ok(line, "found source line");
+
+      toolbox.once("webconsole-selected", function(aEvent) {
+        info(aEvent + " event fired");
+
+        toolbox.once("styleeditor-selected", function() {
+          info(aEvent + " event fired");
 
           checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
-            window.StyleEditor.toggle();
+            info("second check done");
             finishTest();
           });
         });
-      }, styleEditorWin);
+
+        EventUtils.sendMouseEvent({ type: "click" }, nodes[1]);
+      });
+
+      toolbox.selectTool("webconsole");
     });
-  }
-};
+  }, win);
+}
 
 function checkStyleEditorForSheetAndLine(aStyleSheet, aLine, aCallback)
 {
-  let editor = null;
-
-  let performLineCheck = {
-    name: "source editor load",
-    validatorFn: function()
-    {
-      return editor.sourceEditor;
-    },
-    successFn: function()
-    {
-      is(editor.sourceEditor.getCaretPosition().line, aLine,
-         "correct line is selected");
-      is(SEC.selectedStyleSheetIndex, editor.styleSheetIndex,
-         "correct stylesheet is selected in the editor");
-
-      executeSoon(aCallback);
-    },
-    failureFn: aCallback,
-  };
-
+  let foundEditor = null;
   waitForSuccess({
-    name: "editor for stylesheet",
+    name: "style editor for stylesheet",
     validatorFn: function()
     {
-      for (let item of SEC.editors) {
-        if (item.styleSheet == aStyleSheet) {
-          editor = item;
+      for (let editor of SEC.editors) {
+        if (editor.styleSheet == aStyleSheet) {
+          foundEditor = editor;
           return true;
         }
       }
@@ -136,8 +125,31 @@ function checkStyleEditorForSheetAndLine(aStyleSheet, aLine, aCallback)
     },
     successFn: function()
     {
-      waitForSuccess(performLineCheck);
+      performLineCheck(foundEditor, aLine, aCallback);
     },
     failureFn: finishTest,
   });
 }
+
+function performLineCheck(aEditor, aLine, aCallback)
+{
+  function checkForCorrectState()
+  {
+    is(aEditor.sourceEditor.getCaretPosition().line, aLine,
+       "correct line is selected");
+    is(SEC.selectedStyleSheetIndex, aEditor.styleSheetIndex,
+       "correct stylesheet is selected in the editor");
+
+    aCallback && executeSoon(aCallback);
+  }
+
+  waitForSuccess({
+    name: "source editor load",
+    validatorFn: function()
+    {
+      return aEditor.sourceEditor;
+    },
+    successFn: checkForCorrectState,
+    failureFn: finishTest,
+  });
+}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_menustatus.js b/browser/devtools/webconsole/test/browser_webconsole_menustatus.js
deleted file mode 100644
index 794122beefc..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_menustatus.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/*
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- */
-
-function test() {
-  var tab1 = gBrowser.addTab();
-  var tab2 = gBrowser.addTab();
-  gBrowser.selectedTab = tab2;
-
-  openConsole(tab2, function() {
-    let cmd = document.getElementById("Tools:WebConsole");
-    is(cmd.getAttribute("checked"), "true", "<command Tools:WebConsole> is checked.");
-
-    gBrowser.selectedTab = tab1;
-
-    is(cmd.getAttribute("checked"), "false", "<command Tools:WebConsole> is unchecked after tab switch.");
-
-    gBrowser.selectedTab = tab2;
-
-    is(cmd.getAttribute("checked"), "true", "<command Tools:WebConsole> is checked.");
-
-    closeConsole(tab2, function() {
-      is(cmd.getAttribute("checked"), "false", "<command Tools:WebConsole> is checked once closed.");
-
-      gBrowser.removeTab(tab1);
-      gBrowser.removeTab(tab2);
-
-      finish();
-    });
-  });
-}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_position_ui.js b/browser/devtools/webconsole/test/browser_webconsole_position_ui.js
deleted file mode 100644
index 3639b9a86ae..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_position_ui.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 577721";
-
-const POSITION_PREF = "devtools.webconsole.position";
-const TOP_PREF = "devtools.webconsole.top";
-const LEFT_PREF = "devtools.webconsole.left";
-const WIDTH_PREF = "devtools.webconsole.width";
-const HEIGHT_PREF = "devtools.hud.height";
-
-let hudRef, boxHeight, panelWidth;
-
-function test() {
-  addTab(TEST_URI);
-  browser.addEventListener("load", function onLoad() {
-    browser.removeEventListener("load", onLoad, true);
-    openConsole(null, consoleOpened);
-  }, true);
-  registerCleanupFunction(testEnd);
-}
-
-function testEnd() {
-  hudRef = null;
-  Services.prefs.clearUserPref(POSITION_PREF);
-  Services.prefs.clearUserPref(WIDTH_PREF);
-  Services.prefs.clearUserPref(HEIGHT_PREF);
-  Services.prefs.clearUserPref(TOP_PREF);
-  Services.prefs.clearUserPref(LEFT_PREF);
-}
-
-function waitForPosition(aPosition, aCallback) {
-  waitForSuccess({
-    name: "web console position changed to '" + aPosition + "'",
-    validatorFn: function()
-    {
-      return hudRef._currentUIPosition == aPosition;
-    },
-    successFn: executeSoon.bind(null, aCallback),
-    failureFn: finishTest,
-  });
-}
-
-function consoleOpened(aHudRef) {
-  hudRef = aHudRef;
-  testMenuitems();
-
-  let hudBox = hudRef.iframe;
-
-  is(hudBox.parentNode.childNodes[2].getAttribute("id"), hudRef.hudId,
-     "initial console position is correct");
-
-  is(hudRef.ui.positionMenuitems.below.getAttribute("checked"), "true",
-     "position menu checkbox is below");
-  is(Services.prefs.getCharPref(POSITION_PREF), "below", "pref is below");
-
-  executeSoon(function() {
-    hudRef.positionConsole("above");
-    waitForPosition("above", onPositionAbove);
-  });
-}
-
-function onPositionAbove() {
-  let hudBox = hudRef.iframe;
-
-  let id = hudBox.parentNode.childNodes[0].getAttribute("id");
-  is(id, hudRef.hudId, "above position is correct");
-
-  is(hudRef.ui.positionMenuitems.above.getAttribute("checked"), "true",
-     "position menu checkbox is above");
-  is(Services.prefs.getCharPref(POSITION_PREF), "above", "pref is above");
-
-  boxHeight = content.innerHeight * 0.5;
-  panelWidth = content.innerWidth * 0.5;
-
-  hudBox.style.height = boxHeight + "px";
-
-  boxHeight = hudBox.clientHeight;
-
-  Services.prefs.setIntPref(WIDTH_PREF, panelWidth);
-  Services.prefs.setIntPref(TOP_PREF, 50);
-  Services.prefs.setIntPref(LEFT_PREF, 51);
-
-  executeSoon(function() {
-    hudRef.positionConsole("window");
-    waitForPosition("window", onPositionWindow);
-  });
-}
-
-function onPositionWindow() {
-  let hudBox = hudRef.iframe;
-
-  let id = hudBox.parentNode.getAttribute("id");
-  is(id, "console_window_" + hudRef.hudId, "window position is correct");
-  is(Services.prefs.getCharPref(POSITION_PREF), "window", "pref is window");
-
-  let diffHeight = Math.abs(hudBox.clientHeight - boxHeight);
-  ok(diffHeight < 8, "hudBox height is correct");
-
-  let consolePanel = hudRef.consolePanel;
-
-  is(consolePanel.getAttribute("width"), panelWidth, "panel width is correct");
-  is(consolePanel.getAttribute("top"), 50, "panel top position is correct");
-  is(consolePanel.getAttribute("left"), 51, "panel left position is correct");
-
-  let panelHeight = parseInt(consolePanel.getAttribute("height"));
-  let boxWidth = hudBox.clientWidth;
-  boxHeight = hudBox.clientHeight;
-
-  hudRef.consolePanel.sizeTo(panelWidth - 15, panelHeight - 13);
-
-  let popupBoxObject = consolePanel.popupBoxObject;
-  let screenX = popupBoxObject.screenX;
-  let screenY = popupBoxObject.screenY;
-  consolePanel.moveTo(screenX - 11, screenY - 13);
-
-  isnot(hudBox.clientWidth, boxWidth, "hudBox width was updated");
-  isnot(hudBox.clientHeight, boxHeight, "hudBox height was updated");
-
-  isnot(popupBoxObject.screenX, screenX, "panel screenX was updated");
-  isnot(popupBoxObject.screenY, screenY, "panel screenY was updated");
-
-  panelWidth = consolePanel.clientWidth;
-  boxHeight = hudBox.clientHeight;
-
-  executeSoon(function() {
-    hudRef.positionConsole("below");
-    waitForPosition("below", onPositionBelow);
-  });
-}
-
-function onPositionBelow() {
-  let hudBox = hudRef.iframe;
-
-  let id = hudBox.parentNode.childNodes[2].getAttribute("id");
-  is(id, hudRef.hudId, "below position is correct after reopen");
-
-  let diffHeight = Math.abs(hudBox.clientHeight - boxHeight);
-  // dump("Diffheight: " + diffHeight + " clientHeight: " + hudBox.clientHeight + " boxHeight: " + boxHeight + "\n");
-  // XXX TODO bug 702707
-  ok(diffHeight < 8, "hudBox height is still correct");
-
-  is(Services.prefs.getCharPref(POSITION_PREF), "below", "pref is below");
-
-  // following three disabled due to bug 674562
-  // is(Services.prefs.getIntPref(WIDTH_PREF), panelWidth, "width pref updated - bug 674562");
-  // isnot(Services.prefs.getIntPref(TOP_PREF), 50, "top location pref updated - bug 674562");
-  // isnot(Services.prefs.getIntPref(LEFT_PREF), 51, "left location pref updated - bug 674562");
-
-  Services.obs.addObserver(onConsoleClose, "web-console-destroyed", false);
-
-  // Close the window console via the toolbar button
-  let btn = hudRef.ui.closeButton;
-  executeSoon(function() {
-    EventUtils.synthesizeMouse(btn, 2, 2, {}, hudRef.iframeWindow);
-  });
-}
-
-function onConsoleClose()
-{
-  Services.obs.removeObserver(onConsoleClose, "web-console-destroyed");
-
-  executeSoon(function() {
-    hudRef = null;
-    openConsole(null, onConsoleReopen);
-  });
-}
-
-function onConsoleReopen(aHudRef) {
-  let hudBox = aHudRef.iframe;
-
-  let id = hudBox.parentNode.childNodes[2].getAttribute("id");
-  is(id, aHudRef.hudId, "below position is correct after another reopen");
-
-  is(aHudRef.ui.positionMenuitems.below.getAttribute("checked"), "true",
-     "position menu checkbox is below");
-
-  executeSoon(finishTest);
-}
-
-function testMenuitems() {
-  let positionConsole = hudRef.positionConsole;
-  is(typeof positionConsole, "function", "positionConsole() is available");
-
-  let param = null;
-  hudRef.positionConsole = function(aPosition) {
-    param = aPosition;
-  };
-
-  // Make sure the menuitems call the correct method.
-
-  hudRef.ui.positionMenuitems.above.doCommand();
-
-  is(param, "above", "menuitem for above positioning calls positionConsole() correctly");
-
-  hudRef.ui.positionMenuitems.below.doCommand();
-
-  is(param, "below", "menuitem for below positioning calls positionConsole() correctly");
-
-  hudRef.ui.positionMenuitems.window.doCommand();
-
-  is(param, "window", "menuitem for window positioning calls positionConsole() correctly");
-
-  hudRef.positionConsole = positionConsole;
-}
-
diff --git a/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js b/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
deleted file mode 100644
index d4ce62aa41f..00000000000
--- a/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 577721";
-
-const POSITION_PREF = "devtools.webconsole.position";
-
-function test() {
-  addTab(TEST_URI);
-  browser.addEventListener("load", function onLoad() {
-    browser.removeEventListener("load", onLoad, true);
-    openConsole(null, consoleOpened);
-  }, true);
-  registerCleanupFunction(testEnd);
-}
-
-function testEnd() {
-  Services.prefs.clearUserPref(POSITION_PREF);
-}
-
-function consoleOpened(hudRef) {
-  let hudBox = hudRef.HUDBox;
-
-  // listen for the panel popupshown event.
-  document.addEventListener("popupshown", function popupShown() {
-    document.removeEventListener("popupshown", popupShown, false);
-
-    ok(hudRef.consolePanel, "console is in a panel");
-
-    Services.obs.addObserver(function onWebConsoleClose() {
-      Services.obs.removeObserver(onWebConsoleClose, "web-console-destroyed");
-      executeSoon(finishTest);
-    }, "web-console-destroyed", false);
-
-    // Close the window console via the menu item
-    let menu = document.getElementById("webConsole");
-    menu.click();
-  }, false);
-
-  hudRef.positionConsole("window");
-}
diff --git a/browser/devtools/webconsole/test/head.js b/browser/devtools/webconsole/test/head.js
index 4e285568d71..c556de529a6 100644
--- a/browser/devtools/webconsole/test/head.js
+++ b/browser/devtools/webconsole/test/head.js
@@ -8,6 +8,11 @@ Cu.import("resource:///modules/HUDService.jsm", tempScope);
 let HUDService = tempScope.HUDService;
 Cu.import("resource://gre/modules/devtools/WebConsoleUtils.jsm", tempScope);
 let WebConsoleUtils = tempScope.WebConsoleUtils;
+Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+let gDevTools = tempScope.gDevTools;
+Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.TargetFactory;
+
 const WEBCONSOLE_STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let WCU_l10n = new WebConsoleUtils.l10n(WEBCONSOLE_STRINGS_URI);
 
@@ -32,8 +37,7 @@ let tab, browser, hudId, hud, hudBox, filterBox, outputNode, cs;
 
 function addTab(aURL)
 {
-  gBrowser.selectedTab = gBrowser.addTab();
-  content.location.assign(aURL);
+  gBrowser.selectedTab = gBrowser.addTab(aURL);
   tab = gBrowser.selectedTab;
   browser = gBrowser.getBrowserForTab(tab);
 }
@@ -133,23 +137,24 @@ function findLogEntry(aString)
  *        Optional function to invoke after the Web Console completes
  *        initialization (web-console-created).
  */
-function openConsole(aTab, aCallback)
+function openConsole(aTab, aCallback = function() { })
 {
-  function onWebConsoleOpen(aSubject, aTopic)
+  function onWebConsoleOpen(aEvent, aPanel)
   {
-    if (aTopic == "web-console-created") {
-      Services.obs.removeObserver(onWebConsoleOpen, "web-console-created");
-      aSubject.QueryInterface(Ci.nsISupportsString);
-      let hud = HUDService.getHudReferenceById(aSubject.data);
-      executeSoon(aCallback.bind(null, hud));
-    }
+    executeSoon(aCallback.bind(null, aPanel.hud));
   }
 
-  if (aCallback) {
-    Services.obs.addObserver(onWebConsoleOpen, "web-console-created", false);
+  let target = TargetFactory.forTab(aTab || tab);
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  if (toolbox) {
+    toolbox.once("webconsole-selected", onWebConsoleOpen);
+    toolbox.selectTool("webconsole");
+  }
+  else {
+    let target = TargetFactory.forTab(aTab || tab);
+    toolbox = gDevTools.openToolboxForTab(target, "webconsole");
+    toolbox.once("webconsole-selected", onWebConsoleOpen);
   }
-
-  HUDService.activateHUDForContext(aTab || tab);
 }
 
 /**
@@ -162,23 +167,27 @@ function openConsole(aTab, aCallback)
  *        Optional function to invoke after the Web Console completes
  *        closing (web-console-destroyed).
  */
-function closeConsole(aTab, aCallback)
+function closeConsole(aTab, aCallback = function() { })
 {
-  function onWebConsoleClose(aSubject, aTopic)
-  {
-    if (aTopic == "web-console-destroyed") {
-      Services.obs.removeObserver(onWebConsoleClose, "web-console-destroyed");
-      aSubject.QueryInterface(Ci.nsISupportsString);
-      let hudId = aSubject.data;
-      executeSoon(aCallback.bind(null, hudId));
+  let target = TargetFactory.forTab(aTab || tab);
+  let toolbox = gDevTools.getToolboxForTarget(target);
+  if (toolbox) {
+    let panel = gDevTools.getPanelForTarget("webconsole", target);
+    if (panel) {
+      let hudId = panel.hud.hudId;
+      panel.once("destroyed", function() {
+        executeSoon(aCallback.bind(null, hudId));
+      });
+    }
+    else {
+      toolbox.once("destroyed", aCallback.bind(null, null));
     }
-  }
 
-  if (aCallback) {
-    Services.obs.addObserver(onWebConsoleClose, "web-console-destroyed", false);
+    toolbox.destroy();
+  }
+  else {
+    aCallback();
   }
-
-  HUDService.deactivateHUDForContext(aTab || tab);
 }
 
 /**
@@ -250,7 +259,8 @@ function finishTest()
 
 function tearDown()
 {
-  HUDService.deactivateHUDForContext(gBrowser.selectedTab);
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  gDevTools.closeToolbox(target);
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
@@ -307,3 +317,17 @@ function waitForSuccess(aOptions)
 
   wait(aOptions.validatorFn, aOptions.successFn, aOptions.failureFn);
 }
+
+function openInspector(aCallback, aTab = gBrowser.selectedTab)
+{
+  let target = TargetFactory.forTab(aTab);
+  let inspector = gDevTools.getPanelForTarget("inspector", target);
+  if (inspector && inspector.isReady) {
+    aCallback(inspector);
+  } else {
+    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
+    toolbox.once("inspector-ready", function _onSelect(aEvent, aPanel) {
+      aCallback(aPanel);
+    });
+  }
+}
diff --git a/browser/devtools/webconsole/webconsole.js b/browser/devtools/webconsole/webconsole.js
index 4116fa3f2e0..973c06a27d5 100644
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@@ -177,10 +177,8 @@ const PREF_CONNECTION_TIMEOUT = "devtools.debugger.remote-timeout";
  *
  * @param object aWebConsoleOwner
  *        The WebConsole owner object.
- * @param string aPosition
- *        Tells the UI location for the Web Console.
  */
-function WebConsoleFrame(aWebConsoleOwner, aPosition)
+function WebConsoleFrame(aWebConsoleOwner)
 {
   this.owner = aWebConsoleOwner;
   this.hudId = this.owner.hudId;
@@ -191,7 +189,6 @@ function WebConsoleFrame(aWebConsoleOwner, aPosition)
   this._networkRequests = {};
 
   this._toggleFilter = this._toggleFilter.bind(this);
-  this._onPositionConsoleCommand = this._onPositionConsoleCommand.bind(this);
   this._flushMessageQueue = this._flushMessageQueue.bind(this);
   this._connectionTimeout = this._connectionTimeout.bind(this);
 
@@ -200,7 +197,7 @@ function WebConsoleFrame(aWebConsoleOwner, aPosition)
 
   this._initDefaultFilterPrefs();
   this._commandController = new CommandController(this);
-  this.positionConsole(aPosition, window);
+  this.positionConsole(window);
 
   this.jsterm = new JSTerm(this);
   this.jsterm.inputNode.focus();
@@ -373,10 +370,7 @@ WebConsoleFrame.prototype = {
    */
   _initConnection: function WCF__initConnection()
   {
-    this.proxy = new WebConsoleConnectionProxy(this, {
-      host: this.owner.remoteHost,
-      port: this.owner.remotePort,
-    });
+    this.proxy = new WebConsoleConnectionProxy(this, this.owner.target);
 
     let timeout = Services.prefs.getIntPref(PREF_CONNECTION_TIMEOUT);
     this._connectTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
@@ -439,7 +433,6 @@ WebConsoleFrame.prototype = {
     this.inputNode = doc.querySelector(".jsterm-input-node");
 
     this._setFilterTextBoxEvents();
-    this._initPositionUI();
     this._initFilterButtons();
 
     let fontSize = Services.prefs.getIntPref("devtools.webconsole.fontSize");
@@ -483,10 +476,6 @@ WebConsoleFrame.prototype = {
                                        !this.getFilterState("network");
     }.bind(this));
 
-    this.closeButton = doc.getElementById("webconsole-close-button");
-    this.closeButton.addEventListener("command",
-                                      this.owner.onCloseButton.bind(this.owner));
-
     let clearButton = doc.getElementsByClassName("webconsole-clear-console-button")[0];
     clearButton.addEventListener("command", function WCF__onClearButton() {
       this.owner._onClearButton();
@@ -544,31 +533,6 @@ WebConsoleFrame.prototype = {
     this.filterBox.addEventListener("input", onChange, false);
   },
 
-  /**
-   * Initialize the UI for re-positioning the console
-   * @private
-   */
-  _initPositionUI: function WCF__initPositionUI()
-  {
-    let doc = this.document;
-
-    let itemAbove = doc.querySelector("menuitem[consolePosition='above']");
-    itemAbove.addEventListener("command", this._onPositionConsoleCommand, false);
-
-    let itemBelow = doc.querySelector("menuitem[consolePosition='below']");
-    itemBelow.addEventListener("command", this._onPositionConsoleCommand, false);
-
-    let itemWindow = doc.querySelector("menuitem[consolePosition='window']");
-    itemWindow.addEventListener("command", this._onPositionConsoleCommand, false);
-
-    this.positionMenuitems = {
-      last: null,
-      above: itemAbove,
-      below: itemBelow,
-      window: itemWindow,
-    };
-  },
-
   /**
    * Creates one of the filter buttons on the toolbar.
    *
@@ -615,19 +579,6 @@ WebConsoleFrame.prototype = {
     Services.obs.notifyObservers(id, "web-console-created", null);
   },
 
-  /**
-   * Handle the "command" event for the buttons that allow the user to
-   * reposition the Web Console UI.
-   *
-   * @private
-   * @param nsIDOMEvent aEvent
-   */
-  _onPositionConsoleCommand: function WCF__onPositionConsoleCommand(aEvent)
-  {
-    let position = aEvent.target.getAttribute("consolePosition");
-    this.owner.positionConsole(position);
-  },
-
   /**
    * Position the console in a different location.
    *
@@ -635,15 +586,12 @@ WebConsoleFrame.prototype = {
    * instance that owns this iframe. You need to call this if you write
    * a different owner or you manually reposition the iframe.
    *
-   * @param string aPosition
-   *        The new Web Console iframe location: "above" (the page), "below" or
-   *        "window".
    * @param object aNewWindow
    *        Repositioning causes the iframe to reload - bug 254144. You need to
    *        provide the new window object so we can reinitialize the UI as
    *        needed.
    */
-  positionConsole: function WCF_positionConsole(aPosition, aNewWindow)
+  positionConsole: function WCF_positionConsole(aNewWindow)
   {
     this.window = aNewWindow;
     this.document = this.window.document;
@@ -657,14 +605,6 @@ WebConsoleFrame.prototype = {
     this._initUI();
     this.jsterm && this.jsterm._initUI();
 
-    this.closeButton.hidden = aPosition == "window";
-
-    this.positionMenuitems[aPosition].setAttribute("checked", true);
-    if (this.positionMenuitems.last) {
-      this.positionMenuitems.last.setAttribute("checked", false);
-    }
-    this.positionMenuitems.last = this.positionMenuitems[aPosition];
-
     if (oldOutputNode && oldOutputNode.childNodes.length) {
       let parentNode = this.outputNode.parentNode;
       parentNode.replaceChild(oldOutputNode, this.outputNode);
@@ -1791,7 +1731,9 @@ WebConsoleFrame.prototype = {
   onLocationChange: function WCF_onLocationChange(aURI, aTitle)
   {
     this.contentLocation = aURI;
-    this.owner.onLocationChange(aURI, aTitle);
+    if (this.owner.onLocationChange) {
+      this.owner.onLocationChange(aURI, aTitle);
+    }
   },
 
   /**
@@ -4028,14 +3970,13 @@ CommandController.prototype = {
  * @constructor
  * @param object aWebConsole
  *        The Web Console instance that owns this connection proxy.
- * @param object aOptions
- *        Connection options: host and port.
+ * @param RemoteTarget aTarget
+ *        The target that the console will connect to.
  */
-function WebConsoleConnectionProxy(aWebConsole, aOptions = {})
+function WebConsoleConnectionProxy(aWebConsole, aTarget)
 {
   this.owner = aWebConsole;
-  this.remoteHost = aOptions.host;
-  this.remotePort = aOptions.port;
+  this.target = aTarget;
 
   this._onPageError = this._onPageError.bind(this);
   this._onConsoleAPICall = this._onConsoleAPICall.bind(this);
@@ -4111,16 +4052,17 @@ WebConsoleConnectionProxy.prototype = {
    */
   connect: function WCCP_connect(aCallback)
   {
-    let transport;
-    if (this.remoteHost) {
-      transport = debuggerSocketConnect(this.remoteHost, this.remotePort);
+    // TODO: convert the non-remote path to use the target API as well.
+    let transport, client;
+    if (this.target.isRemote) {
+      client = this.client = this.target.client;
     }
     else {
       this.initServer();
       transport = DebuggerServer.connectPipe();
-    }
 
-    let client = this.client = new DebuggerClient(transport);
+      client = this.client = new DebuggerClient(transport);
+    }
 
     client.addListener("pageError", this._onPageError);
     client.addListener("consoleAPICall", this._onConsoleAPICall);
@@ -4129,6 +4071,18 @@ WebConsoleConnectionProxy.prototype = {
     client.addListener("fileActivity", this._onFileActivity);
     client.addListener("locationChange", this._onLocationChange);
 
+    if (this.target.isRemote) {
+      this._consoleActor = this.target.form.consoleActor;
+      if (!this.target.chrome) {
+        this.owner.onLocationChange(this.target.url, this.target.name);
+      }
+
+      let listeners = ["PageError", "ConsoleAPI", "NetworkActivity",
+                       "FileActivity", "LocationChange"];
+      this.client.attachConsole(this._consoleActor, listeners,
+                                this._onAttachConsole.bind(this, aCallback));
+      return;
+    }
     client.connect(function(aType, aTraits) {
       client.listTabs(this._onListTabs.bind(this, aCallback));
     }.bind(this));
@@ -4145,32 +4099,7 @@ WebConsoleConnectionProxy.prototype = {
    */
   _onListTabs: function WCCP__onListTabs(aCallback, aResponse)
   {
-    let selectedTab;
-
-    if (this.remoteHost) {
-      this.owner._connectTimer.cancel();
-
-      let tabs = [];
-      for (let tab of aResponse.tabs) {
-        tabs.push(tab.title);
-      }
-
-      tabs.push(l10n.getStr("listTabs.globalConsoleActor"));
-
-      let selected = {};
-      let result = Services.prompt.select(null,
-        l10n.getStr("remoteWebConsoleSelectTabTitle"),
-        l10n.getStr("remoteWebConsoleSelectTabMessage"),
-        tabs.length, tabs, selected);
-
-      if (result && selected.value < aResponse.tabs.length) {
-        selectedTab = aResponse.tabs[selected.value];
-      }
-    }
-    else {
-      selectedTab = aResponse.tabs[aResponse.selected];
-    }
-
+    let selectedTab = aResponse.tabs[aResponse.selected];
     if (selectedTab) {
       this._consoleActor = selectedTab.consoleActor;
       this.owner.onLocationChange(selectedTab.url, selectedTab.title);
@@ -4403,7 +4332,9 @@ WebConsoleConnectionProxy.prototype = {
     this.client.removeListener("locationChange", this._onLocationChange);
 
     try {
-      this.client.close(onDisconnect);
+      if (!this.target.isRemote) {
+        this.client.close(onDisconnect);
+      }
     }
     catch (ex) {
       Cu.reportError("Web Console disconnect exception: " + ex);
diff --git a/browser/devtools/webconsole/webconsole.xul b/browser/devtools/webconsole/webconsole.xul
index ff602c90dd4..9669d1a46ce 100644
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@@ -63,12 +63,6 @@
   <vbox class="hud-outer-wrapper" flex="1">
     <vbox class="hud-console-wrapper" flex="1">
       <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
-#ifdef XP_MACOSX
-        <toolbarbutton id="webconsole-close-button"
-                       class="devtools-closebutton"
-                       tooltiptext="&btnClose.tooltip;"/>
-#endif
-
         <toolbarbutton label="&btnPageNet.label;" type="menu-button"
                        category="net" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageNet.tooltip;">
@@ -119,29 +113,10 @@
 
         <spacer flex="1"/>
 
-        <toolbarbutton label="&btnPosition.label;" type="menu"
-                       class="devtools-toolbarbutton"
-                       tooltiptext="&btnPosition.tooltip;">
-          <menupopup>
-            <menuitem label="&positionMenu.above;" type="checkbox"
-                      autocheck="false" consolePosition="above"/>
-            <menuitem label="&positionMenu.below;" type="checkbox"
-                      autocheck="false" consolePosition="below"/>
-            <menuitem label="&positionMenu.window;" type="checkbox"
-                      autocheck="false" consolePosition="window"/>
-          </menupopup>
-        </toolbarbutton>
-
         <textbox class="compact hud-filter-box devtools-searchinput" type="search"
                  placeholder="&filterBox.placeholder;"/>
         <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
                        label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
-
-#ifndef XP_MACOSX
-        <toolbarbutton id="webconsole-close-button"
-                       class="devtools-closebutton"
-                       tooltiptext="&btnClose.tooltip;"/>
-#endif
       </toolbar>
       <richlistbox class="hud-output-node" orient="vertical" flex="1"
                    seltype="multiple" context="output-contextmenu"
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index 29b51d7a96e..fad262527ba 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -198,19 +198,15 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY webDeveloperMenu.label       "Web Developer">
 <!ENTITY webDeveloperMenu.accesskey   "W">
 
+<!ENTITY devtoolsConnect.label        "Connect…">
+<!ENTITY devtoolsConnect.accesskey    "e">
+
 <!ENTITY errorConsoleCmd.label        "Error Console">
 <!ENTITY errorConsoleCmd.accesskey    "C">
 <!ENTITY errorConsoleCmd.commandkey   "j">
 
-<!ENTITY webConsoleCmd.label          "Web Console">
-<!ENTITY webConsoleCmd.accesskey      "W">
-<!ENTITY webConsoleCmd.commandkey     "k">
 <!ENTITY remoteWebConsoleCmd.label    "Remote Web Console">
 
-<!ENTITY inspectMenu.label            "Inspect">
-<!ENTITY inspectMenu.accesskey        "I">
-<!ENTITY inspectMenu.commandkey       "I">
-
 <!ENTITY inspectContextMenu.label     "Inspect Element">
 <!ENTITY inspectContextMenu.accesskey "Q">
 
@@ -233,40 +229,15 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY scratchpad.keycode           "VK_F4">
 <!ENTITY scratchpad.keytext           "F4">
 
-<!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
-<!ENTITY inspectSidebarCloseButton.tooltiptext "Close sidebar">
-
 <!ENTITY devToolbarCloseButton.tooltiptext "Close Developer Toolbar">
 <!ENTITY devToolbarMenu.label              "Developer Toolbar">
 <!ENTITY devToolbarMenu.accesskey          "v">
 <!ENTITY devToolbar.keycode                "VK_F2">
 <!ENTITY devToolbar.keytext                "F2">
+<!ENTITY devToolbarToolsButton.label       "Toggle Toolbox">
 <!ENTITY devToolbarOtherToolsButton.label  "More Tools">
 
-<!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">
-<!ENTITY inspectorHTMLCopyInner.accesskey   "I">
-
-<!ENTITY inspectorHTMLCopyOuter.label       "Copy Outer HTML">
-<!ENTITY inspectorHTMLCopyOuter.accesskey   "O">
-
-<!ENTITY inspectorHTMLDelete.label          "Delete Node">
-<!ENTITY inspectorHTMLDelete.accesskey      "D">
-
-<!-- LOCALIZATION NOTE (inspect3DViewButton.label): This button shows an
-  -  alternate view for the Inspector, creating a 3D visualization of the
-  -  webpage. -->
-<!ENTITY inspect3DViewButton.label     "3D View">
-<!ENTITY inspect3DViewButton.accesskey "W">
-
-<!ENTITY inspectStyleButton.label     "Style">
-<!ENTITY inspectStyleButton.accesskey "S">
-
-<!-- LOCALIZATION NOTE (styleeditor.label): This menu item label appears
-  -  in the Tools menu. -->
-<!ENTITY styleeditor.label            "Style Editor">
-<!ENTITY styleeditor.accesskey        "y">
-<!ENTITY styleeditor.keycode          "VK_F7">
-<!ENTITY styleeditor.keytext          "F7">
+<!ENTITY devToolbox.accesskey              "B">
 
 <!ENTITY getMoreDevtoolsCmd.label        "Get More Tools">
 <!ENTITY getMoreDevtoolsCmd.accesskey    "M">
@@ -634,15 +605,6 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY addonBarCloseButton.tooltip  "Close Add-on Bar">
 <!ENTITY toggleAddonBarCmd.key        "/">
 
-<!-- LOCALIZATION NOTE (markupButton.arialabel): The markup button is the button
-located in front of the breadcrumbs display in the inspector toolbar. The button
-doesn't display any label, but exposes a label to screen-readers with "aria-label".
--->
-<!ENTITY markupButton.arialabel          "Markup">
-<!-- LOCALIZATION NOTE (markupButton.accesskey): The key bound to the Markup panel's
-toolbar button -->
-<!ENTITY markupButton.accesskey          "M">
-
 <!ENTITY socialToolbar.title        "Social Toolbar Button">
 <!ENTITY social.notLoggedIn.label   "Not logged in">
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd b/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
new file mode 100644
index 00000000000..c00aa6a5ce4
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
@@ -0,0 +1,15 @@
+<!-- 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/. -->
+
+<!-- LOCALIZATION NOTE : FILE This file contains the Remove Connection strings.
+  - The Remote Connection window can be start by running the command:
+  - `devtools connect`
+  - -->
+
+<!ENTITY title      "Connect">
+<!ENTITY host       "Host:">
+<!ENTITY port       "Port:">
+<!ENTITY connect    "Connect">
+<!ENTITY connecting "Connecting…">
+<!ENTITY availability "Available remote objects:">
diff --git a/browser/locales/en-US/chrome/browser/devtools/debugger.properties b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
index c9687bb2907..5c2d9cab6e7 100644
--- a/browser/locales/en-US/chrome/browser/devtools/debugger.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
@@ -19,6 +19,14 @@ confirmTabSwitch.buttonSwitch.accessKey=S
 confirmTabSwitch.buttonOpen=Open anyway
 confirmTabSwitch.buttonOpen.accessKey=O
 
+# LOCALIZATION NOTE (open.commandkey): The key used to open the debugger in
+# combination to e.g. ctrl + shift
+open.commandkey=S
+
+# LOCALIZATION NOTE (debuggerMenu.accesskey): The access key used to open the
+# debugger.
+debuggerMenu.accesskey=D
+
 # LOCALIZATION NOTE (chromeDebuggerWindowTitle): The title displayed for the
 # chrome (browser) debugger window.
 chromeDebuggerWindowTitle=Browser Debugger
@@ -173,6 +181,11 @@ watchExpressionsScopeLabel=Watch expressions
 # the global scope.
 globalScopeLabel=Global
 
+# LOCALIZATION NOTE (ToolboxDebugger.label):
+# This string is displayed in the title of the tab when the debugger is
+# displayed inside the developer tools window and in the Developer Tools Menu.
+ToolboxDebugger.label=Debugger
+
 # LOCALIZATION NOTE (variablesSeparatorLabel): The text that is displayed
 # in the variables list as a separator between the name and value.
 variablesSeparatorLabel=:
diff --git a/browser/locales/en-US/chrome/browser/devtools/inspector.dtd b/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
new file mode 100644
index 00000000000..897552ca002
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
@@ -0,0 +1,10 @@
+<!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">
+<!ENTITY inspectorHTMLCopyInner.accesskey   "I">
+
+<!ENTITY inspectorHTMLCopyOuter.label       "Copy Outer HTML">
+<!ENTITY inspectorHTMLCopyOuter.accesskey   "O">
+
+<!ENTITY inspectorHTMLDelete.label          "Delete Node">
+<!ENTITY inspectorHTMLDelete.accesskey      "D">
+
+<!ENTITY inspector.selectButton.tooltip     "Select element with mouse">
diff --git a/browser/locales/en-US/chrome/browser/devtools/inspector.properties b/browser/locales/en-US/chrome/browser/devtools/inspector.properties
index 13cb5e1b9e8..c4989cab16c 100644
--- a/browser/locales/en-US/chrome/browser/devtools/inspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/inspector.properties
@@ -14,38 +14,22 @@
 # LOCALIZATION NOTE (confirmNavigationAway): Used in the Inspector tool, when
 # the user tries to navigate away from a web page, to confirm the change of
 # page.
-confirmNavigationAway.message=Leaving this page will close the Inspector and the changes you have made will be lost.
+confirmNavigationAway.message2=If you leave this page, the changes you have made will be lost.
 confirmNavigationAway.buttonLeave=Leave Page
 confirmNavigationAway.buttonLeaveAccesskey=L
 confirmNavigationAway.buttonStay=Stay on Page
 confirmNavigationAway.buttonStayAccesskey=S
 
 breadcrumbs.siblings=Siblings
-# LOCALIZATION NOTE (htmlPanel): Used in the Inspector tool's openInspectorUI
-# method when registering the HTML panel.
-
-# LOCALIZATION NOTE (inspectButtonWithShortcutKey.tooltip):
-# This button appears in the Inspector Toolbar. inspectButton is stateful,
-# if it's pressed users can select an element with the mouse.
-# %S is the keyboard shortcut.
-inspectButtonWithShortcutKey.tooltip=Select element with mouse (%S)
-
-# LOCALIZATION NOTE (inspectButton.tooltip):
-# Same as inspectButtonWithShortcutKey.tooltip but used when an add-on
-# overrides the shortcut key.
-inspectButton.tooltip=Select element with mouse
-
-# LOCALIZATION NOTE (markupButton.*):
-# This button is the button located at the beginning of the breadcrumbs
-# in the inspector toolbar. Its tooltip is built dynamically.
-# markupButton.tooltip is used on Mac.
-# On Windows and Linux, we use markupButton.tooltipWithAccesskey, where we append
-# the keyboard shortcut.
-markupButton.tooltip=Markup Panel
-markupButton.tooltipWithAccesskey=Markup Panel (%S)
-
 
 # LOCALIZATION NOTE (nodeMenu.tooltiptext)
 # This menu appears in the Infobar (on top of the highlighted node) once
 # the node is selected.
 nodeMenu.tooltiptext=Node operations
+
+
+# LOCALIZATION NOTE (inspector.*)
+# Used for the menuitem in the tool menu
+inspector.label=Inspector
+inspector.commandkey=I
+inspector.accesskey=I
diff --git a/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
index e88902ff4a4..53aaf605c55 100644
--- a/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
@@ -16,6 +16,7 @@
   -  The text appears on the bottom right corner of the layout view when
   -  the corresponding box is hovered. -->
 
+<!ENTITY title                  "Box Model">
 <!ENTITY margins.tooltip        "margins">
 <!ENTITY borders.tooltip        "borders">
 <!ENTITY padding.tooltip        "padding">
diff --git a/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd b/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
index 6ac78727fa2..7210060e0c1 100644
--- a/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
@@ -117,9 +117,3 @@
   -  the same name in browser.dtd.
   -->
 <!ENTITY errorConsoleCmd.commandkey   "j">
-
-<!-- LOCALIZATION NOTE (webConsoleCmd.commandkey): This command key launches
-  -  the browser WebConsole, the key should be identical to the property of
-  -  the same name in browser.dtd.
-  -->
-<!ENTITY webConsoleCmd.commandkey     "k">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
index 2e08c8d07c3..dca0bc6d81c 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
@@ -52,6 +52,14 @@ saveStyleSheet.title=Save style sheet
 # LOCALIZATION NOTE  (saveStyleSheet.title): This is the *.css filter title
 saveStyleSheet.filter=CSS files
 
+# LOCALIZATION NOTE  (open.commandkey): This the key to use in
+# conjunction with shift to open the style editor
+open.commandkey=VK_F7
+
+# LOCALIZATION NOTE (open.accesskey): The access key used to open the style
+# editor.
+open.accesskey=y
+
 # LOCALIZATION NOTE  (saveStyleSheet.commandkey): This the key to use in
 # conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
 saveStyleSheet.commandkey=S
@@ -66,3 +74,7 @@ undo.commandkey=Z
 # platforms) to Redo a change in the editor.
 redo.commandkey=Z
 
+# LOCALIZATION NOTE (ToolboxStyleEditor.label):
+# This string is displayed in the title of the tab when the debugger is
+# displayed inside the developer tools window and in the Developer Tools Menu.
+ToolboxStyleEditor.label=Style Editor
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
index f9f86b81913..e28e4e07b41 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
@@ -41,3 +41,7 @@
 <!ENTITY matched               "Matched">
 <!ENTITY parentMatch           "Parent Match">
 <!ENTITY unmatched             "Unmatched">
+
+<!-- FIXME: notes -->
+<!ENTITY computedViewTitle     "Computed">
+<!ENTITY ruleViewTitle         "Rules">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
index 5eab4a7b991..5f7f1861025 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
@@ -36,13 +36,6 @@ rule.sourceElement=element
 # e.g "Inherited from body#bodyID"
 rule.inheritedFrom=Inherited from %S
 
-# LOCALIZATION NOTE (style.highlighter.button): These strings are used inside
-# sidebar of the Highlighter for the style inspector button.
-# "Computed" refers to the Computed Style of the element.
-style.highlighter.button.label2=Computed
-style.highlighter.accesskey2=C
-style.highlighter.button.tooltip2=Inspect element computed styles
-
 # LOCALIZATION NOTE (helpLinkTitle): For each style property
 # the user can hover it and get a help link button which allows one to
 # quickly jump to the documentation from the Mozilla Developer Network site.
@@ -126,12 +119,6 @@ rule.contextmenu.copypropertyvalue=Copy property value
 # view's context menu copy property value access key.
 rule.contextmenu.copypropertyvalue.accesskey=U
 
-# LOCALIZATION NOTE (ruleView.*): Button label, accesskey and tooltip text
-# associated with the Highlighter's CSS Rule View in the Style Sidebar.
-ruleView.label=Rules
-ruleView.accesskey=R
-ruleView.tooltiptext=View and Edit CSS
-
 # LOCALIZATION NOTE (ruleView.empty): Text displayed when the highlighter is
 # first opened and there's no node selected in the rule view.
 rule.empty=No element selected.
diff --git a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
new file mode 100644
index 00000000000..29b63269353
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<!ENTITY window.title  "Developer Tools">
+
+<!ENTITY closeCmd.key  "W">
diff --git a/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd b/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
index b72bd488a51..e442518b66c 100644
--- a/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
@@ -60,30 +60,9 @@
 <!ENTITY btnConsoleWarnings     "Warnings">
 <!ENTITY btnConsoleLog          "Log">
 
-<!-- LOCALIZATION NOTE (btnPosition.label): The label shown for the menu which
-  -  allows the user to toggle between the Web Console positioning types. -->
-<!ENTITY btnPosition.label     "Position">
-
-<!-- LOCALIZATION NOTE (btnPosition.tooltip): The tooltip shown when the user
-  -  hovers the Position button in the Web Console toolbar. -->
-<!ENTITY btnPosition.tooltip   "Position the Web Console above or below the document">
-
-<!-- LOCALIZATION NOTE (positionMenu.above): When this option is selected the
-  -  Web Console interface is displayed above the web page. -->
-<!ENTITY positionMenu.above    "Above">
-
-<!-- LOCALIZATION NOTE (positionMenu.below): When this option is selected the
-  -  Web Console interface is displayed below the web page. -->
-<!ENTITY positionMenu.below    "Below">
-
-<!-- LOCALIZATION NOTE (positionMenu.window): When this option is selected the
-  -  Web Console interface is displayed in a floating panel. -->
-<!ENTITY positionMenu.window   "Window">
-
 <!ENTITY filterBox.placeholder "Filter">
 <!ENTITY btnClear.label        "Clear">
 <!ENTITY btnClear.tooltip      "Clear the Web Console output">
-<!ENTITY btnClose.tooltip      "Close the Web Console">
 
 <!ENTITY fullZoomEnlargeCmd.commandkey  "+">
 <!ENTITY fullZoomEnlargeCmd.commandkey2 "="> <!-- + is above this key on many keyboards -->
diff --git a/browser/locales/en-US/chrome/browser/devtools/webconsole.properties b/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
index 68b02d01437..75784473847 100644
--- a/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
@@ -32,6 +32,8 @@ close.button=Close
 close.accesskey=C
 update.button=Update
 update.accesskey=U
+cmd.commandkey=k
+webConsoleCmd.accesskey=W
 # LOCALIZATION NOTE FOR `jsPropertyTitle` AND `jsPropertyInspectTitle`:
 #
 # The "PropertyPanel" is used to display a JS object to the user.
@@ -166,6 +168,12 @@ remoteWebConsoleSelectTabMessage=Select one of the tabs you want to attach to, o
 # global console in the tabs selection.
 listTabs.globalConsoleActor=*Global Console*
 
+# LOCALIZATION NOTE (ToolboxWebconsole.label):
+# This string is displayed in the title of the tab when the web console is
+# displayed inside the developer tools window it is probably the same string
+# as webConsoleWindowTitleAndURL before the '-'
+ToolboxWebconsole.label=Web Console
+
 # LOCALIZATION NOTE (longStringEllipsis): The string displayed after a long
 # string. This string is clickable such that the rest of the string is retrieved
 # from the server.
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index 1cde24633f1..eb46acb0418 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -37,6 +37,9 @@
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
     locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
     locale/browser/devtools/responsiveUI.properties   (%chrome/browser/devtools/responsiveUI.properties)
+    locale/browser/devtools/toolbox.dtd            (%chrome/browser/devtools/toolbox.dtd)
+    locale/browser/devtools/inspector.dtd          (%chrome/browser/devtools/inspector.dtd)
+    locale/browser/devtools/connection-screen.dtd  (%chrome/browser/devtools/connection-screen.dtd)
     locale/browser/newTab.dtd                      (%chrome/browser/newTab.dtd)
     locale/browser/newTab.properties               (%chrome/browser/newTab.properties)
     locale/browser/openLocation.dtd                (%chrome/browser/openLocation.dtd)
diff --git a/browser/makefiles.sh b/browser/makefiles.sh
index 762153c4b98..2931b979c17 100644
--- a/browser/makefiles.sh
+++ b/browser/makefiles.sh
@@ -39,7 +39,7 @@ browser/components/tabview/Makefile
 browser/components/thumbnails/Makefile
 browser/devtools/Makefile
 browser/devtools/debugger/Makefile
-browser/devtools/highlighter/Makefile
+browser/devtools/inspector/Makefile
 browser/devtools/scratchpad/Makefile
 browser/devtools/shared/Makefile
 browser/devtools/sourceeditor/Makefile
@@ -119,7 +119,7 @@ if [ "$ENABLE_TESTS" ]; then
     browser/components/test/Makefile
     browser/components/thumbnails/test/Makefile
     browser/devtools/debugger/test/Makefile
-    browser/devtools/highlighter/test/Makefile
+    browser/devtools/inspector/test/Makefile
     browser/devtools/scratchpad/test/Makefile
     browser/devtools/shared/test/Makefile
     browser/devtools/sourceeditor/test/Makefile
diff --git a/browser/themes/gnomestripe/browser.css b/browser/themes/gnomestripe/browser.css
index 4c9964a0f79..4bf94b8d4b9 100644
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1970,51 +1970,26 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter */
 
-#highlighter-outline {
+.highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
+.highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Highlighter toolbar */
+/* Developer toolbar */
 
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
 }
 
-#devtools-side-splitter {
-  -moz-appearance: none;
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-}
-
-#devtools-sidebar-box {
-  background-color: -moz-Field;
-}
-
 /* Highlighter - Node Infobar */
 
-#highlighter-nodeinfobar {
+.highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -2023,21 +1998,21 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-text {
+.highlighter-nodeinfobar-text {
   /* 100% - size of the buttons and margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*#highlighter-nodeinfobar-tagname {
+html|*.highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*#highlighter-nodeinfobar-id {
+html|*.highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*#highlighter-nodeinfobar-pseudo-classes {
+html|*.highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -2051,7 +2026,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   min-height: 26px;
 }
 
-#highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -2059,26 +2034,26 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-inspectbutton:active:hover,
-#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton:active:hover,
+.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#highlighter-nodeinfobar-menu {
+.highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -2097,7 +2072,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-#highlighter-nodeinfobar-arrow-top {
+.highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -2105,7 +2080,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-#highlighter-nodeinfobar-arrow-bottom {
+.highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -2113,12 +2088,12 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
-#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
+.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -2148,259 +2123,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
-/* Highlighter toolbar - breadcrumbs */
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up {
-  -moz-border-start-width: 0;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(208,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(205,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  margin-left: 0;
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open],
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  margin-right: 0;
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - HTML Tree */
-
-#inspector-treepanel-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
-  -moz-margin-end: 0;
-  -moz-image-region: rect(0px 18px 16px 0px);
-}
-
-#inspector-treepanel-toolbutton[checked] {
-  -moz-image-region: rect(0px 36px 16px 18px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
-#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
-  border-radius: 3px 0 0 3px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
-#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
-  border-radius: 0 3px 3px 0;
-}
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
-
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -2584,33 +2306,13 @@ html|*#gcli-output-frame {
   background: rgba(0,0,0,.4);
 }
 
-#developer-toolbar-webconsole {
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-#developer-toolbar-inspector {
-  -moz-image-region: rect(16px, 16px, 32px, 0);
-}
-
-#developer-toolbar-styleeditor {
-  -moz-image-region: rect(32px, 16px, 48px, 0);
-}
-
-#developer-toolbar-debugger {
-  -moz-image-region: rect(48px, 16px, 64px, 0);
-}
-
-#developer-toolbar-other-tools {
-  -moz-image-region: rect(64px, 16px, 80px, 0);
-}
-
-#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
-  display: none;
+#developer-toolbar-toolbox-button {
+  -moz-image-region: rect(64px, 22px, 80px, 0);
 }
 
 /* Error counter */
 
-#developer-toolbar-webconsole[error-count]:before {
+#developer-toolbar-toolbox-button[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/gnomestripe/devtools/command-responsivemode.png b/browser/themes/gnomestripe/devtools/command-responsivemode.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbfa599048c1065c7250a5cd74b9684724f3ded3
GIT binary patch
literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/command-scratchpad.png b/browser/themes/gnomestripe/devtools/command-scratchpad.png
new file mode 100644
index 0000000000000000000000000000000000000000..5131ca5cbc6176c96a66f4a56d81fed95c4c9327
GIT binary patch
literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/command-tilt.png b/browser/themes/gnomestripe/devtools/command-tilt.png
new file mode 100644
index 0000000000000000000000000000000000000000..f816bba59cedb2fb2069b4d0a4ff09225e99cdb7
GIT binary patch
literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/common.css b/browser/themes/gnomestripe/devtools/common.css
index c2a1feb6378..59b66d44b4b 100644
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -188,6 +188,65 @@
   position: relative;
 }
 
+/* In-tools sidebar */
+
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  -moz-appearance: none;
+  padding: 0;
+  border: 0;
+}
+
+.devtools-sidebar-tabs > tabs {
+  -moz-appearance: none;
+  position: static;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  color: hsl(210,30%,85%);
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.devtools-sidebar-tabs > tabs > .tabs-right,
+.devtools-sidebar-tabs > tabs > .tabs-left {
+  display: none;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  -moz-appearance: none;
+  padding: 0;
+  margin: 0;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  text-align: center;
+  color: inherit;
+  -moz-box-flex: 1;
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+  background: transparent;
+  border-radius: 0;
+}
+
+.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
+  position: static;
+}
+
+.devtools-sidebar-tabs > tabs > tab:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] {
+  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: white !important;
+}
+
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/gnomestripe/devtools/dock-bottom.png b/browser/themes/gnomestripe/devtools/dock-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..83842f236ef5ede55a268e67077532fc1764746f
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/dock-side.png b/browser/themes/gnomestripe/devtools/dock-side.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a940bc1e4e50a63d1522fc5604cb2cf44b05e82
GIT binary patch
literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/dock-window.png b/browser/themes/gnomestripe/devtools/dock-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/inspector.css b/browser/themes/gnomestripe/devtools/inspector.css
new file mode 100644
index 00000000000..05465853427
--- /dev/null
+++ b/browser/themes/gnomestripe/devtools/inspector.css
@@ -0,0 +1,214 @@
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+/* Highlighter toolbar - breadcrumbs */
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin-bottom: -1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px 13px 2px 13px;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(208,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(205,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  border-left-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  border-right-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
diff --git a/browser/themes/gnomestripe/devtools/layout-background.png b/browser/themes/gnomestripe/devtools/layout-background.png
deleted file mode 100644
index 6991cc0f2ab221e7488be16c3f9e4aa4d6228e73..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

diff --git a/browser/themes/gnomestripe/devtools/layout-buttons.png b/browser/themes/gnomestripe/devtools/layout-buttons.png
deleted file mode 100644
index 8705bc51475de5e6759371cc30a32e67187f455a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

diff --git a/browser/themes/gnomestripe/devtools/layoutview.css b/browser/themes/gnomestripe/devtools/layoutview.css
index 4d653c5c5e0..552c9841e84 100644
--- a/browser/themes/gnomestripe/devtools/layoutview.css
+++ b/browser/themes/gnomestripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,17 +42,3 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
-
-#togglebutton {
-  background-image: url(layout-buttons.png);
-  width: 16px;
-  height: 16px;
-}
-
-body.open {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-body.open > #header > #togglebutton {
-  background-position: -16px 0;
-}
diff --git a/browser/themes/gnomestripe/devtools/toolbox.css b/browser/themes/gnomestripe/devtools/toolbox.css
new file mode 100644
index 00000000000..13b5b4997a5
--- /dev/null
+++ b/browser/themes/gnomestripe/devtools/toolbox.css
@@ -0,0 +1,99 @@
+/* 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/. */
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+#toolbox-dock-bottom {
+  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
+}
+
+#toolbox-dock-side {
+  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
+}
+
+#toolbox-dock-window {
+  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+}
+
+.command-button {
+  margin: 0 10px;
+  width: 16px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#command-button-responsive {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
+}
+#command-button-responsive:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
+}
+#command-button-responsive:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
+}
+#command-button-responsive.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
+}
+
+#command-button-tilt {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
+}
+#command-button-tilt:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
+}
+
+#command-button-tilt:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
+}
+
+#command-button-tilt.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
+}
+
+#command-button-scratchpad {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
+}
+
+#command-button-scratchpad:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
+}
+
+#command-button-scratchpad:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
+}
+
+
+/* Tabs */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  color: hsl(210,30%,85%);
+  padding: 4px 3px 3px;
+  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+}
+
+.devtools-tab {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: 3px 3px 0 0;
+  color: inherit;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 1px 1px 0;
+  margin: 0 5px;
+  padding: 0 10px 1px;
+}
+
+.devtools-tab[selected=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background-color: rgb(20,20,20);
+  text-shadow: none;
+  color: white;
+}
diff --git a/browser/themes/gnomestripe/devtools/treepanel-button.png b/browser/themes/gnomestripe/devtools/treepanel-button.png
deleted file mode 100644
index 2a8802216bf178bc05813fc592df30d91cd49415..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn
index 4fb4850ef75..f10067a6a65 100644
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -105,6 +105,9 @@ browser.jar:
   skin/classic/browser/devtools/common.css            (devtools/common.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
+  skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
+  skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
+  skin/classic/browser/devtools/command-tilt.png      (devtools/command-tilt.png)
   skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
@@ -153,11 +156,8 @@ browser.jar:
   skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
   skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
-  skin/classic/browser/devtools/treepanel-button.png  (devtools/treepanel-button.png)
-  skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
   skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
-  skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-collapse.png  (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png    (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png     (devtools/debugger-pause.png)
@@ -169,7 +169,12 @@ browser.jar:
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
   skin/classic/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
+  skin/classic/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
+  skin/classic/browser/devtools/dock-side.png             (devtools/dock-side.png)
+  skin/classic/browser/devtools/dock-window.png           (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
+  skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
+  skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
index a4c6ed912e6..614317940f3 100644
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3368,58 +3368,35 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter */
 
-#highlighter-outline {
+.highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
+.highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Highlighter toolbar */
+/* Developer toolbar */
 
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
-#inspector-toolbar:-moz-locale-dir(ltr),
 #developer-toolbar:-moz-locale-dir(ltr) {
   padding-left: 2px;
   padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
-#inspector-toolbar:-moz-locale-dir(rtl),
 #developer-toolbar:-moz-locale-dir(rtl) {
   padding-left: 4px;
   padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
-#devtools-side-splitter {
-  background-image: none !important;
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-}
-
 /* Lion Fullscreen window styling */
 @media (-moz-mac-lion-theme) {
   #navigator-toolbox[inFullscreen][tabsontop="true"]:not(:-moz-lwtheme)::before {
@@ -3434,13 +3411,9 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   }
 }
 
-#devtools-sidebar-box {
-  background-color: -moz-Field;
-}
-
 /* Highlighter - Node Infobar */
 
-#highlighter-nodeinfobar {
+.highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -3449,21 +3422,21 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-text {
+.highlighter-nodeinfobar-text {
   /* 100% - size of the buttons + margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*#highlighter-nodeinfobar-tagname {
+html|*.highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*#highlighter-nodeinfobar-id {
+html|*.highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*#highlighter-nodeinfobar-pseudo-classes {
+html|*.highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -3478,7 +3451,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-color: transparent;
 }
 
-#highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -3486,26 +3459,26 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-inspectbutton:active:hover,
-#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton:active:hover,
+.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#highlighter-nodeinfobar-menu {
+.highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -3524,7 +3497,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-#highlighter-nodeinfobar-arrow-top {
+.highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -3532,7 +3505,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-#highlighter-nodeinfobar-arrow-bottom {
+.highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -3540,12 +3513,12 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
-#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
+.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -3575,256 +3548,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
-/* Highlighter toolbar - breadcrumbs */
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up {
-  -moz-border-start-width: 0;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(208,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(205,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open],
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - HTML Tree */
-
-#inspector-treepanel-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
-  -moz-margin-end: 0;
-  -moz-image-region: rect(0px 18px 16px 0px);
-}
-
-#inspector-treepanel-toolbutton[checked] {
-  -moz-image-region: rect(0px 36px 16px 18px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
-#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
-  border-radius: @toolbarbuttonCornerRadius@ 0 0 @toolbarbuttonCornerRadius@;
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
-#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
-  border-radius: 0 @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0;
-}
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
-
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -4003,33 +3726,13 @@ html|*#gcli-output-frame {
   text-shadow: 0 0 6px hsl(208,100%,60%);
 }
 
-#developer-toolbar-webconsole {
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-#developer-toolbar-inspector {
-  -moz-image-region: rect(16px, 16px, 32px, 0);
-}
-
-#developer-toolbar-styleeditor {
-  -moz-image-region: rect(32px, 16px, 48px, 0);
-}
-
-#developer-toolbar-debugger {
-  -moz-image-region: rect(48px, 16px, 64px, 0);
-}
-
-#developer-toolbar-other-tools {
+#developer-toolbar-toolbox-button {
   -moz-image-region: rect(64px, 16px, 80px, 0);
 }
 
-#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
 /* Error counter */
 
-#developer-toolbar-webconsole[error-count]:before {
+#developer-toolbar-toolbox-button[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/pinstripe/devtools/command-responsivemode.png b/browser/themes/pinstripe/devtools/command-responsivemode.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbfa599048c1065c7250a5cd74b9684724f3ded3
GIT binary patch
literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/command-scratchpad.png b/browser/themes/pinstripe/devtools/command-scratchpad.png
new file mode 100644
index 0000000000000000000000000000000000000000..5131ca5cbc6176c96a66f4a56d81fed95c4c9327
GIT binary patch
literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/command-tilt.png b/browser/themes/pinstripe/devtools/command-tilt.png
new file mode 100644
index 0000000000000000000000000000000000000000..f816bba59cedb2fb2069b4d0a4ff09225e99cdb7
GIT binary patch
literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/common.css b/browser/themes/pinstripe/devtools/common.css
index c8cfa326c10..7fa892e4575 100644
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -203,6 +203,60 @@
   position: relative;
 }
 
+/* In-tools sidebar */
+
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  padding: 0;
+}
+
+.devtools-sidebar-tabs > tabs {
+  -moz-appearance: none;
+  position: static;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  color: hsl(210,30%,85%);
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.devtools-sidebar-tabs > tabs > .tabs-right,
+.devtools-sidebar-tabs > tabs > .tabs-left {
+  display: none;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  -moz-appearance: none;
+  padding: 0;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  text-align: center;
+  color: inherit;
+  -moz-box-flex: 1;
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+}
+
+.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
+  position: static;
+}
+
+.devtools-sidebar-tabs > tabs > tab:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] {
+  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: white !important;
+}
+
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/pinstripe/devtools/dock-bottom.png b/browser/themes/pinstripe/devtools/dock-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..83842f236ef5ede55a268e67077532fc1764746f
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/dock-side.png b/browser/themes/pinstripe/devtools/dock-side.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a940bc1e4e50a63d1522fc5604cb2cf44b05e82
GIT binary patch
literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/dock-window.png b/browser/themes/pinstripe/devtools/dock-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/inspector.css b/browser/themes/pinstripe/devtools/inspector.css
new file mode 100644
index 00000000000..0c105cfe4b3
--- /dev/null
+++ b/browser/themes/pinstripe/devtools/inspector.css
@@ -0,0 +1,229 @@
+%include ../shared.inc
+%filter substitution
+
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#inspector-toolbar {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+#inspector-toolbar:-moz-locale-dir(ltr) {
+  padding-left: 2px;
+  padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
+}
+
+#inspector-toolbar:-moz-locale-dir(rtl) {
+  padding-left: 4px;
+  padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
+}
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin-bottom: -1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  border-style: solid;
+  border-width: 1px 13px 2px 13px;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(208,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(205,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  border-left-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  border-right-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
diff --git a/browser/themes/pinstripe/devtools/layout-background.png b/browser/themes/pinstripe/devtools/layout-background.png
deleted file mode 100644
index 6991cc0f2ab221e7488be16c3f9e4aa4d6228e73..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

diff --git a/browser/themes/pinstripe/devtools/layout-buttons.png b/browser/themes/pinstripe/devtools/layout-buttons.png
deleted file mode 100644
index 8705bc51475de5e6759371cc30a32e67187f455a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

diff --git a/browser/themes/pinstripe/devtools/layoutview.css b/browser/themes/pinstripe/devtools/layoutview.css
index 4d653c5c5e0..552c9841e84 100644
--- a/browser/themes/pinstripe/devtools/layoutview.css
+++ b/browser/themes/pinstripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,17 +42,3 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
-
-#togglebutton {
-  background-image: url(layout-buttons.png);
-  width: 16px;
-  height: 16px;
-}
-
-body.open {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-body.open > #header > #togglebutton {
-  background-position: -16px 0;
-}
diff --git a/browser/themes/pinstripe/devtools/toolbox.css b/browser/themes/pinstripe/devtools/toolbox.css
new file mode 100644
index 00000000000..cb8a8b632a9
--- /dev/null
+++ b/browser/themes/pinstripe/devtools/toolbox.css
@@ -0,0 +1,99 @@
+/* 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/. */
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+#toolbox-dock-bottom {
+  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
+}
+
+#toolbox-dock-side {
+  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
+}
+
+#toolbox-dock-window {
+  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+}
+
+.command-button {
+  margin: 0 10px;
+  width: 16px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#command-button-responsive {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
+}
+#command-button-responsive:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
+}
+#command-button-responsive:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
+}
+#command-button-responsive.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
+}
+
+#command-button-tilt {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
+}
+#command-button-tilt:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
+}
+
+#command-button-tilt:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
+}
+
+#command-button-tilt.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
+}
+
+#command-button-scratchpad {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
+}
+
+#command-button-scratchpad:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
+}
+
+#command-button-scratchpad:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
+}
+
+
+/* Tabs */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  color: hsl(210,30%,85%);
+  padding: 4px 3px 3px;
+  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+}
+
+.devtools-tab {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0 0;
+  color: inherit;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 1px 1px 0;
+  margin: 0 5px;
+  padding: 0 10px 1px;
+}
+
+.devtools-tab[selected=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background-color: rgb(20,20,20);
+  text-shadow: none;
+  color: white;
+}
diff --git a/browser/themes/pinstripe/devtools/treepanel-button.png b/browser/themes/pinstripe/devtools/treepanel-button.png
deleted file mode 100644
index 2a8802216bf178bc05813fc592df30d91cd49415..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn
index 600584c99e5..e69772656f9 100644
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -173,6 +173,9 @@ browser.jar:
 * skin/classic/browser/devtools/common.css                  (devtools/common.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png             (devtools/commandline.png)
+  skin/classic/browser/devtools/command-responsivemode.png  (devtools/command-responsivemode.png)
+  skin/classic/browser/devtools/command-scratchpad.png      (devtools/command-scratchpad.png)
+  skin/classic/browser/devtools/command-tilt.png            (devtools/command-tilt.png)
   skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
@@ -223,11 +226,8 @@ browser.jar:
   skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
   skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png              (devtools/dropmarker.png)
-  skin/classic/browser/devtools/treepanel-button.png        (devtools/treepanel-button.png)
-  skin/classic/browser/devtools/layout-background.png       (devtools/layout-background.png)
   skin/classic/browser/devtools/layout-background-grid.png  (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
-  skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-collapse.png       (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png         (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png          (devtools/debugger-pause.png)
@@ -239,7 +239,12 @@ browser.jar:
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png   (devtools/responsive-background.png)
   skin/classic/browser/devtools/tools-icons-small.png       (devtools/tools-icons-small.png)
+  skin/classic/browser/devtools/dock-bottom.png             (devtools/dock-bottom.png)
+  skin/classic/browser/devtools/dock-side.png               (devtools/dock-side.png)
+  skin/classic/browser/devtools/dock-window.png             (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css     (devtools/floating-scrollbars.css)
+* skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
+* skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css
index b45ccb6932d..96d3b972ad3 100644
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -2652,50 +2652,26 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter */
 
-#highlighter-outline {
+.highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
+.highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Highlighter toolbar */
+/* Developer toolbar */
 
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
 }
 
-#devtools-side-splitter {
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-}
-
-#devtools-sidebar-box {
-  background-color: -moz-Field;
-}
-
 /* Highlighter - Node Infobar */
 
-#highlighter-nodeinfobar {
+.highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -2704,21 +2680,21 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-text {
+.highlighter-nodeinfobar-text {
   /* 100% - size of the buttons and margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*#highlighter-nodeinfobar-tagname {
+html|*.highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*#highlighter-nodeinfobar-id {
+html|*.highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*#highlighter-nodeinfobar-pseudo-classes {
+html|*.highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -2733,7 +2709,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-color: transparent;
 }
 
-#highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -2741,26 +2717,26 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-inspectbutton:active:hover,
-#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+.highlighter-nodeinfobar-inspectbutton:active:hover,
+.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#highlighter-nodeinfobar-menu {
+.highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -2779,7 +2755,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-#highlighter-nodeinfobar-arrow-top {
+.highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -2787,7 +2763,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-#highlighter-nodeinfobar-arrow-bottom {
+.highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -2795,12 +2771,12 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
-#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
+.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -2830,261 +2806,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
-/* Highlighter toolbar - breadcrumbs */
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin: -1px 0;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 1px 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up {
-  -moz-border-start-width: 0;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-width: 2px 13px;
-  outline: none;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > .button-box {
-  border-width: 0;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(200,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(200,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open],
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - HTML Tree */
-
-#inspector-treepanel-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
-  -moz-margin-end: 0;
-  -moz-image-region: rect(0px 18px 16px 0px);
-}
-
-#inspector-treepanel-toolbutton[checked] {
-  -moz-image-region: rect(0px 36px 16px 18px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
-#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
-  border-radius: 3px 0 0 3px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
-#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
-  border-radius: 0 3px 3px 0;
-}
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
-
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -3268,33 +2989,13 @@ html|*#gcli-output-frame {
   background: rgba(0,0,0,.4);
 }
 
-#developer-toolbar-webconsole {
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-#developer-toolbar-inspector {
-  -moz-image-region: rect(16px, 16px, 32px, 0);
-}
-
-#developer-toolbar-styleeditor {
-  -moz-image-region: rect(32px, 16px, 48px, 0);
-}
-
-#developer-toolbar-debugger {
-  -moz-image-region: rect(48px, 16px, 64px, 0);
-}
-
-#developer-toolbar-other-tools {
+#developer-toolbar-toolbox-button {
   -moz-image-region: rect(64px, 16px, 80px, 0);
 }
 
-#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
 /* Error counter */
 
-#developer-toolbar-webconsole[error-count]:before {
+#developer-toolbar-toolbox-button[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/winstripe/devtools/command-responsivemode.png b/browser/themes/winstripe/devtools/command-responsivemode.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbfa599048c1065c7250a5cd74b9684724f3ded3
GIT binary patch
literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/command-scratchpad.png b/browser/themes/winstripe/devtools/command-scratchpad.png
new file mode 100644
index 0000000000000000000000000000000000000000..5131ca5cbc6176c96a66f4a56d81fed95c4c9327
GIT binary patch
literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/command-tilt.png b/browser/themes/winstripe/devtools/command-tilt.png
new file mode 100644
index 0000000000000000000000000000000000000000..f816bba59cedb2fb2069b4d0a4ff09225e99cdb7
GIT binary patch
literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/common.css b/browser/themes/winstripe/devtools/common.css
index 50bb5c02066..89ad2d02ab7 100644
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -209,6 +209,65 @@
   position: relative;
 }
 
+/* In-tools sidebar */
+
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  -moz-appearance: none;
+  padding: 0;
+  border: 0;
+}
+
+.devtools-sidebar-tabs > tabs {
+  -moz-appearance: none;
+  position: static;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  color: hsl(210,30%,85%);
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.devtools-sidebar-tabs > tabs > .tabs-right,
+.devtools-sidebar-tabs > tabs > .tabs-left {
+  display: none;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  -moz-appearance: none;
+  padding: 0;
+  margin: 0;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  text-align: center;
+  color: inherit;
+  -moz-box-flex: 1;
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+  background: transparent;
+  border-radius: 0;
+}
+
+.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
+  position: static;
+}
+
+.devtools-sidebar-tabs > tabs > tab:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] {
+  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: white !important;
+}
+
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/winstripe/devtools/dock-bottom.png b/browser/themes/winstripe/devtools/dock-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..83842f236ef5ede55a268e67077532fc1764746f
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/dock-side.png b/browser/themes/winstripe/devtools/dock-side.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a940bc1e4e50a63d1522fc5604cb2cf44b05e82
GIT binary patch
literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/dock-window.png b/browser/themes/winstripe/devtools/dock-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/inspector.css b/browser/themes/winstripe/devtools/inspector.css
new file mode 100644
index 00000000000..1b47e9f610f
--- /dev/null
+++ b/browser/themes/winstripe/devtools/inspector.css
@@ -0,0 +1,218 @@
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+/* Highlighter toolbar - breadcrumbs */
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin: -1px 0;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 1px 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 2px 13px;
+  outline: none;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > .button-box {
+  border-width: 0;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(200,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(200,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  border-left-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  border-right-width: 0;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
+}
diff --git a/browser/themes/winstripe/devtools/layout-background.png b/browser/themes/winstripe/devtools/layout-background.png
deleted file mode 100644
index 6991cc0f2ab221e7488be16c3f9e4aa4d6228e73..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

diff --git a/browser/themes/winstripe/devtools/layout-buttons.png b/browser/themes/winstripe/devtools/layout-buttons.png
deleted file mode 100644
index 8705bc51475de5e6759371cc30a32e67187f455a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

diff --git a/browser/themes/winstripe/devtools/layoutview.css b/browser/themes/winstripe/devtools/layoutview.css
index 4d653c5c5e0..552c9841e84 100644
--- a/browser/themes/winstripe/devtools/layoutview.css
+++ b/browser/themes/winstripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,17 +42,3 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
-
-#togglebutton {
-  background-image: url(layout-buttons.png);
-  width: 16px;
-  height: 16px;
-}
-
-body.open {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-body.open > #header > #togglebutton {
-  background-position: -16px 0;
-}
diff --git a/browser/themes/winstripe/devtools/toolbox.css b/browser/themes/winstripe/devtools/toolbox.css
new file mode 100644
index 00000000000..dae0d34be44
--- /dev/null
+++ b/browser/themes/winstripe/devtools/toolbox.css
@@ -0,0 +1,103 @@
+/* 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/. */
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+#toolbox-dock-bottom {
+  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
+}
+
+#toolbox-dock-side {
+  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
+}
+
+#toolbox-dock-window {
+  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+}
+
+.command-button {
+  margin: 0 10px;
+  width: 16px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#command-button-responsive {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
+}
+#command-button-responsive:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
+}
+#command-button-responsive:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
+}
+#command-button-responsive.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
+}
+
+#command-button-tilt {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
+}
+#command-button-tilt:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
+}
+
+#command-button-tilt:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
+}
+
+#command-button-tilt.toggled {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
+}
+
+#command-button-scratchpad {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
+}
+
+#command-button-scratchpad:hover {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
+}
+
+#command-button-scratchpad:hover:active {
+  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
+}
+
+
+/* Tabs */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  background-image: linear-gradient(to bottom, hsl(209,18%,34%), hsl(210,24%,16%));
+  color: hsl(210,30%,85%);
+  padding: 4px 3px 3px;
+  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+}
+
+.devtools-tab {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: 3px 3px 0 0;
+  color: inherit;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 1px 1px 0;
+  margin: 0 5px;
+  padding: 0 10px 1px;
+}
+
+.devtools-tab[selected=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background-color: rgb(20,20,20);
+  text-shadow: none;
+  color: white;
+}
+
+.devtools-tab > .radio-label-box {
+  -moz-margin-start: 0px
+}
diff --git a/browser/themes/winstripe/devtools/treepanel-button.png b/browser/themes/winstripe/devtools/treepanel-button.png
deleted file mode 100644
index 2a8802216bf178bc05813fc592df30d91cd49415..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn
index efa829dced6..7cfbef7ca4f 100644
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -133,7 +133,10 @@ browser.jar:
         skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
         skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
-        skin/classic/browser/devtools/commandline.css                      (devtools/commandline.css)
+        skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
+        skin/classic/browser/devtools/command-responsivemode.png    (devtools/command-responsivemode.png)
+        skin/classic/browser/devtools/command-scratchpad.png        (devtools/command-scratchpad.png)
+        skin/classic/browser/devtools/command-tilt.png              (devtools/command-tilt.png)
         skin/classic/browser/devtools/markup-view.css               (devtools/markup-view.css)
         skin/classic/browser/devtools/orion.css                     (devtools/orion.css)
         skin/classic/browser/devtools/orion-container.css           (devtools/orion-container.css)
@@ -179,11 +182,8 @@ browser.jar:
         skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
         skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
         skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
-        skin/classic/browser/devtools/treepanel-button.png          (devtools/treepanel-button.png)
-        skin/classic/browser/devtools/layout-background.png         (devtools/layout-background.png)
         skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
         skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
-        skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
         skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
         skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
         skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
@@ -195,7 +195,12 @@ browser.jar:
         skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
         skin/classic/browser/devtools/tools-icons-small.png         (devtools/tools-icons-small.png)
+        skin/classic/browser/devtools/dock-bottom.png               (devtools/dock-bottom.png)
+        skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.png)
+        skin/classic/browser/devtools/dock-window.png               (devtools/dock-window.png)
         skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
+        skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
+        skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -337,10 +342,13 @@ browser.jar:
         skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
+        skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
+        skin/classic/aero/browser/devtools/command-scratchpad.png    (devtools/command-scratchpad.png)
+        skin/classic/aero/browser/devtools/command-tilt.png          (devtools/command-tilt.png)
         skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
         skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
-        skin/classic/aero/browser/devtools/commandline.css                  (devtools/commandline.css)
+        skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)
         skin/classic/aero/browser/devtools/markup-view.css           (devtools/markup-view.css)
         skin/classic/aero/browser/devtools/orion.css                 (devtools/orion.css)
         skin/classic/aero/browser/devtools/orion-container.css       (devtools/orion-container.css)
@@ -386,11 +394,8 @@ browser.jar:
         skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
         skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
         skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
-        skin/classic/aero/browser/devtools/treepanel-button.png      (devtools/treepanel-button.png)
-        skin/classic/aero/browser/devtools/layout-background.png     (devtools/layout-background.png)
         skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
         skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
-        skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
         skin/classic/aero/browser/devtools/debugger-collapse.png     (devtools/debugger-collapse.png)
         skin/classic/aero/browser/devtools/debugger-expand.png       (devtools/debugger-expand.png)
         skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
@@ -402,7 +407,12 @@ browser.jar:
         skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
         skin/classic/aero/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
+        skin/classic/aero/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
+        skin/classic/aero/browser/devtools/dock-side.png             (devtools/dock-side.png)
+        skin/classic/aero/browser/devtools/dock-window.png           (devtools/dock-window.png)
         skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
+        skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
+        skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png
diff --git a/toolkit/devtools/webconsole/WebConsoleUtils.jsm b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
index a3422a8827a..af5763e6e3f 100644
--- a/toolkit/devtools/webconsole/WebConsoleUtils.jsm
+++ b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
@@ -28,6 +28,12 @@ XPCOMUtils.defineLazyServiceGetter(this, "gActivityDistributor",
                                    "@mozilla.org/network/http-activity-distributor;1",
                                    "nsIHttpActivityDistributor");
 
+XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+                                  "resource:///modules/devtools/Target.jsm");
+
 this.EXPORTED_SYMBOLS = ["WebConsoleUtils", "JSPropertyProvider", "JSTermHelpers",
                          "PageErrorListener", "ConsoleAPIListener",
                          "NetworkResponseListener", "NetworkMonitor",
@@ -1564,7 +1570,12 @@ this.JSTermHelpers = function JSTermHelpers(aOwner)
   Object.defineProperty(aOwner.sandbox, "$0", {
     get: function() {
       try {
-        return aOwner.chromeWindow().InspectorUI.selection;
+        let window = aOwner.chromeWindow();
+        let target = TargetFactory.forTab(window.gBrowser.selectedTab);
+        let panel = gDevTools.getPanelForTarget("inspector", target);
+        if (panel) {
+          return panel.selection.node;
+        }
       }
       catch (ex) {
         aOwner.window.console.error(ex.message);

From 56de5038ccc462021f69fe94dedd9f137e61a467 Mon Sep 17 00:00:00 2001
From: Blair McBride <bmcbride@mozilla.com>
Date: Tue, 27 Nov 2012 16:40:00 +1300
Subject: [PATCH 2/8] Bug 806534 - Support regular expressions in extension id
 for blocklist entries. r=Mossop

---
 .../mozapps/extensions/nsBlocklistService.js  |  67 ++++--
 .../addons/blocklist_regexp1_1/install.rdf    |  19 ++
 .../addons/blocklist_regexp1_2/install.rdf    |  19 ++
 .../addons/blocklist_regexp1_3/install.rdf    |  19 ++
 .../data/blocklistchange/addon_change.xml     |   7 +
 .../data/blocklistchange/addon_update1.rdf    |  20 ++
 .../data/blocklistchange/addon_update2.rdf    |  20 ++
 .../data/blocklistchange/addon_update3.rdf    |  20 ++
 .../data/blocklistchange/app_update.xml       |  14 ++
 .../blocklistchange/blocklist_update2.xml     |   4 +
 .../data/blocklistchange/manual_update.xml    |   3 +
 .../xpcshell/data/test_blocklist_regexp_1.xml |  20 ++
 .../test/xpcshell/test_blocklist_regexp.js    | 123 ++++++++++
 .../test/xpcshell/test_blocklistchange.js     | 213 +++++++++++++-----
 .../extensions/test/xpcshell/xpcshell.ini     |   2 +
 15 files changed, 496 insertions(+), 74 deletions(-)
 create mode 100644 toolkit/mozapps/extensions/test/addons/blocklist_regexp1_1/install.rdf
 create mode 100644 toolkit/mozapps/extensions/test/addons/blocklist_regexp1_2/install.rdf
 create mode 100644 toolkit/mozapps/extensions/test/addons/blocklist_regexp1_3/install.rdf
 create mode 100644 toolkit/mozapps/extensions/test/xpcshell/data/test_blocklist_regexp_1.xml
 create mode 100644 toolkit/mozapps/extensions/test/xpcshell/test_blocklist_regexp.js

diff --git a/toolkit/mozapps/extensions/nsBlocklistService.js b/toolkit/mozapps/extensions/nsBlocklistService.js
index e7735cba175..a33262bb4c5 100644
--- a/toolkit/mozapps/extensions/nsBlocklistService.js
+++ b/toolkit/mozapps/extensions/nsBlocklistService.js
@@ -239,6 +239,22 @@ function getDistributionPrefValue(aPrefName) {
   return prefValue;
 }
 
+/**
+ * Parse a string representation of a regular expression. Needed because we
+ * use the /pattern/flags form (because it's detectable), which is only
+ * supported as a literal in JS.
+ *
+ * @param  aStr
+ *         String representation of regexp
+ * @return RegExp instance
+ */
+function parseRegExp(aStr) {
+  let lastSlash = aStr.lastIndexOf("/");
+  let pattern = aStr.slice(1, lastSlash);
+  let flags = aStr.slice(lastSlash + 1);
+  return new RegExp(pattern, flags);
+}
+
 /**
  * Manages the Blocklist. The Blocklist is a representation of the contents of
  * blocklist.xml and allows us to remotely disable / re-enable blocklisted
@@ -342,11 +358,11 @@ Blocklist.prototype = {
     if (!toolkitVersion)
       toolkitVersion = gApp.platformVersion;
 
-    var blItem = addonEntries[id];
+    var blItem = this._findMatchingAddonEntry(addonEntries, id);
     if (!blItem)
       return Ci.nsIBlocklistService.STATE_NOT_BLOCKED;
 
-    for (let currentblItem of blItem) {
+    for (let currentblItem of blItem.versions) {
       if (currentblItem.includesItem(version, appVersion, toolkitVersion))
         return currentblItem.severity >= gBlocklistLevel ? Ci.nsIBlocklistService.STATE_BLOCKED :
                                                        Ci.nsIBlocklistService.STATE_SOFTBLOCKED;
@@ -354,6 +370,19 @@ Blocklist.prototype = {
     return Ci.nsIBlocklistService.STATE_NOT_BLOCKED;
   },
 
+  _findMatchingAddonEntry: function Blocklist_findMatchingAddonEntry(aAddonEntries,
+                                                                     aId) {
+    for (let entry of aAddonEntries) {
+      if (entry.id instanceof RegExp) {
+        if (entry.id.test(aId))
+          return entry;
+      } else if (entry.id == aId) {
+        return entry;
+      }
+    }
+    return null;
+  },
+
   /* See nsIBlocklistService */
   getAddonBlocklistURL: function Blocklist_getAddonBlocklistURL(id, version, appVersion, toolkitVersion) {
     if (!gBlocklistEnabled)
@@ -362,7 +391,7 @@ Blocklist.prototype = {
     if (!this._addonEntries)
       this._loadBlocklist();
 
-    let blItem = this._addonEntries[id];
+    let blItem = this._findMatchingAddonEntry(this._addonEntries, id);
     if (!blItem || !blItem.blockID)
       return null;
 
@@ -516,8 +545,8 @@ Blocklist.prototype = {
 
     var oldAddonEntries = this._addonEntries;
     var oldPluginEntries = this._pluginEntries;
-    this._addonEntries = { };
-    this._pluginEntries = { };
+    this._addonEntries = [];
+    this._pluginEntries = [];
     this._loadBlocklistFromFile(FileUtils.getFile(KEY_PROFILEDIR,
                                                   [FILE_BLOCKLIST]));
 
@@ -551,8 +580,8 @@ Blocklist.prototype = {
    * load it or does nothing if neither exist.
    */
   _loadBlocklist: function Blocklist_loadBlocklist() {
-    this._addonEntries = { };
-    this._pluginEntries = { };
+    this._addonEntries = [];
+    this._pluginEntries = [];
     var profFile = FileUtils.getFile(KEY_PROFILEDIR, [FILE_BLOCKLIST]);
     if (profFile.exists()) {
       this._loadBlocklistFromFile(profFile);
@@ -606,7 +635,7 @@ Blocklist.prototype = {
 #              <versionRange minVersion="1.5" maxVersion="1.5.*"/>
 #            </targetApplication>
 #          </versionRange>
-#        <emItem id="item_5@domain"/>
+#        <emItem id="/@badperson\.com$/"/>
 #      </emItems>
 #      <pluginItems>
 #        <pluginItem blockID="i4">
@@ -688,23 +717,35 @@ Blocklist.prototype = {
     if (!matchesOSABI(blocklistElement))
       return;
 
+    let blockEntry = {
+      id: null,
+      versions: [],
+      blockID: null
+    };
+
     var versionNodes = blocklistElement.childNodes;
     var id = blocklistElement.getAttribute("id");
-    result[id] = [];
+    // Add-on IDs cannot contain '/', so an ID starting with '/' must be a regex
+    if (id.startsWith("/"))
+      id = parseRegExp(id);
+    blockEntry.id = id;
+
     for (var x = 0; x < versionNodes.length; ++x) {
       var versionRangeElement = versionNodes.item(x);
       if (!(versionRangeElement instanceof Ci.nsIDOMElement) ||
           versionRangeElement.localName != "versionRange")
         continue;
 
-      result[id].push(new BlocklistItemData(versionRangeElement));
+      blockEntry.versions.push(new BlocklistItemData(versionRangeElement));
     }
     // if only the extension ID is specified block all versions of the
     // extension for the current application.
-    if (result[id].length == 0)
-      result[id].push(new BlocklistItemData(null));
+    if (blockEntry.versions.length == 0)
+      blockEntry.versions.push(new BlocklistItemData(null));
 
-    result[id].blockID = blocklistElement.getAttribute("blockID");
+    blockEntry.blockID = blocklistElement.getAttribute("blockID");
+
+    result.push(blockEntry);
   },
 
   _handlePluginItemNode: function Blocklist_handlePluginItemNode(blocklistElement, result) {
diff --git a/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_1/install.rdf b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_1/install.rdf
new file mode 100644
index 00000000000..fd3b25ed7c0
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_1/install.rdf
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>regexpblock@tests.mozilla.org</em:id>
+    <em:version>1.0</em:version>
+    <em:name>RegExp-blocked add-on</em:name>
+    <em:updateURL>http://localhost:4444/data/addon_update1.rdf</em:updateURL>
+    <em:targetApplication>
+      <Description>
+        <em:id>xpcshell@tests.mozilla.org</em:id>
+        <em:minVersion>1</em:minVersion>
+        <em:maxVersion>3</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+  </Description>
+</RDF>
diff --git a/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_2/install.rdf b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_2/install.rdf
new file mode 100644
index 00000000000..3325bd7a3ec
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_2/install.rdf
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>regexpblock@tests.mozilla.org</em:id>
+    <em:version>2.0</em:version>
+    <em:name>RegExp-blocked add-on</em:name>
+    <em:updateURL>http://localhost:4444/data/addon_update2.rdf</em:updateURL>
+    <em:targetApplication>
+      <Description>
+        <em:id>xpcshell@tests.mozilla.org</em:id>
+        <em:minVersion>1</em:minVersion>
+        <em:maxVersion>3</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+  </Description>
+</RDF>
diff --git a/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_3/install.rdf b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_3/install.rdf
new file mode 100644
index 00000000000..5ddf66c8f75
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/addons/blocklist_regexp1_3/install.rdf
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>regexpblock@tests.mozilla.org</em:id>
+    <em:version>3.0</em:version>
+    <em:name>RegExp-blocked add-on</em:name>
+    <em:updateURL>http://localhost:4444/data/addon_update3.rdf</em:updateURL>
+    <em:targetApplication>
+      <Description>
+        <em:id>xpcshell@tests.mozilla.org</em:id>
+        <em:minVersion>1</em:minVersion>
+        <em:maxVersion>3</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+  </Description>
+</RDF>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_change.xml b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_change.xml
index 374c353183e..a229a653a10 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_change.xml
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_change.xml
@@ -20,5 +20,12 @@
     <emItem id="hardblock@tests.mozilla.org">
       <versionRange minVersion="2" maxVersion="3"/>
     </emItem>
+    <!-- Two RegExp matches, so test flags work - first shouldn't match. -->
+    <emItem id="/^RegExp/">
+      <versionRange severity="1" minVersion="2" maxVersion="3"/>
+    </emItem>
+    <emItem id="/^RegExp/i">
+      <versionRange severity="2" minVersion="2" maxVersion="3"/>
+    </emItem>
   </emItems>
 </blocklist>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update1.rdf b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update1.rdf
index 55f510e16bb..1b55ccfab26 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update1.rdf
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update1.rdf
@@ -121,4 +121,24 @@
       </RDF:Seq>
     </em:updates>
   </RDF:Description>
+
+  <RDF:Description about="urn:mozilla:extension:regexpblock@tests.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+        <RDF:li>
+          <RDF:Description>
+            <em:version>2</em:version>
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>toolkit@mozilla.org</em:id>
+                <em:minVersion>0</em:minVersion>
+                <em:maxVersion>*</em:maxVersion>
+                <em:updateLink>http://localhost:4444/addons/blocklist_regexp1_2.xpi</em:updateLink>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+      </RDF:Seq>
+    </em:updates>
+  </RDF:Description>
 </RDF:RDF>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update2.rdf b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update2.rdf
index 0722a49bdc6..a5be8a6f54f 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update2.rdf
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update2.rdf
@@ -121,4 +121,24 @@
       </RDF:Seq>
     </em:updates>
   </RDF:Description>
+
+  <RDF:Description about="urn:mozilla:extension:regexpblock@tests.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+        <RDF:li>
+          <RDF:Description>
+            <em:version>3</em:version>
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>toolkit@mozilla.org</em:id>
+                <em:minVersion>0</em:minVersion>
+                <em:maxVersion>*</em:maxVersion>
+                <em:updateLink>http://localhost:4444/addons/blocklist_regexp1_3.xpi</em:updateLink>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+      </RDF:Seq>
+    </em:updates>
+  </RDF:Description>
 </RDF:RDF>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update3.rdf b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update3.rdf
index a13e47a470d..fe1a39b479b 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update3.rdf
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/addon_update3.rdf
@@ -121,4 +121,24 @@
       </RDF:Seq>
     </em:updates>
   </RDF:Description>
+
+  <RDF:Description about="urn:mozilla:extension:regexpblock@tests.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+        <RDF:li>
+          <RDF:Description>
+            <em:version>4</em:version>
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>toolkit@mozilla.org</em:id>
+                <em:minVersion>0</em:minVersion>
+                <em:maxVersion>*</em:maxVersion>
+                <em:updateLink>http://localhost:4444/addons/blocklist_regexp1_1.xpi</em:updateLink>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+      </RDF:Seq>
+    </em:updates>
+  </RDF:Description>
 </RDF:RDF>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/app_update.xml b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/app_update.xml
index 43fea570d09..85a66fe5555 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/app_update.xml
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/app_update.xml
@@ -44,5 +44,19 @@
         </targetApplication>
       </versionRange>
     </emItem>
+    <emItem id="/^RegExp/">
+      <versionRange severity="1">
+        <targetApplication id="xpcshell@tests.mozilla.org">
+          <versionRange minVersion="2" maxVersion="2.*"/>
+        </targetApplication>
+      </versionRange>
+    </emItem>
+    <emItem id="/^RegExp/i">
+      <versionRange>
+        <targetApplication id="xpcshell@tests.mozilla.org">
+          <versionRange minVersion="2" maxVersion="2.*"/>
+        </targetApplication>
+      </versionRange>
+    </emItem>
   </emItems>
 </blocklist>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/blocklist_update2.xml b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/blocklist_update2.xml
index 8b1a0f676bb..867a34255b7 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/blocklist_update2.xml
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/blocklist_update2.xml
@@ -18,5 +18,9 @@
       <versionRange severity="1"/>
     </emItem>
     <emItem id="hardblock@tests.mozilla.org"/>
+    <emItem id="/^RegExp/">
+      <versionRange severity="1"/>
+    </emItem>
+    <emItem id="/^RegExp/i"/>
   </emItems>
 </blocklist>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/manual_update.xml b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/manual_update.xml
index dd82aaf144a..df9276525b6 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/manual_update.xml
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/blocklistchange/manual_update.xml
@@ -20,5 +20,8 @@
     <emItem id="hardblock@tests.mozilla.org">
       <versionRange minVersion="1" maxVersion="2"/>
     </emItem>
+    <emItem id="/^RegExp/i">
+      <versionRange minVersion="1" maxVersion="2"/>
+    </emItem>
   </emItems>
 </blocklist>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/data/test_blocklist_regexp_1.xml b/toolkit/mozapps/extensions/test/xpcshell/data/test_blocklist_regexp_1.xml
new file mode 100644
index 00000000000..20035c6a2ed
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/xpcshell/data/test_blocklist_regexp_1.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<blocklist xmlns="http://www.mozilla.org/2006/addons-blocklist">
+  <emItems>
+    <emItem id="/block1/">
+      <versionRange severity="1">
+        <targetApplication id="xpcshell@tests.mozilla.org">
+          <versionRange minVersion="1" maxVersion="2.*"/>
+        </targetApplication>
+      </versionRange>
+    </emItem>
+    <emItem id="/block1/">
+      <versionRange severity="2">
+        <targetApplication id="xpcshell@tests.mozilla.org">
+          <versionRange minVersion="1" maxVersion="2.*"/>
+        </targetApplication>
+      </versionRange>
+    </emItem>
+  </emItems>
+</blocklist>
diff --git a/toolkit/mozapps/extensions/test/xpcshell/test_blocklist_regexp.js b/toolkit/mozapps/extensions/test/xpcshell/test_blocklist_regexp.js
new file mode 100644
index 00000000000..dde62dd3e04
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/xpcshell/test_blocklist_regexp.js
@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Checks that blocklist entries using RegExp work as expected. This only covers
+// behavior specific to RegExp entries - general behavior is already tested 
+// in test_blocklistchange.js.
+
+const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
+
+const URI_EXTENSION_BLOCKLIST_DIALOG = "chrome://mozapps/content/extensions/blocklist.xul";
+
+Cu.import("resource://testing-common/httpd.js");
+var testserver;
+
+const profileDir = gProfD.clone();
+profileDir.append("extensions");
+
+// Don't need the full interface, attempts to call other methods will just
+// throw which is just fine
+var WindowWatcher = {
+  openWindow: function(parent, url, name, features, arguments) {
+    // Should be called to list the newly blocklisted items
+    do_check_eq(url, URI_EXTENSION_BLOCKLIST_DIALOG);
+
+    // Simulate auto-disabling any softblocks
+    var list = arguments.wrappedJSObject.list;
+    list.forEach(function(aItem) {
+      if (!aItem.blocked)
+        aItem.disable = true;
+    });
+
+    //run the code after the blocklist is closed
+    Services.obs.notifyObservers(null, "addon-blocklist-closed", null);
+
+  },
+
+  QueryInterface: function(iid) {
+    if (iid.equals(Ci.nsIWindowWatcher)
+     || iid.equals(Ci.nsISupports))
+      return this;
+
+    throw Cr.NS_ERROR_NO_INTERFACE;
+  }
+};
+
+var WindowWatcherFactory = {
+  createInstance: function createInstance(outer, iid) {
+    if (outer != null)
+      throw Cr.NS_ERROR_NO_AGGREGATION;
+    return WindowWatcher.QueryInterface(iid);
+  }
+};
+
+var registrar = Components.manager.QueryInterface(Ci.nsIComponentRegistrar);
+registrar.registerFactory(Components.ID("{1dfeb90a-2193-45d5-9cb8-864928b2af55}"),
+                          "Fake Window Watcher",
+                          "@mozilla.org/embedcomp/window-watcher;1",
+                          WindowWatcherFactory);
+
+
+function load_blocklist(aFile, aCallback) {
+  Services.obs.addObserver(function() {
+    Services.obs.removeObserver(arguments.callee, "blocklist-updated");
+
+    do_execute_soon(aCallback);
+  }, "blocklist-updated", false);
+
+  Services.prefs.setCharPref("extensions.blocklist.url", "http://localhost:4444/data/" + aFile);
+  var blocklist = Cc["@mozilla.org/extensions/blocklist;1"].
+                  getService(Ci.nsITimerCallback);
+  blocklist.notify(null);
+}
+
+
+function end_test() {
+  testserver.stop(do_test_finished);
+}
+
+
+function run_test() {
+  testserver = new HttpServer();
+  testserver.registerDirectory("/data/", do_get_file("data"));
+  testserver.start(4444);
+
+  do_test_pending();
+
+  createAppInfo("xpcshell@tests.mozilla.org", "XPCShell", "1", "1");
+
+  writeInstallRDFForExtension({
+    id: "block1@tests.mozilla.org",
+    version: "1.0",
+    name: "RegExp blocked add-on",
+    targetApplications: [{
+      id: "xpcshell@tests.mozilla.org",
+      minVersion: "1",
+      maxVersion: "3"
+    }]
+  }, profileDir);
+
+  startupManager();
+
+  AddonManager.getAddonsByIDs(["block1@tests.mozilla.org"], function([a1]) {
+    do_check_eq(a1.blocklistState, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+
+    run_test_1();
+  });
+}
+
+function run_test_1() {
+  load_blocklist("test_blocklist_regexp_1.xml", function() {
+    restartManager();
+
+    AddonManager.getAddonsByIDs(["block1@tests.mozilla.org"], function([a1]) {
+      // Blocklist contains two entries that will match this addon - ensure
+      // that the first one is applied.
+      do_check_neq(a1, null);
+      do_check_eq(a1.blocklistState, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
+
+      end_test();
+    });
+  });
+}
diff --git a/toolkit/mozapps/extensions/test/xpcshell/test_blocklistchange.js b/toolkit/mozapps/extensions/test/xpcshell/test_blocklistchange.js
index 05a857d1cd7..a9044165a93 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/test_blocklistchange.js
+++ b/toolkit/mozapps/extensions/test/xpcshell/test_blocklistchange.js
@@ -273,12 +273,49 @@ var hardblock_3 = {
   }]
 };
 
+var regexpblock_1 = {
+  id: "regexpblock@tests.mozilla.org",
+  version: "1.0",
+  name: "RegExp-blocked add-on",
+  updateURL: "http://localhost:4444/data/addon_update1.rdf",
+  targetApplications: [{
+    id: "xpcshell@tests.mozilla.org",
+    minVersion: "1",
+    maxVersion: "3"
+  }]
+};
+
+var regexpblock_2 = {
+  id: "regexpblock@tests.mozilla.org",
+  version: "2.0",
+  name: "RegExp-blocked add-on",
+  updateURL: "http://localhost:4444/data/addon_update2.rdf",
+  targetApplications: [{
+    id: "xpcshell@tests.mozilla.org",
+    minVersion: "1",
+    maxVersion: "3"
+  }]
+};
+
+var regexpblock_3 = {
+  id: "regexpblock@tests.mozilla.org",
+  version: "3.0",
+  name: "RegExp-blocked add-on",
+  updateURL: "http://localhost:4444/data/addon_update3.rdf",
+  targetApplications: [{
+    id: "xpcshell@tests.mozilla.org",
+    minVersion: "1",
+    maxVersion: "3"
+  }]
+};
+
 const ADDON_IDS = ["softblock1@tests.mozilla.org",
                    "softblock2@tests.mozilla.org",
                    "softblock3@tests.mozilla.org",
                    "softblock4@tests.mozilla.org",
                    "softblock5@tests.mozilla.org",
-                   "hardblock@tests.mozilla.org"];
+                   "hardblock@tests.mozilla.org",
+                   "regexpblock@tests.mozilla.org"];
 
 // Don't need the full interface, attempts to call other methods will just
 // throw which is just fine
@@ -428,42 +465,46 @@ function manual_update(aVersion, aCallback) {
             AddonManager.getInstallForURL("http://localhost:4444/addons/blocklist_hard1_" + aVersion + ".xpi",
                                           function(aInstall) {
               installs.push(aInstall);
+              AddonManager.getInstallForURL("http://localhost:4444/addons/blocklist_regexp1_" + aVersion + ".xpi",
+                                            function(aInstall) {
+                installs.push(aInstall);
 
-              Services.obs.addObserver(function(aSubject, aTopic, aData) {
-                Services.obs.removeObserver(arguments.callee, "addon-install-blocked");
+                Services.obs.addObserver(function(aSubject, aTopic, aData) {
+                  Services.obs.removeObserver(arguments.callee, "addon-install-blocked");
 
-                aSubject.QueryInterface(Ci.amIWebInstallInfo);
+                  aSubject.QueryInterface(Ci.amIWebInstallInfo);
 
-                var installCount = aSubject.installs.length;
+                  var installCount = aSubject.installs.length;
 
-                var listener = {
-                  installComplete: function() {
-                    installCount--;
-                    if (installCount)
-                      return;
+                  var listener = {
+                    installComplete: function() {
+                      installCount--;
+                      if (installCount)
+                        return;
 
-                    do_execute_soon(aCallback);
-                  },
+                      do_execute_soon(aCallback);
+                    },
 
-                  onDownloadCancelled: function(aInstall) {
-                    this.installComplete();
-                  },
+                    onDownloadCancelled: function(aInstall) {
+                      this.installComplete();
+                    },
 
-                  onInstallEnded: function(aInstall) {
-                    this.installComplete();
-                  }
-                };
+                    onInstallEnded: function(aInstall) {
+                      this.installComplete();
+                    }
+                  };
 
-                aSubject.installs.forEach(function(aInstall) {
-                  aInstall.addListener(listener);
-                });
+                  aSubject.installs.forEach(function(aInstall) {
+                    aInstall.addListener(listener);
+                  });
 
-                aSubject.install();
-              }, "addon-install-blocked", false);
+                  aSubject.install();
+                }, "addon-install-blocked", false);
 
-              AddonManager.installAddonsFromWebpage("application/x-xpinstall", null,
-                                                    NetUtil.newURI("http://localhost:4444/"),
-                                                    installs);
+                AddonManager.installAddonsFromWebpage("application/x-xpinstall", null,
+                                                      NetUtil.newURI("http://localhost:4444/"),
+                                                      installs);
+              }, "application/x-xpinstall");
             }, "application/x-xpinstall");
           }, "application/x-xpinstall");
         }, "application/x-xpinstall");
@@ -480,6 +521,7 @@ function check_addon(aAddon, aExpectedVersion, aExpectedUserDisabled,
 
   do_check_neq(aAddon, null);
   do_check_eq(aAddon.version, aExpectedVersion);
+  do_check_eq(aAddon.blocklistState, aExpectedState);
   do_check_eq(aAddon.userDisabled, aExpectedUserDisabled);
   do_check_eq(aAddon.softDisabled, aExpectedSoftDisabled);
   if (aAddon.softDisabled)
@@ -499,7 +541,6 @@ function check_addon(aAddon, aExpectedVersion, aExpectedUserDisabled,
       do_check_true(hasFlag(aAddon.permissions, AddonManager.PERM_CAN_DISABLE));
   }
   do_check_eq(aAddon.appDisabled, aExpectedState == Ci.nsIBlocklistService.STATE_BLOCKED);
-  do_check_eq(aAddon.blocklistState, aExpectedState);
 
   let willBeActive = aAddon.isActive;
   if (hasFlag(aAddon.pendingOperations, AddonManager.PENDING_DISABLE))
@@ -532,9 +573,10 @@ function run_test() {
   writeInstallRDFForExtension(softblock4_1, profileDir);
   writeInstallRDFForExtension(softblock5_1, profileDir);
   writeInstallRDFForExtension(hardblock_1, profileDir);
+  writeInstallRDFForExtension(regexpblock_1, profileDir);
   startupManager();
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
     s4.userDisabled = true;
     s5.userDisabled = false;
     restartManager();
@@ -554,7 +596,7 @@ function run_app_update_test() {
   load_blocklist("app_update.xml", function() {
     restartManager();
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -562,11 +604,12 @@ function run_app_update_test() {
       check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+      check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "test/1.0");
 
       restartManager("2");
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -574,6 +617,7 @@ function run_app_update_test() {
         check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
         do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
         s2.userDisabled = false;
@@ -585,7 +629,7 @@ function run_app_update_test() {
 
         restartManager("2.5");
 
-        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
           check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -593,11 +637,12 @@ function run_app_update_test() {
           check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+          check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
           do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
           restartManager("1");
 
-          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
             check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -605,6 +650,7 @@ function run_app_update_test() {
             check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+            check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
             s1.userDisabled = false;
@@ -625,7 +671,7 @@ function run_app_update_schema_test() {
   dump(arguments.callee.name + "\n");
   restartManager();
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
     check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -633,6 +679,7 @@ function run_app_update_schema_test() {
     check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+    check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "test/1.0");
 
     shutdownManager();
@@ -644,7 +691,7 @@ function run_app_update_schema_test() {
     gAppInfo.version = "2";
     startupManager(true);
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -652,6 +699,7 @@ function run_app_update_schema_test() {
       check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+      check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
       do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
       s2.userDisabled = false;
@@ -670,7 +718,7 @@ function run_app_update_schema_test() {
       gAppInfo.version = "2.5";
       startupManager(true);
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -678,6 +726,7 @@ function run_app_update_schema_test() {
         check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
         do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
         shutdownManager();
@@ -688,7 +737,7 @@ function run_app_update_schema_test() {
         db.close();
         startupManager(false);
 
-        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
           check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -696,6 +745,7 @@ function run_app_update_schema_test() {
           check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+          check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
           do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
           shutdownManager();
@@ -707,7 +757,7 @@ function run_app_update_schema_test() {
           gAppInfo.version = "1";
           startupManager(true);
 
-          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
             check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -715,6 +765,7 @@ function run_app_update_schema_test() {
             check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+            check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
             s1.userDisabled = false;
@@ -735,7 +786,7 @@ function run_blocklist_update_test() {
   load_blocklist("blocklist_update1.xml", function() {
     restartManager();
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -743,12 +794,13 @@ function run_blocklist_update_test() {
       check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+      check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "test/1.0");
 
       load_blocklist("blocklist_update2.xml", function() {
         restartManager();
 
-        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
           check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -756,6 +808,7 @@ function run_blocklist_update_test() {
           check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+          check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
           do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
           s2.userDisabled = false;
@@ -768,7 +821,7 @@ function run_blocklist_update_test() {
           load_blocklist("blocklist_update2.xml", function() {
             restartManager();
 
-            AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+            AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
               check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
               check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -776,12 +829,13 @@ function run_blocklist_update_test() {
               check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
               check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
               check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+              check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
               do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
               load_blocklist("blocklist_update1.xml", function() {
                 restartManager();
 
-                AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+                AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
                   check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
                   check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -789,6 +843,7 @@ function run_blocklist_update_test() {
                   check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
                   check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
                   check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+                  check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
                   do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
                   s1.userDisabled = false;
@@ -812,7 +867,7 @@ function run_addon_change_test() {
   load_blocklist("addon_change.xml", function() {
     restartManager();
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -820,6 +875,7 @@ function run_addon_change_test() {
       check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+      check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
       do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "test/1.0");
 
       shutdownManager();
@@ -836,10 +892,12 @@ function run_addon_change_test() {
       setExtensionModifiedTime(getFileForAddon(profileDir, softblock5_2.id), Date.now() + 10000);
       writeInstallRDFForExtension(hardblock_2, profileDir);
       setExtensionModifiedTime(getFileForAddon(profileDir, hardblock_2.id), Date.now() + 10000);
+      writeInstallRDFForExtension(regexpblock_2, profileDir);
+      setExtensionModifiedTime(getFileForAddon(profileDir, regexpblock_2.id), Date.now() + 10000);
 
       startupManager(false);
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s2, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -847,6 +905,7 @@ function run_addon_change_test() {
         check_addon(s4, "2.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s5, "2.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(h, "2.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+        check_addon(r, "2.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
         do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
         s2.userDisabled = false;
@@ -870,10 +929,12 @@ function run_addon_change_test() {
         setExtensionModifiedTime(getFileForAddon(profileDir, softblock5_3.id), Date.now() + 20000);
         writeInstallRDFForExtension(hardblock_3, profileDir);
         setExtensionModifiedTime(getFileForAddon(profileDir, hardblock_3.id), Date.now() + 20000);
+        writeInstallRDFForExtension(regexpblock_3, profileDir);
+        setExtensionModifiedTime(getFileForAddon(profileDir, regexpblock_3.id), Date.now() + 20000);
 
         startupManager(false);
 
-        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
           check_addon(s1, "3.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s2, "3.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -881,6 +942,7 @@ function run_addon_change_test() {
           check_addon(s4, "3.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s5, "3.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(h, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+          check_addon(r, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
           do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
           shutdownManager();
@@ -897,10 +959,12 @@ function run_addon_change_test() {
           setExtensionModifiedTime(getFileForAddon(profileDir, softblock5_1.id), Date.now() + 30000);
           writeInstallRDFForExtension(hardblock_1, profileDir);
           setExtensionModifiedTime(getFileForAddon(profileDir, hardblock_1.id), Date.now() + 30000);
+          writeInstallRDFForExtension(regexpblock_1, profileDir);
+          setExtensionModifiedTime(getFileForAddon(profileDir, regexpblock_1.id), Date.now() + 30000);
 
           startupManager(false);
 
-          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
             check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -908,6 +972,7 @@ function run_addon_change_test() {
             check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+            check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             do_check_eq(Services.prefs.getCharPref("general.skins.selectedSkin"), "classic/1.0");
 
             s1.userDisabled = false;
@@ -933,6 +998,7 @@ function run_addon_change_2_test() {
   getFileForAddon(profileDir, softblock4_1.id).remove(true);
   getFileForAddon(profileDir, softblock5_1.id).remove(true);
   getFileForAddon(profileDir, hardblock_1.id).remove(true);
+  getFileForAddon(profileDir, regexpblock_1.id).remove(true);
 
   startupManager(false);
   shutdownManager();
@@ -943,15 +1009,17 @@ function run_addon_change_2_test() {
   writeInstallRDFForExtension(softblock4_2, profileDir);
   writeInstallRDFForExtension(softblock5_2, profileDir);
   writeInstallRDFForExtension(hardblock_2, profileDir);
+  writeInstallRDFForExtension(regexpblock_2, profileDir);
 
   startupManager(false);
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
     check_addon(s1, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s2, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s3, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(h, "2.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+    check_addon(r, "2.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
     s2.userDisabled = false;
     s2.userDisabled = true;
@@ -974,15 +1042,18 @@ function run_addon_change_2_test() {
     setExtensionModifiedTime(getFileForAddon(profileDir, softblock5_3.id), Date.now() + 10000);
     writeInstallRDFForExtension(hardblock_3, profileDir);
     setExtensionModifiedTime(getFileForAddon(profileDir, hardblock_3.id), Date.now() + 10000);
+    writeInstallRDFForExtension(regexpblock_3, profileDir);
+    setExtensionModifiedTime(getFileForAddon(profileDir, regexpblock_3.id), Date.now() + 10000);
 
     startupManager(false);
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "3.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s2, "3.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s3, "3.0", false, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(h, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+      check_addon(r, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
       shutdownManager();
 
@@ -998,15 +1069,18 @@ function run_addon_change_2_test() {
       setExtensionModifiedTime(getFileForAddon(profileDir, softblock5_1.id), Date.now() + 20000);
       writeInstallRDFForExtension(hardblock_1, profileDir);
       setExtensionModifiedTime(getFileForAddon(profileDir, hardblock_1.id), Date.now() + 20000);
+      writeInstallRDFForExtension(regexpblock_1, profileDir);
+      setExtensionModifiedTime(getFileForAddon(profileDir, regexpblock_1.id), Date.now() + 20000);
 
       startupManager(false);
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s3, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
         s1.userDisabled = false;
         s2.userDisabled = false;
@@ -1024,7 +1098,7 @@ function run_background_update_test() {
   dump(arguments.callee.name + "\n");
   restartManager();
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
     check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -1032,11 +1106,12 @@ function run_background_update_test() {
     check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
     check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+    check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
     background_update(function() {
       restartManager();
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s2, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -1044,6 +1119,7 @@ function run_background_update_test() {
         check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s5, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
         run_background_update_2_test();
       });
@@ -1063,6 +1139,7 @@ function run_background_update_2_test() {
   getFileForAddon(profileDir, softblock4_1.id).remove(true);
   getFileForAddon(profileDir, softblock5_1.id).remove(true);
   getFileForAddon(profileDir, hardblock_1.id).remove(true);
+  getFileForAddon(profileDir, regexpblock_1.id).remove(true);
 
   startupManager(false);
   shutdownManager();
@@ -1073,15 +1150,17 @@ function run_background_update_2_test() {
   writeInstallRDFForExtension(softblock4_3, profileDir);
   writeInstallRDFForExtension(softblock5_3, profileDir);
   writeInstallRDFForExtension(hardblock_3, profileDir);
+  writeInstallRDFForExtension(regexpblock_3, profileDir);
 
   startupManager(false);
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
     check_addon(s1, "3.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s2, "3.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s3, "3.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(h, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+    check_addon(r, "3.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
     s2.userDisabled = false;
     s2.userDisabled = true;
@@ -1093,12 +1172,13 @@ function run_background_update_2_test() {
     background_update(function() {
       restartManager();
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s2, "1.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(s3, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
         s1.userDisabled = false;
         s2.userDisabled = false;
@@ -1118,7 +1198,7 @@ function run_manual_update_test() {
   load_blocklist("manual_update.xml", function() {
     restartManager();
 
-    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+    AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
       check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -1126,6 +1206,7 @@ function run_manual_update_test() {
       check_addon(s4, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(s5, "1.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
       check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+      check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
       s2.userDisabled = false;
       s2.userDisabled = true;
@@ -1137,7 +1218,7 @@ function run_manual_update_test() {
       manual_update("2", function() {
         restartManager();
 
-        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+        AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
           check_addon(s1, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           check_addon(s2, "2.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
@@ -1146,11 +1227,12 @@ function run_manual_update_test() {
           check_addon(s5, "2.0", false, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
           // Can't manually update to a hardblocked add-on
           check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+          check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
           manual_update("3", function() {
             restartManager();
 
-            AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+            AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
               check_addon(s1, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
               check_addon(s2, "3.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
@@ -1158,6 +1240,7 @@ function run_manual_update_test() {
               check_addon(s4, "3.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
               check_addon(s5, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
               check_addon(h, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+              check_addon(r, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
               run_manual_update_2_test();
             });
@@ -1180,6 +1263,7 @@ function run_manual_update_2_test() {
   getFileForAddon(profileDir, softblock4_1.id).remove(true);
   getFileForAddon(profileDir, softblock5_1.id).remove(true);
   getFileForAddon(profileDir, hardblock_1.id).remove(true);
+  getFileForAddon(profileDir, regexpblock_1.id).remove(true);
 
   startupManager(false);
   shutdownManager();
@@ -1190,15 +1274,17 @@ function run_manual_update_2_test() {
   writeInstallRDFForExtension(softblock4_1, profileDir);
   writeInstallRDFForExtension(softblock5_1, profileDir);
   writeInstallRDFForExtension(hardblock_1, profileDir);
+  writeInstallRDFForExtension(regexpblock_1, profileDir);
 
   startupManager(false);
 
-  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+  AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
     check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(s3, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
     check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+    check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
     s2.userDisabled = false;
     s2.userDisabled = true;
@@ -1210,25 +1296,27 @@ function run_manual_update_2_test() {
     manual_update("2", function() {
       restartManager();
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "2.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s2, "2.0", true, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s3, "2.0", false, false, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         // Can't manually update to a hardblocked add-on
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
         restartManager();
 
         manual_update("3", function() {
           restartManager();
 
-          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+          AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
             check_addon(s1, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s2, "3.0", true, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(s3, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
             check_addon(h, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
+            check_addon(r, "3.0", false, false, Ci.nsIBlocklistService.STATE_NOT_BLOCKED);
 
             s1.userDisabled = false;
             s2.userDisabled = false;
@@ -1252,6 +1340,7 @@ function run_local_install_test() {
   getFileForAddon(profileDir, softblock4_1.id).remove(true);
   getFileForAddon(profileDir, softblock5_1.id).remove(true);
   getFileForAddon(profileDir, hardblock_1.id).remove(true);
+  getFileForAddon(profileDir, regexpblock_1.id).remove(true);
 
   startupManager(false);
 
@@ -1261,18 +1350,20 @@ function run_local_install_test() {
     do_get_file("addons/blocklist_soft3_1.xpi"),
     do_get_file("addons/blocklist_soft4_1.xpi"),
     do_get_file("addons/blocklist_soft5_1.xpi"),
-    do_get_file("addons/blocklist_hard1_1.xpi")
+    do_get_file("addons/blocklist_hard1_1.xpi"),
+    do_get_file("addons/blocklist_regexp1_1.xpi")
   ], function() {
     AddonManager.getAllInstalls(function(aInstalls) {
       // Should have finished all installs without needing to restart
       do_check_eq(aInstalls.length, 0);
 
-      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h]) {
+      AddonManager.getAddonsByIDs(ADDON_IDS, function([s1, s2, s3, s4, s5, h, r]) {
 
         check_addon(s1, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s2, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(s3, "1.0", true, true, Ci.nsIBlocklistService.STATE_SOFTBLOCKED);
         check_addon(h, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
+        check_addon(r, "1.0", false, false, Ci.nsIBlocklistService.STATE_BLOCKED);
 
         end_test();
       });
diff --git a/toolkit/mozapps/extensions/test/xpcshell/xpcshell.ini b/toolkit/mozapps/extensions/test/xpcshell/xpcshell.ini
index 2e3ff676056..7c00adc12bd 100644
--- a/toolkit/mozapps/extensions/test/xpcshell/xpcshell.ini
+++ b/toolkit/mozapps/extensions/test/xpcshell/xpcshell.ini
@@ -17,6 +17,8 @@ skip-if = os == "android"
 [test_blocklistchange.js]
 # Bug 676992: test consistently hangs on Android
 skip-if = os == "android"
+[test_blocklist_regexp.js]
+skip-if = os == "android"
 [test_bootstrap.js]
 # Bug 676992: test consistently hangs on Android
 skip-if = os == "android"

From d5628414a48b381dabc5920a7b82e7b8df4fd915 Mon Sep 17 00:00:00 2001
From: Joe Walker <jwalker@mozilla.com>
Date: Tue, 27 Nov 2012 10:39:10 +0000
Subject: [PATCH 3/8] Backed out changeset 132d2e88ef03 (bug 788977) for talos
 regression.

---
 browser/app/profile/firefox.js                |   28 +-
 browser/base/content/browser-appmenu.inc      |   33 +-
 browser/base/content/browser-doctype.inc      |    2 +
 browser/base/content/browser-menubar.inc      |   40 +-
 browser/base/content/browser-sets.inc         |   87 +-
 browser/base/content/browser.css              |   14 +-
 browser/base/content/browser.js               |  106 +-
 browser/base/content/browser.xul              |  106 +-
 browser/base/content/highlighter.css          |   71 +-
 browser/base/content/nsContextMenu.js         |   16 +-
 browser/devtools/Makefile.in                  |    3 +-
 browser/devtools/commandline/CmdBreak.jsm     |   48 +-
 browser/devtools/commandline/CmdCalllog.jsm   |   12 +-
 .../devtools/commandline/CmdCalllogChrome.jsm |   11 +-
 browser/devtools/commandline/CmdConsole.jsm   |   14 +-
 browser/devtools/commandline/CmdDbg.jsm       |   66 +-
 browser/devtools/commandline/Commands.jsm     |    1 -
 .../commandline/test/browser_dbg_cmd.js       |  111 +-
 .../commandline/test/browser_dbg_cmd_break.js |  136 +-
 browser/devtools/debugger/DebuggerPanel.jsm   |  144 -
 .../devtools/debugger/debugger-controller.js  |   49 +-
 browser/devtools/debugger/debugger-toolbar.js |   15 +
 browser/devtools/debugger/debugger.xul        |   10 +
 browser/devtools/debugger/test/Makefile.in    |    8 +-
 .../debugger/test/browser_dbg_bfcache.js      |    2 +-
 .../test/browser_dbg_breakpoint-new-script.js |    2 +-
 ...rowser_dbg_bug723069_editor-breakpoints.js |   12 +-
 ...r_dbg_bug723071_editor-breakpoints-pane.js |   10 +-
 ...wser_dbg_bug727429_watch-expressions-01.js |    2 +-
 ...wser_dbg_bug727429_watch-expressions-02.js |    2 +-
 ...rowser_dbg_bug731394_editor-contextmenu.js |    2 +-
 ...er_dbg_bug737803_editor_actual_location.js |   10 +-
 ...bg_bug740825_conditional-breakpoints-01.js |    4 +-
 ...bg_bug740825_conditional-breakpoints-02.js |    4 +-
 .../browser_dbg_bug786070_hide_nonenums.js    |    2 +-
 .../debugger/test/browser_dbg_clean-exit.js   |    2 +-
 .../debugger/test/browser_dbg_createRemote.js |    2 +-
 .../debugger/test/browser_dbg_displayName.js  |    2 +-
 .../debugger/test/browser_dbg_iframes.js      |    5 +-
 .../debugger/test/browser_dbg_leaktest.js     |    2 +-
 .../browser_dbg_location-changes-blank.js     |    2 +-
 .../test/browser_dbg_location-changes-new.js  |    2 +-
 .../test/browser_dbg_location-changes.js      |    2 +-
 .../test/browser_dbg_pane-collapse.js         |    2 +-
 .../test/browser_dbg_panesize-inner.js        |   97 +-
 .../debugger/test/browser_dbg_panesize.js     |   55 +
 .../test/browser_dbg_pause-exceptions.js      |    8 +-
 .../debugger/test/browser_dbg_pause-resume.js |    2 +-
 .../test/browser_dbg_progress-listener-bug.js |    2 +-
 .../test/browser_dbg_propertyview-01.js       |    2 +-
 .../test/browser_dbg_propertyview-02.js       |    2 +-
 .../test/browser_dbg_propertyview-03.js       |    2 +-
 .../test/browser_dbg_propertyview-04.js       |    2 +-
 .../test/browser_dbg_propertyview-05.js       |    2 +-
 .../test/browser_dbg_propertyview-06.js       |    2 +-
 .../test/browser_dbg_propertyview-07.js       |    2 +-
 .../test/browser_dbg_propertyview-08.js       |    2 +-
 .../test/browser_dbg_propertyview-09.js       |    2 +-
 .../test/browser_dbg_propertyview-10.js       |    2 +-
 .../test/browser_dbg_propertyview-data.js     |    2 +-
 .../test/browser_dbg_propertyview-edit.js     |    2 +-
 .../browser_dbg_propertyview-filter-01.js     |    2 +-
 .../browser_dbg_propertyview-filter-02.js     |    2 +-
 .../browser_dbg_propertyview-filter-03.js     |    2 +-
 .../browser_dbg_propertyview-filter-04.js     |    2 +-
 .../browser_dbg_propertyview-filter-05.js     |    2 +-
 .../browser_dbg_propertyview-filter-06.js     |    2 +-
 .../browser_dbg_propertyview-filter-07.js     |    2 +-
 .../browser_dbg_propertyview-filter-08.js     |    2 +-
 .../test/browser_dbg_propertyview-reexpand.js |    2 +-
 .../test/browser_dbg_reload-same-script.js    |    2 +-
 .../test/browser_dbg_script-switching.js      |    2 +-
 .../test/browser_dbg_scripts-searching-01.js  |    2 +-
 .../test/browser_dbg_scripts-searching-02.js  |    2 +-
 .../test/browser_dbg_scripts-searching-03.js  |    2 +-
 .../test/browser_dbg_scripts-searching-04.js  |    2 +-
 .../test/browser_dbg_scripts-searching-05.js  |    2 +-
 .../test/browser_dbg_scripts-searching-06.js  |    2 +-
 .../test/browser_dbg_scripts-searching-07.js  |    2 +-
 .../test/browser_dbg_scripts-searching-08.js  |    2 +-
 .../browser_dbg_scripts-searching-popup.js    |    2 +-
 .../test/browser_dbg_scripts-sorting.js       |    2 +-
 .../debugger/test/browser_dbg_select-line.js  |    2 +-
 .../debugger/test/browser_dbg_stack-01.js     |    2 +-
 .../debugger/test/browser_dbg_stack-02.js     |    2 +-
 .../debugger/test/browser_dbg_stack-03.js     |    2 +-
 .../debugger/test/browser_dbg_stack-04.js     |    2 +-
 .../debugger/test/browser_dbg_stack-05.js     |    2 +-
 .../test/browser_dbg_update-editor-mode.js    |    2 +-
 browser/devtools/debugger/test/head.js        |   92 +-
 browser/devtools/framework/Makefile.in        |   18 -
 browser/devtools/framework/Sidebar.jsm        |  191 --
 browser/devtools/framework/Target.jsm         |  385 ---
 .../devtools/framework/ToolDefinitions.jsm    |   19 -
 browser/devtools/framework/Toolbox.jsm        |  523 ----
 browser/devtools/framework/ToolboxHosts.jsm   |  208 --
 .../devtools/framework/connect/connect.css    |   87 -
 browser/devtools/framework/connect/connect.js |  100 -
 .../devtools/framework/connect/connect.xhtml  |   45 -
 browser/devtools/framework/gDevTools.jsm      |  543 ----
 browser/devtools/framework/test/Makefile.in   |   26 -
 .../framework/test/browser_devtools_api.js    |  137 -
 .../test/browser_new_activation_workflow.js   |   64 -
 .../framework/test/browser_target_events.js   |   58 -
 .../browser_toolbox_dynamic_registration.js   |  112 -
 .../framework/test/browser_toolbox_hosts.js   |  135 -
 .../framework/test/browser_toolbox_ready.js   |   56 -
 .../test/browser_toolbox_select_event.js      |   97 -
 .../framework/test/browser_toolbox_sidebar.js |  132 -
 .../test/browser_toolbox_tool_ready.js        |   72 -
 browser/devtools/framework/test/head.js       |   36 -
 browser/devtools/framework/toolbox-window.xul |   33 -
 browser/devtools/framework/toolbox.css        |   10 -
 browser/devtools/framework/toolbox.xul        |   27 -
 browser/devtools/highlighter/CmdInspect.jsm   |   29 +
 .../{inspector => highlighter}/Makefile.in    |   10 +-
 .../highlighter.jsm}                          |  433 +--
 browser/devtools/highlighter/inspector.jsm    | 2414 +++++++++++++++++
 .../test/Makefile.in                          |   23 +-
 .../test/browser_inspector_breadcrumbs.html   |    0
 .../test/browser_inspector_breadcrumbs.js     |   37 +-
 ...r_inspector_bug_566084_location_changed.js |  120 +
 .../test/browser_inspector_bug_665880.js      |   28 +-
 ...inspector_bug_672902_keyboard_shortcuts.js |   55 +-
 .../test/browser_inspector_bug_674871.js      |   32 +-
 .../test/browser_inspector_bug_690361.js      |  107 +
 ..._inspector_bug_699308_iframe_navigation.js |   77 +
 .../test/browser_inspector_changes.js         |  124 +
 .../test/browser_inspector_cmd_inspect.html   |    0
 .../test/browser_inspector_cmd_inspect.js     |    2 +-
 .../browser_inspector_destroyselection.html   |    0
 .../browser_inspector_destroyselection.js     |   30 +-
 .../test/browser_inspector_highlighter.js     |   48 +-
 .../browser_inspector_highlighter_autohide.js |   59 +
 .../test/browser_inspector_iframeTest.js      |   33 +-
 .../test/browser_inspector_infobar.js         |   35 +-
 .../test/browser_inspector_initialization.js  |  191 ++
 .../test/browser_inspector_invalidate.js      |   56 +
 .../test/browser_inspector_keybindings.js     |   78 +
 .../test/browser_inspector_menu.js            |   43 +-
 .../browser_inspector_pseudoClass_menu.js     |   87 +
 .../browser_inspector_pseudoclass_lock.js     |   87 +-
 .../test/browser_inspector_ruleviewstore.js   |  105 +
 .../test/browser_inspector_scrolling.js       |   26 +-
 .../test/browser_inspector_sidebarstate.js    |   73 +
 .../test/browser_inspector_tab_switch.js      |  247 ++
 .../test/browser_inspector_treeSelection.js   |   84 +
 .../test/browser_inspector_tree_height.js     |    0
 .../{inspector => highlighter}/test/head.js   |   39 +-
 .../test/helpers.js                           |    0
 browser/devtools/inspector/Breadcrumbs.jsm    |  593 ----
 browser/devtools/inspector/CmdInspect.jsm     |   48 -
 .../inspector/InspectorDefinition.jsm         |   45 -
 browser/devtools/inspector/InspectorPanel.jsm |  536 ----
 browser/devtools/inspector/Selection.jsm      |  230 --
 browser/devtools/inspector/inspector.css      |   11 -
 browser/devtools/inspector/inspector.xul      |   71 -
 ...r_inspector_bug_566084_location_changed.js |  131 -
 ..._inspector_bug_699308_iframe_navigation.js |   65 -
 .../test/browser_inspector_changes.js         |  112 -
 .../browser_inspector_highlighter_autohide.js |   46 -
 .../test/browser_inspector_initialization.js  |  147 -
 .../test/browser_inspector_invalidate.js      |   50 -
 .../browser_inspector_pseudoClass_menu.js     |   71 -
 .../test/browser_inspector_sidebarstate.js    |   77 -
 browser/devtools/jar.mn                       |   13 +-
 browser/devtools/layoutview/LayoutView.jsm    |  368 +++
 browser/devtools/layoutview/Makefile.in       |    3 +
 .../layoutview/test/browser_layoutview.js     |   55 +-
 browser/devtools/layoutview/view.css          |    4 +
 browser/devtools/layoutview/view.js           |  248 --
 browser/devtools/layoutview/view.xhtml        |   18 +-
 browser/devtools/markupview/MarkupView.jsm    |   61 +-
 .../test/browser_inspector_markup_edit.js     |  262 +-
 .../test/browser_inspector_markup_mutation.js |   28 +-
 .../browser_inspector_markup_navigation.html  |    4 +-
 .../browser_inspector_markup_navigation.js    |   35 +-
 browser/devtools/markupview/test/head.js      |    6 -
 .../devtools/responsivedesign/CmdResize.jsm   |    2 -
 .../responsivedesign/responsivedesign.jsm     |   14 +-
 .../test/browser_responsivecomputedview.js    |   27 +-
 .../test/browser_responsiveruleview.js        |   27 +-
 .../devtools/responsivedesign/test/head.js    |   21 -
 browser/devtools/scratchpad/CmdScratchpad.jsm |   21 -
 browser/devtools/scratchpad/scratchpad.js     |    7 +-
 browser/devtools/scratchpad/scratchpad.xul    |    4 +
 browser/devtools/shared/DeveloperToolbar.jsm  |  100 +-
 browser/devtools/shared/EventEmitter.jsm      |   25 +-
 .../shared/test/browser_eventemitter_basic.js |   18 +-
 .../shared/test/browser_toolbar_basic.js      |  111 +-
 ...browser_toolbar_webconsole_errors_count.js |   17 +-
 browser/devtools/shared/test/head.js          |    6 -
 browser/devtools/shared/test/leakhunt.js      |  155 +-
 browser/devtools/styleeditor/StyleEditor.jsm  |  137 +-
 .../styleeditor/StyleEditorChrome.jsm         |   61 +-
 .../styleeditor/StyleEditorDefinition.jsm     |   56 -
 .../devtools/styleeditor/StyleEditorPanel.jsm |  109 -
 browser/devtools/styleeditor/styleeditor.xul  |  188 +-
 browser/devtools/styleeditor/test/Makefile.in |    4 +-
 .../test/browser_styleeditor_init.js          |    8 +
 .../test/browser_styleeditor_loading.js       |   41 +-
 .../test/browser_styleeditor_passedinsheet.js |   83 +-
 .../test/browser_styleeditor_private.js       |   32 +-
 .../test/browser_styleeditor_reopen.js        |  189 +-
 browser/devtools/styleeditor/test/head.js     |   35 +-
 .../devtools/styleinspector/CssHtmlTree.jsm   |  141 +-
 .../styleinspector/StyleInspector.jsm         |  230 +-
 .../devtools/styleinspector/csshtmltree.xul   |   15 +-
 .../devtools/styleinspector/cssruleview.xul   |   14 +-
 .../devtools/styleinspector/test/Makefile.in  |   12 +-
 .../test/browser_bug589375_keybindings.js     |   47 +-
 .../styleinspector/test/browser_bug683672.js  |   47 +-
 ...r_bug722196_property_view_media_queries.js |   30 +-
 .../test/browser_bug_692400_element_style.js  |   27 +-
 ...r_computedview_734259_style_editor_link.js |   80 +-
 ...mputedview_bug_703643_context_menu_copy.js |   52 +-
 ...owser_ruleview_734259_style_editor_link.js |   92 +-
 ...r_ruleview_bug_703643_context_menu_copy.js |   74 +-
 .../test/browser_ruleview_focus.js            |   40 +-
 .../test/browser_styleinspector.js            |   34 +-
 ...styleinspector_bug_672744_search_filter.js |   54 +-
 ...tyleinspector_bug_672746_default_styles.js |   39 +-
 ...ector_bug_689759_no_results_placeholder.js |   52 +-
 browser/devtools/styleinspector/test/head.js  |  291 +-
 browser/devtools/tilt/CmdTilt.jsm             |   62 +-
 browser/devtools/tilt/Tilt.jsm                |  165 +-
 browser/devtools/tilt/TiltVisualizer.jsm      |  171 +-
 browser/devtools/tilt/test/Makefile.in        |    1 +
 .../tilt/test/browser_tilt_03_tab_switch.js   |   77 +
 .../browser_tilt_04_initialization-key.js     |   82 +
 .../test/browser_tilt_04_initialization.js    |    4 +
 .../test/browser_tilt_05_destruction-esc.js   |    3 +
 .../tilt/test/browser_tilt_05_destruction.js  |    2 +-
 .../browser_tilt_arcball-reset-typeahead.js   |    2 +-
 .../tilt/test/browser_tilt_arcball-reset.js   |    2 +-
 .../tilt/test/browser_tilt_picking.js         |    2 +-
 .../tilt/test/browser_tilt_picking_delete.js  |    2 +-
 .../browser_tilt_picking_highlight01-offs.js  |    2 +-
 .../test/browser_tilt_picking_highlight01.js  |    2 +-
 .../test/browser_tilt_picking_highlight02.js  |    2 +-
 .../test/browser_tilt_picking_highlight03.js  |    2 +-
 .../tilt/test/browser_tilt_picking_miv.js     |    2 +-
 .../tilt/test/browser_tilt_visualizer.js      |    3 +-
 .../devtools/tilt/test/browser_tilt_zoom.js   |   10 +-
 browser/devtools/tilt/test/head.js            |   50 +-
 browser/devtools/webconsole/HUDService.jsm    |  567 +++-
 browser/devtools/webconsole/Makefile.in       |    1 -
 .../devtools/webconsole/WebConsolePanel.jsm   |  102 -
 browser/devtools/webconsole/test/Makefile.in  |   18 +-
 ...wser_webconsole_bug_581231_close_button.js |   37 +
 ...eactivateHUDForContext_unfocused_window.js |   20 +-
 ...r_webconsole_bug_601909_remember_height.js |  107 +
 ...bconsole_bug_602572_log_bodies_checkbox.js |    2 +
 ...ebconsole_bug_622303_persistent_filters.js |    9 +-
 ...e_bug_653531_highlighter_console_helper.js |   34 +-
 ...owser_webconsole_bug_660806_history_nav.js |    8 +-
 ...owser_webconsole_bug_663443_panel_title.js |   57 +
 ...le_bug_782653_CSS_links_in_Style_Editor.js |  142 +-
 .../test/browser_webconsole_menustatus.js     |   33 +
 .../test/browser_webconsole_position_ui.js    |  207 ++
 .../test/browser_webconsole_window_zombie.js  |   42 +
 browser/devtools/webconsole/test/head.js      |   80 +-
 browser/devtools/webconsole/webconsole.js     |  135 +-
 browser/devtools/webconsole/webconsole.xul    |   25 +
 .../locales/en-US/chrome/browser/browser.dtd  |   48 +-
 .../browser/devtools/connection-screen.dtd    |   15 -
 .../browser/devtools/debugger.properties      |   13 -
 .../chrome/browser/devtools/inspector.dtd     |   10 -
 .../browser/devtools/inspector.properties     |   32 +-
 .../chrome/browser/devtools/layoutview.dtd    |    1 -
 .../chrome/browser/devtools/scratchpad.dtd    |    6 +
 .../browser/devtools/styleeditor.properties   |   12 -
 .../browser/devtools/styleinspector.dtd       |    4 -
 .../devtools/styleinspector.properties        |   13 +
 .../en-US/chrome/browser/devtools/toolbox.dtd |    7 -
 .../chrome/browser/devtools/webConsole.dtd    |   21 +
 .../browser/devtools/webconsole.properties    |    8 -
 browser/locales/jar.mn                        |    3 -
 browser/makefiles.sh                          |    4 +-
 browser/themes/gnomestripe/browser.css        |  344 ++-
 .../devtools/command-responsivemode.png       |  Bin 1083 -> 0 bytes
 .../devtools/command-scratchpad.png           |  Bin 584 -> 0 bytes
 .../gnomestripe/devtools/command-tilt.png     |  Bin 1668 -> 0 bytes
 .../themes/gnomestripe/devtools/common.css    |   59 -
 .../gnomestripe/devtools/dock-bottom.png      |  Bin 487 -> 0 bytes
 .../themes/gnomestripe/devtools/dock-side.png |  Bin 536 -> 0 bytes
 .../gnomestripe/devtools/dock-window.png      |  Bin 806 -> 0 bytes
 .../themes/gnomestripe/devtools/inspector.css |  214 --
 .../devtools/layout-background.png            |  Bin 0 -> 981 bytes
 .../gnomestripe/devtools/layout-buttons.png   |  Bin 0 -> 447 bytes
 .../gnomestripe/devtools/layoutview.css       |   16 +-
 .../themes/gnomestripe/devtools/toolbox.css   |   99 -
 .../gnomestripe/devtools/treepanel-button.png |  Bin 0 -> 805 bytes
 browser/themes/gnomestripe/jar.mn             |   11 +-
 browser/themes/pinstripe/browser.css          |  341 ++-
 .../devtools/command-responsivemode.png       |  Bin 1083 -> 0 bytes
 .../pinstripe/devtools/command-scratchpad.png |  Bin 584 -> 0 bytes
 .../pinstripe/devtools/command-tilt.png       |  Bin 1668 -> 0 bytes
 browser/themes/pinstripe/devtools/common.css  |   54 -
 .../themes/pinstripe/devtools/dock-bottom.png |  Bin 487 -> 0 bytes
 .../themes/pinstripe/devtools/dock-side.png   |  Bin 536 -> 0 bytes
 .../themes/pinstripe/devtools/dock-window.png |  Bin 806 -> 0 bytes
 .../themes/pinstripe/devtools/inspector.css   |  229 --
 .../pinstripe/devtools/layout-background.png  |  Bin 0 -> 981 bytes
 .../pinstripe/devtools/layout-buttons.png     |  Bin 0 -> 447 bytes
 .../themes/pinstripe/devtools/layoutview.css  |   16 +-
 browser/themes/pinstripe/devtools/toolbox.css |   99 -
 .../pinstripe/devtools/treepanel-button.png   |  Bin 0 -> 805 bytes
 browser/themes/pinstripe/jar.mn               |   11 +-
 browser/themes/winstripe/browser.css          |  343 ++-
 .../devtools/command-responsivemode.png       |  Bin 1083 -> 0 bytes
 .../winstripe/devtools/command-scratchpad.png |  Bin 584 -> 0 bytes
 .../winstripe/devtools/command-tilt.png       |  Bin 1668 -> 0 bytes
 browser/themes/winstripe/devtools/common.css  |   59 -
 .../themes/winstripe/devtools/dock-bottom.png |  Bin 487 -> 0 bytes
 .../themes/winstripe/devtools/dock-side.png   |  Bin 536 -> 0 bytes
 .../themes/winstripe/devtools/dock-window.png |  Bin 806 -> 0 bytes
 .../themes/winstripe/devtools/inspector.css   |  218 --
 .../winstripe/devtools/layout-background.png  |  Bin 0 -> 981 bytes
 .../winstripe/devtools/layout-buttons.png     |  Bin 0 -> 447 bytes
 .../themes/winstripe/devtools/layoutview.css  |   16 +-
 browser/themes/winstripe/devtools/toolbox.css |  103 -
 .../winstripe/devtools/treepanel-button.png   |  Bin 0 -> 805 bytes
 browser/themes/winstripe/jar.mn               |   26 +-
 .../devtools/webconsole/WebConsoleUtils.jsm   |   13 +-
 325 files changed, 10112 insertions(+), 10303 deletions(-)
 delete mode 100644 browser/devtools/debugger/DebuggerPanel.jsm
 create mode 100644 browser/devtools/debugger/test/browser_dbg_panesize.js
 delete mode 100644 browser/devtools/framework/Makefile.in
 delete mode 100644 browser/devtools/framework/Sidebar.jsm
 delete mode 100644 browser/devtools/framework/Target.jsm
 delete mode 100644 browser/devtools/framework/ToolDefinitions.jsm
 delete mode 100644 browser/devtools/framework/Toolbox.jsm
 delete mode 100644 browser/devtools/framework/ToolboxHosts.jsm
 delete mode 100644 browser/devtools/framework/connect/connect.css
 delete mode 100644 browser/devtools/framework/connect/connect.js
 delete mode 100644 browser/devtools/framework/connect/connect.xhtml
 delete mode 100644 browser/devtools/framework/gDevTools.jsm
 delete mode 100644 browser/devtools/framework/test/Makefile.in
 delete mode 100644 browser/devtools/framework/test/browser_devtools_api.js
 delete mode 100644 browser/devtools/framework/test/browser_new_activation_workflow.js
 delete mode 100644 browser/devtools/framework/test/browser_target_events.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_hosts.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_ready.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_select_event.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_sidebar.js
 delete mode 100644 browser/devtools/framework/test/browser_toolbox_tool_ready.js
 delete mode 100644 browser/devtools/framework/test/head.js
 delete mode 100644 browser/devtools/framework/toolbox-window.xul
 delete mode 100644 browser/devtools/framework/toolbox.css
 delete mode 100644 browser/devtools/framework/toolbox.xul
 create mode 100644 browser/devtools/highlighter/CmdInspect.jsm
 rename browser/devtools/{inspector => highlighter}/Makefile.in (68%)
 rename browser/devtools/{inspector/Highlighter.jsm => highlighter/highlighter.jsm} (64%)
 create mode 100644 browser/devtools/highlighter/inspector.jsm
 rename browser/devtools/{inspector => highlighter}/test/Makefile.in (88%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_breadcrumbs.html (100%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_breadcrumbs.js (68%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_bug_665880.js (52%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_bug_672902_keyboard_shortcuts.js (51%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_bug_674871.js (68%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_690361.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_changes.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_cmd_inspect.html (100%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_cmd_inspect.js (97%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_destroyselection.html (100%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_destroyselection.js (55%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_highlighter.js (78%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_iframeTest.js (72%)
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_infobar.js (72%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_initialization.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_invalidate.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_keybindings.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_menu.js (62%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_pseudoclass_lock.js (59%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_scrolling.js (76%)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_tab_switch.js
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_treeSelection.js
 rename browser/devtools/{inspector => highlighter}/test/browser_inspector_tree_height.js (100%)
 rename browser/devtools/{inspector => highlighter}/test/head.js (64%)
 rename browser/devtools/{inspector => highlighter}/test/helpers.js (100%)
 delete mode 100644 browser/devtools/inspector/Breadcrumbs.jsm
 delete mode 100644 browser/devtools/inspector/CmdInspect.jsm
 delete mode 100644 browser/devtools/inspector/InspectorDefinition.jsm
 delete mode 100644 browser/devtools/inspector/InspectorPanel.jsm
 delete mode 100644 browser/devtools/inspector/Selection.jsm
 delete mode 100644 browser/devtools/inspector/inspector.css
 delete mode 100644 browser/devtools/inspector/inspector.xul
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_changes.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_initialization.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_invalidate.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
 delete mode 100644 browser/devtools/inspector/test/browser_inspector_sidebarstate.js
 create mode 100644 browser/devtools/layoutview/LayoutView.jsm
 delete mode 100644 browser/devtools/layoutview/view.js
 delete mode 100644 browser/devtools/scratchpad/CmdScratchpad.jsm
 delete mode 100644 browser/devtools/styleeditor/StyleEditorDefinition.jsm
 delete mode 100644 browser/devtools/styleeditor/StyleEditorPanel.jsm
 create mode 100644 browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
 delete mode 100644 browser/devtools/webconsole/WebConsolePanel.jsm
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_menustatus.js
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_position_ui.js
 create mode 100644 browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
 delete mode 100644 browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
 delete mode 100644 browser/locales/en-US/chrome/browser/devtools/inspector.dtd
 delete mode 100644 browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
 delete mode 100644 browser/themes/gnomestripe/devtools/command-responsivemode.png
 delete mode 100644 browser/themes/gnomestripe/devtools/command-scratchpad.png
 delete mode 100644 browser/themes/gnomestripe/devtools/command-tilt.png
 delete mode 100644 browser/themes/gnomestripe/devtools/dock-bottom.png
 delete mode 100644 browser/themes/gnomestripe/devtools/dock-side.png
 delete mode 100644 browser/themes/gnomestripe/devtools/dock-window.png
 delete mode 100644 browser/themes/gnomestripe/devtools/inspector.css
 create mode 100644 browser/themes/gnomestripe/devtools/layout-background.png
 create mode 100644 browser/themes/gnomestripe/devtools/layout-buttons.png
 delete mode 100644 browser/themes/gnomestripe/devtools/toolbox.css
 create mode 100644 browser/themes/gnomestripe/devtools/treepanel-button.png
 delete mode 100644 browser/themes/pinstripe/devtools/command-responsivemode.png
 delete mode 100644 browser/themes/pinstripe/devtools/command-scratchpad.png
 delete mode 100644 browser/themes/pinstripe/devtools/command-tilt.png
 delete mode 100644 browser/themes/pinstripe/devtools/dock-bottom.png
 delete mode 100644 browser/themes/pinstripe/devtools/dock-side.png
 delete mode 100644 browser/themes/pinstripe/devtools/dock-window.png
 delete mode 100644 browser/themes/pinstripe/devtools/inspector.css
 create mode 100644 browser/themes/pinstripe/devtools/layout-background.png
 create mode 100644 browser/themes/pinstripe/devtools/layout-buttons.png
 delete mode 100644 browser/themes/pinstripe/devtools/toolbox.css
 create mode 100644 browser/themes/pinstripe/devtools/treepanel-button.png
 delete mode 100644 browser/themes/winstripe/devtools/command-responsivemode.png
 delete mode 100644 browser/themes/winstripe/devtools/command-scratchpad.png
 delete mode 100644 browser/themes/winstripe/devtools/command-tilt.png
 delete mode 100644 browser/themes/winstripe/devtools/dock-bottom.png
 delete mode 100644 browser/themes/winstripe/devtools/dock-side.png
 delete mode 100644 browser/themes/winstripe/devtools/dock-window.png
 delete mode 100644 browser/themes/winstripe/devtools/inspector.css
 create mode 100644 browser/themes/winstripe/devtools/layout-background.png
 create mode 100644 browser/themes/winstripe/devtools/layout-buttons.png
 delete mode 100644 browser/themes/winstripe/devtools/toolbox.css
 create mode 100644 browser/themes/winstripe/devtools/treepanel-button.png

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index e84052b863c..677e9637829 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1010,16 +1010,11 @@ pref("devtools.toolbar.visible", false);
 pref("devtools.gcli.allowSet", false);
 pref("devtools.commands.dir", "");
 
-// Toolbox preferences
-pref("devtools.toolbox.footer.height", 250);
-pref("devtools.toolbox.sidebar.width", 500);
-pref("devtools.toolbox.host", "bottom");
-pref("devtools.toolbox.selectedTool", "webconsole");
-pref("devtools.toolbox.toolbarSpec", '["tilt toggle","scratchpad","resize toggle"]');
-pref("devtools.toolbox.sideEnabled", false);
-
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);
+pref("devtools.inspector.htmlHeight", 112);
+pref("devtools.inspector.htmlPanelOpen", false);
+pref("devtools.inspector.sidebarOpen", false);
 pref("devtools.inspector.activeSidebar", "ruleview");
 pref("devtools.inspector.markupPreview", false);
 
@@ -1051,11 +1046,17 @@ pref("devtools.debugger.ui.variables-sorting-enabled", true);
 pref("devtools.debugger.ui.variables-non-enum-visible", true);
 pref("devtools.debugger.ui.variables-searchbox-visible", false);
 
+// Enable the style inspector
+pref("devtools.styleinspector.enabled", true);
+
 // Enable the Tilt inspector
 pref("devtools.tilt.enabled", true);
 pref("devtools.tilt.intro_transition", true);
 pref("devtools.tilt.outro_transition", true);
 
+// Enable the rules view
+pref("devtools.ruleview.enabled", true);
+
 // Enable the Scratchpad tool.
 pref("devtools.scratchpad.enabled", true);
 
@@ -1080,6 +1081,17 @@ pref("devtools.gcli.eagerHelper", 2);
 // Do we allow the 'pref set' command
 pref("devtools.gcli.allowSet", false);
 
+// The last Web Console height. This is initially 0 which means that the Web
+// Console will use the default height next time it shows.
+// Change to -1 if you do not want the Web Console to remember its last height.
+pref("devtools.hud.height", 0);
+
+// Remember the Web Console position. Possible values:
+//   above - above the web page,
+//   below - below the web page,
+//   window - in a separate window/popup panel.
+pref("devtools.webconsole.position", "below");
+
 // Remember the Web Console filters
 pref("devtools.webconsole.filter.network", true);
 pref("devtools.webconsole.filter.networkinfo", true);
diff --git a/browser/base/content/browser-appmenu.inc b/browser/base/content/browser-appmenu.inc
index 479b542941d..a195f180838 100644
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -150,27 +150,20 @@
       <menu id="appmenu_webDeveloper"
             label="&appMenuWebDeveloper.label;">
         <menupopup id="appmenu_webDeveloper_popup">
-          <menuitem id="appmenu_devToolbox"
-                    observes="devtoolsMenuBroadcaster_DevToolbox"/>
-          <menuseparator id="appmenu_devtools_separator"/>
-          <menuitem id="appmenu_devToolbar"
-                    observes="devtoolsMenuBroadcaster_DevToolbar"/>
-          <menuitem id="appmenu_remoteWebConsole"
-                    observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
-          <menuitem id="appmenu_responsiveUI"
-                    observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
-          <menuitem id="appmenu_scratchpad"
-                    observes="devtoolsMenuBroadcaster_Scratchpad"/>
-          <menuitem id="appmenu_pageSource"
-                    observes="devtoolsMenuBroadcaster_PageSource"/>
-          <menuitem id="appmenu_errorConsole"
-                    observes="devtoolsMenuBroadcaster_ErrorConsole"/>
-          <menuseparator id="appmenu_devToolsConnectSeparator"/>
-          <menuitem id="appmenu_devtools_connect"
-                    observes="devtoolsMenuBroadcaster_connect"/>
+          <menuitem id="appmenu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar"/>
+          <menuitem id="appmenu_webConsole" observes="devtoolsMenuBroadcaster_WebConsole"/>
+          <menuitem id="appmenu_remoteWebConsole" observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
+          <menuitem id="appmenu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect"/>
+          <menuitem id="appmenu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
+          <menuitem id="appmenu_debugger" observes="devtoolsMenuBroadcaster_Debugger"/>
+          <menuitem id="appmenu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+          <menuitem id="appmenu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+          <menuitem id="appmenu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad"/>
+          <menuitem id="appmenu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor"/>
+          <menuitem id="appmenu_pageSource" observes="devtoolsMenuBroadcaster_PageSource"/>
+          <menuitem id="appmenu_errorConsole" observes="devtoolsMenuBroadcaster_ErrorConsole"/>
           <menuseparator id="appmenu_devToolsEndSeparator"/>
-          <menuitem id="appmenu_getMoreDevtools"
-                    observes="devtoolsMenuBroadcaster_GetMoreTools"/>
+          <menuitem id="appmenu_getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools"/>
           <menuseparator/>
 #define ID_PREFIX appmenu_developer_
 #define OMIT_ACCESSKEYS
diff --git a/browser/base/content/browser-doctype.inc b/browser/base/content/browser-doctype.inc
index cacd4d3a58c..17c1e45f982 100644
--- a/browser/base/content/browser-doctype.inc
+++ b/browser/base/content/browser-doctype.inc
@@ -19,5 +19,7 @@
 #endif
 <!ENTITY % aboutHomeDTD SYSTEM "chrome://browser/locale/aboutHome.dtd">
 %aboutHomeDTD;
+<!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/debugger.dtd">
+%debuggerDTD;
 ]>
 
diff --git a/browser/base/content/browser-menubar.inc b/browser/base/content/browser-menubar.inc
index 3c968849df1..a57e55c7ff7 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -557,34 +557,20 @@
                     label="&webDeveloperMenu.label;"
                     accesskey="&webDeveloperMenu.accesskey;">
                 <menupopup id="menuWebDeveloperPopup">
-                  <menuitem id="menu_devToolbox"
-                            observes="devtoolsMenuBroadcaster_DevToolbox"
-                            accesskey="&devToolbox.accesskey;"/>
-                  <menuseparator id="menu_devtools_separator"/>
-                  <menuitem id="menu_devToolbar"
-                            observes="devtoolsMenuBroadcaster_DevToolbar"
-                            accesskey="&devToolbarMenu.accesskey;"/>
-                  <menuitem id="menu_remoteWebConsole"
-                            observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
-                  <menuitem id="menu_responsiveUI"
-                            observes="devtoolsMenuBroadcaster_ResponsiveUI"
-                            accesskey="&responsiveDesignTool.accesskey;"/>
-                  <menuitem id="menu_scratchpad"
-                            observes="devtoolsMenuBroadcaster_Scratchpad"
-                            accesskey="&scratchpad.accesskey;"/>
-                  <menuitem id="menu_pageSource"
-                            observes="devtoolsMenuBroadcaster_PageSource"
-                            accesskey="&pageSourceCmd.accesskey;"/>
-                  <menuitem id="javascriptConsole"
-                            observes="devtoolsMenuBroadcaster_ErrorConsole"
-                            accesskey="&errorConsoleCmd.accesskey;"/>
-                  <menuseparator id="menu_devToolsConnectSeparator"/>
-                  <menuitem id="menu_devtools_connect"
-                            observes="devtoolsMenuBroadcaster_connect"/>
+                  <menuitem id="menu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar" accesskey="&devToolbarMenu.accesskey;"/>
+                  <menuitem id="webConsole" observes="devtoolsMenuBroadcaster_WebConsole" accesskey="&webConsoleCmd.accesskey;"/>
+                  <menuitem id="menu_remoteWebConsole" observes="devtoolsMenuBroadcaster_RemoteWebConsole"/>
+                  <menuitem id="menu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect" accesskey="&inspectMenu.accesskey;"/>
+                  <menuitem id="menu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI" accesskey="&responsiveDesignTool.accesskey;"/>
+                  <menuitem id="menu_debugger" observes="devtoolsMenuBroadcaster_Debugger" accesskey="&debuggerMenu.accesskey;"/>
+                  <menuitem id="menu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+                  <menuitem id="menu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+                  <menuitem id="menu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad" accesskey="&scratchpad.accesskey;"/>
+                  <menuitem id="menu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor" accesskey="&styleeditor.accesskey;"/>
+                  <menuitem id="menu_pageSource" observes="devtoolsMenuBroadcaster_PageSource" accesskey="&pageSourceCmd.accesskey;"/>
+                  <menuitem id="javascriptConsole" observes="devtoolsMenuBroadcaster_ErrorConsole" accesskey="&errorConsoleCmd.accesskey;"/>
                   <menuseparator id="devToolsEndSeparator"/>
-                  <menuitem id="getMoreDevtools"
-                            observes="devtoolsMenuBroadcaster_GetMoreTools"
-                            accesskey="&getMoreDevtoolsCmd.accesskey;"/>
+                  <menuitem id="getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools" accesskey="&getMoreDevtoolsCmd.accesskey;"/>
                 </menupopup>
               </menu>
               <menuitem id="menu_pageInfo"
diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index ba917712b72..46c6f192df6 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -88,15 +88,19 @@
 
     <command id="Tools:Search" oncommand="BrowserSearch.webSearch();"/>
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
-    <command id="Tools:DevToolbox" oncommand="gDevTools.toggleToolboxCommand(gBrowser);"/>
     <command id="Tools:DevToolbar" oncommand="DeveloperToolbar.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:DevToolbarFocus" oncommand="DeveloperToolbar.focusToggle();" disabled="true"/>
+    <command id="Tools:WebConsole" oncommand="HUDConsoleUI.toggleHUD();"/>
     <command id="Tools:RemoteWebConsole" oncommand="HUDConsoleUI.toggleRemoteHUD();" disabled="true" hidden="true"/>
+    <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();"/>
+    <command id="Tools:Debugger" oncommand="DebuggerUI.toggleDebugger();" disabled="true" hidden="true"/>
+    <command id="Tools:RemoteDebugger" oncommand="DebuggerUI.toggleRemoteDebugger();" disabled="true" hidden="true"/>
+    <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true" hidden="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true" hidden="true"/>
+    <command id="Tools:StyleEditor" oncommand="StyleEditor.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:ErrorConsole" oncommand="toJavaScriptConsole()" disabled="true" hidden="true"/>
-    <command id="Tools:DevToolsConnect" oncommand="DevToolsXULCommands.openConnectScreen(gBrowser)"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
     <command id="Tools:PrivateBrowsing"
@@ -123,6 +127,27 @@
              oncommand="PlacesCommandHook.showPlacesOrganizer('History');"/>
   </commandset>
 
+  <commandset id="inspectorCommands">
+    <command id="Inspector:Inspect"
+             oncommand="InspectorUI.toggleInspection();"/>
+    <command id="Inspector:Sidebar"
+             oncommand="InspectorUI.toggleSidebar();"/>
+    <command id="Inspector:Tilt"
+             oncommand="Tilt.initialize();"/>
+    <command id="Inspector:HTMLPanel"
+             oncommand="InspectorUI.toggleHTMLPanel();"/>
+    <command id="Inspector:CopyInner"
+             oncommand="InspectorUI.copyInnerHTML();"/>
+    <command id="Inspector:CopyOuter"
+             oncommand="InspectorUI.copyOuterHTML();"/>
+    <command id="Inspector:DeleteNode"
+             oncommand="InspectorUI.deleteNode();"/>
+    <command id="Inspector:ToggleVeil"
+             oncommand="InspectorUI.toggleVeil();"/>
+    <command id="Inspector:ToggleInfobar"
+             oncommand="InspectorUI.toggleInfobar();"/>
+  </commandset>
+
   <broadcasterset id="mainBroadcasterSet">
     <broadcaster id="viewBookmarksSidebar" autoCheck="false" label="&bookmarksButton.label;"
                  type="checkbox" group="sidebar" sidebarurl="chrome://browser/content/bookmarks/bookmarksPanel.xul"
@@ -170,23 +195,45 @@
     <broadcaster id="socialSidebarBroadcaster" hidden="true"/>
 
     <!-- DevTools broadcasters -->
-    <broadcaster id="devtoolsMenuBroadcaster_DevToolbox"
-                 label="&devToolbarToolsButton.label;"
-                 type="checkbox" autocheck="false"
-                 command="Tools:DevToolbox"/>
     <broadcaster id="devtoolsMenuBroadcaster_DevToolbar"
                  label="&devToolbarMenu.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:DevToolbar"
                  key="key_devToolbar"/>
+    <broadcaster id="devtoolsMenuBroadcaster_WebConsole"
+                 label="&webConsoleCmd.label;"
+                 type="checkbox" autocheck="false"
+                 key="key_webConsole"
+                 command="Tools:WebConsole"/>
     <broadcaster id="devtoolsMenuBroadcaster_RemoteWebConsole"
                  label="&remoteWebConsoleCmd.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:RemoteWebConsole"/>
+    <broadcaster id="devtoolsMenuBroadcaster_Inspect"
+                 label="&inspectMenu.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:Inspect"
+                 key="key_inspect"/>
+    <broadcaster id="devtoolsMenuBroadcaster_Debugger"
+                 label="&debuggerMenu.label2;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:Debugger"
+                 key="key_debugger"/>
+    <broadcaster id="devtoolsMenuBroadcaster_RemoteDebugger"
+                 label="&remoteDebuggerMenu.label;"
+                 command="Tools:RemoteDebugger"/>
+    <broadcaster id="devtoolsMenuBroadcaster_ChromeDebugger"
+                 label="&chromeDebuggerMenu.label;"
+                 command="Tools:ChromeDebugger"/>
     <broadcaster id="devtoolsMenuBroadcaster_Scratchpad"
                  label="&scratchpad.label;"
                  command="Tools:Scratchpad"
                  key="key_scratchpad"/>
+    <broadcaster id="devtoolsMenuBroadcaster_StyleEditor"
+                 label="&styleeditor.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:StyleEditor"
+                 key="key_styleeditor"/>
     <broadcaster id="devtoolsMenuBroadcaster_ResponsiveUI"
                  label="&responsiveDesignTool.label;"
                  type="checkbox" autocheck="false"
@@ -203,9 +250,6 @@
     <broadcaster id="devtoolsMenuBroadcaster_GetMoreTools"
                  label="&getMoreDevtoolsCmd.label;"
                  oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
-    <broadcaster id="devtoolsMenuBroadcaster_connect"
-                 label="&devtoolsConnect.label;"
-                 command="Tools:DevToolsConnect"/>
 
     <!-- SocialAPI broadcasters -->
     <broadcaster id="socialBroadcaster_userDetails"
@@ -227,7 +271,7 @@
 
 #
 # Search Command Key Logic works like this:
-#
+# 
 # Unix: Ctrl+K (cross platform binding)
 #       Ctrl+J (in case of emacs Ctrl-K conflict)
 # Mac:  Cmd+K (cross platform binding)
@@ -259,6 +303,27 @@
     <key id="key_errorConsole" key="&errorConsoleCmd.commandkey;" command="Tools:ErrorConsole" modifiers="accel,shift"/>
     <key id="key_devToolbar" keycode="&devToolbar.keycode;" modifiers="shift"
          keytext="&devToolbar.keytext;" command="Tools:DevToolbarFocus"/>
+    <key id="key_webConsole" key="&webConsoleCmd.commandkey;" oncommand="HUDConsoleUI.toggleHUD();"
+#ifdef XP_MACOSX
+        modifiers="accel,alt"
+#else
+        modifiers="accel,shift"
+#endif
+    />
+    <key id="key_debugger" key="&debuggerMenu.commandkey;" command="Tools:Debugger"
+#ifdef XP_MACOSX
+        modifiers="accel,alt"
+#else
+        modifiers="accel,shift"
+#endif
+    />
+    <key id="key_inspect" key="&inspectMenu.commandkey;" command="Inspector:Inspect"
+#ifdef XP_MACOSX
+        modifiers="accel,alt"
+#else
+        modifiers="accel,shift"
+#endif
+    />
     <key id="key_responsiveUI" key="&responsiveDesignTool.commandkey;" command="Tools:ResponsiveUI"
 #ifdef XP_MACOSX
         modifiers="accel,alt"
@@ -268,6 +333,8 @@
     />
     <key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
          keytext="&scratchpad.keytext;" command="Tools:Scratchpad"/>
+    <key id="key_styleeditor" keycode="&styleeditor.keycode;" modifiers="shift"
+         keytext="&styleeditor.keytext;" command="Tools:StyleEditor"/>
     <key id="openFileKb" key="&openFileCmd.commandkey;" command="Browser:OpenFile"  modifiers="accel"/>
     <key id="key_savePage" key="&savePageCmd.commandkey;" command="Browser:SavePage" modifiers="accel"/>
     <key id="printKb" key="&printCmd.commandkey;" command="cmd_print"  modifiers="accel"/>
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 66521667481..1e59706185b 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -562,6 +562,10 @@ statuspanel[inactive][previoustype=overLink] {
   -moz-box-align: end;
 }
 
+.styleInspector {
+  min-width: 350px;
+}
+
 .panel-inner-arrowcontentfooter[footertype="promobox"] {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
 }
@@ -589,16 +593,22 @@ html|*#gcli-output-frame,
   direction: ltr;
 }
 
-#developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
+#developer-toolbar-webconsole[error-count] > .toolbarbutton-icon {
   display: none;
 }
 
-#developer-toolbar-toolbox-button[error-count]:before {
+#developer-toolbar-webconsole[error-count]:before {
   content: attr(error-count);
   display: -moz-box;
   -moz-box-pack: center;
 }
 
+/* We don't show the Style Editor button in the developer toolbar for now.
+   See bug 771203 */
+#developer-toolbar-styleeditor {
+  display: none;
+}
+
 /* Responsive Mode */
 
 .browserContainer[responsivemode] {
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 573367137b3..b453b56e2f2 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -115,9 +115,28 @@ XPCOMUtils.defineLazyGetter(this, "DeveloperToolbar", function() {
   return new tmp.DeveloperToolbar(window, document.getElementById("developer-toolbar"));
 });
 
+XPCOMUtils.defineLazyGetter(this, "InspectorUI", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/inspector.jsm", tmp);
+  return new tmp.InspectorUI(window);
+});
+
+XPCOMUtils.defineLazyGetter(this, "DebuggerUI", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/devtools/DebuggerUI.jsm", tmp);
+  return new tmp.DebuggerUI(window);
+});
+
+XPCOMUtils.defineLazyGetter(this, "Tilt", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/devtools/Tilt.jsm", tmp);
+  return new tmp.Tilt(window);
+});
+
 XPCOMUtils.defineLazyModuleGetter(this, "Social",
   "resource:///modules/Social.jsm");
 
+
 XPCOMUtils.defineLazyModuleGetter(this, "PageThumbs",
   "resource:///modules/PageThumbs.jsm");
 
@@ -1409,6 +1428,36 @@ var gBrowserInit = {
       }
     }
 
+    // Enable Debugger?
+    let enabled = gPrefService.getBoolPref("devtools.debugger.enabled");
+    if (enabled) {
+      let cmd = document.getElementById("Tools:Debugger");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+    }
+
+    // Enable Remote Debugger?
+    let enabled = gPrefService.getBoolPref("devtools.debugger.remote-enabled");
+    if (enabled) {
+      let cmd = document.getElementById("Tools:RemoteDebugger");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+
+      cmd = document.getElementById("Tools:RemoteWebConsole");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+    }
+
+    // Enable Chrome Debugger?
+    let enabled = gPrefService.getBoolPref("devtools.chrome.enabled") &&
+                  gPrefService.getBoolPref("devtools.debugger.chrome-enabled") &&
+                  gPrefService.getBoolPref("devtools.debugger.remote-enabled");
+    if (enabled) {
+      let cmd = document.getElementById("Tools:ChromeDebugger");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+    }
+
     // Enable Error Console?
     // Temporarily enabled. See bug 798925.
     let consoleEnabled = true || gPrefService.getBoolPref("devtools.errorconsole.enabled") ||
@@ -1427,6 +1476,14 @@ var gBrowserInit = {
       cmd.removeAttribute("hidden");
     }
 
+    // Enable Style Editor?
+    let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
+    if (styleEditorEnabled) {
+      let cmd = document.getElementById("Tools:StyleEditor");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+    }
+
 #ifdef MENUBAR_CAN_AUTOHIDE
     // If the user (or the locale) hasn't enabled the top-level "Character
     // Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
@@ -1444,9 +1501,6 @@ var gBrowserInit = {
       cmd.removeAttribute("hidden");
     }
 
-    // Add Devtools menuitems and listeners
-    gDevTools.registerBrowserWindow(window);
-
     let appMenuButton = document.getElementById("appmenu-button");
     let appMenuPopup = document.getElementById("appmenu-popup");
     if (appMenuButton && appMenuPopup) {
@@ -1489,7 +1543,8 @@ var gBrowserInit = {
     if (!gStartupRan)
       return;
 
-    gDevTools.forgetBrowserWindow(window);
+    if (!__lookupGetter__("InspectorUI"))
+      InspectorUI.destroy();
 
     // First clean up services initialized in gBrowserInit.onLoad (or those whose
     // uninit methods don't depend on the services having been initialized).
@@ -1587,7 +1642,7 @@ var gBrowserInit = {
                          'viewToolbarsMenu', 'viewSidebarMenuMenu', 'Browser:Reload',
                          'viewFullZoomMenu', 'pageStyleMenu', 'charsetMenu', 'View:PageSource', 'View:FullScreen',
                          'viewHistorySidebar', 'Browser:AddBookmarkAs', 'Browser:BookmarkAllTabs',
-                         'View:PageInfo', 'Browser:ToggleTabView', 'Browser:ToggleAddonBar'];
+                         'View:PageInfo', 'Tasks:InspectPage', 'Browser:ToggleTabView', 'Browser:ToggleAddonBar'];
     var element;
 
     for (let disabledItem of disabledItems) {
@@ -7393,12 +7448,6 @@ var TabContextMenu = {
   }
 };
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "DevToolsXULCommands",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-
 XPCOMUtils.defineLazyGetter(this, "HUDConsoleUI", function () {
   let tempScope = {};
   Cu.import("resource:///modules/HUDService.jsm", tempScope);
@@ -7495,6 +7544,41 @@ XPCOMUtils.defineLazyGetter(ResponsiveUI, "ResponsiveUIManager", function() {
   return tmp.ResponsiveUIManager;
 });
 
+var StyleEditor = {
+  prefEnabledName: "devtools.styleeditor.enabled",
+  /**
+   * Opens the style editor. If the UI is already open, it will be focused.
+   *
+   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
+   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
+   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
+   */
+  openChrome: function SE_openChrome(aSelectedStyleSheet, aLine, aCol)
+  {
+    let contentWindow = gBrowser.selectedBrowser.contentWindow;
+    let win = this.StyleEditorManager.getEditorForWindow(contentWindow);
+    if (win) {
+      this.StyleEditorManager.selectEditor(win);
+      return win;
+    } else {
+      return this.StyleEditorManager.newEditor(contentWindow, window,
+                                               aSelectedStyleSheet, aLine, aCol);
+    }
+  },
+
+  toggle: function SE_toggle()
+  {
+    this.StyleEditorManager.toggleEditor(gBrowser.contentWindow, window);
+  }
+};
+
+XPCOMUtils.defineLazyGetter(StyleEditor, "StyleEditorManager", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/devtools/StyleEditor.jsm", tmp);
+  return new tmp.StyleEditorManager(window);
+});
+
+
 XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
 #ifdef XP_WIN
   // Only show resizers on Windows 2000 and XP
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index e49cf24da6e..38d9462e564 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -278,6 +278,22 @@
            noautofocus="true"
            position="topcenter topright"/>
 
+    <menupopup id="inspector-node-popup">
+      <menuitem id="inspectorHTMLCopyInner"
+                label="&inspectorHTMLCopyInner.label;"
+                accesskey="&inspectorHTMLCopyInner.accesskey;"
+                command="Inspector:CopyInner"/>
+      <menuitem id="inspectorHTMLCopyOuter"
+                label="&inspectorHTMLCopyOuter.label;"
+                accesskey="&inspectorHTMLCopyOuter.accesskey;"
+                command="Inspector:CopyOuter"/>
+      <menuseparator/>
+      <menuitem id="inspectorHTMLDelete"
+                label="&inspectorHTMLDelete.label;"
+                accesskey="&inspectorHTMLDelete.accesskey;"
+                command="Inspector:DeleteNode"/>
+    </menupopup>
+
     <menupopup id="toolbar-context-menu"
                onpopupshowing="onViewToolbarsPopupShowing(event);">
       <menuseparator/>
@@ -1048,6 +1064,19 @@
       <chatbar id="pinnedchats" layer="true" mousethrough="always" hidden="true"/>
       <statuspanel id="statusbar-display" inactive="true"/>
     </vbox>
+    <splitter id="devtools-side-splitter" hidden="true"/>
+    <vbox id="devtools-sidebar-box" hidden="true"
+          style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
+      <toolbar id="devtools-sidebar-toolbar"
+               class="devtools-toolbar"
+               nowindowdrag="true">
+        <spacer flex="1"/>
+        <toolbarbutton tooltiptext="&inspectSidebarCloseButton.tooltiptext;"
+                       class="devtools-closebutton"
+                       command="Inspector:Sidebar"/>
+      </toolbar>
+      <deck id="devtools-sidebar-deck" flex="1"/>
+    </vbox>
     <splitter id="social-sidebar-splitter"
               class="chromeclass-extrachrome sidebar-splitter"
               observes="socialSidebarBroadcaster"/>
@@ -1086,6 +1115,52 @@
   </hbox>
 
   <vbox id="browser-bottombox" layer="true">
+    <toolbar id="inspector-toolbar"
+             class="devtools-toolbar"
+             nowindowdrag="true"
+             hidden="true">
+#ifdef XP_MACOSX
+      <toolbarbutton id="highlighter-closebutton"
+                     class="devtools-closebutton"
+                     oncommand="InspectorUI.closeInspectorUI(false);"
+                     tooltiptext="&inspectCloseButton.tooltiptext;"/>
+#endif
+      <toolbarbutton id="inspector-inspect-toolbutton"
+                     class="devtools-toolbarbutton"
+                     command="Inspector:Inspect"/>
+      <toolbarbutton id="inspector-treepanel-toolbutton"
+                     class="devtools-toolbarbutton"
+                     tabindex="0"
+                     aria-label="&markupButton.arialabel;"
+                     accesskey="&markupButton.accesskey;"
+                     command="Inspector:HTMLPanel"/>
+      <arrowscrollbox id="inspector-breadcrumbs"
+                      flex="1" orient="horizontal"
+                      clicktoscroll="true"/>
+      <hbox id="inspector-tools">
+        <toolbarbutton id="inspector-3D-button"
+                       class="devtools-toolbarbutton"
+                       hidden="true"
+                       label="&inspect3DViewButton.label;"
+                       accesskey="&inspect3DViewButton.accesskey;"
+                       tabindex="0"
+                       command="Inspector:Tilt"/>
+        <toolbarbutton id="inspector-style-button"
+                       class="devtools-toolbarbutton"
+                       label="&inspectStyleButton.label;"
+                       accesskey="&inspectStyleButton.accesskey;"
+                       tabindex="0"
+                       command="Inspector:Sidebar"/>
+        <!-- registered tools go here -->
+      </hbox>
+#ifndef XP_MACOSX
+      <toolbarbutton id="highlighter-closebutton"
+                     class="devtools-closebutton"
+                     oncommand="InspectorUI.closeInspectorUI(false);"
+                     tooltiptext="&inspectCloseButton.tooltiptext;"/>
+#endif
+    </toolbar>
+
     <toolbar id="developer-toolbar"
              class="devtools-toolbar"
              hidden="true">
@@ -1102,9 +1177,36 @@
             <hbox class="gclitoolbar-complete-node"/>
             <textbox class="gclitoolbar-input-node" rows="1"/>
           </stack>
-          <toolbarbutton id="developer-toolbar-toolbox-button"
+          <toolbarbutton id="developer-toolbar-webconsole"
                          class="developer-toolbar-button"
-                         observes="devtoolsMenuBroadcaster_DevToolbox"/>
+                         observes="devtoolsMenuBroadcaster_WebConsole"/>
+          <toolbarbutton id="developer-toolbar-inspector"
+                         class="developer-toolbar-button"
+                         observes="devtoolsMenuBroadcaster_Inspect"/>
+          <toolbarbutton id="developer-toolbar-styleeditor"
+                         class="developer-toolbar-button"
+                         observes="devtoolsMenuBroadcaster_StyleEditor"/>
+          <toolbarbutton id="developer-toolbar-debugger"
+                         class="developer-toolbar-button"
+                         observes="devtoolsMenuBroadcaster_Debugger"/>
+          <toolbarbutton id="developer-toolbar-other-tools"
+                         type="menu"
+                         class="developer-toolbar-button"
+                         label="&devToolbarOtherToolsButton.label;">
+            <menupopup position="before_end">
+               <menuitem observes="devtoolsMenuBroadcaster_DevToolbar"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
+               <menuitem observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+               <menuitem observes="devtoolsMenuBroadcaster_Scratchpad"/>
+               <menuitem observes="devtoolsMenuBroadcaster_StyleEditor"/>
+               <menuitem observes="devtoolsMenuBroadcaster_PageSource"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ErrorConsole"/>
+               <menuseparator/>
+               <menuitem observes="devtoolsMenuBroadcaster_GetMoreTools"/>
+            </menupopup>
+          </toolbarbutton>
+
 #ifndef XP_MACOSX
           <toolbarbutton id="developer-toolbar-closebutton"
                          class="devtools-closebutton"
diff --git a/browser/base/content/highlighter.css b/browser/base/content/highlighter.css
index 0992a877a5b..574060d5ca3 100644
--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@@ -2,60 +2,64 @@
  * 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/. */
  
-.highlighter-container {
+#highlighter-container {
   pointer-events: none;
 }
 
-.highlighter-controls {
+#highlighter-controls {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-.highlighter-outline-container {
+#highlighter-outline-container {
   overflow: hidden;
   position: relative;
 }
 
-.highlighter-outline {
+#highlighter-outline {
   position: absolute;
 }
 
-.highlighter-outline[hidden] {
+#highlighter-outline[hidden] {
   opacity: 0;
   pointer-events: none;
   display: -moz-box;
 }
 
-.highlighter-outline:not([disable-transitions]) {
+#highlighter-outline:not([disable-transitions]) {
   transition-property: opacity, top, left, width, height;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
+.inspector-breadcrumbs-button {
+  direction: ltr;
+}
+
 /*
  * Node Infobar
  */
 
-.highlighter-nodeinfobar-container {
+#highlighter-nodeinfobar-container {
   position: absolute;
   max-width: 95%;
 }
 
-.highlighter-nodeinfobar-container[hidden] {
+#highlighter-nodeinfobar-container[hidden] {
   opacity: 0;
   pointer-events: none;
   display: -moz-box;
 }
 
-.highlighter-nodeinfobar-container:not([disable-transitions]),
-.highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
+#highlighter-nodeinfobar-container:not([disable-transitions]),
+#highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
   transition-property: transform, opacity, top, left;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
-.highlighter-nodeinfobar-text {
+#highlighter-nodeinfobar-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -66,19 +70,19 @@
   display: none;
 }
 
-.highlighter-nodeinfobar-container:not([locked]):not(:hover) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
+#highlighter-nodeinfobar-container:not([locked]):not(:hover) > #highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
   visibility: hidden;
 }
 
-.highlighter-nodeinfobar-container[locked] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container:not([locked]):hover > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar,
+#highlighter-nodeinfobar-container:not([locked]):hover > #highlighter-nodeinfobar {
   pointer-events: auto;
 }
 
-html|*.highlighter-nodeinfobar-id,
-html|*.highlighter-nodeinfobar-classes,
-html|*.highlighter-nodeinfobar-pseudo-classes,
-html|*.highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-id,
+html|*#highlighter-nodeinfobar-classes,
+html|*#highlighter-nodeinfobar-pseudo-classes,
+html|*#highlighter-nodeinfobar-tagname {
   -moz-user-select: text;
   cursor: text;
 }
@@ -87,18 +91,41 @@ html|*.highlighter-nodeinfobar-tagname {
   display: none;
 }
 
-.highlighter-nodeinfobar-container[position="top"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-bottom {
+#highlighter-nodeinfobar-container[position="top"]:not([hide-arrow]) > #highlighter-nodeinfobar-arrow-bottom {
   display: block;
 }
 
-.highlighter-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-top {
+#highlighter-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > #highlighter-nodeinfobar-arrow-top {
   display: block;
 }
 
-.highlighter-nodeinfobar-container[disabled] {
+#highlighter-nodeinfobar-container[disabled] {
   visibility: hidden;
 }
 
-html|*.highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   text-transform: lowercase;
 }
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+#inspector-option-toolbarbutton > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
+#inspector-layoutview-container > iframe {
+  /* header size */
+  height: 28px;
+}
+
+#inspector-layoutview-container:not([disable-transitions]) > iframe {
+  transition-property: height;
+  transition-duration: 0.2s;
+}
+
+#inspector-layoutview-container > iframe[open] {
+  /* header size + layout view size: 28px + 145px */
+  height: 173px;
+}
diff --git a/browser/base/content/nsContextMenu.js b/browser/base/content/nsContextMenu.js
index 29c015ed16d..397aad3bd1f 100644
--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@@ -412,19 +412,11 @@ nsContextMenu.prototype = {
   },
 
   inspectNode: function CM_inspectNode() {
-    let gBrowser = this.browser.ownerDocument.defaultView.gBrowser;
-    let imported = {};
-    Cu.import("resource:///modules/devtools/Target.jsm", imported);
-    var target = imported.TargetFactory.forTab(gBrowser.selectedTab);
-    let inspector = gDevTools.getPanelForTarget("inspector", target);
-    if (inspector && inspector.isReady) {
-      inspector.selection.setNode(this.target);
+    if (InspectorUI.isTreePanelOpen) {
+      InspectorUI.inspectNode(this.target);
+      InspectorUI.stopInspecting();
     } else {
-      let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-      toolbox.once("inspector-ready", function(event, panel) {
-        let inspector = gDevTools.getPanelForTarget("inspector", target);
-        inspector.selection.setNode(this.target, "browser-context-menu");
-      }.bind(this));
+      InspectorUI.openInspectorUI(this.target);
     }
   },
 
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index 9823172f2f6..5a40eafa26a 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -13,7 +13,7 @@ include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/config.mk
 
 DIRS = \
-  inspector \
+  highlighter \
   markupview \
   webconsole \
   commandline \
@@ -26,7 +26,6 @@ DIRS = \
   layoutview \
   shared \
   responsivedesign \
-  framework \
   $(NULL)
 
 include $(topsrcdir)/config/rules.mk
diff --git a/browser/devtools/commandline/CmdBreak.jsm b/browser/devtools/commandline/CmdBreak.jsm
index e132ec25913..819e7002b25 100644
--- a/browser/devtools/commandline/CmdBreak.jsm
+++ b/browser/devtools/commandline/CmdBreak.jsm
@@ -12,12 +12,6 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
                                   "resource:///modules/HUDService.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-
 /**
  * 'break' command
  */
@@ -36,15 +30,12 @@ gcli.addCommand({
   description: gcli.lookup("breaklistDesc"),
   returnType: "html",
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-
+    let win = HUDService.currentContext();
+    let dbg = win.DebuggerUI.getDebugger();
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
-
-    let breakpoints = dbg.getAllBreakpoints();
+    let breakpoints = dbg.breakpoints;
 
     if (Object.keys(breakpoints).length === 0) {
       return gcli.lookup("breaklistNone");
@@ -85,13 +76,11 @@ gcli.addCommand({
       type: {
         name: "selection",
         data: function() {
-          let gBrowser = HUDService.currentContext().gBrowser;
-          let target = TargetFactory.forTab(gBrowser.selectedTab);
-          let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-
+          let win = HUDService.currentContext();
+          let dbg = win.DebuggerUI.getDebugger();
           let files = [];
           if (dbg) {
-            let sourcesView = dbg.panelWin.DebuggerView.Sources;
+            let sourcesView = dbg.contentWindow.DebuggerView.Sources;
             for (let item in sourcesView) {
               files.push(item.value);
             }
@@ -110,11 +99,8 @@ gcli.addCommand({
   returnType: "html",
   exec: function(args, context) {
     args.type = "line";
-
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-
+    let win = HUDService.currentContext();
+    let dbg = win.DebuggerUI.getDebugger();
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
@@ -145,14 +131,12 @@ gcli.addCommand({
         name: "number",
         min: 0,
         max: function() {
-          let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-          let target = TargetFactory.forTab(gBrowser.selectedTab);
-          let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-
+          let win = HUDService.currentContext();
+          let dbg = win.DebuggerUI.getDebugger();
           if (!dbg) {
             return gcli.lookup("breakaddDebuggerStopped");
           }
-          return Object.keys(dbg.getAllBreakpoints()).length - 1;
+          return Object.keys(dbg.breakpoints).length - 1;
         },
       },
       description: gcli.lookup("breakdelBreakidDesc")
@@ -160,16 +144,14 @@ gcli.addCommand({
   ],
   returnType: "html",
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-
+    let win = HUDService.currentContext();
+    let dbg = win.DebuggerUI.getDebugger();
     if (!dbg) {
       return gcli.lookup("breakaddDebuggerStopped");
     }
 
-    let breakpoints = dbg.getAllBreakpoints();
-    let id = Object.keys(breakpoints)[args.breakid];
+    let breakpoints = dbg.breakpoints;
+    let id = Object.keys(dbg.breakpoints)[args.breakid];
     if (!id || !(id in breakpoints)) {
       return gcli.lookup("breakNotFound");
     }
diff --git a/browser/devtools/commandline/CmdCalllog.jsm b/browser/devtools/commandline/CmdCalllog.jsm
index ef60785a72f..d143a4b2a69 100644
--- a/browser/devtools/commandline/CmdCalllog.jsm
+++ b/browser/devtools/commandline/CmdCalllog.jsm
@@ -9,8 +9,8 @@ this.EXPORTED_SYMBOLS = [ ];
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
+                                  "resource:///modules/HUDService.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   let JsDebugger = {};
@@ -22,9 +22,6 @@ XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   return global.Debugger;
 });
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
-
 let debuggers = [];
 
 /**
@@ -53,9 +50,8 @@ gcli.addCommand({
 
     debuggers.push(dbg);
 
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.openToolboxForTab(target, "webconsole");
+    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab;
+    HUDService.activateHUDForContext(tab);
 
     return gcli.lookup("calllogStartReply");
   },
diff --git a/browser/devtools/commandline/CmdCalllogChrome.jsm b/browser/devtools/commandline/CmdCalllogChrome.jsm
index 60545fe8a1c..80aa141155c 100644
--- a/browser/devtools/commandline/CmdCalllogChrome.jsm
+++ b/browser/devtools/commandline/CmdCalllogChrome.jsm
@@ -10,10 +10,8 @@ const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
+                                  "resource:///modules/HUDService.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "Debugger", function() {
   let JsDebugger = {};
@@ -110,9 +108,8 @@ gcli.addCommand({
                                 ": " + this.callDescription(frame));
     }.bind(this);
 
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.openToolboxForTab(target, "webconsole");
+    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab;
+    HUDService.activateHUDForContext(tab);
 
     return gcli.lookup("calllogChromeStartReply");
   },
diff --git a/browser/devtools/commandline/CmdConsole.jsm b/browser/devtools/commandline/CmdConsole.jsm
index 4a602b6a4c7..391ced0b7be 100644
--- a/browser/devtools/commandline/CmdConsole.jsm
+++ b/browser/devtools/commandline/CmdConsole.jsm
@@ -11,10 +11,6 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
                                   "resource:///modules/HUDService.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
 
 /**
  * 'console' command
@@ -48,9 +44,8 @@ gcli.addCommand({
   name: "console close",
   description: gcli.lookup("consolecloseDesc"),
   exec: function Command_consoleClose(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
+    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab
+    HUDService.deactivateHUDForContext(tab);
   }
 });
 
@@ -61,8 +56,7 @@ gcli.addCommand({
   name: "console open",
   description: gcli.lookup("consoleopenDesc"),
   exec: function Command_consoleOpen(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.openToolboxForTab(target, "webconsole");
+    let tab = context.environment.chromeDocument.defaultView.gBrowser.selectedTab
+    HUDService.activateHUDForContext(tab);
   }
 });
diff --git a/browser/devtools/commandline/CmdDbg.jsm b/browser/devtools/commandline/CmdDbg.jsm
index c0dc1b30b85..257efd2afc2 100644
--- a/browser/devtools/commandline/CmdDbg.jsm
+++ b/browser/devtools/commandline/CmdDbg.jsm
@@ -9,11 +9,6 @@ this.EXPORTED_SYMBOLS = [ ];
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
-
 /**
  * 'dbg' command
  */
@@ -31,9 +26,19 @@ gcli.addCommand({
   description: gcli.lookup("dbgOpen"),
   params: [],
   exec: function (args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.openToolboxForTab(target, "jsdebugger");
+    let win = context.environment.chromeDocument.defaultView;
+    let tab = win.gBrowser.selectedTab;
+    let dbg = win.DebuggerUI.findDebugger();
+
+    if (dbg) {
+      if (dbg.ownerTab !== tab) {
+        win.DebuggerUI.toggleDebugger();
+      }
+
+      return;
+    }
+
+    win.DebuggerUI.toggleDebugger();
   }
 });
 
@@ -45,12 +50,12 @@ gcli.addCommand({
   description: gcli.lookup("dbgClose"),
   params: [],
   exec: function (args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let tab = win.gBrowser.selectedTab;
+    let dbg = win.DebuggerUI.findDebugger();
 
-    if (dbg /* FIXME: and debugger panel is currently active */) {
-      gDevTools.closeToolbox(target);
+    if (dbg) {
+      dbg.close();
     }
   }
 });
@@ -63,12 +68,11 @@ gcli.addCommand({
   description: gcli.lookup("dbgInterrupt"),
   params: [],
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let dbg = win.DebuggerUI.getDebugger();
 
     if (dbg) {
-      let controller = dbg._controller;
+      let controller = dbg.contentWindow.DebuggerController;
       let thread = controller.activeThread;
       if (!thread.paused) {
         thread.interrupt();
@@ -85,12 +89,11 @@ gcli.addCommand({
   description: gcli.lookup("dbgContinue"),
   params: [],
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let dbg = win.DebuggerUI.getDebugger();
 
     if (dbg) {
-      let controller = dbg._controller;
+      let controller = dbg.contentWindow.DebuggerController;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.resume();
@@ -118,12 +121,11 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepOverDesc"),
   params: [],
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let dbg = win.DebuggerUI.getDebugger();
 
     if (dbg) {
-      let controller = dbg._controller;
+      let controller = dbg.contentWindow.DebuggerController;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepOver();
@@ -140,12 +142,11 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepInDesc"),
   params: [],
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let dbg = win.DebuggerUI.getDebugger();
 
     if (dbg) {
-      let controller = dbg._controller;
+      let controller = dbg.contentWindow.DebuggerController;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepIn();
@@ -162,12 +163,11 @@ gcli.addCommand({
   description: gcli.lookup("dbgStepOutDesc"),
   params: [],
   exec: function(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
+    let win = context.environment.chromeDocument.defaultView;
+    let dbg = win.DebuggerUI.getDebugger();
 
     if (dbg) {
-      let controller = dbg._controller;
+      let controller = dbg.contentWindow.DebuggerController;
       let thread = controller.activeThread;
       if (thread.paused) {
         thread.stepOut();
diff --git a/browser/devtools/commandline/Commands.jsm b/browser/devtools/commandline/Commands.jsm
index 452f2778912..c1ca7dd0ffa 100644
--- a/browser/devtools/commandline/Commands.jsm
+++ b/browser/devtools/commandline/Commands.jsm
@@ -24,4 +24,3 @@ Cu.import("resource:///modules/devtools/CmdResize.jsm");
 Cu.import("resource:///modules/devtools/CmdRestart.jsm");
 Cu.import("resource:///modules/devtools/CmdScreenshot.jsm");
 Cu.import("resource:///modules/devtools/CmdTilt.jsm");
-Cu.import("resource:///modules/devtools/CmdScratchpad.jsm");
diff --git a/browser/devtools/commandline/test/browser_dbg_cmd.js b/browser/devtools/commandline/test/browser_dbg_cmd.js
index bb950d87760..d6e6f4cffc6 100644
--- a/browser/devtools/commandline/test/browser_dbg_cmd.js
+++ b/browser/devtools/commandline/test/browser_dbg_cmd.js
@@ -1,11 +1,3 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test() {
   const TEST_URI = "http://example.com/browser/browser/devtools/commandline/" +
                    "test/browser_dbg_cmd.html";
@@ -15,40 +7,54 @@ function test() {
   });
 }
 
-function testCommands(dbg, cmd) {
-  // Wait for the initial resume...
-  dbg._controller.activeThread.addOneTimeListener("resumed", function () {
-    info("Starting tests.");
+function testDbgCmd() {
+  DeveloperToolbarTest.exec({
+    typed: "dbg open",
+    blankOutput: true
+  });
 
-    let contentDoc = content.window.document;
-    let output = contentDoc.querySelector("input[type=text]");
-    let btnDoit = contentDoc.querySelector("input[type=button]");
+  let pane = DebuggerUI.findDebugger();
+  ok(pane, "Debugger was opened.");
+  let frame = pane._frame;
 
-    cmd("dbg interrupt", function() {
-      ok(true, "debugger is paused");
-      dbg._controller.activeThread.addOneTimeListener("resumed", function () {
-        ok(true, "debugger continued");
-        dbg._controller.activeThread.addOneTimeListener("paused", function() {
-          cmd("dbg step in", function() {
+  frame.addEventListener("Debugger:Connected", function dbgConnected(aEvent) {
+    frame.removeEventListener("Debugger:Connected", dbgConnected, true);
+
+    // Wait for the initial resume...
+    aEvent.target.ownerDocument.defaultView.gClient
+        .addOneTimeListener("resumed", function() {
+
+      info("Starting tests.");
+
+      let contentDoc = content.window.document;
+      let output = contentDoc.querySelector("input[type=text]");
+      let btnDoit = contentDoc.querySelector("input[type=button]");
+
+      cmd("dbg interrupt", function() {
+        ok(true, "debugger is paused");
+        pane.contentWindow.gClient.addOneTimeListener("resumed", function() {
+          ok(true, "debugger continued");
+          pane.contentWindow.gClient.addOneTimeListener("paused", function() {
             cmd("dbg step in", function() {
               cmd("dbg step in", function() {
-                is(output.value, "step in", "debugger stepped in");
-                cmd("dbg step over", function() {
-                  is(output.value, "step over", "debugger stepped over");
-                  cmd("dbg step out", function() {
-                    is(output.value, "step out", "debugger stepped out");
-                    cmd("dbg continue", function() {
+                cmd("dbg step in", function() {
+                  is(output.value, "step in", "debugger stepped in");
+                  cmd("dbg step over", function() {
+                    is(output.value, "step over", "debugger stepped over");
+                    cmd("dbg step out", function() {
+                      is(output.value, "step out", "debugger stepped out");
                       cmd("dbg continue", function() {
-                        is(output.value, "dbg continue", "debugger continued");
-                        DeveloperToolbarTest.exec({
-                          typed: "dbg close",
-                          blankOutput: true
-                        });
+                        cmd("dbg continue", function() {
+                          is(output.value, "dbg continue", "debugger continued");
+                          DeveloperToolbarTest.exec({
+                            typed: "dbg close",
+                            blankOutput: true
+                          });
 
-                        let target = TargetFactory.forTab(gBrowser.selectedTab);
-                        ok(!gDevTools.getToolboxForTarget(target),
-                          "Debugger was closed.");
-                        finish();
+                          let dbg = DebuggerUI.findDebugger();
+                          ok(!dbg, "Debugger was closed.");
+                          finish();
+                        });
                       });
                     });
                   });
@@ -56,42 +62,21 @@ function testCommands(dbg, cmd) {
               });
             });
           });
+          EventUtils.sendMouseEvent({type:"click"}, btnDoit);
+        });
+        DeveloperToolbarTest.exec({
+          typed: "dbg continue",
+          blankOutput: true
         });
-        EventUtils.sendMouseEvent({type:"click"}, btnDoit);
-      });
-      DeveloperToolbarTest.exec({
-        typed: "dbg continue",
-        blankOutput: true
       });
     });
-  });
-}
-
-function testDbgCmd() {
-  DeveloperToolbarTest.exec({
-    typed: "dbg open",
-    blankOutput: true
-  });
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.getToolboxForTarget(target);
-
-  toolbox.once("jsdebugger-ready", function dbgReady() {
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-    ok(dbg, "DebuggerPanel exists");
 
     function cmd(aTyped, aCallback) {
-      dbg._controller.activeThread.addOneTimeListener("paused", aCallback);
+      pane.contentWindow.gClient.addOneTimeListener("paused", aCallback);
       DeveloperToolbarTest.exec({
         typed: aTyped,
         blankOutput: true
       });
     }
-
-    if (dbg._controller.activeThread) {
-      testCommands(dbg, cmd);
-    } else {
-      dbg.once("connected", testCommands.bind(null, dbg, cmd));
-    }
   });
 }
diff --git a/browser/devtools/commandline/test/browser_dbg_cmd_break.js b/browser/devtools/commandline/test/browser_dbg_cmd_break.js
index 9d66767b034..f3299f4c2e3 100644
--- a/browser/devtools/commandline/test/browser_dbg_cmd_break.js
+++ b/browser/devtools/commandline/test/browser_dbg_cmd_break.js
@@ -6,10 +6,6 @@
 const TEST_URI = "http://example.com/browser/browser/devtools/commandline/" +
                  "test/browser_dbg_cmd_break.html";
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test() {
   DeveloperToolbarTest.test(TEST_URI, [ testBreakCommands ]);
 }
@@ -39,84 +35,86 @@ function testBreakCommands() {
     status: 'ERROR'
   });
 
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.openToolboxForTab(target, "jsdebugger");
-  toolbox.once("jsdebugger-ready", function dbgReady() {
-    let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-    ok(dbg, "DebuggerPanel exists");
-    dbg.once("connected", function() {
-      // Wait for the initial resume...
-      dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
-        dbg._view.Variables.lazyEmpty = false;
+  let pane = DebuggerUI.toggleDebugger();
 
-        var client = dbg.panelWin.gClient;
-        var framesAdded = DeveloperToolbarTest.checkCalled(function() {
-          helpers.setInput('break add line ' + TEST_URI + ' ' + content.wrappedJSObject.line0);
+  var dbgConnected = DeveloperToolbarTest.checkCalled(function() {
+    pane._frame.removeEventListener("Debugger:Connected", dbgConnected, true);
+
+    // Wait for the initial resume.
+    let client = pane.contentWindow.gClient;
+
+    var resumed = DeveloperToolbarTest.checkCalled(function() {
+
+      var framesAdded = DeveloperToolbarTest.checkCalled(function() {
+        helpers.setInput('break add line ' + TEST_URI + ' ' + content.wrappedJSObject.line0);
+        helpers.check({
+          hints: '',
+          status: 'VALID',
+          args: {
+            file: { value: TEST_URI },
+            line: { value: content.wrappedJSObject.line0 },
+          }
+        });
+
+        DeveloperToolbarTest.exec({
+          args: {
+            type: 'line',
+            file: TEST_URI,
+            line: content.wrappedJSObject.line0
+          },
+          completed: false
+        });
+
+        helpers.setInput('break list');
+        helpers.check({
+          input:  'break list',
+          hints:            '',
+          markup: 'VVVVVVVVVV',
+          status: 'VALID'
+        });
+
+        DeveloperToolbarTest.exec();
+
+        var cleanup = DeveloperToolbarTest.checkCalled(function() {
+          helpers.setInput('break del 9');
           helpers.check({
-            hints: '',
+            input:  'break del 9',
+            hints:             '',
+            markup: 'VVVVVVVVVVE',
+            status: 'ERROR',
+            args: {
+              breakid: { status: 'ERROR', message: '9 is greater than maximum allowed: 0.' },
+            }
+          });
+
+          helpers.setInput('break del 0');
+          helpers.check({
+            input:  'break del 0',
+            hints:             '',
+            markup: 'VVVVVVVVVVV',
             status: 'VALID',
             args: {
-              file: { value: TEST_URI },
-              line: { value: content.wrappedJSObject.line0 },
+              breakid: { value: 0 },
             }
           });
 
           DeveloperToolbarTest.exec({
-            args: {
-              type: 'line',
-              file: TEST_URI,
-              line: content.wrappedJSObject.line0
-            },
+            args: { breakid: 0 },
             completed: false
           });
-
-          helpers.setInput('break list');
-          helpers.check({
-            input:  'break list',
-            hints:            '',
-            markup: 'VVVVVVVVVV',
-            status: 'VALID'
-          });
-
-          DeveloperToolbarTest.exec();
-
-          var cleanup = DeveloperToolbarTest.checkCalled(function() {
-            helpers.setInput('break del 9');
-            helpers.check({
-              input:  'break del 9',
-              hints:             '',
-              markup: 'VVVVVVVVVVE',
-              status: 'ERROR',
-              args: {
-                breakid: { status: 'ERROR', message: '9 is greater than maximum allowed: 0.' },
-              }
-            });
-
-            helpers.setInput('break del 0');
-            helpers.check({
-              input:  'break del 0',
-              hints:             '',
-              markup: 'VVVVVVVVVVV',
-              status: 'VALID',
-              args: {
-                breakid: { value: 0 },
-              }
-            });
-
-            DeveloperToolbarTest.exec({
-              args: { breakid: 0 },
-              completed: false
-            });
-          });
-
-          client.activeThread.resume(cleanup);
         });
 
-        client.activeThread.addOneTimeListener("framesadded", framesAdded);
-
-        // Trigger newScript notifications using eval.
-        content.wrappedJSObject.firstCall();
+        client.activeThread.resume(cleanup);
       });
+
+      client.activeThread.addOneTimeListener("framesadded", framesAdded);
+
+      // Trigger newScript notifications using eval.
+      content.wrappedJSObject.firstCall();
     });
+
+    client.addOneTimeListener("resumed", resumed);
   });
+
+  pane._frame.addEventListener("Debugger:Connected", dbgConnected, true);
 }
diff --git a/browser/devtools/debugger/DebuggerPanel.jsm b/browser/devtools/debugger/DebuggerPanel.jsm
deleted file mode 100644
index ec60045741f..00000000000
--- a/browser/devtools/debugger/DebuggerPanel.jsm
+++ /dev/null
@@ -1,144 +0,0 @@
-/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-"use strict";
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-
-this.EXPORTED_SYMBOLS = ["DebuggerDefinition"];
-
-const STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "Services",
-                                  "resource://gre/modules/Services.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
-                                  "resource:///modules/devtools/EventEmitter.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
-                                  "resource://gre/modules/devtools/dbg-server.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyGetter(this, "_strings",
-  function() Services.strings.createBundle(STRINGS_URI));
-
-XPCOMUtils.defineLazyGetter(this, "osString", function() {
-  return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
-});
-
-this.DebuggerDefinition = {
-  id: "jsdebugger",
-  key: l10n("open.commandkey"),
-  accesskey: l10n("debuggerMenu.accesskey"),
-  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  ordinal: 1,
-  killswitch: "devtools.debugger.enabled",
-  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
-  url: "chrome://browser/content/debugger.xul",
-  label: l10n("ToolboxDebugger.label"),
-
-  isTargetSupported: function(target) {
-    return true;
-  },
-
-  build: function(iframeWindow, toolbox) {
-    return new DebuggerPanel(iframeWindow, toolbox);
-  }
-};
-
-
-function DebuggerPanel(iframeWindow, toolbox) {
-  this._toolbox = toolbox;
-  this._controller = iframeWindow.DebuggerController;
-  this._view = iframeWindow.DebuggerView;
-  this._controller._target = this.target;
-  this._bkp = this._controller.Breakpoints;
-  this.panelWin = iframeWindow;
-
-  this._ensureOnlyOneRunningDebugger();
-  if (!this.target.isRemote) {
-    if (!DebuggerServer.initialized) {
-      DebuggerServer.init();
-      DebuggerServer.addBrowserActors();
-    }
-  }
-
-  let onDebuggerLoaded = function () {
-    iframeWindow.removeEventListener("Debugger:Loaded", onDebuggerLoaded, true);
-    this.setReady();
-  }.bind(this);
-
-  let onDebuggerConnected = function () {
-    iframeWindow.removeEventListener("Debugger:Connected",
-      onDebuggerConnected, true);
-    this.emit("connected");
-  }.bind(this);
-
-  iframeWindow.addEventListener("Debugger:Loaded", onDebuggerLoaded, true);
-  iframeWindow.addEventListener("Debugger:Connected",
-    onDebuggerConnected, true);
-
-  new EventEmitter(this);
-}
-
-DebuggerPanel.prototype = {
-  // DevToolPanel API
-  get target() this._toolbox.target,
-
-  get isReady() this._isReady,
-
-  setReady: function() {
-    this._isReady = true;
-    this.emit("ready");
-  },
-
-  destroy: function() {
-    delete this._toolbox;
-    delete this._target;
-    delete this._controller;
-    delete this._view;
-    delete this._bkp;
-    delete this.panelWin;
-  },
-
-  // DebuggerPanel API
-
-  addBreakpoint: function() {
-    this._bkp.addBreakpoint.apply(this._bkp, arguments);
-  },
-
-  removeBreakpoint: function() {
-    this._bkp.removeBreakpoint.apply(this._bkp, arguments);
-  },
-
-  getBreakpoint: function() {
-    return this._bkp.getBreakpoint.apply(this._bkp, arguments);
-  },
-
-  getAllBreakpoints: function() {
-    return this._bkp.store;
-  },
-
-  // Private
-
-  _ensureOnlyOneRunningDebugger: function() {
-    // FIXME
-  },
-};
-
-/**
- * Lookup l10n string from a string bundle.
- * @param {string} aName The key to lookup.
- * @returns A localized version of the given key.
- */
-function l10n(aName)
-{
-  try {
-    return _strings.GetStringFromName(aName);
-  } catch (ex) {
-    Services.console.logStringMessage("Error reading '" + aName + "'");
-    throw new Error("l10n error with " + aName);
-  }
-}
diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js
index aaa1e18ebe6..110d872834e 100644
--- a/browser/devtools/debugger/debugger-controller.js
+++ b/browser/devtools/debugger/debugger-controller.js
@@ -48,7 +48,6 @@ let DebuggerController = {
       return;
     }
     this._isInitialized = true;
-
     window.removeEventListener("load", this._startupDebugger, true);
 
     DebuggerView.initialize(function() {
@@ -146,32 +145,14 @@ let DebuggerController = {
    * wiring event handlers as necessary.
    */
   _connect: function DC__connect() {
-    function callback() {
-      window.dispatchEvent("Debugger:Connected");
-    }
-
-    let client;
-    // Remote debugging gets the debuggee from a RemoteTarget object.
-    if (this._target.isRemote) {
-      client = this.client = this._target.client;
-
-      this._target.on("close", this._onTabDetached);
-      this._target.on("navigate", this._onTabNavigated);
-
-      if (this._target.chrome) {
-        let dbg = this._target.form.chromeDebugger;
-        this._startChromeDebugging(client, dbg, callback);
-      } else {
-        this._startDebuggingTab(client, this._target.form, callback);
-      }
+    if (window._isRemoteDebugger && !this._prepareConnection()) {
       return;
     }
+    let transport = (window._isChromeDebugger || window._isRemoteDebugger)
+      ? debuggerSocketConnect(Prefs.remoteHost, Prefs.remotePort)
+      : DebuggerServer.connectPipe();
 
-    // Content debugging can connect directly to the page.
-    // TODO: convert this to use a TabTarget.
-    let transport = DebuggerServer.connectPipe();
-    client = this.client = new DebuggerClient(transport);
-
+    let client = this.client = new DebuggerClient(transport);
     client.addListener("tabNavigated", this._onTabNavigated);
     client.addListener("tabDetached", this._onTabDetached);
 
@@ -179,11 +160,12 @@ let DebuggerController = {
       client.listTabs(function(aResponse) {
         if (window._isChromeDebugger) {
           let dbg = aResponse.chromeDebugger;
-          this._startChromeDebugging(client, dbg, callback);
+          this._startChromeDebugging(client, dbg);
         } else {
           let tab = aResponse.tabs[aResponse.selected];
-          this._startDebuggingTab(client, tab, callback);
+          this._startDebuggingTab(client, tab);
         }
+        window.dispatchEvent("Debugger:Connected");
       }.bind(this));
     }.bind(this));
   },
@@ -198,12 +180,9 @@ let DebuggerController = {
     }
     this.client.removeListener("tabNavigated", this._onTabNavigated);
     this.client.removeListener("tabDetached", this._onTabDetached);
+    this.client.close();
 
-    if (!this._target.isRemote) {
-      this.client.close();
-      this.client = null;
-    }
-
+    this.client = null;
     this.tabClient = null;
     this.activeThread = null;
   },
@@ -233,8 +212,7 @@ let DebuggerController = {
    * @param object aTabGrip
    *        The remote protocol grip of the tab.
    */
-  _startDebuggingTab: function DC__startDebuggingTab
-      (aClient, aTabGrip, aCallback=function(){}) {
+  _startDebuggingTab: function DC__startDebuggingTab(aClient, aTabGrip) {
     if (!aClient) {
       Cu.reportError("No client found!");
       return;
@@ -260,7 +238,6 @@ let DebuggerController = {
         this.SourceScripts.connect();
         aThreadClient.resume();
 
-        aCallback();
       }.bind(this));
     }.bind(this));
   },
@@ -273,8 +250,7 @@ let DebuggerController = {
    * @param object aChromeDebugger
    *        The remote protocol grip of the chrome debugger.
    */
-  _startChromeDebugging: function DC__startChromeDebugging
-      (aClient, aChromeDebugger, aCallback=function(){}) {
+  _startChromeDebugging: function DC__startChromeDebugging(aClient, aChromeDebugger) {
     if (!aClient) {
       Cu.reportError("No client found!");
       return;
@@ -293,7 +269,6 @@ let DebuggerController = {
       this.SourceScripts.connect();
       aThreadClient.resume();
 
-      aCallback();
     }.bind(this));
   },
 
diff --git a/browser/devtools/debugger/debugger-toolbar.js b/browser/devtools/debugger/debugger-toolbar.js
index 547eae695ca..8f0341a6a4b 100644
--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -25,6 +25,7 @@ ToolbarView.prototype = {
    */
   initialize: function DVT_initialize() {
     dumpn("Initializing the ToolbarView");
+    this._closeButton = document.getElementById("close");
     this._togglePanesButton = document.getElementById("toggle-panes");
     this._resumeButton = document.getElementById("resume");
     this._stepOverButton = document.getElementById("step-over");
@@ -43,6 +44,7 @@ ToolbarView.prototype = {
     this._stepInTooltip = L10N.getFormatStr("stepInTooltip", [stepInKey]);
     this._stepOutTooltip = L10N.getFormatStr("stepOutTooltip", [stepOutKey]);
 
+    this._closeButton.addEventListener("click", this._onCloseClick, false);
     this._togglePanesButton.addEventListener("mousedown", this._onTogglePanesPressed, false);
     this._resumeButton.addEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.addEventListener("mousedown", this._onStepOverPressed, false);
@@ -53,6 +55,7 @@ ToolbarView.prototype = {
     this._stepInButton.setAttribute("tooltiptext", this._stepInTooltip);
     this._stepOutButton.setAttribute("tooltiptext", this._stepOutTooltip);
 
+    this.toggleCloseButton(!window._isRemoteDebugger && !window._isChromeDebugger);
     // TODO: bug 806775
     // this.toggleChromeGlobalsContainer(window._isChromeDebugger);
   },
@@ -62,6 +65,7 @@ ToolbarView.prototype = {
    */
   destroy: function DVT_destroy() {
     dumpn("Destroying the ToolbarView");
+    this._closeButton.removeEventListener("click", this._onCloseClick, false);
     this._togglePanesButton.removeEventListener("mousedown", this._onTogglePanesPressed, false);
     this._resumeButton.removeEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.removeEventListener("mousedown", this._onStepOverPressed, false);
@@ -69,6 +73,16 @@ ToolbarView.prototype = {
     this._stepOutButton.removeEventListener("mousedown", this._onStepOutPressed, false);
   },
 
+  /**
+   * Sets the close button hidden or visible. It's hidden by default.
+   *
+   * @param boolean aVisibleFlag
+   *        Specifies the intended visibility.
+   */
+  toggleCloseButton: function DVT_toggleCloseButton(aVisibleFlag) {
+    this._closeButton.setAttribute("hidden", !aVisibleFlag);
+  },
+
   /**
    * Sets the resume button state based on the debugger active thread.
    *
@@ -163,6 +177,7 @@ ToolbarView.prototype = {
     }
   },
 
+  _closeButton: null,
   _togglePanesButton: null,
   _resumeButton: null,
   _stepOverButton: null,
diff --git a/browser/devtools/debugger/debugger.xul b/browser/devtools/debugger/debugger.xul
index db84ee6797c..c63b714650d 100644
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -153,6 +153,11 @@
 
   <vbox id="body" flex="1">
     <toolbar id="dbg-toolbar" class="devtools-toolbar">
+#ifdef XP_MACOSX
+      <toolbarbutton id="close"
+                     class="devtools-closebutton"
+                     tooltiptext="&debuggerUI.closeButton.tooltip;"/>
+#endif
       <hbox id="debugger-controls">
         <toolbarbutton id="resume"
                        class="devtools-toolbarbutton"
@@ -181,6 +186,11 @@
                      class="devtools-option-toolbarbutton"
                      tooltiptext="&debuggerUI.optsButton.tooltip;"
                      popup="debuggerPrefsContextMenu"/>
+#ifndef XP_MACOSX
+      <toolbarbutton id="close"
+                     class="devtools-closebutton"
+                     tooltiptext="&debuggerUI.closeButton.tooltip;"/>
+#endif
     </toolbar>
 
     <panel id="searchbox-panel"
diff --git a/browser/devtools/debugger/test/Makefile.in b/browser/devtools/debugger/test/Makefile.in
index df30cdce8ce..0918e802d39 100644
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -12,9 +12,9 @@ include $(DEPTH)/config/autoconf.mk
 
 MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_leaktest.js \
-	$(warning browser_dbg_createChrome.js disabled until issue 156 is fixed) \
-	$(browser_dbg_debugger-tab-switch.js disabled until issues 106, 40 are fixed) \
-	$(browser_dbg_debugger-tab-switch-window.js disabled until issues 106, 40 are fixed) \
+	browser_dbg_createChrome.js \
+	browser_dbg_debugger-tab-switch.js \
+	browser_dbg_debugger-tab-switch-window.js \
 	browser_dbg_debuggerstatement.js \
 	browser_dbg_listtabs.js \
 	browser_dbg_tabactor-01.js \
@@ -45,6 +45,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_propertyview-reexpand.js \
 	browser_dbg_reload-same-script.js \
 	browser_dbg_pane-collapse.js \
+	browser_dbg_panesize.js \
 	browser_dbg_panesize-inner.js \
 	browser_dbg_stack-01.js \
 	browser_dbg_stack-02.js \
@@ -81,6 +82,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_iframes.js \
 	browser_dbg_pause-exceptions.js \
 	browser_dbg_multiple-windows.js \
+	browser_dbg_menustatus.js \
 	browser_dbg_bfcache.js \
 	browser_dbg_breakpoint-new-script.js \
 	browser_dbg_bug737803_editor_actual_location.js \
diff --git a/browser/devtools/debugger/test/browser_dbg_bfcache.js b/browser/devtools/debugger/test/browser_dbg_bfcache.js
index a008a179b74..c430ebcb750 100644
--- a/browser/devtools/debugger/test/browser_dbg_bfcache.js
+++ b/browser/devtools/debugger/test/browser_dbg_bfcache.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testInitialLoad();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js b/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
index 63d180b95a2..c7e865a4596 100644
--- a/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
+++ b/browser/devtools/debugger/test/browser_dbg_breakpoint-new-script.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     testAddBreakpoint();
diff --git a/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js b/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
index e440239ccf9..ee38ccc3c76 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug723069_editor-breakpoints.js
@@ -31,11 +31,9 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
-    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
-
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
       executeSoon(startTest);
@@ -52,10 +50,12 @@ function test()
     executeSoon(startTest);
   }
 
+  window.addEventListener("Debugger:SourceShown", onScriptShown);
+
   function startTest()
   {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
+      window.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -77,7 +77,7 @@ function test()
     isnot(gScripts.selectedValue, gScripts.values[0],
           "the correct script is selected");
 
-    gBreakpoints = gPane.getAllBreakpoints();
+    gBreakpoints = gPane.breakpoints;
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
@@ -127,7 +127,7 @@ function test()
       is(Object.keys(gBreakpoints).length, 1,
          "the list of debugger breakpoints holds only one breakpoint");
       is(gPane.getBreakpoint(gScripts.selectedValue, 6), aBreakpointClient,
-         "getBreakpoint returns the correct breakpoint");
+         "getBreakpoint(selectedScript, 2) returns the correct breakpoint");
 
       info("remove the first breakpoint");
       gEditor.addEventListener(SourceEditor.EVENTS.BREAKPOINT_CHANGE,
diff --git a/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js b/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
index b6144947fda..a923bf3c0b8 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug723071_editor-breakpoints-pane.js
@@ -29,11 +29,9 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
-    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
-
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
       executeSoon(startTest);
@@ -50,10 +48,12 @@ function test()
     executeSoon(startTest);
   }
 
+  window.addEventListener("Debugger:SourceShown", onScriptShown);
+
   function startTest()
   {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
+      window.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -79,7 +79,7 @@ function test()
     isnot(gScripts.selectedValue, gScripts.values[0],
           "the correct script is selected");
 
-    gBreakpoints = gPane.getAllBreakpoints();
+    gBreakpoints = gPane.breakpoints;
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("chocolate", 3), "getBreakpoint('chocolate', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
index d9491b12036..9e938e2f510 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
@@ -19,7 +19,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gWatch = gDebugger.DebuggerView.WatchExpressions;
 
     gDebugger.DebuggerView.togglePanes({ visible: true, animated: false });
diff --git a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
index 5f596654c1c..53f9a22031b 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-02.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gWatch = gDebugger.DebuggerView.WatchExpressions;
     gVars = gDebugger.DebuggerView.Variables;
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
index d8e4d701798..9ac7911df42 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js b/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
index 90325b24137..4a32b2428f1 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug737803_editor_actual_location.js
@@ -30,11 +30,9 @@ function test() {
     gTab = aTab;
     gPane = aPane;
     gDebuggee = aDebuggee;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
-    gDebugger.addEventListener("Debugger:SourceShown", onScriptShown);
-
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function () {
       framesAdded = true;
       executeSoon(startTest);
@@ -50,9 +48,11 @@ function test() {
     executeSoon(startTest);
   }
 
+  window.addEventListener("Debugger:SourceShown", onScriptShown);
+
   function startTest() {
     if (scriptShown && framesAdded && resumed && !testStarted) {
-      gDebugger.removeEventListener("Debugger:SourceShown", onScriptShown);
+      window.removeEventListener("Debugger:SourceShown", onScriptShown);
       testStarted = true;
       Services.tm.currentThread.dispatch({ run: performTest }, 0);
     }
@@ -61,7 +61,7 @@ function test() {
   function performTest() {
     gScripts = gDebugger.DebuggerView.Sources;
     gEditor = gDebugger.editor;
-    gBreakpoints = gPane.getAllBreakpoints();
+    gBreakpoints = gPane.breakpoints;
     is(Object.keys(gBreakpoints), 0, "There are no breakpoints");
 
     gEditor.addEventListener(SourceEditor.EVENTS.BREAKPOINT_CHANGE,
diff --git a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
index 8061fc8c3c3..d1d3ca2f4ad 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-01.js
@@ -29,7 +29,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gBreakpoints = gDebugger.DebuggerController.Breakpoints;
     gBreakpointsPane = gDebugger.DebuggerView.Breakpoints;
 
@@ -79,7 +79,7 @@ function test()
     is(gScripts.selectedValue, gScripts.values[0],
           "The correct script is selected");
 
-    gBreakpoints = gPane.getAllBreakpoints();
+    gBreakpoints = gPane.breakpoints;
     is(Object.keys(gBreakpoints).length, 13, "thirteen breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
index a8d15758e1c..e7206d1576a 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug740825_conditional-breakpoints-02.js
@@ -33,7 +33,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gBreakpoints = gDebugger.DebuggerController.Breakpoints;
     gBreakpointsPane = gDebugger.DebuggerView.Breakpoints;
 
@@ -83,7 +83,7 @@ function test()
     is(gScripts.selectedValue, gScripts.values[0],
           "The correct script is selected");
 
-    gBreakpoints = gPane.getAllBreakpoints();
+    gBreakpoints = gPane.breakpoints;
     is(Object.keys(gBreakpoints), 0, "no breakpoints");
     ok(!gPane.getBreakpoint("foo", 3), "getBreakpoint('foo', 3) returns falsey");
 
diff --git a/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js b/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
index d0cb74a16a5..cf68ee5ca7b 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug786070_hide_nonenums.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testNonEnumProperties();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_clean-exit.js b/browser/devtools/debugger/test/browser_dbg_clean-exit.js
index fe0a496f2dc..2530328b84e 100644
--- a/browser/devtools/debugger/test/browser_dbg_clean-exit.js
+++ b/browser/devtools/debugger/test/browser_dbg_clean-exit.js
@@ -15,7 +15,7 @@ function test() {
   debug_tab_pane(DEBUGGER_TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testCleanExit();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_createRemote.js b/browser/devtools/debugger/test/browser_dbg_createRemote.js
index ff4f5bb6b7a..4abcd7561a6 100644
--- a/browser/devtools/debugger/test/browser_dbg_createRemote.js
+++ b/browser/devtools/debugger/test/browser_dbg_createRemote.js
@@ -18,7 +18,7 @@ function test() {
   debug_remote(TEST_URL, function(aTab, aDebuggee, aWindow) {
     gTab = aTab;
     gWindow = aWindow;
-    let gDebugger = gWindow.panelWin;
+    let gDebugger = gWindow.contentWindow;
 
     info("Current remote window x: " +
       Services.prefs.getIntPref("devtools.debugger.ui.win-x"));
diff --git a/browser/devtools/debugger/test/browser_dbg_displayName.js b/browser/devtools/debugger/test/browser_dbg_displayName.js
index 785fc0fabe8..40afa083769 100644
--- a/browser/devtools/debugger/test/browser_dbg_displayName.js
+++ b/browser/devtools/debugger/test/browser_dbg_displayName.js
@@ -18,7 +18,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testAnonCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_iframes.js b/browser/devtools/debugger/test/browser_dbg_iframes.js
index 78f3c28d7a5..3411df6adb0 100644
--- a/browser/devtools/debugger/test/browser_dbg_iframes.js
+++ b/browser/devtools/debugger/test/browser_dbg_iframes.js
@@ -14,7 +14,10 @@ function test() {
   debug_tab_pane(TEST_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    let gDebugger = gPane.panelWin;
+    let gDebugger = gPane.contentWindow;
+
+    is(gDebugger.document.getElementById("close").getAttribute("hidden"), "false",
+      "The close button should be visible in a normal content debugger.");
 
     is(gDebugger.DebuggerController.activeThread.paused, false,
       "Should be running after debug_tab_pane.");
diff --git a/browser/devtools/debugger/test/browser_dbg_leaktest.js b/browser/devtools/debugger/test/browser_dbg_leaktest.js
index 3b4e0993c94..8cd601145bf 100644
--- a/browser/devtools/debugger/test/browser_dbg_leaktest.js
+++ b/browser/devtools/debugger/test/browser_dbg_leaktest.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js b/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
index 3e90fb754a4..b631cac1639 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes-blank.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes-new.js b/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
index 7df75c65615..cfad4119c06 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes-new.js
@@ -20,7 +20,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_location-changes.js b/browser/devtools/debugger/test/browser_dbg_location-changes.js
index 586e754e3dc..8ccb8b6451d 100644
--- a/browser/devtools/debugger/test/browser_dbg_location-changes.js
+++ b/browser/devtools/debugger/test/browser_dbg_location-changes.js
@@ -17,7 +17,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_pane-collapse.js b/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
index 39f64481661..96c3a3f2337 100644
--- a/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
+++ b/browser/devtools/debugger/test/browser_dbg_pane-collapse.js
@@ -16,7 +16,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gView = gDebugger.DebuggerView;
 
     testPanesState();
diff --git a/browser/devtools/debugger/test/browser_dbg_panesize-inner.js b/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
index 440363d4a83..d7d9c73ee17 100644
--- a/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
+++ b/browser/devtools/debugger/test/browser_dbg_panesize-inner.js
@@ -7,70 +7,65 @@
 function test() {
   var tab1 = addTab(TAB1_URL, function() {
     gBrowser.selectedTab = tab1;
-    let target1 = TargetFactory.forTab(tab1);
 
-    ok(!gDevTools.getPanelForTarget("jsdebugger", target1),
-      "Shouldn't have a debugger panel for this tab yet.");
+    ok(!DebuggerUI.getDebugger(),
+      "Shouldn't have a debugger pane for this tab yet.");
 
-    let toolbox = gDevTools.openToolboxForTab(target1, "jsdebugger");
-    toolbox.once("jsdebugger-ready", function dbgReady() {
-      let dbg = gDevTools.getPanelForTarget("jsdebugger", target1);
-      ok(dbg, "We should have a debugger panel.");
+    let pane = DebuggerUI.toggleDebugger();
+    ok(pane, "toggleDebugger() should return a pane.");
 
-      let preferredSfw = Services.prefs.getIntPref("devtools.debugger.ui.stackframes-width");
-      let preferredBpw = Services.prefs.getIntPref("devtools.debugger.ui.variables-width");
-      let someWidth1, someWidth2;
+    let preferredSfw = Services.prefs.getIntPref("devtools.debugger.ui.stackframes-width");
+    let preferredBpw = Services.prefs.getIntPref("devtools.debugger.ui.variables-width");
+    let someWidth1, someWidth2;
 
-      do {
-        someWidth1 = parseInt(Math.random() * 200) + 100;
-        someWidth2 = parseInt(Math.random() * 200) + 100;
-      } while (someWidth1 == preferredSfw ||
-               someWidth2 == preferredBpw)
+    do {
+      someWidth1 = parseInt(Math.random() * 200) + 100;
+      someWidth2 = parseInt(Math.random() * 200) + 100;
+    } while (someWidth1 == preferredSfw ||
+             someWidth2 == preferredBpw)
 
-      let someWidth1 = parseInt(Math.random() * 200) + 100;
-      let someWidth2 = parseInt(Math.random() * 200) + 100;
+    info("Preferred stackframes width: " + preferredSfw);
+    info("Preferred variables width: " + preferredBpw);
+    info("Generated stackframes width: " + someWidth1);
+    info("Generated variables width: " + someWidth2);
 
-      info("Preferred stackframes width: " + preferredSfw);
-      info("Preferred variables width: " + preferredBpw);
-      info("Generated stackframes width: " + someWidth1);
-      info("Generated variables width: " + someWidth2);
+    is(DebuggerUI.getDebugger(), pane,
+      "getDebugger() should return the same pane as toggleDebugger().");
 
-      let content = dbg.panelWin;
-      let stackframes;
-      let variables;
+    let content = pane.contentWindow;
+    let stackframes;
+    let variables;
 
-      wait_for_connect_and_resume(function() {
-        ok(content.Prefs.stackframesWidth,
-          "The debugger preferences should have a saved stackframesWidth value.");
-        ok(content.Prefs.variablesWidth,
-          "The debugger preferences should have a saved variablesWidth value.");
+    wait_for_connect_and_resume(function() {
+      ok(content.Prefs.stackframesWidth,
+        "The debugger preferences should have a saved stackframesWidth value.");
+      ok(content.Prefs.variablesWidth,
+        "The debugger preferences should have a saved variablesWidth value.");
 
-        stackframes = content.document.getElementById("stackframes+breakpoints");
-        variables = content.document.getElementById("variables+expressions");
+      stackframes = content.document.getElementById("stackframes+breakpoints");
+      variables = content.document.getElementById("variables+expressions");
 
-        is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
-          "The stackframes pane width should be the same as the preferred value.");
-        is(content.Prefs.variablesWidth, variables.getAttribute("width"),
-          "The variables pane width should be the same as the preferred value.");
+      is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
+        "The stackframes pane width should be the same as the preferred value.");
+      is(content.Prefs.variablesWidth, variables.getAttribute("width"),
+        "The variables pane width should be the same as the preferred value.");
 
-        stackframes.setAttribute("width", someWidth1);
-        variables.setAttribute("width", someWidth2);
+      stackframes.setAttribute("width", someWidth1);
+      variables.setAttribute("width", someWidth2);
 
-        removeTab(tab1);
-      }, tab1);
-
-      window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
-        window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
-
-        is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
-          "The stackframes pane width should have been saved by now.");
-        is(content.Prefs.variablesWidth, variables.getAttribute("width"),
-          "The variables pane width should have been saved by now.");
-
-        finish();
-
-      }, true);
+      removeTab(tab1);
     });
 
+    window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
+      window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
+
+      is(content.Prefs.stackframesWidth, stackframes.getAttribute("width"),
+        "The stackframes pane width should have been saved by now.");
+      is(content.Prefs.variablesWidth, variables.getAttribute("width"),
+        "The variables pane width should have been saved by now.");
+
+      finish();
+
+    }, true);
   });
 }
diff --git a/browser/devtools/debugger/test/browser_dbg_panesize.js b/browser/devtools/debugger/test/browser_dbg_panesize.js
new file mode 100644
index 00000000000..754f489e2e1
--- /dev/null
+++ b/browser/devtools/debugger/test/browser_dbg_panesize.js
@@ -0,0 +1,55 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+function test() {
+  var tab1 = addTab(TAB1_URL, function() {
+    gBrowser.selectedTab = tab1;
+
+    ok(!DebuggerUI.getDebugger(),
+      "Shouldn't have a debugger pane for this tab yet.");
+
+    let pane = DebuggerUI.toggleDebugger();
+    ok(pane, "toggleDebugger() should return a pane.");
+
+    let preferredHeight = Services.prefs.getIntPref("devtools.debugger.ui.height");
+    let someHeight;
+
+    do {
+      someHeight = parseInt(Math.random() * 200) + 200;
+    } while (someHeight == preferredHeight)
+
+    info("Preferred pane height: " + preferredHeight);
+    info("Generated pane height: " + someHeight);
+
+    is(DebuggerUI.getDebugger(), pane,
+      "getDebugger() should return the same pane as toggleDebugger().");
+
+    ok(DebuggerUI.preferences.height,
+      "The debugger preferences should have a saved height value.");
+
+    is(DebuggerUI.preferences.height, pane._frame.height,
+      "The debugger pane height should be the same as the preferred value.");
+
+    pane._frame.height = someHeight;
+
+    ok(DebuggerUI.preferences.height !== someHeight,
+      "Height preferences shouldn't have been updated yet.");
+
+    wait_for_connect_and_resume(function() {
+      removeTab(tab1);
+    });
+
+    window.addEventListener("Debugger:Shutdown", function dbgShutdown() {
+      window.removeEventListener("Debugger:Shutdown", dbgShutdown, true);
+
+      is(DebuggerUI.preferences.height, someHeight,
+        "Height preferences should have been updated by now.");
+
+      finish();
+
+    }, true);
+  });
+}
diff --git a/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js b/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
index aafa987086b..5067c9f0639 100644
--- a/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
+++ b/browser/devtools/debugger/test/browser_dbg_pause-exceptions.js
@@ -20,7 +20,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
@@ -30,7 +30,7 @@ function test()
 
 function testWithFrame()
 {
-  gPane.panelWin.gClient.addOneTimeListener("paused", function() {
+  gPane.contentWindow.gClient.addOneTimeListener("paused", function() {
     gDebugger.addEventListener("Debugger:FetchedVariables", function testA() {
       // We expect 2 Debugger:FetchedVariables events, one from the global object
       // scope and the regular one.
@@ -48,7 +48,7 @@ function testWithFrame()
       gDebugger.DebuggerView.Options._togglePauseOnExceptions();
 
       gCount = 0;
-      gPane.panelWin.gClient.addOneTimeListener("resumed", function() {
+      gPane.contentWindow.gClient.addOneTimeListener("resumed", function() {
         gDebugger.addEventListener("Debugger:FetchedVariables", function testB() {
           // We expect 2 Debugger:FetchedVariables events, one from the global object
           // scope and the regular one.
@@ -96,7 +96,7 @@ function testWithFrame()
 }
 
 function resumeAndFinish() {
-  gPane.panelWin.gClient.addOneTimeListener("resumed", function() {
+  gPane.contentWindow.gClient.addOneTimeListener("resumed", function() {
     Services.tm.currentThread.dispatch({ run: function() {
 
       closeDebuggerAndFinish(false);
diff --git a/browser/devtools/debugger/test/browser_dbg_pause-resume.js b/browser/devtools/debugger/test/browser_dbg_pause-resume.js
index 4922acf217d..476aaa9b6a2 100644
--- a/browser/devtools/debugger/test/browser_dbg_pause-resume.js
+++ b/browser/devtools/debugger/test/browser_dbg_pause-resume.js
@@ -15,7 +15,7 @@ function test() {
   debug_tab_pane(STACK_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gView = gDebugger.DebuggerView;
     gLH = gDebugger.LayoutHelpers;
     gL10N = gDebugger.L10N;
diff --git a/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js b/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
index 76f934df723..73e1ed50fac 100644
--- a/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
+++ b/browser/devtools/debugger/test/browser_dbg_progress-listener-bug.js
@@ -18,7 +18,7 @@ function test() {
   debug_tab_pane(TEST_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    let gDebugger = gPane.panelWin;
+    let gDebugger = gPane.contentWindow;
 
     is(gDebugger.DebuggerController._isInitialized, true,
       "Controller should be initialized after debug_tab_pane.");
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-01.js b/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
index 46a02e4c344..ff5dcdc1fce 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-01.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-02.js b/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
index ac7c1ced378..b24e2a2ea4d 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-02.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-03.js b/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
index 06e1b8b5372..6fe0d9388a1 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-03.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-04.js b/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
index 3a80ef5c6ea..2b1bfd0edef 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-04.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-05.js b/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
index ad887d32498..e56bfa67e4b 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-05.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-06.js b/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
index 194160c9dbc..06c908fabfe 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-06.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-07.js b/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
index 23d242115bb..c7c77f2808d 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-07.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testFrameParameters();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-08.js b/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
index b822d77bed8..7c43b7e7641 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-08.js
@@ -17,7 +17,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testFrameParameters();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-09.js b/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
index b9c6a4aad37..d89c0c29080 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-09.js
@@ -19,7 +19,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-10.js b/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
index c3cb4c45e04..811f8f88155 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-10.js
@@ -19,7 +19,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-data.js b/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
index 9c67c746149..456a39f22c0 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-data.js
@@ -18,7 +18,7 @@ function test()
   debug_tab_pane(TAB1_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gVariablesView = gDebugger.DebuggerView.Variables;
 
     testVariablesView();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
index 6b7ca2c5594..f3ae5f48a64 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
@@ -18,7 +18,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
     gDebugger.DebuggerView.Variables.nonEnumVisible = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
index a846cfb02b7..a56797e0dda 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-01.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
index dae519960b9..c70af5d0775 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-02.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
index 596e2b920e5..c183b6382c6 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-03.js
@@ -24,7 +24,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     testSearchbox();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
index 8fd71d0b858..bfc6808c533 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-04.js
@@ -24,7 +24,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     testSearchbox();
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
index 49f6b0f0613..7f5101cde92 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-05.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
index 715edec78a7..29d8b18336b 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-06.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = false;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
index 1d06831c063..b3063230ec7 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-07.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
index 5086d2158e2..5f9c1b0e397 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-filter-08.js
@@ -21,7 +21,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js b/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
index 945427c0b01..4d108ffb550 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-reexpand.js
@@ -20,7 +20,7 @@ function test()
   debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
     gTab = aTab;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebuggee = aDebuggee;
 
     addBreakpoint();
diff --git a/browser/devtools/debugger/test/browser_dbg_reload-same-script.js b/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
index 4878978d307..7d3bd91a418 100644
--- a/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
+++ b/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gView = gDebugger.DebuggerView;
     resumed = true;
 
diff --git a/browser/devtools/debugger/test/browser_dbg_script-switching.js b/browser/devtools/debugger/test/browser_dbg_script-switching.js
index cc794044e92..56e1d988e87 100644
--- a/browser/devtools/debugger/test/browser_dbg_script-switching.js
+++ b/browser/devtools/debugger/test/browser_dbg_script-switching.js
@@ -25,7 +25,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     resumed = true;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
index 328328e3bfd..cb54d037921 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-01.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
index 18c045e7a36..39b8ee2a72e 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-02.js
@@ -26,7 +26,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
index 41d5936cab5..e7f58a302a1 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
index a885e39e86b..a938d6ee4ff 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
index 297b906f5a8..eaa7b9287c8 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
index 022b7f4b690..4191b16b0d1 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
index 89f60d54a6d..33ca5cdbf7c 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js
@@ -28,7 +28,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
index afd1b4107ab..44c05d6b66b 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js
@@ -27,7 +27,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gDebugger.SourceResults.prototype.alwaysExpand = false;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js b/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
index 3fa523e7036..3e07f69fe5a 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js
@@ -18,7 +18,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       runTest();
diff --git a/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js b/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
index cd3d523e841..1fdcf007189 100644
--- a/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
+++ b/browser/devtools/debugger/test/browser_dbg_scripts-sorting.js
@@ -13,7 +13,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_select-line.js b/browser/devtools/debugger/test/browser_dbg_select-line.js
index cbe3116cc64..bc9a9e58655 100644
--- a/browser/devtools/debugger/test/browser_dbg_select-line.js
+++ b/browser/devtools/debugger/test/browser_dbg_select-line.js
@@ -24,7 +24,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSelectLine();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-01.js b/browser/devtools/debugger/test/browser_dbg_stack-01.js
index 340f4442939..d6ad154864c 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-01.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testSimpleCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-02.js b/browser/devtools/debugger/test/browser_dbg_stack-02.js
index 7dd6f7379da..14067e835a2 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-02.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-02.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testEvalCall();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-03.js b/browser/devtools/debugger/test/browser_dbg_stack-03.js
index 028ecf9e7cb..dc11eff6800 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-03.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-03.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testRecurse();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-04.js b/browser/devtools/debugger/test/browser_dbg_stack-04.js
index d65708b5b37..ce5fc209f26 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-04.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-04.js
@@ -14,7 +14,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     testEvalCallResume();
   });
diff --git a/browser/devtools/debugger/test/browser_dbg_stack-05.js b/browser/devtools/debugger/test/browser_dbg_stack-05.js
index efa211f7559..515bfcaf6f4 100644
--- a/browser/devtools/debugger/test/browser_dbg_stack-05.js
+++ b/browser/devtools/debugger/test/browser_dbg_stack-05.js
@@ -22,7 +22,7 @@ function test() {
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
 
     gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
       framesAdded = true;
diff --git a/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js b/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
index 3e163206a7a..acb4100b403 100644
--- a/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
+++ b/browser/devtools/debugger/test/browser_dbg_update-editor-mode.js
@@ -29,7 +29,7 @@ function test()
     gTab = aTab;
     gDebuggee = aDebuggee;
     gPane = aPane;
-    gDebugger = gPane.panelWin;
+    gDebugger = gPane.contentWindow;
     gScripts = gDebugger.DebuggerView.Sources._container;
     resumed = true;
 
diff --git a/browser/devtools/debugger/test/head.js b/browser/devtools/debugger/test/head.js
index e643521080e..f71d21a8e9d 100644
--- a/browser/devtools/debugger/test/head.js
+++ b/browser/devtools/debugger/test/head.js
@@ -14,10 +14,6 @@ let DebuggerServer = tempScope.DebuggerServer;
 let DebuggerTransport = tempScope.DebuggerTransport;
 let DebuggerClient = tempScope.DebuggerClient;
 let Services = tempScope.Services;
-Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-let gDevTools = tempScope.gDevTools;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/debugger/test/";
 const TAB1_URL = EXAMPLE_URL + "browser_dbg_tab1.html";
@@ -90,25 +86,11 @@ function removeTab(aTab, aWindow) {
 }
 
 function closeDebuggerAndFinish(aRemoteFlag, aCallback, aWindow) {
+  let targetWindow = aWindow || window;
+  let debuggerUI = targetWindow.DebuggerUI;
+
   let debuggerClosed = false;
   let debuggerDisconnected = false;
-  // let targetWindow = aWindow || window;
-  ok(gTab, "There is a gTab to use for getting a toolbox reference");
-  let target = TargetFactory.forTab(gTab);
-
-  // let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-  window.addEventListener("Debugger:Shutdown", function cleanup() {
-    window.removeEventListener("Debugger:Shutdown", cleanup, false);
-    debuggerDisconnected = true;
-    _maybeFinish();
-  }, false);
-
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  toolbox.once("destroyed", function() {
-    debuggerClosed = true;
-    _maybeFinish();
-  });
-  toolbox.destroy();
 
   function _maybeFinish() {
     if (debuggerClosed && debuggerDisconnected) {
@@ -118,15 +100,20 @@ function closeDebuggerAndFinish(aRemoteFlag, aCallback, aWindow) {
     }
   }
 
-  // if (!aRemoteFlag) {
-  //   dbg.getDebugger().close(function() {
-  //     debuggerClosed = true;
-  //     _maybeFinish();
-  //   });
-  // } else {
-  //   debuggerClosed = true;
-  //   dbg.getRemoteDebugger().close();
-  // }
+  debuggerUI.chromeWindow.addEventListener("Debugger:Shutdown", function cleanup() {
+    debuggerUI.chromeWindow.removeEventListener("Debugger:Shutdown", cleanup, false);
+    debuggerDisconnected = true;
+    _maybeFinish();
+  }, false);
+  if (!aRemoteFlag) {
+    debuggerUI.getDebugger().close(function() {
+      debuggerClosed = true;
+      _maybeFinish();
+    });
+  } else {
+    debuggerClosed = true;
+    debuggerUI.getRemoteDebugger().close();
+  }
 }
 
 function get_tab_actor_for_url(aClient, aURL, aCallback) {
@@ -142,7 +129,7 @@ function get_tab_actor_for_url(aClient, aURL, aCallback) {
 
 function attach_tab_actor_for_url(aClient, aURL, aCallback) {
   get_tab_actor_for_url(aClient, aURL, function(actor) {
-    aClient.attachTab(actor.actor, function(aResponse) {
+    aClient.request({ to: actor.actor, type: "attach" }, function(aResponse) {
       aCallback(actor, aResponse);
     });
   });
@@ -150,44 +137,45 @@ function attach_tab_actor_for_url(aClient, aURL, aCallback) {
 
 function attach_thread_actor_for_url(aClient, aURL, aCallback) {
   attach_tab_actor_for_url(aClient, aURL, function(aTabActor, aResponse) {
-    aClient.attachThread(actor.threadActor, function(aResponse, aThreadClient) {
+    aClient.request({ "to": actor.threadActor, "type": "attach" }, function(aResponse) {
       // We don't care about the pause right now (use
       // get_actor_for_url() if you do), so resume it.
-      aThreadClient.resume(function(aResponse) {
+      aClient.request({ to: actor.threadActor, type: "resume" }, function(aResponse) {
         aCallback(actor);
       });
     });
   });
 }
 
-function wait_for_connect_and_resume(aOnDebugging, aTab) {
-  let target = TargetFactory.forTab(aTab);
-  let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-  dbg.once("connected", function dbgConnected() {
+function wait_for_connect_and_resume(aOnDebugging, aWindow) {
+  let targetWindow = aWindow || window;
+  let targetDocument = targetWindow.document;
+
+  targetDocument.addEventListener("Debugger:Connected", function dbgConnected(aEvent) {
+    targetDocument.removeEventListener("Debugger:Connected", dbgConnected, true);
+
     // Wait for the initial resume...
-    dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
+    aEvent.target.ownerDocument.defaultView.gClient.addOneTimeListener("resumed", function() {
       aOnDebugging();
     });
-  });
+  }, true);
 }
 
 function debug_tab_pane(aURL, aOnDebugging) {
   let tab = addTab(aURL, function() {
     gBrowser.selectedTab = gTab;
-    let debuggee = gBrowser.selectedTab.linkedBrowser.contentWindow.wrappedJSObject;
+    let debuggee = tab.linkedBrowser.contentWindow.wrappedJSObject;
 
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolboxForTab(target, "jsdebugger");
-    toolbox.once("jsdebugger-ready", function dbgReady() {
-      let dbg = gDevTools.getPanelForTarget("jsdebugger", target);
-      dbg.once("connected", function() {
-        // Wait for the initial resume...
-        dbg.panelWin.gClient.addOneTimeListener("resumed", function() {
-          dbg._view.Variables.lazyEmpty = false;
-          aOnDebugging(tab, debuggee, dbg);
-        });
+    let pane = DebuggerUI.toggleDebugger();
+    pane._frame.addEventListener("Debugger:Connected", function dbgConnected() {
+      pane._frame.removeEventListener("Debugger:Connected", dbgConnected, true);
+
+      // Wait for the initial resume...
+      pane.contentWindow.gClient.addOneTimeListener("resumed", function() {
+        pane.contentWindow.DebuggerView.Variables.lazyEmpty = false;
+        aOnDebugging(tab, debuggee, pane);
       });
-    });
+    }, true);
   });
 }
 
@@ -204,7 +192,7 @@ function debug_remote(aURL, aOnDebugging, aBeforeTabAdded) {
       win._dbgwin.removeEventListener("Debugger:Connected", dbgConnected, true);
 
       // Wait for the initial resume...
-      win.panelWin.gClient.addOneTimeListener("resumed", function() {
+      win.contentWindow.gClient.addOneTimeListener("resumed", function() {
         win._dbgwin.DebuggerView.Variables.lazyEmpty = false;
         aOnDebugging(tab, debuggee, win);
       });
diff --git a/browser/devtools/framework/Makefile.in b/browser/devtools/framework/Makefile.in
deleted file mode 100644
index df206dadd99..00000000000
--- a/browser/devtools/framework/Makefile.in
+++ /dev/null
@@ -1,18 +0,0 @@
-#
-# 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/.
-
-DEPTH		= @DEPTH@
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-TEST_DIRS += test
-
-include $(topsrcdir)/config/rules.mk
-
-libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/framework/Sidebar.jsm b/browser/devtools/framework/Sidebar.jsm
deleted file mode 100644
index ad77f346217..00000000000
--- a/browser/devtools/framework/Sidebar.jsm
+++ /dev/null
@@ -1,191 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-
-this.EXPORTED_SYMBOLS = ["ToolSidebar"];
-
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-
-/**
- * ToolSidebar provides methods to register tabs in the sidebar.
- * It's assumed that the sidebar contains a xul:tabbox.
- *
- * @param {Node} tabbox
- *  <tabbox> node;
- * @param {ToolPanel} panel
- *  Related ToolPanel instance;
- * @param {Boolean} showTabstripe
- *  Show the tabs.
- */
-this.ToolSidebar = function ToolSidebar(tabbox, panel, showTabstripe=true)
-{
-  new EventEmitter(this);
-
-  this._tabbox = tabbox;
-  this._panelDoc = this._tabbox.ownerDocument;
-  this._toolPanel = panel;
-
-  this._tabbox.tabpanels.addEventListener("select", this, true);
-
-  this._tabs = new Map();
-
-  if (!showTabstripe) {
-    this._tabbox.setAttribute("hidetabs", "true");
-  }
-}
-
-ToolSidebar.prototype = {
-  /**
-   * Register a tab. A tab is a document.
-   * The document must have a title, which will be used as the name of the tab.
-   *
-   * @param {string} tab uniq id
-   * @param {string} url
-   */
-  addTab: function ToolSidebar_addTab(id, url, selected=false) {
-    let iframe = this._panelDoc.createElementNS(XULNS, "iframe");
-    iframe.className = "iframe-" + id;
-    iframe.setAttribute("flex", "1");
-    iframe.setAttribute("src", url);
-
-    let tab = this._tabbox.tabs.appendItem();
-
-    let onIFrameLoaded = function() {
-      tab.setAttribute("label", iframe.contentDocument.title);
-      iframe.removeEventListener("DOMContentLoaded", onIFrameLoaded, true);
-      if ("setPanel" in iframe.contentWindow) {
-        iframe.contentWindow.setPanel(this._toolPanel, iframe);
-      }
-      this.emit(id + "-ready");
-    }.bind(this);
-
-    iframe.addEventListener("DOMContentLoaded", onIFrameLoaded, true);
-
-    let tabpanel = this._panelDoc.createElementNS(XULNS, "tabpanel");
-    tabpanel.setAttribute("id", "sidebar-panel-" + id);
-    tabpanel.appendChild(iframe);
-    this._tabbox.tabpanels.appendChild(tabpanel);
-
-    tab.linkedPanel = "sidebar-panel-" + id;
-
-    // We store the index of this tab.
-    this._tabs.set(id, tab);
-
-    if (selected) {
-      // For some reason I don't understand, if we call this.select in this
-      // event loop (after inserting the tab), the tab will never get the
-      // the "selected" attribute set to true.
-      this._panelDoc.defaultView.setTimeout(function() {
-        this.select(id);
-      }.bind(this), 0);
-    }
-
-    this.emit("new-tab-registered", id);
-  },
-
-  /**
-   * Select a specific tab.
-   */
-  select: function ToolSidebar_select(id) {
-    let tab = this._tabs.get(id);
-    if (tab) {
-      this._tabbox.selectedTab = tab;
-    }
-  },
-
-  /**
-   * Return the id of the selected tab.
-   */
-  getCurrentTabID: function ToolSidebar_getCurrentTabID() {
-    let currentID = null;
-    for (let [id, tab] of this._tabs) {
-      if (this._tabbox.tabs.selectedItem == tab) {
-        currentID = id;
-        break;
-      }
-    }
-    return currentID;
-  },
-
-  /**
-   * Event handler.
-   */
-  handleEvent: function ToolSidebar_eventHandler(event) {
-    if (event.type == "select") {
-      let previousTool = this._currentTool;
-      this._currentTool = this.getCurrentTabID();
-      if (previousTool) {
-        this.emit(previousTool + "-unselected");
-      }
-
-      this.emit(this._currentTool + "-selected");
-      this.emit("select", this._currentTool);
-    }
-  },
-
-
-  /**
-   * Toggle sidebar's visibility state.
-   */
-  toggle: function ToolSidebar_toggle() {
-    if (this._tabbox.hasAttribute("hidden")) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  },
-
-  /**
-   * Show the sidebar.
-   */
-  show: function ToolSidebar_show() {
-    this._tabbox.removeAttribute("hidden");
-  },
-
-  /**
-   * Show the sidebar.
-   */
-  hide: function ToolSidebar_hide() {
-    this._tabbox.setAttribute("hidden", "true");
-  },
-
-  /**
-   * Return the window containing the tab content.
-   */
-  getWindowForTab: function ToolSidebar_getWindowForTab(id) {
-    if (!this._tabs.has(id)) {
-      return null;
-    }
-
-    let panel = this._panelDoc.getElementById(this._tabs.get(id).linkedPanel);
-    return panel.firstChild.contentWindow;
-  },
-
-  /**
-   * Clean-up.
-   */
-  destroy: function ToolSidebar_destroy() {
-    this._tabbox.removeEventListener("select", this, true);
-
-    while (this._tabbox.tabpanels.hasChildNodes()) {
-      this._tabbox.tabpanels.removeChild(this._tabbox.tabpanels.firstChild);
-    }
-
-    while (this._tabbox.tabs.hasChildNodes()) {
-      this._tabbox.tabs.removeChild(this._tabbox.tabs.firstChild);
-    }
-
-    this._tabs = null;
-    this._tabbox = null;
-    this._panelDoc = null;
-    this._toolPanel = null;
-  },
-}
diff --git a/browser/devtools/framework/Target.jsm b/browser/devtools/framework/Target.jsm
deleted file mode 100644
index 2438a16b94e..00000000000
--- a/browser/devtools/framework/Target.jsm
+++ /dev/null
@@ -1,385 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = [ "TargetFactory" ];
-
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-
-const targets = new WeakMap();
-
-/**
- * Functions for creating Targets
- */
-this.TargetFactory = {
-  /**
-   * Construct a Target
-   * @param {XULTab} tab
-   *        The tab to use in creating a new target
-   * @return A target object
-   */
-  forTab: function TF_forTab(tab) {
-    let target = targets.get(tab);
-    if (target == null) {
-      target = new TabTarget(tab);
-      targets.set(tab, target);
-    }
-    return target;
-  },
-
-  /**
-   * Creating a target for a tab that is being closed is a problem because it
-   * allows a leak as a result of coming after the close event which normally
-   * clears things up. This function allows us to ask if there is a known
-   * target for a tab without creating a target
-   * @return true/false
-   */
-  isKnownTab: function TF_isKnownTab(tab) {
-    return targets.has(tab);
-  },
-
-  /**
-   * Construct a Target
-   * @param {nsIDOMWindow} window
-   *        The chromeWindow to use in creating a new target
-   * @return A target object
-   */
-  forWindow: function TF_forWindow(window) {
-    let target = targets.get(window);
-    if (target == null) {
-      target = new WindowTarget(window);
-      targets.set(window, target);
-    }
-    return target;
-  },
-
-  /**
-   * Construct a Target for a remote global
-   * @param {Object} form
-   *        The serialized form of a debugging protocol actor.
-   * @param {DebuggerClient} client
-   *        The debuger client instance to communicate with the server.
-   * @param {boolean} chrome
-   *        A flag denoting that the debugging target is the remote process as a
-   *        whole and not a single tab.
-   * @return A target object
-   */
-  forRemote: function TF_forRemote(form, client, chrome) {
-    let target = targets.get(form);
-    if (target == null) {
-      target = new RemoteTarget(form, client, chrome);
-      targets.set(form, target);
-    }
-    return target;
-  },
-
-  /**
-   * Get all of the targets known to some browser instance (local if null)
-   * @return An array of target objects
-   */
-  allTargets: function TF_allTargets() {
-    let windows = [];
-    let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
-                       .getService(Components.interfaces.nsIWindowMediator);
-    let en = wm.getXULWindowEnumerator(null);
-    while (en.hasMoreElements()) {
-      windows.push(en.getNext());
-    }
-
-    return windows.map(function(window) {
-      return TargetFactory.forWindow(window);
-    });
-  },
-};
-
-/**
- * The 'version' property allows the developer tools equivalent of browser
- * detection. Browser detection is evil, however while we don't know what we
- * will need to detect in the future, it is an easy way to postpone work.
- * We should be looking to use 'supports()' in place of version where
- * possible.
- */
-function getVersion() {
-  // FIXME: return something better
-  return 20;
-}
-
-/**
- * A better way to support feature detection, but we're not yet at a place
- * where we have the features well enough defined for this to make lots of
- * sense.
- */
-function supports(feature) {
-  // FIXME: return something better
-  return false;
-};
-
-/**
- * A Target represents something that we can debug. Targets are generally
- * read-only. Any changes that you wish to make to a target should be done via
- * a Tool that attaches to the target. i.e. a Target is just a pointer saying
- * "the thing to debug is over there".
- *
- * Providing a generalized abstraction of a web-page or web-browser (available
- * either locally or remotely) is beyond the scope of this class (and maybe
- * also beyond the scope of this universe) However Target does attempt to
- * abstract some common events and read-only properties common to many Tools.
- *
- * Supported read-only properties:
- * - name, isRemote, url
- *
- * Target extends EventEmitter and provides support for the following events:
- * - close: The target window has been closed. All tools attached to this
- *     target should close. This event is not currently cancelable.
- * - navigate: The target window has navigated to a different URL
- *
- * Optional events:
- * - will-navigate: The target window will navigate to a different URL
- * - hidden: The target is not visible anymore (for TargetTab, another tab is selected)
- * - visible: The target is visible (for TargetTab, tab is selected)
- *
- * Target also supports 2 functions to help allow 2 different versions of
- * Firefox debug each other. The 'version' property is the equivalent of
- * browser detection - simple and easy to implement but gets fragile when things
- * are not quite what they seem. The 'supports' property is the equivalent of
- * feature detection - harder to setup, but more robust long-term.
- *
- * Comparing Targets: 2 instances of a Target object can point at the same
- * thing, so t1 !== t2 and t1 != t2 even when they represent the same object.
- * To compare to targets use 't1.equals(t2)'.
- */
-function Target() {
-  throw new Error("Use TargetFactory.newXXX or Target.getXXX to create a Target in place of 'new Target()'");
-}
-
-Object.defineProperty(Target.prototype, "version", {
-  get: getVersion,
-  enumerable: true
-});
-
-
-/**
- * A TabTarget represents a page living in a browser tab. Generally these will
- * be web pages served over http(s), but they don't have to be.
- */
-function TabTarget(tab) {
-  new EventEmitter(this);
-  this._tab = tab;
-  this._setupListeners();
-}
-
-TabTarget.prototype = {
-  _webProgressListener: null,
-
-  supports: supports,
-  get version() { return getVersion(); },
-
-  get tab() {
-    return this._tab;
-  },
-
-  get name() {
-    return this._tab.linkedBrowser.contentDocument.title;
-  },
-
-  get url() {
-    return this._tab.linkedBrowser.contentDocument.location.href;
-  },
-
-  get isRemote() {
-    return false;
-  },
-
-  /**
-   * Listen to the different tabs events.
-   */
-  _setupListeners: function TabTarget__setupListeners() {
-    this._webProgressListener = new TabWebProgressListener(this);
-    this.tab.linkedBrowser.addProgressListener(this._webProgressListener);
-    this.tab.addEventListener("TabClose", this);
-    this.tab.parentNode.addEventListener("TabSelect", this);
-  },
-
-  /**
-   * Handle tabs events.
-   */
-  handleEvent: function (event) {
-    switch (event.type) {
-      case "TabClose":
-        this.destroy();
-        break;
-      case "TabSelect":
-        if (this.tab.selected) {
-          this.emit("visible", event);
-        } else {
-          this.emit("hidden", event);
-        }
-        break;
-    }
-  },
-
-
-  /**
-   * Target is not alive anymore.
-   */
-  destroy: function() {
-    if (this._destroyed) {
-      return;
-    }
-    this.tab.linkedBrowser.removeProgressListener(this._webProgressListener)
-    this._webProgressListener.target = null;
-    this._webProgressListener = null;
-    this.tab.removeEventListener("TabClose", this);
-    this.tab.parentNode.removeEventListener("TabSelect", this);
-    this._destroyed = true;
-    this.emit("close");
-
-    targets.delete(this._tab);
-    this._tab = null;
-  },
-
-  toString: function() {
-    return 'TabTarget:' + this.tab;
-  },
-};
-
-
-/**
- * WebProgressListener for TabTarget.
- *
- * @param object aTarget
- *        The TabTarget instance to work with.
- */
-function TabWebProgressListener(aTarget) {
-  this.target = aTarget;
-}
-
-TabWebProgressListener.prototype = {
-  target: null,
-
-  QueryInterface: XPCOMUtils.generateQI([Ci.nsIWebProgressListener, Ci.nsISupportsWeakReference]),
-
-  onStateChange: function TWPL_onStateChange(progress, request, flag, status) {
-    let isStart = flag & Ci.nsIWebProgressListener.STATE_START;
-    let isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
-    let isNetwork = flag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
-    let isRequest = flag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
-
-    // Skip non-interesting states.
-    if (!isStart || !isDocument || !isRequest || !isNetwork) {
-      return;
-    }
-
-    if (this.target) {
-      this.target.emit("will-navigate", request);
-    }
-  },
-
-  onProgressChange: function() {},
-  onSecurityChange: function() {},
-  onStatusChange: function() {},
-
-  onLocationChange: function TwPL_onLocationChange(webProgress) {
-    let window = webProgress.DOMWindow;
-    if (this.target) {
-      this.target.emit("navigate", window);
-    }
-  },
-};
-
-
-/**
- * A WindowTarget represents a page living in a xul window or panel. Generally
- * these will have a chrome: URL
- */
-function WindowTarget(window) {
-  new EventEmitter(this);
-  this._window = window;
-}
-
-WindowTarget.prototype = {
-  supports: supports,
-  get version() { return getVersion(); },
-
-  get window() {
-    return this._window;
-  },
-
-  get name() {
-    return this._window.document.title;
-  },
-
-  get url() {
-    return this._window.document.location.href;
-  },
-
-  get isRemote() {
-    return false;
-  },
-
-  toString: function() {
-    return 'WindowTarget:' + this.window;
-  },
-};
-
-/**
- * A RemoteTarget represents a page living in a remote Firefox instance.
- */
-function RemoteTarget(form, client, chrome) {
-  new EventEmitter(this);
-  this._client = client;
-  this._form = form;
-  this._chrome = chrome;
-
-  this.destroy = this.destroy.bind(this);
-  this.client.addListener("tabDetached", this.destroy);
-
-  this._onTabNavigated = function onRemoteTabNavigated() {
-    this.emit("navigate");
-  }.bind(this);
-  this.client.addListener("tabNavigated", this._onTabNavigated);
-}
-
-RemoteTarget.prototype = {
-  supports: supports,
-  get version() getVersion(),
-
-  get isRemote() true,
-
-  get chrome() this._chrome,
-
-  get name() this._form._title,
-
-  get url() this._form._url,
-
-  get client() this._client,
-
-  get form() this._form,
-
-  /**
-   * Target is not alive anymore.
-   */
-  destroy: function RT_destroy() {
-    if (this._destroyed) {
-      return;
-    }
-    this.client.removeListener("tabNavigated", this._onTabNavigated);
-    this.client.removeListener("tabDetached", this.destroy);
-
-    this._client.close(function onClosed() {
-      this._client = null;
-      this._destroyed = true;
-      this.emit("close");
-    }.bind(this));
-  },
-
-  toString: function() {
-    return 'RemoteTarget:' + this.form.actor;
-  },
-};
diff --git a/browser/devtools/framework/ToolDefinitions.jsm b/browser/devtools/framework/ToolDefinitions.jsm
deleted file mode 100644
index ef794b4a548..00000000000
--- a/browser/devtools/framework/ToolDefinitions.jsm
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = [ "defaultTools" ];
-
-Components.utils.import("resource:///modules/WebConsolePanel.jsm");
-Components.utils.import("resource:///modules/devtools/DebuggerPanel.jsm");
-Components.utils.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
-Components.utils.import("resource:///modules/devtools/InspectorDefinition.jsm");
-
-this.defaultTools = [
-  StyleEditorDefinition,
-  WebConsoleDefinition,
-  DebuggerDefinition,
-  InspectorDefinition,
-];
diff --git a/browser/devtools/framework/Toolbox.jsm b/browser/devtools/framework/Toolbox.jsm
deleted file mode 100644
index db5ed26b7b5..00000000000
--- a/browser/devtools/framework/Toolbox.jsm
+++ /dev/null
@@ -1,523 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/ToolboxHosts.jsm");
-Cu.import("resource:///modules/devtools/gcli.jsm");
-Cu.import('resource://gre/modules/XPCOMUtils.jsm');
-
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
-                                  "resource:///modules/devtools/DeveloperToolbar.jsm");
-
-Components.utils.import("resource://gre/modules/devtools/Require.jsm");
-
-let Requisition = require('gcli/cli').Requisition;
-let CommandOutputManager = require('gcli/canon').CommandOutputManager;
-
-this.EXPORTED_SYMBOLS = [ "Toolbox" ];
-
-/**
- * A "Toolbox" is the component that holds all the tools for one specific
- * target. Visually, it's a document that includes the tools tabs and all
- * the iframes where the tool panels will be living in.
- *
- * @param {object} target
- *        The object the toolbox is debugging.
- * @param {Toolbox.HostType} hostType
- *        Type of host that will host the toolbox (e.g. sidebar, window)
- * @param {string} selectedTool
- *        Tool to select initially
- */
-this.Toolbox = function Toolbox(target, hostType, selectedTool) {
-  this._target = target;
-  this._toolPanels = new Map();
-
-  this._onLoad = this._onLoad.bind(this);
-  this._toolRegistered = this._toolRegistered.bind(this);
-  this._toolUnregistered = this._toolUnregistered.bind(this);
-  this.destroy = this.destroy.bind(this);
-
-  this._target.once("close", this.destroy);
-
-  if (!hostType) {
-    hostType = Services.prefs.getCharPref(this._prefs.LAST_HOST);
-  }
-  if (!selectedTool) {
-    selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
-  }
-  let definitions = gDevTools.getToolDefinitions();
-  if (!definitions.get(selectedTool)) {
-    selectedTool = "webconsole";
-  }
-  this._defaultToolId = selectedTool;
-
-  this._host = this._createHost(hostType);
-
-  new EventEmitter(this);
-
-  gDevTools.on("tool-registered", this._toolRegistered);
-  gDevTools.on("tool-unregistered", this._toolUnregistered);
-}
-
-/**
- * The toolbox can be 'hosted' either embedded in a browser window
- * or in a separate window.
- */
-Toolbox.HostType = {
-  BOTTOM: "bottom",
-  SIDE: "side",
-  WINDOW: "window"
-}
-
-Toolbox.prototype = {
-  _URL: "chrome://browser/content/devtools/framework/toolbox.xul",
-
-  _prefs: {
-    LAST_HOST: "devtools.toolbox.host",
-    LAST_TOOL: "devtools.toolbox.selectedTool",
-    SIDE_ENABLED: "devtools.toolbox.sideEnabled"
-  },
-
-  HostType: Toolbox.HostType,
-
-  /**
-   * Returns a *copy* of the _toolPanels collection.
-   *
-   * @return {Map} panels
-   *         All the running panels in the toolbox
-   */
-  getToolPanels: function TB_getToolPanels() {
-    let panels = new Map();
-
-    for (let [key, value] of this._toolPanels) {
-      panels.set(key, value);
-    }
-    return panels;
-  },
-
-  /**
-   * Get/alter the target of a Toolbox so we're debugging something different.
-   * See Target.jsm for more details.
-   * TODO: Do we allow |toolbox.target = null;| ?
-   */
-  get target() {
-    return this._target;
-  },
-
-  set target(value) {
-    this._target = value;
-  },
-
-  /**
-   * Get/alter the host of a Toolbox, i.e. is it in browser or in a separate
-   * tab. See HostType for more details.
-   */
-  get hostType() {
-    return this._host.type;
-  },
-
-  set hostType(value) {
-    this._switchToHost(value);
-  },
-
-  /**
-   * Get/alter the currently displayed tool.
-   */
-  get currentToolId() {
-    return this._currentToolId;
-  },
-
-  set currentToolId(value) {
-    this._currentToolId = value;
-  },
-
-  /**
-   * Get the iframe containing the toolbox UI.
-   */
-  get frame() {
-    return this._host.frame;
-  },
-
-  /**
-   * Shortcut to the document containing the toolbox UI
-   */
-  get doc() {
-    return this.frame.contentDocument;
-  },
-
-  /**
-   * Open the toolbox
-   */
-  open: function TBOX_open() {
-    this._host.once("ready", function(event, iframe) {
-      iframe.addEventListener("DOMContentLoaded", this._onLoad, true);
-      iframe.setAttribute("src", this._URL);
-    }.bind(this));
-
-    this._host.open();
-  },
-
-  /**
-   * Build the buttons for changing hosts. Called every time
-   * the host changes.
-   */
-  _buildDockButtons: function TBOX_createDockButtons() {
-    let dockBox = this.doc.getElementById("toolbox-dock-buttons");
-
-    while (dockBox.firstChild) {
-      dockBox.removeChild(dockBox.firstChild);
-    }
-
-    let sideEnabled = Services.prefs.getBoolPref(this._prefs.SIDE_ENABLED);
-
-    for each (let position in this.HostType) {
-      if (position == this.hostType ||
-         (!sideEnabled && position == this.HostType.SIDE)) {
-        continue;
-      }
-
-      let button = this.doc.createElement("toolbarbutton");
-      button.id = "toolbox-dock-" + position;
-      button.className = "toolbox-dock-button";
-      button.addEventListener("command", function(position) {
-        this.hostType = position;
-      }.bind(this, position));
-
-      dockBox.appendChild(button);
-    }
-  },
-
-  /**
-   * Onload handler for the toolbox's iframe
-   */
-  _onLoad: function TBOX_onLoad() {
-    this.frame.removeEventListener("DOMContentLoaded", this._onLoad, true);
-    this.isReady = true;
-
-    let closeButton = this.doc.getElementById("toolbox-close");
-    closeButton.addEventListener("command", this.destroy, true);
-
-    this._buildDockButtons();
-
-    this._buildTabs();
-    this._buildButtons(this.frame);
-
-    this.selectTool(this._defaultToolId);
-
-    this.emit("ready");
-  },
-
-  /**
-   * Add tabs to the toolbox UI for registered tools
-   */
-  _buildTabs: function TBOX_buildTabs() {
-    for (let [id, definition] of gDevTools.getToolDefinitions()) {
-      this._buildTabForTool(definition);
-    }
-  },
-
-  /**
-   * Add buttons to the UI as specified in the devtools.window.toolbarSpec pref
-   *
-   * @param {iframe} frame
-   *        The iframe to contain the buttons
-   */
-  _buildButtons: function TBOX_buildButtons(frame) {
-    let toolbarSpec = CommandUtils.getCommandbarSpec("devtools.toolbox.toolbarSpec");
-    let environment = { chromeDocument: frame.ownerDocument };
-    let requisition = new Requisition(environment);
-    requisition.commandOutputManager = new CommandOutputManager();
-
-    let buttons = CommandUtils.createButtons(toolbarSpec, this.doc, requisition);
-
-    let container = this.doc.getElementById("toolbox-buttons");
-    buttons.forEach(function(button) {
-      container.appendChild(button);
-    }.bind(this));
-  },
-
-  /**
-   * Build a tab for one tool definition and add to the toolbox
-   *
-   * @param {string} toolDefinition
-   *        Tool definition of the tool to build a tab for.
-   */
-  _buildTabForTool: function TBOX_buildTabForTool(toolDefinition) {
-    const MAX_ORDINAL = 99;
-    if (!toolDefinition.isTargetSupported(this._target)) {
-      return;
-    }
-
-    let tabs = this.doc.getElementById("toolbox-tabs");
-    let deck = this.doc.getElementById("toolbox-deck");
-
-    let id = toolDefinition.id;
-
-    let radio = this.doc.createElement("radio");
-    radio.setAttribute("label", toolDefinition.label);
-    radio.className = "toolbox-tab devtools-tab";
-    radio.id = "toolbox-tab-" + id;
-    radio.setAttribute("toolid", id);
-
-    let ordinal = (typeof toolDefinition.ordinal == "number") ?
-                  toolDefinition.ordinal : MAX_ORDINAL;
-    radio.setAttribute("ordinal", ordinal);
-
-    radio.addEventListener("command", function(id) {
-      this.selectTool(id);
-    }.bind(this, id));
-
-    let vbox = this.doc.createElement("vbox");
-    vbox.className = "toolbox-panel";
-    vbox.id = "toolbox-panel-" + id;
-
-    tabs.appendChild(radio);
-    deck.appendChild(vbox);
-  },
-
-  /**
-   * Switch to the tool with the given id
-   *
-   * @param {string} id
-   *        The id of the tool to switch to
-   */
-  selectTool: function TBOX_selectTool(id) {
-    if (!this.isReady) {
-      throw new Error("Can't select tool, wait for toolbox 'ready' event");
-    }
-    let tab = this.doc.getElementById("toolbox-tab-" + id);
-
-    if (!tab) {
-      throw new Error("No tool found");
-    }
-
-    let tabstrip = this.doc.getElementById("toolbox-tabs");
-
-    // select the right tab
-    let index = -1;
-    let tabs = tabstrip.childNodes;
-    for (let i = 0; i < tabs.length; i++) {
-      if (tabs[i] === tab) {
-        index = i;
-        break;
-      }
-    }
-    tabstrip.selectedIndex = index;
-
-    // and select the right iframe
-    let deck = this.doc.getElementById("toolbox-deck");
-    deck.selectedIndex = index;
-
-    let definition = gDevTools.getToolDefinitions().get(id);
-
-    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
-    if (!iframe) {
-      iframe = this.doc.createElement("iframe");
-      iframe.className = "toolbox-panel-iframe";
-      iframe.id = "toolbox-panel-iframe-" + id;
-      iframe.setAttribute("flex", 1);
-
-      let vbox = this.doc.getElementById("toolbox-panel-" + id);
-      vbox.appendChild(iframe);
-
-      let boundLoad = function() {
-        iframe.removeEventListener("DOMContentLoaded", boundLoad, true);
-        let panel = definition.build(iframe.contentWindow, this);
-        this._toolPanels.set(id, panel);
-
-        let panelReady = function() {
-          this.emit(id + "-ready", panel);
-          this.emit("select", id);
-          this.emit(id + "-selected", panel);
-          gDevTools.emit(id + "-ready", this, panel);
-        }.bind(this);
-
-        if (panel.isReady) {
-          panelReady();
-        } else {
-          panel.once("ready", panelReady);
-        }
-      }.bind(this);
-
-      iframe.addEventListener("DOMContentLoaded", boundLoad, true);
-      iframe.setAttribute("src", definition.url);
-    } else {
-      let panel = this._toolPanels.get(id);
-      // only emit 'select' event if the iframe has been loaded
-      if (panel) {
-        this.emit("select", id);
-        this.emit(id + "-selected", panel);
-      }
-    }
-
-    Services.prefs.setCharPref(this._prefs.LAST_TOOL, id);
-
-    this._currentToolId = id;
-  },
-
-  /**
-   * Create a host object based on the given host type.
-   *
-   * @param {string} hostType
-   *        The host type of the new host object
-   *
-   * @return {Host} host
-   *        The created host object
-   */
-  _createHost: function TBOX_createHost(hostType) {
-    let hostTab = this._getHostTab();
-    if (!Hosts[hostType]) {
-      throw new Error('Unknown hostType: '+ hostType);
-    }
-    let newHost = new Hosts[hostType](hostTab);
-
-    // clean up the toolbox if its window is closed
-    newHost.on("window-closed", this.destroy);
-
-    return newHost;
-  },
-
-  /**
-   * Switch to a new host for the toolbox UI. E.g.
-   * bottom, sidebar, separate window.
-   *
-   * @param {string} hostType
-   *        The host type of the new host object
-   */
-  _switchToHost: function TBOX_switchToHost(hostType) {
-    if (hostType == this._host.type) {
-      return;
-    }
-
-    let newHost = this._createHost(hostType);
-
-    newHost.once("ready", function(event, iframe) {
-      // change toolbox document's parent to the new host
-      iframe.QueryInterface(Components.interfaces.nsIFrameLoaderOwner);
-      iframe.swapFrameLoaders(this.frame);
-
-      this._host.off("window-closed", this.destroy);
-      this._host.destroy();
-
-      this._host = newHost;
-
-      Services.prefs.setCharPref(this._prefs.LAST_HOST, this._host.type);
-
-      this._buildDockButtons();
-
-      this.emit("host-changed");
-    }.bind(this));
-
-    newHost.open();
-  },
-
-  /**
-   * Get the most appropriate host tab, either the target or the current tab
-   */
-  _getHostTab: function TBOX_getHostTab() {
-    if (!this._target.isRemote && !this._target.isChrome) {
-      return this._target.tab;
-    } else {
-      let win = Services.wm.getMostRecentWindow("navigator:browser");
-      return win.gBrowser.selectedTab;
-    }
-  },
-
-  /**
-   * Handler for the tool-registered event.
-   * @param  {string} event
-   *         Name of the event ("tool-registered")
-   * @param  {string} toolId
-   *         Id of the tool that was registered
-   */
-  _toolRegistered: function TBOX_toolRegistered(event, toolId) {
-    let defs = gDevTools.getToolDefinitions();
-    let tool = defs.get(toolId);
-
-    this._buildTabForTool(tool);
-  },
-
-  /**
-   * Handler for the tool-unregistered event.
-   * @param  {string} event
-   *         Name of the event ("tool-unregistered")
-   * @param  {string} toolId
-   *         Id of the tool that was unregistered
-   */
-  _toolUnregistered: function TBOX_toolUnregistered(event, toolId) {
-    let radio = this.doc.getElementById("toolbox-tab-" + toolId);
-    let panel = this.doc.getElementById("toolbox-panel-" + toolId);
-
-    if (this._currentToolId == toolId) {
-      let nextToolName = null;
-      if (radio.nextSibling) {
-        nextToolName = radio.nextSibling.getAttribute("toolid");
-      }
-      if (radio.previousSibling) {
-        nextToolName = radio.previousSibling.getAttribute("toolid");
-      }
-      if (nextToolName) {
-        this.selectTool(nextToolName);
-      }
-    }
-
-    if (radio) {
-      radio.parentNode.removeChild(radio);
-    }
-
-    if (panel) {
-      panel.parentNode.removeChild(panel);
-    }
-
-    if (this._toolPanels.has(toolId)) {
-      let instance = this._toolPanels.get(toolId);
-      instance.destroy();
-      this._toolPanels.delete(toolId);
-    }
-  },
-
-
-  /**
-   * Get the toolbox's notification box
-   *
-   * @return The notification box element.
-   */
-  getNotificationBox: function TBOX_getNotificationBox() {
-    return this.doc.getElementById("toolbox-notificationbox");
-  },
-
-  /**
-   * Remove all UI elements, detach from target and clear up
-   */
-  destroy: function TBOX_destroy() {
-    if (this._destroyed) {
-      return;
-    }
-
-    // Remote targets need to be notified that the toolbox is being torn down.
-    if (this._target && this._target.isRemote) {
-      this._target.destroy();
-    }
-    this._target = null;
-
-    for (let [id, panel] of this._toolPanels) {
-      panel.destroy();
-    }
-
-    this._host.destroy();
-
-    gDevTools.off("tool-registered", this._toolRegistered);
-    gDevTools.off("tool-unregistered", this._toolUnregistered);
-
-    this._destroyed = true;
-    this.emit("destroyed");
-  }
-};
diff --git a/browser/devtools/framework/ToolboxHosts.jsm b/browser/devtools/framework/ToolboxHosts.jsm
deleted file mode 100644
index 23371c950e9..00000000000
--- a/browser/devtools/framework/ToolboxHosts.jsm
+++ /dev/null
@@ -1,208 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-const Cu = Components.utils;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-this.EXPORTED_SYMBOLS = [ "Hosts" ];
-
-/**
- * A toolbox host represents an object that contains a toolbox (e.g. the
- * sidebar or a separate window). Any host object should implement the
- * following functions:
- *
- * open() - create the UI and emit a 'ready' event when the UI is ready to use
- * destroy() - destroy the host's UI
- */
-
-this.Hosts = {
-  "bottom": BottomHost,
-  "side": SidebarHost,
-  "window": WindowHost
-}
-
-/**
- * Host object for the dock on the bottom of the browser
- */
-function BottomHost(hostTab) {
-  this.hostTab = hostTab;
-
-  new EventEmitter(this);
-}
-
-BottomHost.prototype = {
-  type: "bottom",
-
-  heightPref: "devtools.toolbox.footer.height",
-
-  /**
-   * Create a box at the bottom of the host tab.
-   */
-  open: function BH_open() {
-    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
-    let ownerDocument = gBrowser.ownerDocument;
-
-    this._splitter = ownerDocument.createElement("splitter");
-    this._splitter.setAttribute("class", "devtools-horizontal-splitter");
-
-    this.frame = ownerDocument.createElement("iframe");
-    this.frame.id = "devtools-toolbox-bottom-iframe";
-    this.frame.height = Services.prefs.getIntPref(this.heightPref);
-
-    this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
-    this._nbox.appendChild(this._splitter);
-    this._nbox.appendChild(this.frame);
-
-    let frameLoad = function() {
-      this.frame.removeEventListener("DOMContentLoaded", frameLoad, true);
-      this.emit("ready", this.frame);
-    }.bind(this);
-
-    this.frame.addEventListener("DOMContentLoaded", frameLoad, true);
-
-    // we have to load something so we can switch documents if we have to
-    this.frame.setAttribute("src", "about:blank");
-
-    focusTab(this.hostTab);
-  },
-
-  /**
-   * Destroy the bottom dock.
-   */
-  destroy: function BH_destroy() {
-    if (this._destroyed) {
-      return;
-    }
-    this._destroyed = true;
-    Services.prefs.setIntPref(this.heightPref, this.frame.height);
-
-    this._nbox.removeChild(this._splitter);
-    this._nbox.removeChild(this.frame);
-  }
-}
-
-
-/**
- * Host object for the in-browser sidebar
- */
-function SidebarHost(hostTab) {
-  this.hostTab = hostTab;
-
-  new EventEmitter(this);
-}
-
-SidebarHost.prototype = {
-  type: "side",
-
-  widthPref: "devtools.toolbox.sidebar.width",
-
-  /**
-   * Create a box in the sidebar of the host tab.
-   */
-  open: function RH_open() {
-    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
-    let ownerDocument = gBrowser.ownerDocument;
-
-    this._splitter = ownerDocument.createElement("splitter");
-    this._splitter.setAttribute("class", "devtools-side-splitter");
-
-    this.frame = ownerDocument.createElement("iframe");
-    this.frame.id = "devtools-toolbox-side-iframe";
-    this.frame.width = Services.prefs.getIntPref(this.widthPref);
-
-    this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
-    this._sidebar.appendChild(this._splitter);
-    this._sidebar.appendChild(this.frame);
-
-    let frameLoad = function() {
-      this.frame.removeEventListener("DOMContentLoaded", frameLoad, true);
-      this.emit("ready", this.frame);
-    }.bind(this);
-
-    this.frame.addEventListener("DOMContentLoaded", frameLoad, true);
-    this.frame.setAttribute("src", "about:blank");
-
-    focusTab(this.hostTab);
-  },
-
-  /**
-   * Destroy the sidebar.
-   */
-  destroy: function RH_destroy() {
-    Services.prefs.setIntPref(this.widthPref, this.frame.width);
-
-    this._sidebar.removeChild(this._splitter);
-    this._sidebar.removeChild(this.frame);
-  }
-}
-
-/**
- * Host object for the toolbox in a separate window
- */
-function WindowHost() {
-  this._boundUnload = this._boundUnload.bind(this);
-
-  new EventEmitter(this);
-}
-
-WindowHost.prototype = {
-  type: "window",
-
-  WINDOW_URL: "chrome://browser/content/devtools/framework/toolbox-window.xul",
-
-  /**
-   * Create a new xul window to contain the toolbox.
-   */
-  open: function WH_open() {
-    let flags = "chrome,centerscreen,resizable,dialog=no";
-    let win = Services.ww.openWindow(null, this.WINDOW_URL, "_blank",
-                                     flags, null);
-
-    let frameLoad = function(event) {
-      win.removeEventListener("load", frameLoad, true);
-      this.frame = win.document.getElementById("toolbox-iframe");
-      this.emit("ready", this.frame);
-    }.bind(this);
-
-    win.addEventListener("load", frameLoad, true);
-    win.addEventListener("unload", this._boundUnload);
-
-    win.focus();
-
-    this._window = win;
-  },
-
-  /**
-   * Catch the user closing the window.
-   */
-  _boundUnload: function(event) {
-    if (event.target.location != this.WINDOW_URL) {
-      return;
-    }
-    this._window.removeEventListener("unload", this._boundUnload);
-
-    this.emit("window-closed");
-  },
-
-  /**
-   * Destroy the window.
-   */
-  destroy: function WH_destroy() {
-    this._window.removeEventListener("unload", this._boundUnload);
-    this._window.close();
-  }
-}
-
-/**
- *  Switch to the given tab in a browser and focus the browser window
- */
-function focusTab(tab) {
-  let browserWindow = tab.ownerDocument.defaultView;
-  browserWindow.focus();
-  browserWindow.gBrowser.selectedTab = tab;
-}
diff --git a/browser/devtools/framework/connect/connect.css b/browser/devtools/framework/connect/connect.css
deleted file mode 100644
index a7acc39936e..00000000000
--- a/browser/devtools/framework/connect/connect.css
+++ /dev/null
@@ -1,87 +0,0 @@
-html {
-  background: url("chrome://browser/skin/newtab/noise.png");
-}
-
-body {
-  font-family: Arial;
-  padding: 20px;
-  border-radius: 3px;
-  max-width: 600px;
-  min-height: 400px;
-  margin: 10px auto 0;
-}
-
-label {
-  display: block;
-  margin: 10px;
-  font-size: 0;
-}
-
-label > span {
-  display: inline-block;
-  min-width: 150px;
-  font-size: 0.8rem;
-  text-align: right;
-  margin-right: 10px;
-}
-
-#submit {
-  margin-left: 160px;
-}
-
-
-#actors, #connection-form {
-  margin: 20px;
-}
-
-input {
-  border: 1px solid grey;
-}
-
-#connection-form,
-#connecting,
-#actors-list {
-  display: none;
-}
-
-body:not(.actors-mode):not(.connecting) > #connection-form {
-  display: block;
-}
-
-body.actors-mode > #actors-list {
-  display: block;
-}
-
-body.connecting > #connecting {
-  display: block;
-}
-
-#connecting {
-  text-align: center;
-}
-
-#throbber {
-  height: 7px; width: 7px;
-  border-radius: 50%;
-  background: black;
-  display: inline-block;
-  animation-duration: 0.6s;
-  animation-name: anim;
-  animation-direction: alternate;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-@keyframes anim {to {
-    transform: scale(0.5) rotate(0.1deg);
-}}
-
-#actors {
-  padding-left: 0;
-  font-size: 0.9rem;
-}
-
-#actors > a {
-  display: block;
-  margin: 5px;
-  padding: 5px;
-}
diff --git a/browser/devtools/framework/connect/connect.js b/browser/devtools/framework/connect/connect.js
deleted file mode 100644
index 169e57ec0e8..00000000000
--- a/browser/devtools/framework/connect/connect.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-"use strict";
-
-const Cu = Components.utils;
-Cu.import("resource:///modules/devtools/Target.jsm");
-Cu.import("resource:///modules/devtools/Toolbox.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/devtools/dbg-client.jsm");
-
-let gClient;
-
-function submit() {
-  document.body.classList.add("connecting");
-
-  let host = document.getElementById("host").value;
-  let port = document.getElementById("port").value;
-  if (!host) {
-    host = Services.prefs.getCharPref("devtools.debugger.remote-host");
-  } else {
-    Services.prefs.setCharPref("devtools.debugger.remote-host", host);
-  }
-  if (!port) {
-    port = Services.prefs.getIntPref("devtools.debugger.remote-port");
-  } else {
-    Services.prefs.setIntPref("devtools.debugger.remote-port", port);
-  }
-
-  let transport = debuggerSocketConnect(host, port);
-  let client = gClient = new DebuggerClient(transport);
-
-  client.connect(function(aType, aTraits) {
-    client.listTabs(function(aResponse) {
-      document.body.classList.remove("connecting");
-      document.body.classList.add("actors-mode");
-
-      let parent = document.getElementById("actors");
-      let focusSet = false;
-
-      // Add Global Process debugging...
-      let globals = JSON.parse(JSON.stringify(aResponse));
-      delete globals.tabs;
-      delete globals.selected;
-      // ...only if there are appropriate actors (a 'from' property will always
-      // be there).
-      if (Object.keys(globals).length > 1) {
-        let a = document.createElement("a");
-        a.onclick = function() {
-          connect(globals, true);
-        }
-
-        a.title = a.textContent = "Remote process";
-        a.href = "#";
-
-        parent.appendChild(a);
-      }
-
-      // Add one entry for each open tab.
-      if (aResponse.tabs.length > 0) {
-        let header = document.createElement("div");
-        header.innerHTML = "Tabs:";
-        parent.appendChild(header);
-      }
-      for (let i = 0; i < aResponse.tabs.length; i++) {
-        let tab = aResponse.tabs[i];
-
-        let a = document.createElement("a");
-        a.onclick = function() {
-          connect(tab);
-        }
-
-        a.title = a.textContent = tab.title;
-        a.href = "#";
-
-        if (i == aResponse.selected) {
-          a.title += " [*]";
-          a.textContent = a.title;
-        }
-
-        parent.appendChild(a);
-
-        if (!focusSet) {
-          a.focus();
-          focusSet = true;
-        }
-      }
-    });
-  });
-}
-
-function connect(form, chrome=false) {
-  let target = TargetFactory.forRemote(form, gClient, chrome);
-  gDevTools.openToolbox(target, Toolbox.HostType.WINDOW, "webconsole");
-  window.close();
-}
diff --git a/browser/devtools/framework/connect/connect.xhtml b/browser/devtools/framework/connect/connect.xhtml
deleted file mode 100644
index 466170d07de..00000000000
--- a/browser/devtools/framework/connect/connect.xhtml
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- 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 html [
-<!ENTITY % connectionDTD SYSTEM "chrome://browser/locale/devtools/connection-screen.dtd" >
- %connectionDTD;
-]>
-
-<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <head>
-    <title>&title;</title>
-    <link rel="stylesheet" href="chrome://browser/content/devtools/connect.css" type="text/css"/>
-    <script type="application/javascript;version=1.8" src="connect.js"></script>
-  </head>
-  <body>
-    <p>
-    </p>
-    <section id="connection-form">
-      <form onsubmit="window.submit()" action="#">
-        <label>
-          <span>&host;</span>
-          <input id="host" type="text" placeholder="localhost"></input>
-        </label>
-        <label>
-          <span>&port;</span>
-          <input id="port" type="number" placeholder="6000"></input>
-        </label>
-        <label>
-          <input id="submit" type="submit" value="&connect;"></input>
-        </label>
-      </form>
-    </section>
-    <section id="actors-list">
-      <p>&availability;</p>
-      <ul id="actors"></ul>
-    </section>
-    <section id="connecting">
-      <p>&connecting;</p>
-      <div id="throbber"></div>
-    </section>
-  </body>
-</html>
diff --git a/browser/devtools/framework/gDevTools.jsm b/browser/devtools/framework/gDevTools.jsm
deleted file mode 100644
index 6c22ebdf384..00000000000
--- a/browser/devtools/framework/gDevTools.jsm
+++ /dev/null
@@ -1,543 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = [ "gDevTools", "DevTools", "DevToolsXULCommands" ];
-
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
-Cu.import("resource:///modules/devtools/Toolbox.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
-
-const FORBIDDEN_IDS = new Set("toolbox", "");
-
-/**
- * DevTools is a class that represents a set of developer tools, it holds a
- * set of tools and keeps track of open toolboxes in the browser.
- */
-this.DevTools = function DevTools() {
-  this._tools = new Map();
-  this._toolboxes = new Map();
-
-  // destroy() is an observer's handler so we need to preserve context.
-  this.destroy = this.destroy.bind(this);
-
-  this._trackedBrowserWindows = new Set();
-
-  // Bind _updateMenuCheckbox() to preserve context.
-  this._updateMenuCheckbox = this._updateMenuCheckbox.bind(this);
-
-  new EventEmitter(this);
-
-  Services.obs.addObserver(this.destroy, "quit-application", false);
-
-  /**
-   * Register the set of default tools
-   */
-  for (let definition of defaultTools) {
-    this.registerTool(definition);
-  }
-}
-
-DevTools.prototype = {
-  /**
-   * Register a new developer tool.
-   *
-   * A definition is a light object that holds different information about a
-   * developer tool. This object is not supposed to have any operational code.
-   * See it as a "manifest".
-   * The only actual code lives in the build() function, which will be used to
-   * start an instance of this tool.
-   *
-   * Each toolDefinition has the following properties:
-   * - id: Unique identifier for this tool (string|required)
-   * - killswitch: Property name to allow us to turn this tool on/off globally
-   *               (string|required) (TODO: default to devtools.{id}.enabled?)
-   * - icon: URL pointing to a graphic which will be used as the src for an
-   *         16x16 img tag (string|required)
-   * - url: URL pointing to a XUL/XHTML document containing the user interface
-   *        (string|required)
-   * - label: Localized name for the tool to be displayed to the user
-   *          (string|required)
-   * - build: Function that takes an iframe, which has been populated with the
-   *          markup from |url|, and also the toolbox containing the panel.
-   *          And returns an instance of ToolPanel (function|required)
-   */
-  registerTool: function DT_registerTool(toolDefinition) {
-    let toolId = toolDefinition.id;
-
-    if (!toolId || FORBIDDEN_IDS.has(toolId)) {
-      throw new Error("Invalid definition.id");
-    }
-
-    toolDefinition.killswitch = toolDefinition.killswitch ||
-      "devtools." + toolId + ".enabled";
-    this._tools.set(toolId, toolDefinition);
-
-    this._addToolToWindows(toolDefinition);
-
-    this.emit("tool-registered", toolId);
-  },
-
-  /**
-   * Removes all tools that match the given |toolId|
-   * Needed so that add-ons can remove themselves when they are deactivated
-   *
-   * @param {string} toolId
-   *        id of the tool to unregister
-   */
-  unregisterTool: function DT_unregisterTool(toolId) {
-    this._tools.delete(toolId);
-
-    this._removeToolFromWindows(toolId);
-
-    this.emit("tool-unregistered", toolId);
-  },
-
-  /**
-   * Allow ToolBoxes to get at the list of tools that they should populate
-   * themselves with.
-   *
-   * @return {Map} tools
-   *         A map of the the tool definitions registered in this instance
-   */
-  getToolDefinitions: function DT_getToolDefinitions() {
-    let tools = new Map();
-
-    for (let [key, value] of this._tools) {
-      let enabled;
-
-      try {
-        enabled = Services.prefs.getBoolPref(value.killswitch);
-      } catch(e) {
-        enabled = true;
-      }
-
-      if (enabled) {
-        tools.set(key, value);
-      }
-    }
-    return tools;
-  },
-
-  /**
-   * Create a toolbox to debug |target| using a window displayed in |hostType|
-   * (optionally with |defaultToolId| opened)
-   *
-   * @param {Target} target
-   *         The target the toolbox will debug
-   * @param {Toolbox.HostType} hostType
-   *        The type of host (bottom, top, side)
-   * @param {string} defaultToolId
-   *        The id of the initial tool to show
-   *
-   * @return {Toolbox} toolbox
-   *        The toolbox that was opened
-   */
-  openToolbox: function DT_openToolbox(target, hostType, defaultToolId) {
-    if (this._toolboxes.has(target)) {
-      // only allow one toolbox per target
-      return this._toolboxes.get(target);
-    }
-
-    let tb = new Toolbox(target, hostType, defaultToolId);
-
-    this._toolboxes.set(target, tb);
-    tb.once("destroyed", function() {
-      this._toolboxes.delete(target);
-      this._updateMenuCheckbox();
-      this.emit("toolbox-destroyed", target);
-    }.bind(this));
-
-    tb.once("ready", function() {
-      this.emit("toolbox-ready", tb);
-      this._updateMenuCheckbox();
-    }.bind(this));
-
-    tb.open();
-
-    return tb;
-  },
-
-  /**
-   * Close the toolbox for a given target
-   */
-  closeToolbox: function DT_closeToolbox(target) {
-    let toolbox = this._toolboxes.get(target);
-    if (toolbox == null) {
-      return;
-    }
-    toolbox.destroy();
-  },
-
-  /**
-   * Open the toolbox for a specific target (not tab).
-   * FIXME: We should probably merge this function and openToolbox
-   *
-   * @param  {Target} target
-   *         The target that the toolbox should be debugging
-   * @param  {String} toolId
-   *         The id of the tool to open
-   *
-   * @return {Toolbox} toolbox
-   *         The toolbox that has been opened
-   */
-  openToolboxForTab: function DT_openToolboxForTab(target, toolId) {
-    let tb = this.getToolboxForTarget(target);
-
-    if (tb) {
-      tb.selectTool(toolId);
-    } else {
-      tb = this.openToolbox(target, null, toolId);
-    }
-    return tb;
-  },
-
-  /**
-   * This function is for the benefit of command#Tools:DevToolbox in
-   * browser/base/content/browser-sets.inc and should not be used outside
-   * of there
-   */
-  toggleToolboxCommand: function(gBrowser, toolId=null) {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    this.toggleToolboxForTarget(target, toolId);
-  },
-
-  /**
-   * Toggle a toolbox for the given target.
-   *
-   * @param  {Target} target
-   *         The target the toolbox is debugging
-   * @param  {string} toolId
-   *         The id of the tool to show in the toolbox, if it's to be opened.
-   */
-  toggleToolboxForTarget: function DT_toggleToolboxForTarget(target, toolId) {
-    let tb = this.getToolboxForTarget(target);
-
-    if (tb /* FIXME: && tool is showing */ ) {
-      tb.destroy();
-    } else {
-      this.openToolboxForTab(target, toolId);
-    }
-  },
-
-  /**
-   * Return the toolbox for a given target.
-   *
-   * @param  {object} target
-   *         Target value e.g. the target that owns this toolbox
-   *
-   * @return {Toolbox} toolbox
-   *         The toobox that is debugging the given target
-   */
-  getToolboxForTarget: function DT_getToolboxForTarget(target) {
-    return this._toolboxes.get(target);
-  },
-
-  /**
-   * Return a tool panel for a given tool and target.
-   *
-   * @param  {String} toolId
-   *         The id of the tool to open.
-   * @param  {object} target
-   *         The toolbox's target.
-   *
-   * @return {ToolPanel} panel
-   *         Panel for the tool with the toolid
-   */
-  getPanelForTarget: function DT_getPanelForTarget(toolId, target) {
-    let toolbox = this.getToolboxForTarget(target);
-    if (!toolbox) {
-      return undefined;
-    }
-    return toolbox.getToolPanels().get(toolId);
-  },
-
-  /**
-   * Add this DevTools's presence to a browser window's document
-   *
-   * @param  {XULDocument} doc
-   *         The document to which menuitems and handlers are to be added
-   */
-  registerBrowserWindow: function DT_registerBrowserWindow(win) {
-    this._trackedBrowserWindows.add(win);
-    this._addAllToolsToMenu(win.document);
-
-    let tabContainer = win.document.getElementById("tabbrowser-tabs")
-    tabContainer.addEventListener("TabSelect", this._updateMenuCheckbox, false);
-  },
-
-  /**
-   * Add the menuitem for a tool to all open browser windows.
-   *
-   * @param {object} toolDefinition
-   *        properties of the tool to add
-   */
-  _addToolToWindows: function DT_addToolToWindows(toolDefinition) {
-    for (let win of this._trackedBrowserWindows) {
-      this._addToolToMenu(toolDefinition, win.document);
-    }
-  },
-
-  /**
-   * Add all tools to the developer tools menu of a window.
-   *
-   * @param {XULDocument} doc
-   *        The document to which the tool items are to be added.
-   */
-  _addAllToolsToMenu: function DT_addAllToolsToMenu(doc) {
-    let fragCommands = doc.createDocumentFragment();
-    let fragKeys = doc.createDocumentFragment();
-    let fragBroadcasters = doc.createDocumentFragment();
-    let fragAppMenuItems = doc.createDocumentFragment();
-    let fragMenuItems = doc.createDocumentFragment();
-
-    for (let [key, toolDefinition] of this._tools) {
-      let frags = this._addToolToMenu(toolDefinition, doc, true);
-
-      if (!frags) {
-        return;
-      }
-
-      let [cmd, key, bc, appmenuitem, menuitem] = frags;
-
-      fragCommands.appendChild(cmd);
-      if (key) {
-        fragKeys.appendChild(key);
-      }
-      fragBroadcasters.appendChild(bc);
-      fragAppMenuItems.appendChild(appmenuitem);
-      fragMenuItems.appendChild(menuitem);
-    }
-
-    let mcs = doc.getElementById("mainCommandSet");
-    mcs.appendChild(fragCommands);
-
-    let mks = doc.getElementById("mainKeyset");
-    mks.appendChild(fragKeys);
-
-    let mbs = doc.getElementById("mainBroadcasterSet");
-    mbs.appendChild(fragBroadcasters);
-
-    let amp = doc.getElementById("appmenu_webDeveloper_popup");
-    if (amp) {
-      let amps = doc.getElementById("appmenu_devtools_separator");
-      amp.insertBefore(fragAppMenuItems, amps);
-    }
-
-    let mp = doc.getElementById("menuWebDeveloperPopup");
-    let mps = doc.getElementById("menu_devtools_separator");
-    mp.insertBefore(fragMenuItems, mps);
-  },
-
-  /**
-   * Add a menu entry for a tool definition
-   *
-   * @param {string} toolDefinition
-   *        Tool definition of the tool to add a menu entry.
-   * @param {XULDocument} doc
-   *        The document to which the tool menu item is to be added.
-   * @param {Boolean} [noAppend]
-   *        Return an array of elements instead of appending them to the
-   *        document. Default is false.
-   */
-  _addToolToMenu: function DT_addToolToMenu(toolDefinition, doc, noAppend) {
-    let id = toolDefinition.id;
-
-    // Prevent multiple entries for the same tool.
-    if (doc.getElementById("Tools:" + id)) {
-      return;
-    }
-
-    let cmd = doc.createElement("command");
-    cmd.id = "Tools:" + id;
-    cmd.setAttribute("oncommand",
-        'gDevTools.toggleToolboxCommand(gBrowser, "' + id + '");');
-
-    let key = null;
-    if (toolDefinition.key) {
-      key = doc.createElement("key");
-      key.id = "key_" + id;
-
-      if (toolDefinition.key.startsWith("VK_")) {
-        key.setAttribute("keycode", toolDefinition.key);
-      } else {
-        key.setAttribute("key", toolDefinition.key);
-      }
-
-      key.setAttribute("oncommand",
-          'gDevTools.toggleToolboxCommand(gBrowser, "' + id + '");');
-      key.setAttribute("modifiers", toolDefinition.modifiers);
-    }
-
-    let bc = doc.createElement("broadcaster");
-    bc.id = "devtoolsMenuBroadcaster_" + id;
-    bc.setAttribute("label", toolDefinition.label);
-    bc.setAttribute("command", "Tools:" + id);
-
-    if (key) {
-      bc.setAttribute("key", "key_" + id);
-    }
-
-    let appmenuitem = doc.createElement("menuitem");
-    appmenuitem.id = "appmenuitem_" + id;
-    appmenuitem.setAttribute("observes", "devtoolsMenuBroadcaster_" + id);
-
-    let menuitem = doc.createElement("menuitem");
-    menuitem.id = "menuitem_" + id;
-    menuitem.setAttribute("observes", "devtoolsMenuBroadcaster_" + id);
-
-    if (toolDefinition.accesskey) {
-      menuitem.setAttribute("accesskey", toolDefinition.accesskey);
-    }
-
-    if (noAppend) {
-      return [cmd, key, bc, appmenuitem, menuitem];
-    } else {
-      let mcs = doc.getElementById("mainCommandSet");
-      mcs.appendChild(cmd);
-
-      if (key) {
-        let mks = doc.getElementById("mainKeyset");
-        mks.appendChild(key);
-      }
-
-      let mbs = doc.getElementById("mainBroadcasterSet");
-      mbs.appendChild(bc);
-
-      let amp = doc.getElementById("appmenu_webDeveloper_popup");
-      if (amp) {
-        let amps = doc.getElementById("appmenu_devtools_separator");
-        amp.insertBefore(appmenuitem, amps);
-      }
-
-      let mp = doc.getElementById("menuWebDeveloperPopup");
-      let mps = doc.getElementById("menu_devtools_separator");
-      mp.insertBefore(menuitem, mps);
-    }
-  },
-
-  /**
-   * Update the "Toggle Toolbox" checkbox in the developer tools menu. This is
-   * called when a toolbox is created or destroyed.
-   */
-  _updateMenuCheckbox: function DT_updateMenuCheckbox() {
-    for (let win of this._trackedBrowserWindows) {
-
-      let hasToolbox = false;
-      if (TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
-        let target = TargetFactory.forTab(win.gBrowser.selectedTab);
-        if (this._toolboxes.has(target)) {
-          hasToolbox = true;
-        }
-      }
-
-      let broadcaster = win.document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
-      if (hasToolbox) {
-        broadcaster.setAttribute("checked", "true");
-      } else {
-        broadcaster.removeAttribute("checked");
-      }
-    }
-  },
-
-  /**
-   * Remove the menuitem for a tool to all open browser windows.
-   *
-   * @param {object} toolId
-   *        id of the tool to remove
-   */
-  _removeToolFromWindows: function DT_removeToolFromWindows(toolId) {
-    for (let win of this._trackedBrowserWindows) {
-      this._removeToolFromMenu(toolId, win.document);
-    }
-  },
-
-  /**
-   * Remove a tool's menuitem from a window
-   *
-   * @param {string} toolId
-   *        Id of the tool to add a menu entry for
-   * @param {XULDocument} doc
-   *        The document to which the tool menu item is to be removed from
-   */
-  _removeToolFromMenu: function DT_removeToolFromMenu(toolId, doc) {
-    let command = doc.getElementById("Tools:" + toolId);
-    command.parentNode.removeChild(command);
-
-    let key = doc.getElementById("key_" + toolId);
-    if (key) {
-      key.parentNode.removeChild(key);
-    }
-
-    let bc = doc.getElementById("devtoolsMenuBroadcaster_" + toolId);
-    bc.parentNode.removeChild(bc);
-
-    /*
-    // FIXME: item is null in testing. This is the only place to use
-    // "appmenu_devToolbar" + toolId, so it seems clear that this is wrong
-    let item = doc.getElementById("appmenu_devToolbar" + toolId);
-    item.parentNode.removeChild(item);
-    */
-  },
-
-  /**
-   * Called on browser unload to remove menu entries, toolboxes and event
-   * listeners from the closed browser window.
-   *
-   * @param  {XULWindow} win
-   *         The window containing the menu entry
-   */
-  forgetBrowserWindow: function DT_forgetBrowserWindow(win) {
-    if (!this._tools) {
-      return;
-    }
-
-    this._trackedBrowserWindows.delete(win);
-
-    // Destroy toolboxes for closed window
-    for (let [target, toolbox] of this._toolboxes) {
-      if (toolbox.frame.ownerDocument.defaultView == win) {
-        toolbox.destroy();
-      }
-    }
-
-    let tabContainer = win.document.getElementById("tabbrowser-tabs")
-    tabContainer.removeEventListener("TabSelect",
-                                     this._updateMenuCheckbox, false);
-  },
-
-  /**
-   * All browser windows have been closed, tidy up remaining objects.
-   */
-  destroy: function() {
-    Services.obs.removeObserver(this.destroy, "quit-application");
-
-    delete this._trackedBrowserWindows;
-    delete this._tools;
-    delete this._toolboxes;
-  },
-};
-
-/**
- * gDevTools is a singleton that controls the Firefox Developer Tools.
- *
- * It is an instance of a DevTools class that holds a set of tools. It has the
- * same lifetime as the browser.
- */
-this.gDevTools = new DevTools();
-
-/**
- * DevToolsXULCommands exposes methods used by browser's <command>s.
- */
-this.DevToolsXULCommands = {
-  openConnectScreen: function(gBrowser) {
-    gBrowser.selectedTab = gBrowser.addTab("chrome://browser/content/devtools/connect.xhtml");
-  },
-}
diff --git a/browser/devtools/framework/test/Makefile.in b/browser/devtools/framework/test/Makefile.in
deleted file mode 100644
index 618e044c492..00000000000
--- a/browser/devtools/framework/test/Makefile.in
+++ /dev/null
@@ -1,26 +0,0 @@
-# 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/.
-
-DEPTH			= @DEPTH@
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH			= @srcdir@
-relativesrcdir  = @relativesrcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-MOCHITEST_BROWSER_FILES = \
-		head.js \
-		browser_devtools_api.js \
-		browser_new_activation_workflow.js \
-		browser_toolbox_dynamic_registration.js \
-		browser_toolbox_hosts.js \
-		browser_toolbox_ready.js \
-		browser_toolbox_select_event.js \
-		browser_target_events.js \
-		browser_toolbox_tool_ready.js \
-		browser_toolbox_sidebar.js \
-		$(NULL)
-
-include $(topsrcdir)/config/rules.mk
diff --git a/browser/devtools/framework/test/browser_devtools_api.js b/browser/devtools/framework/test/browser_devtools_api.js
deleted file mode 100644
index 205a26808ab..00000000000
--- a/browser/devtools/framework/test/browser_devtools_api.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// Tests devtools API
-
-const Cu = Components.utils;
-const toolId = "test-tool";
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/EventEmitter.jsm", tempScope);
-let EventEmitter = tempScope.EventEmitter;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-function test() {
-  addTab("about:blank", function(aBrowser, aTab) {
-    runTests(aTab);
-  });
-}
-
-function runTests(aTab) {
-  let toolDefinition = {
-    id: toolId,
-    isTargetSupported: function() true,
-    killswitch: "devtools.test-tool.enabled",
-    url: "about:blank",
-    label: "someLabel",
-    build: function(iframeWindow, toolbox) {
-      let panel = new DevToolPanel(iframeWindow, toolbox);
-      return panel;
-    },
-  };
-
-  ok(gDevTools, "gDevTools exists");
-  is(gDevTools.getToolDefinitions().has(toolId), false,
-    "The tool is not registered");
-
-  gDevTools.registerTool(toolDefinition);
-  is(gDevTools.getToolDefinitions().has(toolId), true,
-    "The tool is registered");
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  function onNewToolbox(event, toolboxFromEvent) {
-    let toolBoxes = gDevTools._toolboxes;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let tb = toolBoxes.get(target);
-    is(toolboxFromEvent, tb, "'toolbox-ready' event fired. Correct toolbox value.");
-    is(tb.target, target, "toolbox target is correct");
-    is(tb._host.hostTab, gBrowser.selectedTab, "toolbox host is correct");
-    gDevTools.once(toolId + "-ready", continueTests);
-  }
-
-  function onToolboxClosed(event, targetFromEvent) {
-    is(targetFromEvent, target, "'toolbox-destroyed' event fired. Correct tab value.");
-    finishUp();
-  }
-
-
-  gDevTools.once("toolbox-ready", onNewToolbox);
-  gDevTools.once("toolbox-destroyed", onToolboxClosed);
-
-  executeSoon(function() {
-    gDevTools.openToolbox(target, "bottom", toolId);
-  });
-}
-
-function continueTests(event, toolbox, panel) {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  is(toolbox, gDevTools._toolboxes.get(target), "{toolId}-ready event received, with correct toolbox value");
-  is(panel, toolbox.getToolPanels().get(toolId), "panel value is correct");
-
-  is(toolbox.currentToolId, toolId, "toolbox _currentToolId is correct");
-
-  let toolDefinitions = gDevTools.getToolDefinitions();
-  is(toolDefinitions.has(toolId), true, "The tool is in gDevTools");
-
-  let toolDefinition = toolDefinitions.get(toolId);
-  is(toolDefinition.id, toolId, "toolDefinition id is correct");
-
-  gDevTools.unregisterTool(toolId);
-  is(gDevTools.getToolDefinitions().has(toolId), false,
-    "The tool is no longer registered");
-
-  toolbox.destroy();
-}
-
-function finishUp() {
-  tempScope = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-/**
-* When a Toolbox is started it creates a DevToolPanel for each of the tools
-* by calling toolDefinition.build(). The returned object should
-* at least implement these functions. They will be used by the ToolBox.
-*
-* There may be no benefit in doing this as an abstract type, but if nothing
-* else gives us a place to write documentation.
-*/
-function DevToolPanel(iframeWindow, toolbox) {
-  new EventEmitter(this);
-
-  this._toolbox = toolbox;
-
-  /*let doc = iframeWindow.document
-  let label = doc.createElement("label");
-  let textNode = doc.createTextNode("Some Tool");
-
-  label.appendChild(textNode);
-  doc.body.appendChild(label);*/
-
-  executeSoon(function() {
-    this.setReady();
-  }.bind(this));
-}
-
-DevToolPanel.prototype = {
-  get target() this._toolbox.target,
-
-  get toolbox() this._toolbox,
-
-  get isReady() this._isReady,
-
-  _isReady: false,
-
-  setReady: function() {
-    this._isReady = true;
-    this.emit("ready");
-  },
-
-  destroy: function DTI_destroy()
-  {
-
-  },
-};
diff --git a/browser/devtools/framework/test/browser_new_activation_workflow.js b/browser/devtools/framework/test/browser_new_activation_workflow.js
deleted file mode 100644
index 242b725dcc5..00000000000
--- a/browser/devtools/framework/test/browser_new_activation_workflow.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// Tests devtools API
-
-const Cu = Components.utils;
-
-let toolbox;
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-function test() {
-  addTab("about:blank", function(aBrowser, aTab) {
-    loadWebConsole(aTab);
-  });
-}
-
-function loadWebConsole(aTab) {
-  ok(gDevTools, "gDevTools exists");
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  toolbox = gDevTools.openToolbox(target, "bottom", "webconsole");
-  toolbox.once("webconsole-ready", checkToolLoading);
-}
-
-function checkToolLoading() {
-  is(toolbox.currentToolId, "webconsole", "The web console is selected");
-  selectAndCheckById("jsdebugger");
-  selectAndCheckById("styleeditor");
-  testToggle();
-}
-
-function selectAndCheckById(id) {
-  let doc = toolbox.frame.contentDocument;
-
-  toolbox.selectTool(id);
-  let tab = doc.getElementById("toolbox-tab-" + id);
-  is(tab.selected, true, "The " + id + " tab is selected");
-}
-
-function testToggle() {
-  toolbox.once("destroyed", function() {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    toolbox = gDevTools.openToolbox(target, "bottom", "styleeditor");
-    toolbox.once("styleeditor-ready", checkStyleEditorLoaded);
-  }.bind(this));
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.toggleToolboxForTarget(target);
-}
-
-function checkStyleEditorLoaded() {
-  is(toolbox.currentToolId, "styleeditor", "The style editor is selected");
-  finishUp();
-}
-
-function finishUp() {
-  toolbox.destroy();
-  toolbox = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_target_events.js b/browser/devtools/framework/test/browser_target_events.js
deleted file mode 100644
index 56496fea2d6..00000000000
--- a/browser/devtools/framework/test/browser_target_events.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-var tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-var TargetFactory = tempScope.TargetFactory;
-
-var target;
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", onLoad, true);
-}
-
-function onLoad(evt) {
-  gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-
-  target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  is(target.tab, gBrowser.selectedTab, "Target linked to the right tab.");
-
-  target.once("hidden", onHidden);
-  gBrowser.selectedTab = gBrowser.addTab();
-}
-
-function onHidden() {
-  ok(true, "Hidden event received");
-  target.once("visible", onVisible);
-  gBrowser.removeCurrentTab();
-}
-
-function onVisible() {
-  ok(true, "Visible event received");
-  target.once("will-navigate", onWillNavigate);
-  gBrowser.contentWindow.location = "data:text/html,test navigation";
-}
-
-function onWillNavigate(event, request) {
-  ok(true, "will-navigate event received");
-  target.once("navigate", onNavigate);
-}
-
-function onNavigate() {
-  ok(true, "navigate event received");
-  target.once("close", onClose);
-  gBrowser.removeCurrentTab();
-}
-
-function onClose() {
-  ok(true, "close event received");
-
-  target = null;
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js b/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
deleted file mode 100644
index 848dbef8aac..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let toolbox;
-
-let temp = {};
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-    openToolbox();
-  }, true);
-
-  content.location = "data:text/html,test for dynamically registering and unregistering tools";
-}
-
-function openToolbox()
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  toolbox = gDevTools.openToolbox(target);
-
-  toolbox.once("ready", testRegister);
-}
-
-
-function testRegister()
-{
-  gDevTools.once("tool-registered", toolRegistered);
-
-  gDevTools.registerTool({
-    id: "test-tool",
-    label: "Test Tool",
-    isTargetSupported: function() true,
-    build: function() {}
-  });
-}
-
-function toolRegistered(event, toolId)
-{
-  is(toolId, "test-tool", "tool-registered event handler sent tool id");
-
-  ok(gDevTools.getToolDefinitions().has(toolId), "tool added to map");
-
-  // test that it appeared in the UI
-  let doc = toolbox.frame.contentDocument;
-  let tab = doc.getElementById("toolbox-tab-" + toolId);
-  ok(tab, "new tool's tab exists in toolbox UI");
-
-  let panel = doc.getElementById("toolbox-panel-" + toolId);
-  ok(panel, "new tool's panel exists in toolbox UI");
-
-  for (let win of getAllBrowserWindows()) {
-    let command = win.document.getElementById("Tools:" + toolId);
-    ok(command, "command for new tool added to every browser window");
-  }
-
-  // then unregister it
-  testUnregister();
-}
-
-function getAllBrowserWindows() {
-  let wins = [];
-  let enumerator = Services.wm.getEnumerator("navigator:browser");
-  while (enumerator.hasMoreElements()) {
-    wins.push(enumerator.getNext());
-  }
-  return wins;
-}
-
-function testUnregister()
-{
-  gDevTools.once("tool-unregistered", toolUnregistered);
-
-  gDevTools.unregisterTool("test-tool");
-}
-
-function toolUnregistered(event, toolId)
-{
-  is(toolId, "test-tool", "tool-unregistered event handler sent tool id");
-
-  ok(!gDevTools.getToolDefinitions().has(toolId), "tool removed from map");
-
-  // test that it disappeared from the UI
-  let doc = toolbox.frame.contentDocument;
-  let tab = doc.getElementById("toolbox-tab-" + toolId);
-  ok(!tab, "tool's tab was removed from the toolbox UI");
-
-  let panel = doc.getElementById("toolbox-panel-" + toolId);
-  ok(!panel, "tool's panel was removed from toolbox UI");
-
-  for (let win of getAllBrowserWindows()) {
-    let command = win.document.getElementById("Tools:" + toolId);
-    ok(!command, "command removed from every browser window");
-  }
-
-  cleanup();
-}
-
-function cleanup()
-{
-  toolbox.destroy();
-  toolbox = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_hosts.js b/browser/devtools/framework/test/browser_toolbox_hosts.js
deleted file mode 100644
index 5edbad6a327..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_hosts.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let temp = {}
-Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
-let DevTools = temp.DevTools;
-
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
-let toolbox;
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-    openToolbox(testBottomHost);
-  }, true);
-
-  content.location = "data:text/html,test for opening toolbox in different hosts";
-}
-
-function openToolbox(callback)
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.toggleToolboxForTarget(target);
-
-  toolbox = gDevTools.getToolboxForTarget(target);
-  toolbox.once("ready", callback);
-}
-
-function testBottomHost()
-{
-  checkHostType(Toolbox.HostType.BOTTOM);
-
-  // test UI presence
-  let iframe = document.getElementById("devtools-toolbox-bottom-iframe");
-  ok(iframe, "toolbox bottom iframe exists");
-
-  checkToolboxLoaded(iframe);
-
-  toolbox.once("host-changed", testSidebarHost);
-  toolbox.hostType = Toolbox.HostType.SIDE;
-}
-
-function testSidebarHost()
-{
-  checkHostType(Toolbox.HostType.SIDE);
-
-  // test UI presence
-  let bottom = document.getElementById("devtools-toolbox-bottom-iframe");
-  ok(!bottom, "toolbox bottom iframe doesn't exist");
-
-  let iframe = document.getElementById("devtools-toolbox-side-iframe");
-  ok(iframe, "toolbox side iframe exists");
-
-  checkToolboxLoaded(iframe);
-
-  toolbox.once("host-changed", testWindowHost);
-  toolbox.hostType = Toolbox.HostType.WINDOW;
-}
-
-function testWindowHost()
-{
-  checkHostType(Toolbox.HostType.WINDOW);
-
-  let sidebar = document.getElementById("devtools-toolbox-side-iframe");
-  ok(!sidebar, "toolbox sidebar iframe doesn't exist");
-
-  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
-  ok(win, "toolbox separate window exists");
-
-  let iframe = win.document.getElementById("toolbox-iframe");
-  checkToolboxLoaded(iframe);
-
-  testToolSelect();
-}
-
-function testToolSelect()
-{
-  // make sure we can load a tool after switching hosts
-  toolbox.once("inspector-ready", testDestroy);
-  toolbox.selectTool("inspector");
-}
-
-function testDestroy()
-{
-  toolbox.once("destroyed", function() {
-    openToolbox(testRememberHost);
-  });
-
-  toolbox.destroy();
-}
-
-function testRememberHost()
-{
-  // last host was the window - make sure it's the same when re-opening
-  is(toolbox.hostType, Toolbox.HostType.WINDOW, "host remembered");
-
-  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
-  ok(win, "toolbox separate window exists");
-
-  cleanup();
-}
-
-function checkHostType(hostType)
-{
-  is(toolbox.hostType, hostType, "host type is " + hostType);
-
-  let pref = Services.prefs.getCharPref("devtools.toolbox.host");
-  is(pref, hostType, "host pref is " + hostType);
-}
-
-function checkToolboxLoaded(iframe)
-{
-  let tabs = iframe.contentDocument.getElementById("toolbox-tabs");
-  ok(tabs, "toolbox UI has been loaded into iframe");
-}
-
-function cleanup()
-{
-  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
-
-  toolbox.destroy();
-  DevTools = Toolbox = toolbox = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_ready.js b/browser/devtools/framework/test/browser_toolbox_ready.js
deleted file mode 100644
index cbf6d89efe2..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_ready.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-let toolbox;
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-    openToolbox();
-  }, true);
-
-  content.location = "data:text/html,test for dynamically registering and unregistering tools";
-}
-
-function openToolbox()
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.toggleToolboxForTarget(target);
-
-  toolbox = gDevTools.getToolboxForTarget(target);
-
-  ok(!toolbox.isReady, "toolbox isReady isn't set yet");
-
-  try {
-    toolbox.selectTool("webconsole");
-    ok(false, "Should throw when selectTool() called before toolbox is ready");
-  }
-  catch(error) {
-    is(error.message, "Can't select tool, wait for toolbox 'ready' event")
-  }
-
-  toolbox.once("ready", testReady);
-}
-
-function testReady()
-{
-  ok(toolbox.isReady, "toolbox isReady is set");
-  cleanup();
-}
-
-function cleanup()
-{
-  toolbox.destroy();
-  toolbox = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_select_event.js b/browser/devtools/framework/test/browser_toolbox_select_event.js
deleted file mode 100644
index 191bd80896f..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_select_event.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let toolbox;
-
-function test() {
-  addTab("about:blank", function() {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    toolbox = gDevTools.openToolbox(target, "bottom", "webconsole");
-    toolbox.once("ready", testSelect);
-  });
-}
-
-let called = {
-  inspector: false,
-  webconsole: false,
-  styleeditor: false,
-  //jsdebugger: false,
-}
-
-function testSelect() {
-  info("Toolbox fired a `ready` event");
-
-  toolbox.on("select", selectCB);
-
-  toolbox.selectTool("inspector");
-  toolbox.selectTool("webconsole");
-  toolbox.selectTool("styleeditor");
-  //toolbox.selectTool("jsdebugger");
-}
-
-function selectCB(event, id) {
-  called[id] = true;
-  info("toolbox-select event from " + id);
-
-  for (let tool in called) {
-    if (!called[tool]) {
-      return;
-    }
-  }
-
-  ok(true, "All the tools fired a 'select event'");
-  toolbox.off("select", selectCB);
-
-  reselect();
-}
-
-function reselect() {
-  for (let tool in called) {
-    called[tool] = false;
-  }
-
-  toolbox.once("inspector-selected", function() {
-    tidyUpIfAllCalled("inspector");
-  });
-
-  toolbox.once("webconsole-selected", function() {
-    tidyUpIfAllCalled("webconsole");
-  });
-
-  /*
-  toolbox.once("jsdebugger-selected", function() {
-    tidyUpIfAllCalled("jsdebugger");
-  });
-  */
-
-  toolbox.once("styleeditor-selected", function() {
-    tidyUpIfAllCalled("styleeditor");
-  });
-
-  toolbox.selectTool("inspector");
-  toolbox.selectTool("webconsole");
-  toolbox.selectTool("styleeditor");
-  //toolbox.selectTool("jsdebugger");
-}
-
-function tidyUpIfAllCalled(id) {
-  called[id] = true;
-  info("select event from " + id);
-
-  for (let tool in called) {
-    if (!called[tool]) {
-      return;
-    }
-  }
-
-  ok(true, "All the tools fired a {id}-selected event");
-  tidyUp();
-}
-
-function tidyUp() {
-  toolbox.destroy();
-  gBrowser.removeCurrentTab();
-
-  toolbox = null;
-  finish();
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_sidebar.js b/browser/devtools/framework/test/browser_toolbox_sidebar.js
deleted file mode 100644
index b7c17b04f1c..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_sidebar.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-  const Cu = Components.utils;
-  let tempScope = {};
-  Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-  Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-  Cu.import("resource:///modules/devtools/Sidebar.jsm", tempScope);
-  let {TargetFactory: TargetFactory, gDevTools: gDevTools, ToolSidebar: ToolSidebar} = tempScope;
-
-  const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
-                  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
-                  "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
-                  "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
-                  "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
-                  "</hbox>" +
-                  "</window>";
-
-  const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
-  const tab2URL = "data:text/html;charset=utf8,<title>2</title><p>2</p>";
-  const tab3URL = "data:text/html;charset=utf8,<title>3</title><p>3</p>";
-
-  let panelDoc;
-
-  let registeredTabs = {};
-  let readyTabs = {};
-
-  let toolDefinition = {
-    id: "fakeTool4242",
-    killswitch: "devtools.fakeTool4242.enabled",
-    url: toolURL,
-    label: "FAKE TOOL!!!",
-    isTargetSupported: function() true,
-    build: function(iframeWindow, toolbox) {
-      let panel = {
-        target: toolbox.target,
-        toolbox: toolbox,
-        isReady: true,
-        destroy: function(){},
-        panelDoc: iframeWindow.document,
-      }
-      return panel;
-    },
-  };
-
-  gDevTools.registerTool(toolDefinition);
-
-  addTab("about:blank", function(aBrowser, aTab) {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolbox(target, "bottom", "fakeTool4242");
-    toolbox.once("fakeTool4242-ready", function(event, panel) {
-      ok(true, "Tool open");
-
-      let tabbox = panel.panelDoc.getElementById("sidebar");
-      panel.sidebar = new ToolSidebar(tabbox, panel, true);
-
-      panel.sidebar.on("new-tab-registered", function(event, id) {
-        registeredTabs[id] = true;
-      });
-
-      panel.sidebar.once("tab1-ready", function(event) {
-        readyTabs.tab1 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
-      });
-
-      panel.sidebar.once("tab2-ready", function(event) {
-        readyTabs.tab2 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
-      });
-
-      panel.sidebar.once("tab3-ready", function(event) {
-        readyTabs.tab3 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
-      });
-
-      panel.sidebar.addTab("tab1", tab1URL, true);
-      panel.sidebar.addTab("tab2", tab2URL);
-      panel.sidebar.addTab("tab3", tab3URL);
-
-      panel.sidebar.show();
-    });
-  });
-
-  function allTabsReady(panel) {
-    ok(registeredTabs.tab1, "tab1 registered");
-    ok(registeredTabs.tab2, "tab2 registered");
-    ok(registeredTabs.tab3, "tab3 registered");
-    ok(readyTabs.tab1, "tab1 ready");
-    ok(readyTabs.tab2, "tab2 ready");
-    ok(readyTabs.tab3, "tab3 ready");
-
-    let tabs = panel.sidebar._tabbox.querySelectorAll("tab");
-    let panels = panel.sidebar._tabbox.querySelectorAll("tabpanel");
-    let label = 1;
-    for (let tab of tabs) {
-      is(tab.getAttribute("label"), label++, "Tab has the right title");
-    }
-    is(label, 4, "Found the right amount of tabs.");
-    is(panel.sidebar._tabbox.selectedPanel, panels[0], "First tab is selected");
-    ok(panel.sidebar.getCurrentTabID(), "tab1", "getCurrentTabID() is correct");
-
-    panel.sidebar.once("tab1-unselected", function() {
-      ok(true, "received 'unselected' event");
-      panel.sidebar.once("tab2-selected", function() {
-        ok(true, "received 'selected' event");
-        panel.sidebar.hide();
-        is(panel.sidebar._tabbox.getAttribute("hidden"), "true", "Sidebar hidden");
-        is(panel.sidebar.getWindowForTab("tab1").location.href, tab1URL, "Window is accessible");
-        finishUp(panel);
-      });
-    });
-
-    panel.sidebar.select("tab2");
-  }
-
-  function finishUp(panel) {
-    panel.sidebar.destroy();
-    gDevTools.unregisterTool(toolDefinition.id);
-
-    executeSoon(function() {
-      gBrowser.removeCurrentTab();
-      finish();
-    });
-  }
-}
diff --git a/browser/devtools/framework/test/browser_toolbox_tool_ready.js b/browser/devtools/framework/test/browser_toolbox_tool_ready.js
deleted file mode 100644
index 98a537f03ca..00000000000
--- a/browser/devtools/framework/test/browser_toolbox_tool_ready.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let temp = [];
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
-function test() {
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
-    openAllTools();
-  }, true);
-
-  function openAllTools() {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-    let tools = gDevTools.getToolDefinitions();
-    let expectedCallbacksCount = tools.size;
-
-    let firstTool = null;
-    // we transform the map to a [id, eventHasBeenFiredYet] map
-    for (let [id] of tools) {
-      if (!firstTool)
-        firstTool = id;
-      tools.set(id, false);
-    }
-
-    let toolbox = gDevTools.openToolbox(target, undefined, firstTool);
-
-    // We add the event listeners
-    for (let [toolId] of tools) {
-      let id = toolId;
-      info("Registering listener for " + id);
-      tools.set(id, false);
-      toolbox.on(id + "-ready", function(event, panel) {
-        expectedCallbacksCount--;
-        info("Got event "  + event);
-        is(toolbox.getToolPanels().get(id), panel, "Got the right tool panel for " + id);
-        tools.set(id, true);
-        if (expectedCallbacksCount == 0) {
-          // "executeSoon" because we want to let a chance
-          // to falsy code to fire unexpected ready events.
-          executeSoon(theEnd);
-        }
-        if (expectedCallbacksCount < 0) {
-          ok(false, "we are receiving too many events");
-        }
-      });
-    }
-
-    toolbox.once("ready", function() {
-      // We open all the 
-      for (let [id] of tools) {
-        if (id != firstTool) {
-          toolbox.selectTool(id);
-        }
-      }
-    });
-
-    function theEnd() {
-      for (let [id, called] of tools) {
-        ok(called, "Tool " + id + " has fired its ready event");
-      }
-      toolbox.destroy();
-      gBrowser.removeCurrentTab();
-      finish();
-    }
-  }
-}
diff --git a/browser/devtools/framework/test/head.js b/browser/devtools/framework/test/head.js
deleted file mode 100644
index 796a7946c2d..00000000000
--- a/browser/devtools/framework/test/head.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* 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/. */
-
-let tempScope = {};
-Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-Components.utils.import("resource:///modules/devtools/Console.jsm", tempScope);
-let console = tempScope.console;
-
-/**
- * Open a new tab at a URL and call a callback on load
- */
-function addTab(aURL, aCallback)
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  content.location = aURL;
-
-  let tab = gBrowser.selectedTab;
-  let browser = gBrowser.getBrowserForTab(tab);
-
-  function onTabLoad() {
-    browser.removeEventListener("load", onTabLoad, true);
-    aCallback(browser, tab, browser.contentDocument);
-  }
-
-  browser.addEventListener("load", onTabLoad, true);
-}
-
-registerCleanupFunction(function tearDown() {
-  while (gBrowser.tabs.length > 1) {
-    gBrowser.removeCurrentTab();
-  }
-});
diff --git a/browser/devtools/framework/toolbox-window.xul b/browser/devtools/framework/toolbox-window.xul
deleted file mode 100644
index 774747b531d..00000000000
--- a/browser/devtools/framework/toolbox-window.xul
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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 window [
-<!ENTITY % toolboxDTD SYSTEM "chrome://browser/locale/devtools/toolbox.dtd" >
- %toolboxDTD;
-]>
-
-<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        id="devtools-toolbox-window"
-        title="&window.title;"
-        macanimationtype="document"
-        fullscreenbutton="true"
-        windowtype="devtools:toolbox"
-        width="700" height="320"
-        persist="screenX screenY width height sizemode">
-
-  <commandset id="toolbox-commandset">
-    <command id="toolbox-cmd-close" oncommand="window.close();"/>
-  </commandset>
-
-  <keyset id="toolbox-keyset">
-    <key id="toolbox-key-close"
-         key="&closeCmd.key;"
-         command="toolbox-cmd-close"
-         modifiers="accel"/>
-  </keyset>
-
-  <iframe id="toolbox-iframe" flex="1"></iframe>
-</window>
diff --git a/browser/devtools/framework/toolbox.css b/browser/devtools/framework/toolbox.css
deleted file mode 100644
index 57f18006c23..00000000000
--- a/browser/devtools/framework/toolbox.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* 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/. */
-
-.devtools-tab > .radio-check,
-.devtools-tab > .radio-check-box1,
-.devtools-tab > .radio-spacer-box {
-  display: none;
-}
-
diff --git a/browser/devtools/framework/toolbox.xul b/browser/devtools/framework/toolbox.xul
deleted file mode 100644
index 744278c12d3..00000000000
--- a/browser/devtools/framework/toolbox.xul
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/content/devtools/shared/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
-<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
-<?xul-overlay href="chrome://browser/content/source-editor-overlay.xul"?>
-
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <notificationbox id="toolbox-notificationbox" flex="1">
-    <toolbar class="devtools-tabbar">
-      <hbox id="toolbox-controls">
-        <toolbarbutton id="toolbox-close" class="devtools-closebutton"></toolbarbutton>
-        <hbox id="toolbox-dock-buttons"/>
-      </hbox>
-      <radiogroup id="toolbox-tabs" orient="horizontal">
-      </radiogroup>
-      <hbox id="toolbox-buttons" flex="1" pack="end"/>
-    </toolbar>
-    <deck id="toolbox-deck" flex="1">
-    </deck>
-  </notificationbox>
-</window>
diff --git a/browser/devtools/highlighter/CmdInspect.jsm b/browser/devtools/highlighter/CmdInspect.jsm
new file mode 100644
index 00000000000..c352c96cb28
--- /dev/null
+++ b/browser/devtools/highlighter/CmdInspect.jsm
@@ -0,0 +1,29 @@
+/* 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/. */
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+this.EXPORTED_SYMBOLS = [ ];
+
+Cu.import("resource:///modules/devtools/gcli.jsm");
+
+/**
+ * 'inspect' command
+ */
+gcli.addCommand({
+  name: "inspect",
+  description: gcli.lookup("inspectDesc"),
+  manual: gcli.lookup("inspectManual"),
+  params: [
+    {
+      name: "selector",
+      type: "node",
+      description: gcli.lookup("inspectNodeDesc"),
+      manual: gcli.lookup("inspectNodeManual")
+    }
+  ],
+  exec: function Command_inspect(args, context) {
+    let document = context.environment.chromeDocument;
+    document.defaultView.InspectorUI.openInspectorUI(args.selector);
+  }
+});
diff --git a/browser/devtools/inspector/Makefile.in b/browser/devtools/highlighter/Makefile.in
similarity index 68%
rename from browser/devtools/inspector/Makefile.in
rename to browser/devtools/highlighter/Makefile.in
index 02dcc9f605a..8187267f5b7 100644
--- a/browser/devtools/inspector/Makefile.in
+++ b/browser/devtools/highlighter/Makefile.in
@@ -10,9 +10,17 @@ VPATH		= @srcdir@
 
 include $(DEPTH)/config/autoconf.mk
 
+EXTRA_JS_MODULES = \
+	highlighter.jsm \
+	$(NULL)
+
+EXTRA_PP_JS_MODULES = \
+	inspector.jsm \
+	$(NULL)
+
 TEST_DIRS += test
 
 include $(topsrcdir)/config/rules.mk
 
 libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools/
+	$(NSINSTALL) $(srcdir)/CmdInspect.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/inspector/Highlighter.jsm b/browser/devtools/highlighter/highlighter.jsm
similarity index 64%
rename from browser/devtools/inspector/Highlighter.jsm
rename to browser/devtools/highlighter/highlighter.jsm
index 587b4978e2e..e94d41bfa55 100644
--- a/browser/devtools/inspector/Highlighter.jsm
+++ b/browser/devtools/highlighter/highlighter.jsm
@@ -11,10 +11,21 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 
 this.EXPORTED_SYMBOLS = ["Highlighter"];
 
+const INSPECTOR_INVISIBLE_ELEMENTS = {
+  "head": true,
+  "base": true,
+  "basefont": true,
+  "isindex": true,
+  "link": true,
+  "meta": true,
+  "script": true,
+  "style": true,
+  "title": true,
+};
+
 const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
   // add ":visited" and ":link" after bug 713106 is fixed
 
@@ -28,9 +39,22 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  * API:
  *
  *   // Constructor and destructor.
- *   Highlighter(aTab, aInspector)
+ *   // @param aWindow - browser.xul window.
+ *   Highlighter(aWindow);
  *   void destroy();
  *
+ *   // Highlight a node.
+ *   // @param aNode - node to highlight
+ *   // @param aScroll - scroll to ensure the node is visible
+ *   void highlight(aNode, aScroll);
+ *
+ *   // Get the selected node.
+ *   DOMNode getNode();
+ *
+ *   // Lock and unlock the select node.
+ *   void lock();
+ *   void unlock();
+ *
  *   // Show and hide the highlighter
  *   void show();
  *   void hide();
@@ -39,27 +63,44 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  *   // Redraw the highlighter if the visible portion of the node has changed.
  *   void invalidateSize(aScroll);
  *
+ *   // Is a node highlightable.
+ *   boolean isNodeHighlightable(aNode);
+ *
+ *   // Show/hide the outline and the infobar
+ *   void showInfobar();
+ *   void hideInfobar();
+ *   void showOutline();
+ *   void hideOutline();
+ *
+ *   // Add/Remove listeners
+ *   // @param aEvent - event name
+ *   // @param aListener - function callback
+ *   void addListener(aEvent, aListener);
+ *   void removeListener(aEvent, aListener);
+ *
  * Events:
  *
  *   "closed" - Highlighter is closing
+ *   "nodeselected" - A new node has been selected
  *   "highlighting" - Highlighter is highlighting
  *   "locked" - The selected node has been locked
  *   "unlocked" - The selected ndoe has been unlocked
+ *   "pseudoclasstoggled" - A pseudo-class lock has changed on the selected node
  *
  * Structure:
- *  <stack class="highlighter-container">
- *    <box class="highlighter-outline-container">
- *      <box class="highlighter-outline" locked="true/false"/>
+ *  <stack id="highlighter-container">
+ *    <box id="highlighter-outline-container">
+ *      <box id="highlighter-outline" locked="true/false"/>
  *    </box>
- *    <box class="highlighter-controls">
- *      <box class="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
- *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top"/>
- *        <hbox class="highlighter-nodeinfobar">
- *          <toolbarbutton class="highlighter-nodeinfobar-inspectbutton highlighter-nodeinfobar-button"/>
- *          <hbox class="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
- *          <toolbarbutton class="highlighter-nodeinfobar-menu highlighter-nodeinfobar-button">…</toolbarbutton>
+ *    <box id="highlighter-controls">
+ *      <box id="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
+ *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-top"/>
+ *        <hbox id="highlighter-nodeinfobar">
+ *          <toolbarbutton id="highlighter-nodeinfobar-inspectbutton" class="highlighter-nodeinfobar-button"/>
+ *          <hbox id="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
+ *          <toolbarbutton id="highlighter-nodeinfobar-menu" class="highlighter-nodeinfobar-button">…</toolbarbutton>
  *        </hbox>
- *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom"/>
+ *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-bottom"/>
  *      </box>
  *    </box>
  *  </stack>
@@ -70,54 +111,40 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
 /**
  * Constructor.
  *
- * @param aTarget The inspection target.
- * @param aInspector Inspector panel.
- * @param aToolbox The toolbox holding the inspector.
+ * @param object aWindow
  */
-this.Highlighter = function Highlighter(aTarget, aInspector, aToolbox)
+this.Highlighter = function Highlighter(aWindow)
 {
-  this.target = aTarget;
-  this.tab = aTarget.tab;
-  this.toolbox = aToolbox;
-  this.browser = this.tab.linkedBrowser;
-  this.chromeDoc = this.tab.ownerDocument;
-  this.chromeWin = this.chromeDoc.defaultView;
-  this.inspector = aInspector
-
-  new EventEmitter(this);
+  this.chromeWin = aWindow;
+  this.tabbrowser = aWindow.gBrowser;
+  this.chromeDoc = aWindow.document;
+  this.browser = aWindow.gBrowser.selectedBrowser;
+  this.events = {};
 
   this._init();
 }
 
 Highlighter.prototype = {
-  get selection() {
-    return this.inspector.selection;
-  },
-
   _init: function Highlighter__init()
   {
-    this.unlock = this.unlock.bind(this);
-    this.updateInfobar = this.updateInfobar.bind(this);
-    this.highlight = this.highlight.bind(this);
-
     let stack = this.browser.parentNode;
     this.win = this.browser.contentWindow;
     this._highlighting = false;
 
     this.highlighterContainer = this.chromeDoc.createElement("stack");
-    this.highlighterContainer.className = "highlighter-container";
+    this.highlighterContainer.id = "highlighter-container";
 
     this.outline = this.chromeDoc.createElement("box");
-    this.outline.className = "highlighter-outline";
+    this.outline.id = "highlighter-outline";
 
     let outlineContainer = this.chromeDoc.createElement("box");
     outlineContainer.appendChild(this.outline);
-    outlineContainer.className = "highlighter-outline-container";
+    outlineContainer.id = "highlighter-outline-container";
 
     // The controlsBox will host the different interactive
     // elements of the highlighter (buttons, toolbars, ...).
     let controlsBox = this.chromeDoc.createElement("box");
-    controlsBox.className = "highlighter-controls";
+    controlsBox.id = "highlighter-controls";
     this.highlighterContainer.appendChild(outlineContainer);
     this.highlighterContainer.appendChild(controlsBox);
 
@@ -131,23 +158,8 @@ Highlighter.prototype = {
 
     this.unlock();
 
-    this.selection.on("new-node", this.highlight);
-    this.selection.on("new-node", this.updateInfobar);
-    this.selection.on("detached", this.highlight);
-    this.selection.on("pseudoclass", this.updateInfobar);
-    this.selection.on("attribute-changed", this.updateInfobar);
-
-    this.onToolSelected = function(event, id) {
-      if (id != "inspector") {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }.bind(this);
-    this.toolbox.on("select", this.onToolSelected);
-
     this.hidden = true;
-    this.highlight();
+    this.show();
   },
 
   /**
@@ -155,18 +167,6 @@ Highlighter.prototype = {
    */
   destroy: function Highlighter_destroy()
   {
-    this.inspectButton.removeEventListener("command", this.unlock);
-    this.inspectButton = null;
-
-    this.toolbox.off("select", this.onToolSelected);
-    this.toolbox = null;
-
-    this.selection.off("new-node", this.highlight);
-    this.selection.off("new-node", this.updateInfobar);
-    this.selection.off("detached", this.highlight);
-    this.selection.off("pseudoclass", this.updateInfobar);
-    this.selection.off("attribute-changed", this.updateInfobar);
-
     this.detachMouseListeners();
     this.detachPageListeners();
 
@@ -177,6 +177,7 @@ Highlighter.prototype = {
     this._highlightRect = null;
     this._highlighting = false;
     this.outline = null;
+    this.node = null;
     this.nodeInfo = null;
     this.highlighterContainer.parentNode.removeChild(this.highlighterContainer);
     this.highlighterContainer = null;
@@ -186,59 +187,92 @@ Highlighter.prototype = {
     this.chromeWin = null;
     this.tabbrowser = null;
 
-    this.emit("closed");
+    this.emitEvent("closed");
+    this.removeAllListeners();
   },
 
   /**
    * Show the outline, and select a node.
+   * If no node is specified, the previous selected node is highlighted if any.
+   * If no node was selected, the root element is selected.
+   *
+   * @param aNode [optional] - The node to be selected.
+   * @param aScroll [optional] boolean
+   *        Should we scroll to ensure that the selected node is visible.
    */
-  highlight: function Highlighter_highlight()
+  highlight: function Highlighter_highlight(aNode, aScroll)
   {
-    if (this.selection.reason != "highlighter") {
-      this.lock();
-    }
-
-    let canHighlightNode = this.selection.isNode() &&
-                          this.selection.isConnected() &&
-                          this.selection.isElementNode();
-
-    if (canHighlightNode) {
+    if (this.hidden)
       this.show();
-      this.updateInfobar();
-      this.invalidateSize();
-      if (!this._highlighting &&
-          this.selection.reason != "highlighter") {
-        LayoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
-      }
+
+    let oldNode = this.node;
+
+    if (!aNode) {
+      if (!this.node)
+        this.node = this.win.document.documentElement;
     } else {
-      this.hide();
+      this.node = aNode;
     }
+
+    if (oldNode !== this.node) {
+      this.updateInfobar();
+    }
+
+    this.invalidateSize(!!aScroll);
+
+    if (oldNode !== this.node) {
+      this.emitEvent("nodeselected");
+    }
+  },
+
+  /**
+   * Notify that a pseudo-class lock was toggled on the highlighted element
+   *
+   * @param aPseudo - The pseudo-class to toggle, e.g. ":hover".
+   */
+  pseudoClassLockToggled: function Highlighter_pseudoClassLockToggled(aPseudo)
+  {
+    this.emitEvent("pseudoclasstoggled", [aPseudo]);
+    this.updateInfobar();
+    this.moveInfobar();
   },
 
   /**
    * Update the highlighter size and position.
    */
-  invalidateSize: function Highlighter_invalidateSize()
+  invalidateSize: function Highlighter_invalidateSize(aScroll)
   {
-    let canHiglightNode = this.selection.isNode() &&
-                          this.selection.isConnected() &&
-                          this.selection.isElementNode();
+    let rect = null;
 
-    if (!canHiglightNode)
-      return;
+    if (this.node && this.isNodeHighlightable(this.node)) {
+
+      if (aScroll &&
+          this.node.scrollIntoView) { // XUL elements don't have such method
+        this.node.scrollIntoView();
+      }
+      let clientRect = this.node.getBoundingClientRect();
+      rect = LayoutHelpers.getDirtyRect(this.node);
+    }
 
-    let clientRect = this.selection.node.getBoundingClientRect();
-    let rect = LayoutHelpers.getDirtyRect(this.selection.node);
     this.highlightRectangle(rect);
 
     this.moveInfobar();
 
     if (this._highlighting) {
       this.showOutline();
-      this.emit("highlighting");
+      this.emitEvent("highlighting");
     }
   },
 
+  /**
+   * Returns the selected node.
+   *
+   * @returns node
+   */
+  getNode: function() {
+    return this.node;
+  },
+
   /**
    * Show the highlighter if it has been hidden.
    */
@@ -281,7 +315,7 @@ Highlighter.prototype = {
     this.nodeInfo.container.setAttribute("locked", "true");
     this.detachMouseListeners();
     this.locked = true;
-    this.emit("locked");
+    this.emitEvent("locked");
   },
 
   /**
@@ -294,12 +328,28 @@ Highlighter.prototype = {
     this.nodeInfo.container.removeAttribute("locked");
     this.attachMouseListeners();
     this.locked = false;
-    this.chromeWin.focus();
-    if (this.selection.isElementNode() &&
-        this.selection.isConnected()) {
-      this.showOutline();
+    this.showOutline();
+    this.emitEvent("unlocked");
+  },
+
+  /**
+   * Is the specified node highlightable?
+   *
+   * @param nsIDOMNode aNode
+   *        the DOM element in question
+   * @returns boolean
+   *          True if the node is highlightable or false otherwise.
+   */
+  isNodeHighlightable: function Highlighter_isNodeHighlightable(aNode)
+  {
+    if (!LayoutHelpers.isNodeConnected(aNode)) {
+      return false;
     }
-    this.emit("unlocked");
+    if (aNode.nodeType != aNode.ELEMENT_NODE) {
+      return false;
+    }
+    let nodeName = aNode.nodeName.toLowerCase();
+    return !INSPECTOR_INVISIBLE_ELEMENTS[nodeName];
   },
 
   /**
@@ -337,19 +387,19 @@ Highlighter.prototype = {
   /**
    * Build the node Infobar.
    *
-   * <box class="highlighter-nodeinfobar-container">
-   *   <box class="Highlighter-nodeinfobar-arrow-top"/>
-   *   <hbox class="highlighter-nodeinfobar">
-   *     <toolbarbutton class="highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"/>
-   *     <hbox class="highlighter-nodeinfobar-text">
-   *       <xhtml:span class="highlighter-nodeinfobar-tagname"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-id"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-classes"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-pseudo-classes"/>
+   * <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 highlighter-nodeinfobar-menu"/>
+   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-menu"/>
    *   </hbox>
-   *   <box class="Highlighter-nodeinfobar-arrow-bottom"/>
+   *   <box id="Highlighter-nodeinfobar-arrow-bottom"/>
    * </box>
    *
    * @param nsIDOMElement aParent
@@ -358,71 +408,90 @@ Highlighter.prototype = {
   buildInfobar: function Highlighter_buildInfobar(aParent)
   {
     let container = this.chromeDoc.createElement("box");
-    container.className = "highlighter-nodeinfobar-container";
+    container.id = "highlighter-nodeinfobar-container";
     container.setAttribute("position", "top");
     container.setAttribute("disabled", "true");
 
     let nodeInfobar = this.chromeDoc.createElement("hbox");
-    nodeInfobar.className = "highlighter-nodeinfobar";
+    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 highlighter-nodeinfobar-arrow-top";
+    arrowBoxTop.className = "highlighter-nodeinfobar-arrow";
+    arrowBoxTop.id = "highlighter-nodeinfobar-arrow-top";
 
     let arrowBoxBottom = this.chromeDoc.createElement("box");
-    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom";
+    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
+    arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
 
     let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    tagNameLabel.className = "highlighter-nodeinfobar-tagname";
+    tagNameLabel.id = "highlighter-nodeinfobar-tagname";
 
     let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    idLabel.className = "highlighter-nodeinfobar-id";
+    idLabel.id = "highlighter-nodeinfobar-id";
 
     let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    classesBox.className = "highlighter-nodeinfobar-classes";
+    classesBox.id = "highlighter-nodeinfobar-classes";
 
     let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    pseudoClassesBox.className = "highlighter-nodeinfobar-pseudo-classes";
+    pseudoClassesBox.id = "highlighter-nodeinfobar-pseudo-classes";
 
     // Add some content to force a better boundingClientRect down below.
     pseudoClassesBox.textContent = "&nbsp;";
 
     // Create buttons
 
-    this.inspectButton = this.chromeDoc.createElement("toolbarbutton");
-    this.inspectButton.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"
-    let toolbarInspectButton = this.inspector.panelDoc.getElementById("inspector-inspect-toolbutton");
-    this.inspectButton.setAttribute("tooltiptext", toolbarInspectButton.getAttribute("tooltiptext"));
-    this.inspectButton.addEventListener("command", this.unlock);
+    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.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-menu"
+    nodemenu.id = "highlighter-nodeinfobar-menu";
+    nodemenu.className = "highlighter-nodeinfobar-button"
     nodemenu.setAttribute("tooltiptext",
                           this.strings.GetStringFromName("nodeMenu.tooltiptext"));
 
-    nodemenu.onclick = function() {
-      this.inspector.showNodeMenu(nodemenu, "after_start");
-    }.bind(this);
+    let menu = this.chromeDoc.getElementById("inspector-node-popup");
+    menu = menu.cloneNode(true);
+    menu.id = "highlighter-node-menu";
 
-    // <hbox class="highlighter-nodeinfobar-text"/>
+    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);
+
+    // <hbox id="highlighter-nodeinfobar-text"/>
     let texthbox = this.chromeDoc.createElement("hbox");
-    texthbox.className = "highlighter-nodeinfobar-text";
+    texthbox.id = "highlighter-nodeinfobar-text";
     texthbox.setAttribute("align", "center");
     texthbox.setAttribute("flex", "1");
 
-    texthbox.addEventListener("mousedown", function(aEvent) {
-      // On click, show the node:
-      if (this.selection.isElementNode()) {
-        LayoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
-      }
-    }.bind(this), true);
-
     texthbox.appendChild(tagNameLabel);
     texthbox.appendChild(idLabel);
     texthbox.appendChild(classesBox);
     texthbox.appendChild(pseudoClassesBox);
 
-    nodeInfobar.appendChild(this.inspectButton);
+    nodeInfobar.appendChild(inspect);
     nodeInfobar.appendChild(texthbox);
     nodeInfobar.appendChild(nodemenu);
 
@@ -444,6 +513,30 @@ Highlighter.prototype = {
     };
   },
 
+  /**
+   * Create the menuitems for toggling the selection's pseudo-class state
+   *
+   * @returns DocumentFragment. The menuitems for toggling pseudo-classes.
+   */
+  buildPseudoClassMenu: function IUI_buildPseudoClassesMenu()
+  {
+    let fragment = this.chromeDoc.createDocumentFragment();
+    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
+      let pseudo = PSEUDO_CLASSES[i];
+      let item = this.chromeDoc.createElement("menuitem");
+      item.id = "highlighter-pseudo-class-menuitem-" + pseudo;
+      item.setAttribute("type", "checkbox");
+      item.setAttribute("label", pseudo);
+      item.className = "highlighter-pseudo-class-menuitem";
+      item.setAttribute("checked", DOMUtils.hasPseudoClassLock(this.node,
+                        pseudo));
+      item.addEventListener("command",
+                            this.pseudoClassLockToggled.bind(this, pseudo), false);
+      fragment.appendChild(item);
+    }
+    return fragment;
+  },
+
   /**
    * Highlight a rectangular region.
    *
@@ -506,31 +599,21 @@ Highlighter.prototype = {
    */
   updateInfobar: function Highlighter_updateInfobar()
   {
-    if (!this.selection.isElementNode()) {
-      this.nodeInfo.tagNameLabel.textContent = "";
-      this.nodeInfo.idLabel.textContent = "";
-      this.nodeInfo.classesBox.textContent = "";
-      this.nodeInfo.pseudoClassesBox.textContent = "";
-      return;
-    }
-
-    let node = this.selection.node;
-
     // Tag name
-    this.nodeInfo.tagNameLabel.textContent = node.tagName;
+    this.nodeInfo.tagNameLabel.textContent = this.node.tagName;
 
     // ID
-    this.nodeInfo.idLabel.textContent = node.id ? "#" + node.id : "";
+    this.nodeInfo.idLabel.textContent = this.node.id ? "#" + this.node.id : "";
 
     // Classes
     let classes = this.nodeInfo.classesBox;
 
-    classes.textContent = node.classList.length ?
-                            "." + Array.join(node.classList, ".") : "";
+    classes.textContent = this.node.classList.length ?
+                            "." + Array.join(this.node.classList, ".") : "";
 
     // Pseudo-classes
     let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(node, pseudo);
+      return DOMUtils.hasPseudoClassLock(this.node, pseudo);
     }, this);
 
     let pseudoBox = this.nodeInfo.pseudoClassesBox;
@@ -614,6 +697,46 @@ Highlighter.prototype = {
       .fullZoom;
   },
 
+  /////////////////////////////////////////////////////////////////////////
+  //// Event Emitter Mechanism
+
+  addListener: function Highlighter_addListener(aEvent, aListener)
+  {
+    if (!(aEvent in this.events))
+      this.events[aEvent] = [];
+    this.events[aEvent].push(aListener);
+  },
+
+  removeListener: function Highlighter_removeListener(aEvent, aListener)
+  {
+    if (!(aEvent in this.events))
+      return;
+    let idx = this.events[aEvent].indexOf(aListener);
+    if (idx > -1)
+      this.events[aEvent].splice(idx, 1);
+  },
+
+  emitEvent: function Highlighter_emitEvent(aEvent, aArgv)
+  {
+    if (!(aEvent in this.events))
+      return;
+
+    let listeners = this.events[aEvent];
+    let highlighter = this;
+    listeners.forEach(function(aListener) {
+      try {
+        aListener.apply(highlighter, aArgv);
+      } catch(e) {}
+    });
+  },
+
+  removeAllListeners: function Highlighter_removeAllIsteners()
+  {
+    for (let event in this.events) {
+      delete this.events[event];
+    }
+  },
+
   /////////////////////////////////////////////////////////////////////////
   //// Event Handling
 
@@ -742,8 +865,6 @@ Highlighter.prototype = {
     if (aEvent.button == 0) {
       let win = aEvent.target.ownerDocument.defaultView;
       this.lock();
-      let node = this.selection.node;
-      this.selection.setNode(node, "highlighter-lock");
       win.focus();
       aEvent.preventDefault();
       aEvent.stopPropagation();
@@ -765,8 +886,8 @@ Highlighter.prototype = {
     if (doc && doc != this.chromeDoc) {
       let element = LayoutHelpers.getElementFromPoint(aEvent.target.ownerDocument,
         aEvent.clientX, aEvent.clientY);
-      if (element && element != this.selection.node) {
-        this.selection.setNode(element, "highlighter");
+      if (element && element != this.node) {
+        this.highlight(element);
       }
     }
   },
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
new file mode 100644
index 00000000000..2ffbaf77cec
--- /dev/null
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -0,0 +1,2414 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+const Cc = Components.classes;
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+const Cr = Components.results;
+
+this.EXPORTED_SYMBOLS = ["InspectorUI"];
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/MarkupView.jsm");
+Cu.import("resource:///modules/highlighter.jsm");
+Cu.import("resource:///modules/devtools/LayoutView.jsm");
+Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
+
+// Inspector notifications dispatched through the nsIObserverService.
+const INSPECTOR_NOTIFICATIONS = {
+  // Fires once the Inspector completes the initialization and opens up on
+  // screen.
+  OPENED: "inspector-opened",
+
+  // Fires once the Inspector is closed.
+  CLOSED: "inspector-closed",
+
+  // Fires once the Inspector is destroyed. Not fired on tab switch.
+  DESTROYED: "inspector-destroyed",
+
+  // Fires when the Inspector is reopened after tab-switch.
+  STATE_RESTORED: "inspector-state-restored",
+
+  // Fires when the Tree Panel is opened and initialized.
+  TREEPANELREADY: "inspector-treepanel-ready",
+
+  // Event notifications for the attribute-value editor
+  EDITOR_OPENED: "inspector-editor-opened",
+  EDITOR_CLOSED: "inspector-editor-closed",
+  EDITOR_SAVED: "inspector-editor-saved",
+};
+
+const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
+
+// Timer, in milliseconds, between change events fired by
+// things like resize events.
+const LAYOUT_CHANGE_TIMER = 250;
+
+/**
+ * Represents an open instance of the Inspector for a tab.
+ * This is the object handed out to sidebars and other API consumers.
+ *
+ * Right now it's a thin layer over InspectorUI, but we will
+ * start moving per-tab state into this object soon, eventually
+ * replacing the per-winID InspectorStore objects.
+ *
+ * The lifetime of this object is also not yet correct.  This object
+ * is currently destroyed when the inspector is torn down, either by user
+ * closing the inspector or by user switching the tab.  This should
+ * only be destroyed when user closes the inspector.
+ */
+function Inspector(aIUI)
+{
+  this._IUI = aIUI;
+  this._winID = aIUI.winID;
+  this._browser = aIUI.browser;
+  this._eventEmitter = new EventEmitter();
+
+  this._browser.addEventListener("resize", this, true);
+
+  this._markupButton = this._IUI.chromeDoc.getElementById("inspector-treepanel-toolbutton");
+
+  if (Services.prefs.getBoolPref("devtools.inspector.htmlPanelOpen")) {
+    this.openMarkup();
+  } else {
+    this.closeMarkup();
+  }
+
+}
+
+Inspector.prototype = {
+  /**
+   * True if the highlighter is locked on a node.
+   */
+  get locked() {
+    return !this._IUI.inspecting;
+  },
+
+  /**
+   * The currently selected node in the highlighter.
+   */
+  get selection() {
+    return this._IUI.selection;
+  },
+
+  /**
+   * Indicate that a tool has modified the state of the page.  Used to
+   * decide whether to show the "are you sure you want to navigate"
+   * notification.
+   */
+  markDirty: function Inspector_markDirty()
+  {
+    this._IUI.isDirty = true;
+  },
+
+  /**
+   * The chrome window the inspector lives in.
+   */
+  get chromeWindow() {
+    return this._IUI.chromeWin;
+  },
+
+  /**
+   * Notify the inspector that the current selection has changed.
+   *
+   * @param string aContext
+   *        An string that will be passed to the change event.  Allows
+   *        a tool to recognize when it sent a change notification itself
+   *        to avoid unnecessary refresh.
+   */
+  change: function Inspector_change(aContext)
+  {
+    this._cancelLayoutChange();
+    this._IUI.nodeChanged(aContext);
+  },
+
+  /**
+   * Returns true if a given sidebar panel is currently visible.
+   * @param string aPanelName
+   *        The panel name as registered with registerSidebar
+   */
+  isPanelVisible: function Inspector_isPanelVisible(aPanelName)
+  {
+    return this._IUI.sidebar.visible &&
+           this._IUI.sidebar.activePanel === aPanelName;
+  },
+
+  /**
+   * Called by the InspectorUI when the inspector is being destroyed.
+   */
+  _destroy: function Inspector__destroy()
+  {
+    this._cancelLayoutChange();
+    this._destroyMarkup();
+    this._browser.removeEventListener("resize", this, true);
+    delete this._IUI;
+    delete this._eventEmitter;
+  },
+
+  /**
+   * Event handler for DOM events.
+   *
+   * @param DOMEvent aEvent
+   */
+  handleEvent: function Inspector_handleEvent(aEvent)
+  {
+    switch(aEvent.type) {
+      case "resize":
+        this._scheduleLayoutChange();
+    }
+  },
+
+  /**
+   * Schedule a low-priority change event for things like paint
+   * and resize.
+   */
+  _scheduleLayoutChange: function Inspector_scheduleLayoutChange()
+  {
+    if (this._timer) {
+      return null;
+    }
+    this._timer = this._IUI.win.setTimeout(function() {
+      this.change("layout");
+    }.bind(this), LAYOUT_CHANGE_TIMER);
+  },
+
+  /**
+   * Cancel a pending low-priority change event if any is
+   * scheduled.
+   */
+  _cancelLayoutChange: function Inspector_cancelLayoutChange()
+  {
+    if (this._timer) {
+      this._IUI.win.clearTimeout(this._timer);
+      delete this._timer;
+    }
+  },
+
+  toggleMarkup: function Inspector_toggleMarkup()
+  {
+    if (this._markupFrame) {
+      this.closeMarkup();
+      Services.prefs.setBoolPref("devtools.inspector.htmlPanelOpen", false);
+    } else {
+      this.openMarkup(true);
+      Services.prefs.setBoolPref("devtools.inspector.htmlPanelOpen", true);
+    }
+  },
+
+  /**
+   * XXX: The sidebar has an object that exists and is manipulated
+   * separately from its actual loading.  So the public api for
+   * the sidebar looks like:
+   *
+   * if (inspector.sidebar.visible) { inspector.sidebar.close() }
+   *
+   * whereas the markup API looks more like
+   *
+   * if (inspector.markupOpen) { inspector.closeMarkup() }
+   *
+   * Maybe we should add an InspectorMarkup object that presents
+   * the public api for the markup panel?
+   */
+  get markupOpen() {
+    return this._markupOpen;
+  },
+
+  openMarkup: function Inspector_openMarkup(aFocus)
+  {
+    this._markupButton.setAttribute("checked", "true");
+    this._markupOpen = true;
+    if (!this._markupFrame) {
+      this._initMarkup(aFocus);
+    }
+  },
+
+  closeMarkup: function Inspector_closeMarkup()
+  {
+    this._markupButton.removeAttribute("checked");
+    this._markupOpen = false;
+    this._destroyMarkup();
+  },
+
+  _initMarkup: function Inspector_initMarkupPane(aFocus)
+  {
+    let doc = this._IUI.chromeDoc;
+
+    this._markupBox = doc.createElement("vbox");
+    try {
+      this._markupBox.height =
+        Services.prefs.getIntPref("devtools.inspector.htmlHeight");
+    } catch(e) {
+      this._markupBox.height = 112;
+    }
+    this._markupBox.minHeight = 64;
+
+    this._markupSplitter = doc.createElement("splitter");
+    this._markupSplitter.className = "devtools-horizontal-splitter";
+
+    let container = doc.getElementById("appcontent");
+    container.appendChild(this._markupSplitter);
+    container.appendChild(this._markupBox);
+
+    // create tool iframe
+    this._markupFrame = doc.createElement("iframe");
+    this._markupFrame.setAttribute("flex", "1");
+    this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
+    this._markupFrame.setAttribute("context", "inspector-node-popup");
+
+    // This is needed to enable tooltips inside the iframe document.
+    this._boundMarkupFrameLoad = function Inspector_initMarkupPanel_onload() {
+      if (aFocus) {
+        this._markupFrame.contentWindow.focus();
+      }
+      this._onMarkupFrameLoad();
+    }.bind(this);
+    this._markupFrame.addEventListener("load", this._boundMarkupFrameLoad, true);
+
+    this._markupSplitter.setAttribute("hidden", true);
+    this._markupBox.setAttribute("hidden", true);
+    this._markupBox.appendChild(this._markupFrame);
+    this._markupFrame.setAttribute("src", "chrome://browser/content/devtools/markup-view.xhtml");
+  },
+
+  _onMarkupFrameLoad: function Inspector__onMarkupFrameLoad()
+  {
+    this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
+    delete this._boundMarkupFrameLoad;
+
+    this._markupSplitter.removeAttribute("hidden");
+    this._markupBox.removeAttribute("hidden");
+
+    this.markup = new MarkupView(this, this._markupFrame);
+    this.emit("markuploaded");
+  },
+
+  _destroyMarkup: function Inspector__destroyMarkup()
+  {
+    if (this._boundMarkupFrameLoad) {
+      this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
+      delete this._boundMarkupFrameLoad;
+    }
+
+    if (this.markup) {
+      this.markup.destroy();
+      delete this.markup;
+    }
+
+    if (this._markupFrame) {
+      delete this._markupFrame;
+    }
+
+    if (this._markupBox) {
+      Services.prefs.setIntPref("devtools.inspector.htmlHeight", this._markupBox.height);
+      this._markupBox.parentNode.removeChild(this._markupBox);
+      delete this._markupBox;
+    }
+
+    if (this._markupSplitter) {
+      this._markupSplitter.parentNode.removeChild(this._markupSplitter);
+      delete this._markupSplitter;
+    }
+  },
+
+  /**
+   * Called by InspectorUI after a tab switch, when the
+   * inspector is no longer the active tab.
+   */
+  _freeze: function Inspector__freeze()
+  {
+    if (this._markupBox) {
+      this._markupSplitter.setAttribute("hidden", true);
+      this._markupBox.setAttribute("hidden", true);
+    }
+    this._cancelLayoutChange();
+    this._browser.removeEventListener("resize", this, true);
+    this._frozen = true;
+  },
+
+  /**
+   * Called by InspectorUI after a tab switch when the
+   * inspector is back to being the active tab.
+   */
+  _thaw: function Inspector__thaw()
+  {
+    if (!this._frozen) {
+      return;
+    }
+
+    if (this._markupOpen && !this._boundMarkupFrameLoad) {
+      this._markupSplitter.removeAttribute("hidden");
+      this._markupBox.removeAttribute("hidden");
+    }
+    this._browser.addEventListener("resize", this, true);
+    delete this._frozen;
+  },
+
+  /// Forward the events related calls to the event emitter.
+
+  /**
+   * Connect a listener to this object.
+   *
+   * @param string aEvent
+   *        The event name to which we're connecting.
+   * @param function aListener
+   *        Called when the event is fired.
+   */
+  on: function Inspector_on(aEvent, aListener)
+  {
+    this._eventEmitter.on(aEvent, aListener);
+  },
+
+  /**
+   * Listen for the next time an event is fired.
+   *
+   * @param string aEvent
+   *        The event name to which we're connecting.
+   * @param function aListener
+   *        Called when the event is fired.  Will be called at most one time.
+   */
+  once: function Inspector_once(aEvent, aListener)
+  {
+    this._eventEmitter.once(aEvent, aListener);
+  },
+
+  /**
+   * Remove a previously-registered event listener.  Works for events
+   * registered with either on or once.
+   *
+   * @param string aEvent
+   *        The event name whose listener we're disconnecting.
+   * @param function aListener
+   *        The listener to remove.
+   */
+  off: function Inspector_removeListener(aEvent, aListener)
+  {
+    this._eventEmitter.off(aEvent, aListener);
+  },
+
+  /**
+   * Emit an event on the inspector.  All arguments to this method will
+   * be sent to listner functions.
+   */
+  emit: function Inspector_emit()
+  {
+    this._eventEmitter.emit.apply(this._eventEmitter, arguments);
+  }
+}
+
+///////////////////////////////////////////////////////////////////////////
+//// InspectorUI
+
+/**
+ * Main controller class for the Inspector.
+ *
+ * @constructor
+ * @param nsIDOMWindow aWindow
+ *        The chrome window for which the Inspector instance is created.
+ */
+this.InspectorUI = function InspectorUI(aWindow)
+{
+  // Let style inspector tools register themselves.
+  let tmp = {};
+  Cu.import("resource:///modules/devtools/StyleInspector.jsm", tmp);
+
+  this.chromeWin = aWindow;
+  this.chromeDoc = aWindow.document;
+  this.tabbrowser = aWindow.gBrowser;
+  this.tools = {};
+  this.toolEvents = {};
+  this.store = new InspectorStore();
+  this.INSPECTOR_NOTIFICATIONS = INSPECTOR_NOTIFICATIONS;
+  this.buildButtonsTooltip();
+}
+
+InspectorUI.prototype = {
+  browser: null,
+  tools: null,
+  toolEvents: null,
+  inspecting: false,
+  ruleViewEnabled: true,
+  isDirty: false,
+  store: null,
+
+  _currentInspector: null,
+  _sidebar: null,
+
+  /**
+   * The Inspector object for the current tab.
+   */
+  get currentInspector() this._currentInspector,
+
+  /**
+   * The InspectorStyleSidebar for the current tab.
+   */
+  get sidebar() this._sidebar,
+
+  /**
+   * Toggle the inspector interface elements on or off.
+   *
+   * @param aEvent
+   *        The event that requested the UI change. Toolbar button or menu.
+   */
+  toggleInspectorUI: function IUI_toggleInspectorUI(aEvent)
+  {
+    if (this.isInspectorOpen) {
+      this.closeInspectorUI();
+    } else {
+      this.openInspectorUI();
+    }
+  },
+
+  /**
+   * Add a tooltip to the Inspect and Markup buttons.
+   * The tooltips include the related keyboard shortcut.
+   */
+  buildButtonsTooltip: function IUI_buildButtonsTooltip()
+  {
+    let keysbundle = Services.strings.createBundle("chrome://global-platform/locale/platformKeys.properties");
+    let separator = keysbundle.GetStringFromName("MODIFIER_SEPARATOR");
+
+    let button, tooltip;
+
+    // Inspect Button - the shortcut string is built from the <key> element
+
+    let key = this.chromeDoc.getElementById("key_inspect");
+
+    if (key) {
+      let modifiersAttr = key.getAttribute("modifiers");
+
+      let combo = [];
+
+      if (modifiersAttr.match("accel"))
+#ifdef XP_MACOSX
+        combo.push(keysbundle.GetStringFromName("VK_META"));
+#else
+        combo.push(keysbundle.GetStringFromName("VK_CONTROL"));
+#endif
+      if (modifiersAttr.match("shift"))
+        combo.push(keysbundle.GetStringFromName("VK_SHIFT"));
+      if (modifiersAttr.match("alt"))
+        combo.push(keysbundle.GetStringFromName("VK_ALT"));
+      if (modifiersAttr.match("ctrl"))
+        combo.push(keysbundle.GetStringFromName("VK_CONTROL"));
+      if (modifiersAttr.match("meta"))
+        combo.push(keysbundle.GetStringFromName("VK_META"));
+
+      combo.push(key.getAttribute("key"));
+
+      tooltip = this.strings.formatStringFromName("inspectButtonWithShortcutKey.tooltip",
+        [combo.join(separator)], 1);
+    } else {
+      tooltip = this.strings.GetStringFromName("inspectButton.tooltip");
+    }
+
+    button = this.chromeDoc.getElementById("inspector-inspect-toolbutton");
+    button.setAttribute("tooltiptext", tooltip);
+
+    // Markup Button - the shortcut string is built from the accesskey attribute
+
+    button = this.chromeDoc.getElementById("inspector-treepanel-toolbutton");
+#ifdef XP_MACOSX
+    // On Mac, no accesskey
+    tooltip = this.strings.GetStringFromName("markupButton.tooltip");
+#else
+    let altString = keysbundle.GetStringFromName("VK_ALT");
+    let accesskey = button.getAttribute("accesskey");
+    let shortcut = altString + separator + accesskey;
+    tooltip = this.strings.formatStringFromName("markupButton.tooltipWithAccesskey",
+      [shortcut], 1);
+#endif
+    button.setAttribute("tooltiptext", tooltip);
+
+  },
+
+  /**
+   * Toggle the status of the inspector, starting or stopping it. Invoked
+   * from the toolbar's Inspect button.
+   */
+  toggleInspection: function IUI_toggleInspection()
+  {
+    if (!this.isInspectorOpen) {
+      this.openInspectorUI();
+      return;
+    }
+
+    if (this.inspecting) {
+      this.stopInspecting();
+    } else {
+      this.startInspecting();
+    }
+  },
+
+  /**
+   * Show or hide the sidebar. Called from the Styling button on the
+   * highlighter toolbar.
+   */
+  toggleSidebar: function IUI_toggleSidebar()
+  {
+    if (!this.sidebar.visible) {
+      this.sidebar.show();
+    } else {
+      this.sidebar.hide();
+    }
+  },
+
+  /**
+   * Toggle the TreePanel.
+   */
+  toggleHTMLPanel: function IUI_toggleHTMLPanel()
+  {
+    this.currentInspector.toggleMarkup();
+  },
+
+  /**
+   * Is the inspector UI open? Simply check if the toolbar is visible or not.
+   *
+   * @returns boolean
+   */
+  get isInspectorOpen()
+  {
+    return !!(this.toolbar && !this.toolbar.hidden && this.highlighter);
+  },
+
+  /**
+   * Return the default selection element for the inspected document.
+   */
+  get defaultSelection()
+  {
+    let doc = this.win.document;
+    return doc.documentElement ? doc.documentElement.lastElementChild : null;
+  },
+
+  /**
+   * Open inspector UI and HTML tree. Add listeners for document scrolling,
+   * resize, tabContainer.TabSelect and others. If a node is provided, then
+   * start inspecting it.
+   *
+   * @param [optional] aNode
+   *        The node to inspect.
+   */
+  openInspectorUI: function IUI_openInspectorUI(aNode)
+  {
+    // InspectorUI is already up and running. Lock a node if asked (via context).
+    if (this.isInspectorOpen) {
+      if (aNode) {
+        this.inspectNode(aNode);
+        this.stopInspecting();
+      }
+      return;
+    }
+
+    // Observer used to inspect the specified element from content after the
+    // inspector UI has been opened (via the content context menu).
+    function inspectObserver(aElement) {
+      Services.obs.removeObserver(boundInspectObserver,
+                                  INSPECTOR_NOTIFICATIONS.OPENED,
+                                  false);
+      this.inspectNode(aElement);
+      this.stopInspecting();
+    };
+
+    var boundInspectObserver = inspectObserver.bind(this, aNode);
+
+    if (aNode) {
+      // Add the observer to inspect the node after initialization finishes.
+      Services.obs.addObserver(boundInspectObserver,
+                               INSPECTOR_NOTIFICATIONS.OPENED,
+                               false);
+    }
+    // Start initialization.
+    this.browser = this.tabbrowser.selectedBrowser;
+    this.win = this.browser.contentWindow;
+    this.winID = this.getWindowID(this.win);
+    this.toolbar = this.chromeDoc.getElementById("inspector-toolbar");
+    this.inspectCommand = this.chromeDoc.getElementById("Inspector:Inspect");
+
+    // Update menus:
+    this.inspectorUICommand = this.chromeDoc.getElementById("Tools:Inspect");
+    this.inspectorUICommand.setAttribute("checked", "true");
+
+    this.chromeWin.Tilt.setup();
+
+    this.toolbar.hidden = false;
+
+    // initialize the HTML Breadcrumbs
+    this.breadcrumbs = new HTMLBreadcrumbs(this);
+
+    this.isDirty = false;
+
+    this.progressListener = new InspectorProgressListener(this);
+
+    this.chromeWin.addEventListener("keypress", this, false);
+
+    // initialize the highlighter
+    this.highlighter = new Highlighter(this.chromeWin);
+
+    this.initializeStore();
+
+    this._sidebar = new InspectorStyleSidebar({
+      document: this.chromeDoc,
+      inspector: this._currentInspector,
+    });
+
+    // Fade out the highlighter when needed
+    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
+    deck.addEventListener("mouseenter", this, true);
+    deck.addEventListener("mouseleave", this, true);
+
+    // Create UI for any sidebars registered with
+    // InspectorUI.registerSidebar()
+    for each (let tool in InspectorUI._registeredSidebars) {
+      this._sidebar.addTool(tool);
+    }
+
+    this.setupNavigationKeys();
+    this.highlighterReady();
+
+    // Focus the first focusable element in the toolbar
+    this.chromeDoc.commandDispatcher.advanceFocusIntoSubtree(this.toolbar);
+
+    // If nothing is focused in the toolbar, it means that the focus manager
+    // is limited to some specific elements and has moved the focus somewhere else.
+    // So in this case, we want to focus the content window.
+    // See: https://developer.mozilla.org/en/XUL_Tutorial/Focus_and_Selection#Platform_Specific_Behaviors
+    if (!this.toolbar.querySelector(":-moz-focusring")) {
+      this.win.focus();
+    }
+
+  },
+
+  /**
+   * Initialize the InspectorStore.
+   */
+  initializeStore: function IUI_initializeStore()
+  {
+    // First time opened, add the TabSelect listener
+    if (this.store.isEmpty()) {
+      this.tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
+    }
+
+    // Has this windowID been inspected before?
+    if (this.store.hasID(this.winID)) {
+      this._currentInspector = this.store.getInspector(this.winID);
+      this._currentInspector._thaw();
+      let selectedNode = this.currentInspector._selectedNode;
+      if (selectedNode) {
+        this.inspectNode(selectedNode);
+      }
+      this.isDirty = this.currentInspector._isDirty;
+    } else {
+      // First time inspecting, set state to no selection + live inspection.
+      let inspector = new Inspector(this);
+      this.store.addInspector(this.winID, inspector);
+      inspector._selectedNode = null;
+      inspector._inspecting = true;
+      inspector._isDirty = this.isDirty;
+
+      inspector._htmlPanelOpen =
+        Services.prefs.getBoolPref("devtools.inspector.htmlPanelOpen");
+
+      inspector._sidebarOpen =
+        Services.prefs.getBoolPref("devtools.inspector.sidebarOpen");
+
+      inspector._activeSidebar =
+        Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+
+      this.win.addEventListener("pagehide", this, true);
+
+      this._currentInspector = inspector;
+    }
+  },
+
+  /**
+   * Browse nodes according to the breadcrumbs layout, only for some specific
+   * elements of the UI.
+   */
+   setupNavigationKeys: function IUI_setupNavigationKeys()
+   {
+     // UI elements that are arrow keys sensitive:
+     // - the Inspector toolbar.
+
+     this.onKeypress = this.onKeypress.bind(this);
+
+     this.toolbar.addEventListener("keypress", this.onKeypress, true);
+   },
+
+  /**
+   * Remove the event listeners for the arrowkeys.
+   */
+   removeNavigationKeys: function IUI_removeNavigationKeys()
+   {
+      this.toolbar.removeEventListener("keypress", this.onKeypress, true);
+   },
+
+  /**
+   * Close inspector UI and associated panels. Unhighlight and stop inspecting.
+   * Remove event listeners for document scrolling, resize,
+   * tabContainer.TabSelect and others.
+   *
+   * @param boolean aKeepInspector
+   *        Tells if you want the inspector associated to the current tab/window to
+   *        be cleared or not. Set this to true to save the inspector, or false
+   *        to destroy it.
+   */
+  closeInspectorUI: function IUI_closeInspectorUI(aKeepInspector)
+  {
+    if (this.closing || !this.win || !this.browser) {
+      return;
+    }
+
+    let winId = new String(this.winID); // retain this to notify observers.
+
+    this.closing = true;
+    this.toolbar.hidden = true;
+
+    this.removeNavigationKeys();
+
+    this.progressListener.destroy();
+    delete this.progressListener;
+
+    if (!aKeepInspector) {
+      this.win.removeEventListener("pagehide", this, true);
+      this.clearPseudoClassLocks();
+    } else {
+      // Update the inspector before closing.
+      if (this.selection) {
+        this.currentInspector._selectedNode = this.selection;
+      }
+      this.currentInspector._inspecting = this.inspecting;
+      this.currentInspector._isDirty = this.isDirty;
+    }
+
+    if (this.store.isEmpty()) {
+      this.tabbrowser.tabContainer.removeEventListener("TabSelect", this, false);
+    }
+
+    this.chromeWin.removeEventListener("keypress", this, false);
+
+    this.stopInspecting();
+
+    // close the sidebar
+    if (this._sidebar) {
+      this._sidebar.destroy();
+      this._sidebar = null;
+    }
+
+    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
+    deck.removeEventListener("mouseenter", this, true);
+    deck.removeEventListener("mouseleave", this, true);
+
+    this.highlighter.destroy();
+    this.highlighter = null;
+
+    if (this.breadcrumbs) {
+      this.breadcrumbs.destroy();
+      this.breadcrumbs = null;
+    }
+
+    if (aKeepInspector) {
+      this._currentInspector._freeze();
+    } else {
+      this.store.deleteInspector(this.winID);
+    }
+    delete this._currentInspector;
+
+    this.inspectorUICommand.setAttribute("checked", "false");
+
+    this.browser = this.win = null; // null out references to browser and window
+    this.winID = null;
+    this.selection = null;
+    this.closing = false;
+    this.isDirty = false;
+
+    delete this.stylePanel;
+    delete this.inspectorUICommand;
+    delete this.inspectCommand;
+    delete this.toolbar;
+
+    Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.CLOSED, null);
+
+    if (!aKeepInspector)
+      Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.DESTROYED, winId);
+  },
+
+  /**
+   * Begin inspecting webpage, attach page event listeners, activate
+   * highlighter event listeners.
+   */
+  startInspecting: function IUI_startInspecting()
+  {
+    this.inspectCommand.setAttribute("checked", "true");
+
+    this.inspecting = true;
+    this.highlighter.unlock();
+    this._notifySelected();
+    this._currentInspector.emit("unlocked");
+  },
+
+  _notifySelected: function IUI__notifySelected(aFrom)
+  {
+    this._currentInspector._cancelLayoutChange();
+    this._currentInspector.emit("select", aFrom);
+  },
+
+  /**
+   * Stop inspecting webpage, detach page listeners, disable highlighter
+   * event listeners.
+   * @param aPreventScroll
+   *        Prevent scroll in the HTML tree?
+   */
+  stopInspecting: function IUI_stopInspecting(aPreventScroll)
+  {
+    if (!this.inspecting) {
+      return;
+    }
+
+    this.inspectCommand.setAttribute("checked", "false");
+
+    this.inspecting = false;
+
+    if (this.closing)
+      return;
+
+    if (this.highlighter.getNode()) {
+      this.select(this.highlighter.getNode(), true, !aPreventScroll);
+    } else {
+      this.select(null, true, true);
+    }
+
+    this.highlighter.lock();
+    this._notifySelected();
+    this._currentInspector.emit("locked");
+  },
+
+  /**
+   * Select an object in the inspector.
+   * @param aNode
+   *        node to inspect
+   * @param forceUpdate
+   *        force an update?
+   * @param aScroll boolean
+   *        scroll the tree panel?
+   * @param aFrom [optional] string
+   *        which part of the UI the selection occured from
+   */
+  select: function IUI_select(aNode, forceUpdate, aScroll, aFrom)
+  {
+    if (!aNode)
+      aNode = this.defaultSelection;
+
+    if (forceUpdate || aNode != this.selection) {
+      if (aFrom != "breadcrumbs") {
+        this.clearPseudoClassLocks();
+      }
+
+      this.selection = aNode;
+      if (!this.inspecting) {
+        this.highlighter.highlight(this.selection);
+      }
+    }
+
+    this.breadcrumbs.update();
+    this.chromeWin.Tilt.update(aNode);
+
+    this._notifySelected(aFrom);
+  },
+
+  /**
+   * Toggle the pseudo-class lock on the currently inspected element. If the
+   * pseudo-class is :hover or :active, that pseudo-class will also be toggled
+   * on every ancestor of the element, mirroring real :hover and :active
+   * behavior.
+   * 
+   * @param aPseudo the pseudo-class lock to toggle, e.g. ":hover"
+   */
+  togglePseudoClassLock: function IUI_togglePseudoClassLock(aPseudo)
+  {
+    if (DOMUtils.hasPseudoClassLock(this.selection, aPseudo)) {
+      this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
+        DOMUtils.removePseudoClassLock(crumb.node, aPseudo);
+      });
+    } else {
+      let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
+      let node = this.selection;
+      do {
+        DOMUtils.addPseudoClassLock(node, aPseudo);
+        node = node.parentNode;
+      } while (hierarchical && node.parentNode)
+    }
+    this.nodeChanged("pseudoclass");
+  },
+
+  /**
+   * Clear all pseudo-class locks applied to elements in the node hierarchy
+   */
+  clearPseudoClassLocks: function IUI_clearPseudoClassLocks()
+  {
+    this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
+      if (LayoutHelpers.isNodeConnected(crumb.node)) {
+        DOMUtils.clearPseudoClassLocks(crumb.node);
+      }
+    });
+  },
+
+  /**
+   * Called when the highlighted node is changed by a tool.
+   *
+   * @param object aUpdater
+   *        The tool that triggered the update (if any), that tool's
+   *        onChanged will not be called.
+   */
+  nodeChanged: function IUI_nodeChanged(aUpdater)
+  {
+    this.highlighter.updateInfobar();
+    this.highlighter.invalidateSize();
+    this.breadcrumbs.updateSelectors();
+    this._currentInspector.emit("change", aUpdater);
+  },
+
+  /////////////////////////////////////////////////////////////////////////
+  //// Event Handling
+
+  highlighterReady: function IUI_highlighterReady()
+  {
+    let self = this;
+
+    this.highlighter.addListener("locked", function() {
+      self.stopInspecting();
+    });
+
+    this.highlighter.addListener("unlocked", function() {
+      self.startInspecting();
+    });
+
+    this.highlighter.addListener("nodeselected", function() {
+      self.select(self.highlighter.getNode(), false, false);
+    });
+
+    this.highlighter.addListener("pseudoclasstoggled", function(aPseudo) {
+      self.togglePseudoClassLock(aPseudo);
+    });
+
+    if (this.currentInspector._inspecting) {
+      this.startInspecting();
+      this.highlighter.unlock();
+    } else {
+      this.highlighter.lock();
+    }
+
+    Services.obs.notifyObservers(null, INSPECTOR_NOTIFICATIONS.STATE_RESTORED, null);
+
+    this.highlighter.highlight();
+
+    if (this.currentInspector._sidebarOpen) {
+      this._sidebar.show();
+    }
+
+    Services.obs.notifyObservers({wrappedJSObject: this},
+                                 INSPECTOR_NOTIFICATIONS.OPENED, null);
+  },
+
+  /**
+   * Main callback handler for events.
+   *
+   * @param event
+   *        The event to be handled.
+   */
+  handleEvent: function IUI_handleEvent(event)
+  {
+    let winID = null;
+    let win = null;
+    let inspectorClosed = false;
+
+    switch (event.type) {
+      case "TabSelect":
+        winID = this.getWindowID(this.tabbrowser.selectedBrowser.contentWindow);
+        if (this.isInspectorOpen && winID != this.winID) {
+          this.closeInspectorUI(true);
+          inspectorClosed = true;
+        }
+
+        if (winID && this.store.hasID(winID)) {
+          if (inspectorClosed && this.closing) {
+            Services.obs.addObserver(function reopenInspectorForTab() {
+              Services.obs.removeObserver(reopenInspectorForTab,
+                INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+              this.openInspectorUI();
+            }.bind(this), INSPECTOR_NOTIFICATIONS.CLOSED, false);
+          } else {
+            this.openInspectorUI();
+          }
+        }
+
+        if (this.store.isEmpty()) {
+          this.tabbrowser.tabContainer.removeEventListener("TabSelect", this,
+                                                         false);
+        }
+        break;
+      case "keypress":
+        switch (event.keyCode) {
+          case this.chromeWin.KeyEvent.DOM_VK_ESCAPE:
+            this.closeInspectorUI(false);
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+      }
+      case "pagehide":
+        win = event.originalTarget.defaultView;
+        // Skip iframes/frames.
+        if (!win || win.frameElement || win.top != win) {
+          break;
+        }
+
+        win.removeEventListener(event.type, this, true);
+
+        winID = this.getWindowID(win);
+        if (winID && winID != this.winID) {
+          this.store.deleteInspector(winID);
+        }
+
+        if (this.store.isEmpty()) {
+          this.tabbrowser.tabContainer.removeEventListener("TabSelect", this,
+                                                         false);
+        }
+        break;
+      case "mouseleave":
+        this.highlighter.show();
+        break;
+      case "mouseenter":
+        this.highlighter.hide();
+        break;
+    }
+  },
+
+  /*
+   * handles "keypress" events.
+  */
+  onKeypress: function IUI_onKeypress(event)
+  {
+    let node = null;
+    let bc = this.breadcrumbs;
+    switch (event.keyCode) {
+      case this.chromeWin.KeyEvent.DOM_VK_LEFT:
+        if (bc.currentIndex != 0)
+          node = bc.nodeHierarchy[bc.currentIndex - 1].node;
+        if (node && this.highlighter.isNodeHighlightable(node))
+          this.highlighter.highlight(node);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case this.chromeWin.KeyEvent.DOM_VK_RIGHT:
+        if (bc.currentIndex < bc.nodeHierarchy.length - 1)
+          node = bc.nodeHierarchy[bc.currentIndex + 1].node;
+        if (node && this.highlighter.isNodeHighlightable(node)) {
+          this.highlighter.highlight(node);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case this.chromeWin.KeyEvent.DOM_VK_UP:
+        if (this.selection) {
+          // Find a previous sibling that is highlightable.
+          node = this.selection.previousSibling;
+          while (node && !this.highlighter.isNodeHighlightable(node)) {
+            node = node.previousSibling;
+          }
+        }
+        if (node && this.highlighter.isNodeHighlightable(node)) {
+          this.highlighter.highlight(node, true);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case this.chromeWin.KeyEvent.DOM_VK_DOWN:
+        if (this.selection) {
+          // Find a next sibling that is highlightable.
+          node = this.selection.nextSibling;
+          while (node && !this.highlighter.isNodeHighlightable(node)) {
+            node = node.nextSibling;
+          }
+        }
+        if (node && this.highlighter.isNodeHighlightable(node)) {
+          this.highlighter.highlight(node, true);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+    }
+  },
+
+  /**
+   * Return the currently-selected node for the purposes of the
+   * context menu.  This is usually the highlighter selection, unless
+   * the markup panel has a selected node that can't be highlighted
+   * (such as a text node).  This will be fixed once the highlighter/inspector
+   * is confortable with non-element nodes being the current selection.
+   * See bug 785180.
+   */
+  _contextSelection: function IUI__contextSelection()
+  {
+    let inspector = this.currentInspector;
+    if (inspector.markup) {
+      return inspector.markup.selected;
+    }
+    return this.selection;
+  },
+
+  /**
+   * Copy the innerHTML of the selected Node to the clipboard. Called via the
+   * Inspector:CopyInner command.
+   */
+  copyInnerHTML: function IUI_copyInnerHTML()
+  {
+    let selection = this._contextSelection();
+    clipboardHelper.copyString(selection.innerHTML, selection.ownerDocument);
+  },
+
+  /**
+   * Copy the outerHTML of the selected Node to the clipboard. Called via the
+   * Inspector:CopyOuter command.
+   */
+  copyOuterHTML: function IUI_copyOuterHTML()
+  {
+    let selection = this._contextSelection();
+    clipboardHelper.copyString(selection.outerHTML, selection.ownerDocument);
+  },
+
+  /**
+   * Delete the selected node. Called via the Inspector:DeleteNode command.
+   */
+  deleteNode: function IUI_deleteNode()
+  {
+    let selection = this._contextSelection();
+
+    let root = selection.ownerDocument.documentElement;
+    if (selection === root) {
+      // We can't delete the root element.
+      return;
+    }
+
+    let parent = selection.parentNode;
+
+    // If the markup panel is active, use the markup panel to delete
+    // the node, making this an undoable action.
+    let markup = this.currentInspector.markup;
+    if (markup) {
+      markup.deleteNode(selection);
+    } else {
+      // remove the node from content
+      parent.removeChild(selection);
+    }
+
+    // Otherwise, just delete the node.
+    this.breadcrumbs.invalidateHierarchy();
+
+    // select the parent node in the highlighter and breadcrumbs
+    this.inspectNode(parent);
+  },
+
+  /////////////////////////////////////////////////////////////////////////
+  //// Utility Methods
+
+  /**
+   * inspect the given node, highlighting it on the page and selecting the
+   * correct row in the tree panel
+   *
+   * @param aNode
+   *        the element in the document to inspect
+   * @param aScroll
+   *        force scroll?
+   */
+  inspectNode: function IUI_inspectNode(aNode, aScroll)
+  {
+    if (aNode.ownerDocument === this.chromeDoc) {
+      // This should never happen, but just in case, we don't let the inspector
+      // inspect browser nodes.
+      return;
+    }
+    this.select(aNode, true, true);
+    this.highlighter.highlight(aNode, aScroll);
+  },
+
+  ///////////////////////////////////////////////////////////////////////////
+  //// Utility functions
+
+  /**
+   * Retrieve the unique ID of a window object.
+   *
+   * @param nsIDOMWindow aWindow
+   * @returns integer ID
+   */
+  getWindowID: function IUI_getWindowID(aWindow)
+  {
+    if (!aWindow) {
+      return null;
+    }
+
+    let util = {};
+
+    try {
+      util = aWindow.QueryInterface(Ci.nsIInterfaceRequestor).
+        getInterface(Ci.nsIDOMWindowUtils);
+    } catch (ex) { }
+
+    return util.currentInnerWindowID;
+  },
+
+  /**
+   * @param msg
+   *        text message to send to the log
+   */
+  _log: function LOG(msg)
+  {
+    Services.console.logStringMessage(msg);
+  },
+
+  /**
+   * Debugging function.
+   * @param msg
+   *        text to show with the stack trace.
+   */
+  _trace: function TRACE(msg)
+  {
+    this._log("TRACE: " + msg);
+    let frame = Components.stack.caller;
+    while (frame = frame.caller) {
+      if (frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT ||
+          frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT2) {
+        this._log("filename: " + frame.filename + " lineNumber: " + frame.lineNumber +
+          " functionName: " + frame.name);
+      }
+    }
+    this._log("END TRACE");
+  },
+
+  /**
+   * Get the toolbar button name for a given id string. Used by the
+   * registerTools API to retrieve a consistent name for toolbar buttons
+   * based on the ID of the tool.
+   * @param anId String
+   *        id of the tool to be buttonized
+   * @returns String
+   */
+  getToolbarButtonId: function IUI_createButtonId(anId)
+  {
+    return "inspector-" + anId + "-toolbutton";
+  },
+
+  /**
+   * Destroy the InspectorUI instance. This is called by the InspectorUI API
+   * "user", see gBrowserInit.onUnload() in browser.js.
+   */
+  destroy: function IUI_destroy()
+  {
+    if (this.isInspectorOpen) {
+      this.closeInspectorUI();
+    }
+
+    delete this.store;
+    delete this.chromeDoc;
+    delete this.chromeWin;
+    delete this.tabbrowser;
+  },
+};
+
+/**
+ * The Inspector store is used for storing data specific to each tab window.
+ * @constructor
+ */
+function InspectorStore()
+{
+  this.store = {};
+}
+InspectorStore.prototype = {
+  length: 0,
+
+  /**
+   * Check if there is any data recorded for any tab/window.
+   *
+   * @returns boolean True if there are no stores for any window/tab, or false
+   * otherwise.
+   */
+  isEmpty: function IS_isEmpty()
+  {
+    return this.length == 0 ? true : false;
+  },
+
+  /**
+   * Add a new inspector.
+   *
+   * @param string aID The Store ID you want created.
+   * @param Inspector aInspector The inspector to add.
+   * @returns boolean True if the store was added successfully, or false
+   * otherwise.
+   */
+  addInspector: function IS_addInspector(aID, aInspector)
+  {
+    let result = false;
+
+    if (!(aID in this.store)) {
+      this.store[aID] = aInspector;
+      this.length++;
+      result = true;
+    }
+
+    return result;
+  },
+
+  /**
+   * Get the inspector for a window, if any.
+   *
+   * @param string aID The Store ID you want created.
+   */
+  getInspector: function IS_getInspector(aID)
+  {
+    return this.store[aID] || null;
+  },
+
+  /**
+   * Delete an inspector by ID.
+   *
+   * @param string aID The store ID you want deleted.
+   * @returns boolean True if the store was removed successfully, or false
+   * otherwise.
+   */
+  deleteInspector: function IS_deleteInspector(aID)
+  {
+    let result = false;
+
+    if (aID in this.store) {
+      this.store[aID]._destroy();
+      delete this.store[aID];
+      this.length--;
+      result = true;
+    }
+
+    return result;
+  },
+
+  /**
+   * Check store existence.
+   *
+   * @param string aID The store ID you want to check.
+   * @returns boolean True if the store ID is registered, or false otherwise.
+   */
+  hasID: function IS_hasID(aID)
+  {
+    return (aID in this.store);
+  },
+};
+
+/**
+ * The InspectorProgressListener object is an nsIWebProgressListener which
+ * handles onStateChange events for the inspected browser. If the user makes
+ * changes to the web page and he tries to navigate away, he is prompted to
+ * confirm page navigation, such that he's given the chance to prevent the loss
+ * of edits.
+ *
+ * @constructor
+ * @param object aInspector
+ *        InspectorUI instance object.
+ */
+function InspectorProgressListener(aInspector)
+{
+  this.IUI = aInspector;
+  this.IUI.tabbrowser.addProgressListener(this);
+}
+
+InspectorProgressListener.prototype = {
+  onStateChange:
+  function IPL_onStateChange(aProgress, aRequest, aFlag, aStatus)
+  {
+    // Remove myself if the Inspector is no longer open.
+    if (!this.IUI.isInspectorOpen) {
+      this.destroy();
+      return;
+    }
+
+    let isStart = aFlag & Ci.nsIWebProgressListener.STATE_START;
+    let isDocument = aFlag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
+    let isNetwork = aFlag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
+    let isRequest = aFlag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
+
+    // Skip non-interesting states.
+    if (!isStart || !isDocument || !isRequest || !isNetwork) {
+      return;
+    }
+
+    // If the request is about to happen in a new window, we are not concerned
+    // about the request.
+    if (aProgress.DOMWindow != this.IUI.win) {
+      return;
+    }
+
+    if (this.IUI.isDirty) {
+      this.showNotification(aRequest);
+    } else {
+      this.IUI.closeInspectorUI();
+    }
+  },
+
+  /**
+   * Show an asynchronous notification which asks the user to confirm or cancel
+   * the page navigation request.
+   *
+   * @param nsIRequest aRequest
+   *        The request initiated by the user or by the page itself.
+   * @returns void
+   */
+  showNotification: function IPL_showNotification(aRequest)
+  {
+    aRequest.suspend();
+
+    let notificationBox = this.IUI.tabbrowser.getNotificationBox(this.IUI.browser);
+    let notification = notificationBox.
+      getNotificationWithValue("inspector-page-navigation");
+
+    if (notification) {
+      notificationBox.removeNotification(notification, true);
+    }
+
+    let cancelRequest = function onCancelRequest() {
+      if (aRequest) {
+        aRequest.cancel(Cr.NS_BINDING_ABORTED);
+        aRequest.resume(); // needed to allow the connection to be cancelled.
+        aRequest = null;
+      }
+    };
+
+    let eventCallback = function onNotificationCallback(aEvent) {
+      if (aEvent == "removed") {
+        cancelRequest();
+      }
+    };
+
+    let buttons = [
+      {
+        id: "inspector.confirmNavigationAway.buttonLeave",
+        label: this.IUI.strings.
+          GetStringFromName("confirmNavigationAway.buttonLeave"),
+        accessKey: this.IUI.strings.
+          GetStringFromName("confirmNavigationAway.buttonLeaveAccesskey"),
+        callback: function onButtonLeave() {
+          if (aRequest) {
+            aRequest.resume();
+            aRequest = null;
+            this.IUI.closeInspectorUI();
+            return true;
+          }
+          return false;
+        }.bind(this),
+      },
+      {
+        id: "inspector.confirmNavigationAway.buttonStay",
+        label: this.IUI.strings.
+          GetStringFromName("confirmNavigationAway.buttonStay"),
+        accessKey: this.IUI.strings.
+          GetStringFromName("confirmNavigationAway.buttonStayAccesskey"),
+        callback: cancelRequest
+      },
+    ];
+
+    let message = this.IUI.strings.
+      GetStringFromName("confirmNavigationAway.message");
+
+    notification = notificationBox.appendNotification(message,
+      "inspector-page-navigation", "chrome://browser/skin/Info.png",
+      notificationBox.PRIORITY_WARNING_HIGH, buttons, eventCallback);
+
+    // Make sure this not a transient notification, to avoid the automatic
+    // transient notification removal.
+    notification.persistence = -1;
+  },
+
+  /**
+   * Destroy the progress listener instance.
+   */
+  destroy: function IPL_destroy()
+  {
+    this.IUI.tabbrowser.removeProgressListener(this);
+
+    let notificationBox = this.IUI.tabbrowser.getNotificationBox(this.IUI.browser);
+    let notification = notificationBox.
+      getNotificationWithValue("inspector-page-navigation");
+
+    if (notification) {
+      notificationBox.removeNotification(notification, true);
+    }
+
+    delete this.IUI;
+  },
+};
+
+InspectorUI._registeredSidebars = [];
+
+/**
+ * Register an inspector sidebar template.
+ * Already running sidebars will not be affected, see bug 740665.
+ *
+ * @param aRegistration Object
+ * {
+ *   id: "toolname",
+ *   label: "Button or tab label",
+ *   icon: "chrome://somepath.png",
+ *   tooltiptext: "Button tooltip",
+ *   accesskey: "S",
+ *   contentURL: string URI, source of the tool's iframe content.
+ *   load: Called when the sidebar has been created and the contentURL loaded.
+ *         Passed an Inspector object and an iframe object.
+ *   destroy: Called when the sidebar is destroyed by the inspector.
+ *     Passed whatever was returned by the tool's create function.
+ * }
+ */
+InspectorUI.registerSidebar = function IUI_registerSidebar(aRegistration)
+{
+  // Only allow a given tool ID to be registered once.
+  if (InspectorUI._registeredSidebars.some(function(elt) elt.id == aRegistration.id))
+    return false;
+
+  InspectorUI._registeredSidebars.push(aRegistration);
+
+  return true;
+}
+
+/**
+ * Unregister a previously-registered inspector sidebar.
+ * Already running sidebars will not be affected, see bug 740665.
+ *
+ * @param aID string
+ */
+InspectorUI.unregisterSidebar = function IUI_unregisterSidebar(aID)
+{
+  InspectorUI._registeredSidebars = InspectorUI._registeredSidebars.filter(function(aReg) aReg.id != aID);
+}
+
+///////////////////////////////////////////////////////////////////////////
+//// Style Sidebar
+
+/**
+ * Manages the UI and loading of registered sidebar tools.
+ * @param aOptions object
+ *   Initialization information for the style sidebar, including:
+ *     document: The chrome document in which the style sidebar
+ *             should be created.
+ *     inspector: The Inspector object tied to this sidebar.
+ */
+function InspectorStyleSidebar(aOptions)
+{
+  this._tools = {};
+  this._chromeDoc = aOptions.document;
+  this._inspector = aOptions.inspector;
+}
+
+InspectorStyleSidebar.prototype = {
+
+  get visible() !this._box.hasAttribute("hidden"),
+  get activePanel() this._deck.selectedPanel._toolID,
+
+  destroy: function ISS_destroy()
+  {
+    // close the Layout View
+    if (this._layoutview) {
+      this._layoutview.destroy();
+      this._layoutview = null;
+    }
+
+    for each (let toolID in Object.getOwnPropertyNames(this._tools)) {
+      this.removeTool(toolID);
+    }
+    delete this._tools;
+    this._teardown();
+  },
+
+  /**
+   * Called by InspectorUI to create the UI for a registered sidebar tool.
+   * Will create a toolbar button and an iframe for the tool.
+   * @param aRegObj object
+   *        See the documentation for InspectorUI.registerSidebar().
+   */
+  addTool: function ISS_addTool(aRegObj)
+  {
+    if (aRegObj.id in this._tools) {
+      return;
+    }
+
+    let btn = this._chromeDoc.createElement("toolbarbutton");
+    btn.setAttribute("label", aRegObj.label);
+    btn.setAttribute("class", "devtools-toolbarbutton");
+    btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
+    btn.setAttribute("accesskey", aRegObj.accesskey);
+    btn.setAttribute("image", aRegObj.icon || "");
+    btn.setAttribute("type", "radio");
+    btn.setAttribute("group", "sidebar-tools");
+
+    let spacer = this._toolbar.querySelector("spacer");
+    this._toolbar.insertBefore(btn, spacer);
+    // create tool iframe
+    let frame = this._chromeDoc.createElement("iframe");
+    frame.setAttribute("flex", "1");
+    frame._toolID = aRegObj.id;
+
+    // This is needed to enable tooltips inside the iframe document.
+    frame.setAttribute("tooltip", "aHTMLTooltip");
+
+    this._deck.appendChild(frame);
+
+    // wire up button to show the iframe
+    let onClick = function() {
+      this.activatePanel(aRegObj.id);
+    }.bind(this);
+    btn.addEventListener("click", onClick, true);
+
+    this._tools[aRegObj.id] = {
+      id: aRegObj.id,
+      registration: aRegObj,
+      button: btn,
+      frame: frame,
+      loaded: false,
+      context: null,
+      onClick: onClick
+    };
+  },
+
+  /**
+   * Remove a tool from the sidebar.
+   *
+   * @param aID string
+   *        The string ID of the tool to remove.
+   */
+  removeTool: function ISS_removeTool(aID)
+  {
+    if (!aID in this._tools) {
+      return;
+    }
+    let tool = this._tools[aID];
+    delete this._tools[aID];
+
+    if (tool.loaded && tool.registration.destroy) {
+      tool.registration.destroy(tool.context);
+    }
+
+    if (tool.onLoad) {
+      tool.frame.removeEventListener("load", tool.onLoad, true);
+      delete tool.onLoad;
+    }
+
+    if (tool.onClick) {
+      tool.button.removeEventListener("click", tool.onClick, true);
+      delete tool.onClick;
+    }
+
+    tool.button.parentNode.removeChild(tool.button);
+    tool.frame.parentNode.removeChild(tool.frame);
+  },
+
+  /**
+   * Hide or show the sidebar.
+   */
+  toggle: function ISS_toggle()
+  {
+    if (!this.visible) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  },
+
+  /**
+   * Shows the sidebar, updating the stored visibility pref.
+   */
+  show: function ISS_show()
+  {
+    this._box.removeAttribute("hidden");
+    this._splitter.removeAttribute("hidden");
+    this._toggleButton.checked = true;
+
+    this._showDefault();
+
+    this._inspector._sidebarOpen = true;
+    Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", true);
+
+    // Instantiate the Layout View if needed.
+    if (Services.prefs.getBoolPref("devtools.layoutview.enabled")
+        && !this._layoutview) {
+      this._layoutview = new LayoutView({
+        document: this._chromeDoc,
+        inspector: this._inspector,
+      });
+    }
+  },
+
+  /**
+   * Hides the sidebar, updating the stored visibility pref.
+   */
+  hide: function ISS_hide()
+  {
+    this._teardown();
+    this._inspector._sidebarOpen = false;
+    Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", false);
+  },
+
+  /**
+   * Hides the sidebar UI elements.
+   */
+  _teardown: function ISS__teardown()
+  {
+    this._toggleButton.checked = false;
+    this._box.setAttribute("hidden", true);
+    this._splitter.setAttribute("hidden", true);
+  },
+
+  /**
+   * Sets the current sidebar panel.
+   *
+   * @param aID string
+   *        The ID of the panel to make visible.
+   */
+  activatePanel: function ISS_activatePanel(aID) {
+    let tool = this._tools[aID];
+    Services.prefs.setCharPref("devtools.inspector.activeSidebar", aID);
+    this._inspector._activeSidebar = aID;
+    this._deck.selectedPanel = tool.frame;
+    this._showContent(tool);
+    tool.button.setAttribute("checked", "true");
+    let hasSelected = Array.forEach(this._toolbar.children, function(btn) {
+      if (btn != tool.button) {
+        btn.removeAttribute("checked");
+      }
+    });
+  },
+
+  /**
+   * Make the iframe content of a given tool visible.  If this is the first
+   * time the tool has been shown, load its iframe content and call the
+   * registration object's load method.
+   *
+   * @param aTool object
+   *        The tool object we're loading.
+   */
+  _showContent: function ISS__showContent(aTool)
+  {
+    // If the current tool is already loaded, notify that we're
+    // showing this sidebar.
+    if (aTool.loaded) {
+      this._inspector.emit("sidebaractivated", aTool.id);
+      this._inspector.emit("sidebaractivated-" + aTool.id);
+      return;
+    }
+
+    // If we're already loading, we're done.
+    if (aTool.onLoad) {
+      return;
+    }
+
+    // This will be canceled in removeTool if necessary.
+    aTool.onLoad = function(evt) {
+      if (evt.target.location != aTool.registration.contentURL) {
+        return;
+      }
+      aTool.frame.removeEventListener("load", aTool.onLoad, true);
+      delete aTool.onLoad;
+      aTool.loaded = true;
+      aTool.context = aTool.registration.load(this._inspector, aTool.frame);
+
+      this._inspector.emit("sidebaractivated", aTool.id);
+
+      // Send an event specific to the activation of this panel.  For
+      // this initial event, include a "createpanel" argument
+      // to let panels watch sidebaractivated to refresh themselves
+      // but ignore the one immediately after their load.
+      // I don't really like this, we should find a better solution.
+      this._inspector.emit("sidebaractivated-" + aTool.id, "createpanel");
+    }.bind(this);
+    aTool.frame.addEventListener("load", aTool.onLoad, true);
+    aTool.frame.setAttribute("src", aTool.registration.contentURL);
+  },
+
+  /**
+   * For testing purposes, mostly - return the tool-provided context
+   * for a given tool.  Will only work after the tool has been loaded
+   * and instantiated.
+   */
+  _toolContext: function ISS__toolContext(aID) {
+    return aID in this._tools ? this._tools[aID].context : null;
+  },
+
+  /**
+   * Also mostly for testing, return the list of tool objects stored in
+   * the sidebar.
+   */
+  _toolObjects: function ISS__toolObjects() {
+    return [this._tools[i] for each (i in Object.getOwnPropertyNames(this._tools))];
+  },
+
+  /**
+   * If no tool is already selected, show the last-used sidebar.  If there
+   * was no last-used sidebar, just show the first one.
+   */
+  _showDefault: function ISS__showDefault()
+  {
+    let hasSelected = Array.some(this._toolbar.children,
+      function(btn) btn.hasAttribute("checked"));
+
+    // Make sure the selected panel is loaded...
+    this._showContent(this._tools[this.activePanel]);
+
+    if (hasSelected) {
+      return;
+    }
+
+    let activeID = this._inspector._activeSidebar;
+    if (!activeID || !(activeID in this._tools)) {
+      activeID = Object.getOwnPropertyNames(this._tools)[0];
+    }
+    this.activatePanel(activeID);
+  },
+
+  // DOM elements
+  get _toggleButton() this._chromeDoc.getElementById("inspector-style-button"),
+  get _box() this._chromeDoc.getElementById("devtools-sidebar-box"),
+  get _splitter() this._chromeDoc.getElementById("devtools-side-splitter"),
+  get _toolbar() this._chromeDoc.getElementById("devtools-sidebar-toolbar"),
+  get _deck() this._chromeDoc.getElementById("devtools-sidebar-deck"),
+};
+
+///////////////////////////////////////////////////////////////////////////
+//// HTML Breadcrumbs
+
+/**
+ * Display the ancestors of the current node and its children.
+ * Only one "branch" of children are displayed (only one line).
+ *
+ * Mechanism:
+ * . If no nodes displayed yet:
+ *    then display the ancestor of the selected node and the selected node;
+ *   else select the node;
+ * . If the selected node is the last node displayed, append its first (if any).
+ *
+ * @param object aInspector
+ *        The InspectorUI instance.
+ */
+function HTMLBreadcrumbs(aInspector)
+{
+  this.IUI = aInspector;
+  this.DOMHelpers = new DOMHelpers(this.IUI.win);
+  this._init();
+}
+
+HTMLBreadcrumbs.prototype = {
+  _init: function BC__init()
+  {
+    this.container = this.IUI.chromeDoc.getElementById("inspector-breadcrumbs");
+    this.container.addEventListener("mousedown", this, true);
+
+    // We will save a list of already displayed nodes in this array.
+    this.nodeHierarchy = [];
+
+    // Last selected node in nodeHierarchy.
+    this.currentIndex = -1;
+
+    // Siblings menu
+    this.menu = this.IUI.chromeDoc.createElement("menupopup");
+    this.menu.id = "inspector-breadcrumbs-menu";
+
+    let popupSet = this.IUI.chromeDoc.getElementById("mainPopupSet");
+    popupSet.appendChild(this.menu);
+
+    // By default, hide the arrows. We let the <scrollbox> show them
+    // in case of overflow.
+    this.container.removeAttribute("overflows");
+    this.container._scrollButtonUp.collapsed = true;
+    this.container._scrollButtonDown.collapsed = true;
+
+    this.onscrollboxreflow = function() {
+      if (this.container._scrollButtonDown.collapsed)
+        this.container.removeAttribute("overflows");
+      else
+        this.container.setAttribute("overflows", true);
+    }.bind(this);
+
+    this.container.addEventListener("underflow", this.onscrollboxreflow, false);
+    this.container.addEventListener("overflow", this.onscrollboxreflow, false);
+
+    this.menu.addEventListener("popuphiding", (function() {
+      while (this.menu.hasChildNodes()) {
+        this.menu.removeChild(this.menu.firstChild);
+      }
+      let button = this.container.querySelector("button[siblings-menu-open]");
+      button.removeAttribute("siblings-menu-open");
+    }).bind(this), false);
+  },
+
+  /**
+   * Build a string that represents the node: tagName#id.class1.class2.
+   *
+   * @param aNode The node to pretty-print
+   * @returns a string
+   */
+  prettyPrintNodeAsText: function BC_prettyPrintNodeText(aNode)
+  {
+    let text = aNode.tagName.toLowerCase();
+    if (aNode.id) {
+      text += "#" + aNode.id;
+    }
+    for (let i = 0; i < aNode.classList.length; i++) {
+      text += "." + aNode.classList[i];
+    }
+    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
+      let pseudo = PSEUDO_CLASSES[i];
+      if (DOMUtils.hasPseudoClassLock(aNode, pseudo)) {
+        text += pseudo;  
+      }      
+    }
+
+    return text;
+  },
+
+
+  /**
+   * Build <label>s that represent the node:
+   *   <label class="inspector-breadcrumbs-tag">tagName</label>
+   *   <label class="inspector-breadcrumbs-id">#id</label>
+   *   <label class="inspector-breadcrumbs-classes">.class1.class2</label>
+   *
+   * @param aNode The node to pretty-print
+   * @returns a document fragment.
+   */
+  prettyPrintNodeAsXUL: function BC_prettyPrintNodeXUL(aNode)
+  {
+    let fragment = this.IUI.chromeDoc.createDocumentFragment();
+
+    let tagLabel = this.IUI.chromeDoc.createElement("label");
+    tagLabel.className = "inspector-breadcrumbs-tag plain";
+
+    let idLabel = this.IUI.chromeDoc.createElement("label");
+    idLabel.className = "inspector-breadcrumbs-id plain";
+
+    let classesLabel = this.IUI.chromeDoc.createElement("label");
+    classesLabel.className = "inspector-breadcrumbs-classes plain";
+
+    let pseudosLabel = this.IUI.chromeDoc.createElement("label");
+    pseudosLabel.className = "inspector-breadcrumbs-pseudo-classes plain";
+
+    tagLabel.textContent = aNode.tagName.toLowerCase();
+    idLabel.textContent = aNode.id ? ("#" + aNode.id) : "";
+
+    let classesText = "";
+    for (let i = 0; i < aNode.classList.length; i++) {
+      classesText += "." + aNode.classList[i];
+    }
+    classesLabel.textContent = classesText;
+
+    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
+      return DOMUtils.hasPseudoClassLock(aNode, pseudo);
+    }, this);
+    pseudosLabel.textContent = pseudos.join("");
+
+    fragment.appendChild(tagLabel);
+    fragment.appendChild(idLabel);
+    fragment.appendChild(classesLabel);
+    fragment.appendChild(pseudosLabel);
+
+    return fragment;
+  },
+
+  /**
+   * Open the sibling menu.
+   *
+   * @param aButton the button representing the node.
+   * @param aNode the node we want the siblings from.
+   */
+  openSiblingMenu: function BC_openSiblingMenu(aButton, aNode)
+  {
+    let title = this.IUI.chromeDoc.createElement("menuitem");
+    title.setAttribute("label",
+      this.IUI.strings.GetStringFromName("breadcrumbs.siblings"));
+    title.setAttribute("disabled", "true");
+
+    let separator = this.IUI.chromeDoc.createElement("menuseparator");
+
+    this.menu.appendChild(title);
+    this.menu.appendChild(separator);
+
+    let fragment = this.IUI.chromeDoc.createDocumentFragment();
+
+    let nodes = aNode.parentNode.childNodes;
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].nodeType == aNode.ELEMENT_NODE) {
+        let item = this.IUI.chromeDoc.createElement("menuitem");
+        let inspector = this.IUI;
+        if (nodes[i] === aNode) {
+          item.setAttribute("disabled", "true");
+          item.setAttribute("checked", "true");
+        }
+
+        item.setAttribute("type", "radio");
+        item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
+
+        item.onmouseup = (function(aNode) {
+          return function() {
+            inspector.select(aNode, true, true, "breadcrumbs");
+          }
+        })(nodes[i]);
+
+        fragment.appendChild(item);
+      }
+    }
+    this.menu.appendChild(fragment);
+    this.menu.openPopup(aButton, "before_start", 0, 0, true, false);
+    aButton.setAttribute("siblings-menu-open", "true");
+  },
+
+  /**
+   * Generic event handler.
+   *
+   * @param nsIDOMEvent aEvent
+   *        The DOM event object.
+   */
+  handleEvent: function BC_handleEvent(aEvent)
+  {
+    if (aEvent.type == "mousedown" && aEvent.button == 0) {
+      // on Click and Hold, open the Siblings menu
+
+      let timer;
+      let container = this.container;
+      let window = this.IUI.win;
+
+      function openMenu(aEvent) {
+        cancelHold();
+        let target = aEvent.originalTarget;
+        if (target.tagName == "button") {
+          target.onBreadcrumbsHold();
+        }
+      }
+
+      function handleClick(aEvent) {
+        cancelHold();
+        let target = aEvent.originalTarget;
+        if (target.tagName == "button") {
+          target.onBreadcrumbsClick();
+        }
+      }
+
+      function cancelHold(aEvent) {
+        window.clearTimeout(timer);
+        container.removeEventListener("mouseout", cancelHold, false);
+        container.removeEventListener("mouseup", handleClick, false);
+      }
+
+      container.addEventListener("mouseout", cancelHold, false);
+      container.addEventListener("mouseup", handleClick, false);
+      timer = window.setTimeout(openMenu, 500, aEvent);
+    }
+  },
+
+  /**
+   * Remove nodes and delete properties.
+   */
+  destroy: function BC_destroy()
+  {
+    this.container.removeEventListener("underflow", this.onscrollboxreflow, false);
+    this.container.removeEventListener("overflow", this.onscrollboxreflow, false);
+    this.onscrollboxreflow = null;
+
+    this.empty();
+    this.container.removeEventListener("mousedown", this, true);
+    this.menu.parentNode.removeChild(this.menu);
+    this.container = null;
+    this.nodeHierarchy = null;
+  },
+
+  /**
+   * Empty the breadcrumbs container.
+   */
+  empty: function BC_empty()
+  {
+    while (this.container.hasChildNodes()) {
+      this.container.removeChild(this.container.firstChild);
+    }
+  },
+
+  /**
+   * Re-init the cache and remove all the buttons.
+   */
+  invalidateHierarchy: function BC_invalidateHierarchy()
+  {
+    this.menu.hidePopup();
+    this.nodeHierarchy = [];
+    this.empty();
+  },
+
+  /**
+   * Set which button represent the selected node.
+   *
+   * @param aIdx Index of the displayed-button to select
+   */
+  setCursor: function BC_setCursor(aIdx)
+  {
+    // Unselect the previously selected button
+    if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
+      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
+    }
+    if (aIdx > -1) {
+      this.nodeHierarchy[aIdx].button.setAttribute("checked", "true");
+      if (this.hadFocus)
+        this.nodeHierarchy[aIdx].button.focus();
+    }
+    this.currentIndex = aIdx;
+  },
+
+  /**
+   * Get the index of the node in the cache.
+   *
+   * @param aNode
+   * @returns integer the index, -1 if not found
+   */
+  indexOf: function BC_indexOf(aNode)
+  {
+    let i = this.nodeHierarchy.length - 1;
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      if (this.nodeHierarchy[i].node === aNode) {
+        return i;
+      }
+    }
+    return -1;
+  },
+
+  /**
+   * Remove all the buttons and their references in the cache
+   * after a given index.
+   *
+   * @param aIdx
+   */
+  cutAfter: function BC_cutAfter(aIdx)
+  {
+    while (this.nodeHierarchy.length > (aIdx + 1)) {
+      let toRemove = this.nodeHierarchy.pop();
+      this.container.removeChild(toRemove.button);
+    }
+  },
+
+  /**
+   * Build a button representing the node.
+   *
+   * @param aNode The node from the page.
+   * @returns aNode The <button>.
+   */
+  buildButton: function BC_buildButton(aNode)
+  {
+    let button = this.IUI.chromeDoc.createElement("button");
+    let inspector = this.IUI;
+    button.appendChild(this.prettyPrintNodeAsXUL(aNode));
+    button.className = "inspector-breadcrumbs-button";
+
+    button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
+
+    button.onkeypress = function onBreadcrumbsKeypress(e) {
+      if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
+          e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
+        button.click();
+    }
+
+    button.onBreadcrumbsClick = function onBreadcrumbsClick() {
+      inspector.stopInspecting();
+      inspector.select(aNode, true, true, "breadcrumbs");
+    };
+
+    button.onclick = (function _onBreadcrumbsRightClick(aEvent) {
+      button.focus();
+      if (aEvent.button == 2) {
+        this.openSiblingMenu(button, aNode);
+      }
+    }).bind(this);
+
+    button.onBreadcrumbsHold = (function _onBreadcrumbsHold() {
+      this.openSiblingMenu(button, aNode);
+    }).bind(this);
+    return button;
+  },
+
+  /**
+   * Connecting the end of the breadcrumbs to a node.
+   *
+   * @param aNode The node to reach.
+   */
+  expand: function BC_expand(aNode)
+  {
+      let fragment = this.IUI.chromeDoc.createDocumentFragment();
+      let toAppend = aNode;
+      let lastButtonInserted = null;
+      let originalLength = this.nodeHierarchy.length;
+      let stopNode = null;
+      if (originalLength > 0) {
+        stopNode = this.nodeHierarchy[originalLength - 1].node;
+      }
+      while (toAppend && toAppend.tagName && toAppend != stopNode) {
+        let button = this.buildButton(toAppend);
+        fragment.insertBefore(button, lastButtonInserted);
+        lastButtonInserted = button;
+        this.nodeHierarchy.splice(originalLength, 0, {node: toAppend, button: button});
+        toAppend = this.DOMHelpers.getParentObject(toAppend);
+      }
+      this.container.appendChild(fragment, this.container.firstChild);
+  },
+
+  /**
+   * Get a child of a node that can be displayed in the breadcrumbs.
+   * By default, we want a node that can highlighted by the highlighter.
+   * If no highlightable child is found, we return the first node of type
+   * ELEMENT_NODE.
+   *
+   * @param aNode The parent node.
+   * @returns nsIDOMNode|null
+   */
+  getFirstHighlightableChild: function BC_getFirstHighlightableChild(aNode)
+  {
+    let nextChild = this.DOMHelpers.getChildObject(aNode, 0);
+    let fallback = null;
+
+    while (nextChild) {
+      if (this.IUI.highlighter.isNodeHighlightable(nextChild)) {
+        return nextChild;
+      }
+      if (!fallback && nextChild.nodeType == aNode.ELEMENT_NODE) {
+        fallback = nextChild;
+      }
+      nextChild = this.DOMHelpers.getNextSibling(nextChild);
+    }
+    return fallback;
+  },
+
+  /**
+   * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
+   *
+   * @param aNode
+   * @returns Index of the ancestor in the cache
+   */
+  getCommonAncestor: function BC_getCommonAncestor(aNode)
+  {
+    let node = aNode;
+    while (node) {
+      let idx = this.indexOf(node);
+      if (idx > -1) {
+        return idx;
+      } else {
+        node = this.DOMHelpers.getParentObject(node);
+      }
+    }
+    return -1;
+  },
+
+  /**
+   * Make sure that the latest node in the breadcrumbs is not the selected node
+   * if the selected node still has children.
+   */
+  ensureFirstChild: function BC_ensureFirstChild()
+  {
+    // If the last displayed node is the selected node
+    if (this.currentIndex == this.nodeHierarchy.length - 1) {
+      let node = this.nodeHierarchy[this.currentIndex].node;
+      let child = this.getFirstHighlightableChild(node);
+      // If the node has a child
+      if (child) {
+        // Show this child
+        this.expand(child);
+      }
+    }
+  },
+
+  /**
+   * Ensure the selected node is visible.
+   */
+  scroll: function BC_scroll()
+  {
+    // FIXME bug 684352: make sure its immediate neighbors are visible too.
+
+    let scrollbox = this.container;
+    let element = this.nodeHierarchy[this.currentIndex].button;
+    scrollbox.ensureElementIsVisible(element);
+  },
+  
+  updateSelectors: function BC_updateSelectors()
+  {
+    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
+      let crumb = this.nodeHierarchy[i];
+      let button = crumb.button;
+
+      while(button.hasChildNodes()) {
+        button.removeChild(button.firstChild);
+      }
+      button.appendChild(this.prettyPrintNodeAsXUL(crumb.node));
+      button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(crumb.node));
+    }
+  },
+
+  /**
+   * Update the breadcrumbs display when a new node is selected.
+   */
+  update: function BC_update()
+  {
+    this.menu.hidePopup();
+
+    let cmdDispatcher = this.IUI.chromeDoc.commandDispatcher;
+    this.hadFocus = (cmdDispatcher.focusedElement &&
+                     cmdDispatcher.focusedElement.parentNode == this.container);
+
+    let selection = this.IUI.selection;
+    let idx = this.indexOf(selection);
+
+    // Is the node already displayed in the breadcrumbs?
+    if (idx > -1) {
+      // Yes. We select it.
+      this.setCursor(idx);
+    } else {
+      // No. Is the breadcrumbs display empty?
+      if (this.nodeHierarchy.length > 0) {
+        // No. We drop all the element that are not direct ancestors
+        // of the selection
+        let parent = this.DOMHelpers.getParentObject(selection);
+        let idx = this.getCommonAncestor(parent);
+        this.cutAfter(idx);
+      }
+      // we append the missing button between the end of the breadcrumbs display
+      // and the current node.
+      this.expand(selection);
+
+      // we select the current node button
+      idx = this.indexOf(selection);
+      this.setCursor(idx);
+    }
+    // Add the first child of the very last node of the breadcrumbs if possible.
+    this.ensureFirstChild();
+
+    // Make sure the selected node and its neighbours are visible.
+    this.scroll();
+
+    this.updateSelectors();
+  },
+
+}
+
+/////////////////////////////////////////////////////////////////////////
+//// Initializers
+
+XPCOMUtils.defineLazyGetter(InspectorUI.prototype, "strings",
+  function () {
+    return Services.strings.createBundle(
+            "chrome://browser/locale/devtools/inspector.properties");
+  });
+
+XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
+  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});
+
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+  return Cc["@mozilla.org/widget/clipboardhelper;1"].
+    getService(Ci.nsIClipboardHelper);
+});
diff --git a/browser/devtools/inspector/test/Makefile.in b/browser/devtools/highlighter/test/Makefile.in
similarity index 88%
rename from browser/devtools/inspector/test/Makefile.in
rename to browser/devtools/highlighter/test/Makefile.in
index 422f6648596..14c302b5162 100644
--- a/browser/devtools/inspector/test/Makefile.in
+++ b/browser/devtools/highlighter/test/Makefile.in
@@ -12,29 +12,34 @@ include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/rules.mk
 
 _BROWSER_FILES = \
-		browser_inspector_iframeTest.js \
 		browser_inspector_initialization.js \
+		browser_inspector_treeSelection.js \
 		browser_inspector_highlighter.js \
+		browser_inspector_highlighter_autohide.js \
+		browser_inspector_iframeTest.js \
 		browser_inspector_scrolling.js \
+		browser_inspector_tab_switch.js \
 		browser_inspector_bug_665880.js \
+		browser_inspector_bug_674871.js \
+		browser_inspector_bug_566084_location_changed.js \
 		browser_inspector_infobar.js \
+		browser_inspector_bug_690361.js \
+		browser_inspector_bug_672902_keyboard_shortcuts.js \
+		browser_inspector_keybindings.js \
 		browser_inspector_breadcrumbs.html \
 		browser_inspector_breadcrumbs.js \
+		browser_inspector_bug_699308_iframe_navigation.js \
+		browser_inspector_changes.js \
+		browser_inspector_ruleviewstore.js \
 		browser_inspector_invalidate.js \
+		browser_inspector_sidebarstate.js \
 		browser_inspector_menu.js \
+		browser_inspector_pseudoclass_lock.js \
 		browser_inspector_pseudoClass_menu.js \
 		browser_inspector_destroyselection.html \
 		browser_inspector_destroyselection.js \
-		browser_inspector_bug_699308_iframe_navigation.js \
-		browser_inspector_bug_672902_keyboard_shortcuts.js \
-		browser_inspector_bug_566084_location_changed.js \
-		browser_inspector_sidebarstate.js \
-		browser_inspector_pseudoclass_lock.js \
 		browser_inspector_cmd_inspect.js \
 		browser_inspector_cmd_inspect.html \
-		browser_inspector_highlighter_autohide.js \
-		browser_inspector_changes.js \
-		browser_inspector_bug_674871.js \
 		head.js \
 		helpers.js \
 		$(NULL)
diff --git a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.html b/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html
similarity index 100%
rename from browser/devtools/inspector/test/browser_inspector_breadcrumbs.html
rename to browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html
diff --git a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js b/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js
similarity index 68%
rename from browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
rename to browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js
index 50ceed087e9..0b1f7829034 100644
--- a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
+++ b/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.js
@@ -18,7 +18,6 @@ function test()
   let doc;
   let nodes;
   let cursor;
-  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -27,7 +26,7 @@ function test()
     waitForFocus(setupTest, content);
   }, true);
 
-  content.location = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_breadcrumbs.html";
+  content.location = "http://mochi.test:8888/browser/browser/devtools/highlighter/test/browser_inspector_breadcrumbs.html";
 
   function setupTest()
   {
@@ -37,16 +36,20 @@ function test()
       ok(nodes[i].node, "node " + nodes[i].nodeId + " found");
     }
 
-    openInspector(runTests);
+    Services.obs.addObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function runTests(aInspector)
+  function runTests()
   {
-    inspector = aInspector;
+    Services.obs.removeObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
     cursor = 0;
-    inspector.selection.on("new-node", nodeSelected);
     executeSoon(function() {
-      inspector.selection.setNode(nodes[0].node);
+      InspectorUI.highlighter.addListener("nodeselected", nodeSelected);
+      InspectorUI.inspectNode(nodes[0].node);
     });
   }
 
@@ -56,20 +59,24 @@ function test()
       performTest();
       cursor++;
       if (cursor >= nodes.length) {
-        inspector.selection.off("new-node", nodeSelected);
-        finishUp();
+
+        InspectorUI.highlighter.removeListener("nodeselected", nodeSelected);
+        Services.obs.addObserver(finishUp,
+          InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+        executeSoon(function() {
+          InspectorUI.closeInspectorUI();
+        });
       } else {
         let node = nodes[cursor].node;
-        inspector.selection.setNode(node);
+        InspectorUI.inspectNode(node);
       }
     });
   }
 
   function performTest()
   {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let panel = gDevTools.getPanelForTarget("inspector", target);
-    let container = panel.panelDoc.getElementById("inspector-breadcrumbs");
+    let container = document.getElementById("inspector-breadcrumbs");
     let buttonsLabelIds = nodes[cursor].result.split(" ");
 
     // html > body > …
@@ -84,11 +91,11 @@ function test()
 
     let checkedButton = container.querySelector("button[checked]");
     let labelId = checkedButton.querySelector(".inspector-breadcrumbs-id");
-    let id = inspector.selection.node.id;
-    is(labelId.textContent, "#" + id, "Node " + cursor + ": selection matches");
+    is(labelId.textContent, "#" + InspectorUI.selection.id, "Node " + cursor + ": selection matches");
   }
 
   function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = nodes = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js b/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
new file mode 100644
index 00000000000..71349374fcf
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_566084_location_changed.js
@@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let notificationBox = null;
+
+function startLocationTests() {
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests() {
+  Services.obs.removeObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+
+  let para = content.document.querySelector("p");
+  ok(para, "found the paragraph element");
+  is(para.textContent, "init", "paragraph content is correct");
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.isInspectorOpen, "Inspector is open");
+
+  InspectorUI.isDirty = true;
+
+  notificationBox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
+  notificationBox.addEventListener("AlertActive", alertActive1, false);
+
+  gBrowser.selectedBrowser.addEventListener("load", onPageLoad, true);
+
+  content.location = "data:text/html,<div>location change test 1 for " +
+    "inspector</div><p>test1</p>";
+}
+
+function alertActive1() {
+  notificationBox.removeEventListener("AlertActive", alertActive1, false);
+
+  let notification = notificationBox.
+    getNotificationWithValue("inspector-page-navigation");
+  ok(notification, "found the inspector-page-navigation notification");
+
+  // By closing the notification it is expected that page navigation is
+  // canceled.
+  executeSoon(function() {
+    notification.close();
+    locationTest2();
+  });
+}
+
+function onPageLoad() {
+  gBrowser.selectedBrowser.removeEventListener("load", onPageLoad, true);
+
+  isnot(content.location.href.indexOf("test2"), -1,
+        "page navigated to the correct location");
+
+  let para = content.document.querySelector("p");
+  ok(para, "found the paragraph element, third time");
+  is(para.textContent, "test2", "paragraph content is correct");
+
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(!InspectorUI.isInspectorOpen, "Inspector Panel is not open");
+
+  testEnd();
+}
+
+function locationTest2() {
+  // Location did not change.
+  let para = content.document.querySelector("p");
+  ok(para, "found the paragraph element, second time");
+  is(para.textContent, "init", "paragraph content is correct");
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.isInspectorOpen, "Inspector Panel is open");
+
+  notificationBox.addEventListener("AlertActive", alertActive2, false);
+
+  content.location = "data:text/html,<div>location change test 2 for " +
+    "inspector</div><p>test2</p>";
+}
+
+function alertActive2() {
+  notificationBox.removeEventListener("AlertActive", alertActive2, false);
+
+  let notification = notificationBox.
+    getNotificationWithValue("inspector-page-navigation");
+  ok(notification, "found the inspector-page-navigation notification");
+
+  let buttons = notification.querySelectorAll("button");
+  let buttonLeave = null;
+  for (let i = 0; i < buttons.length; i++) {
+    if (buttons[i].buttonInfo.id == "inspector.confirmNavigationAway.buttonLeave") {
+      buttonLeave = buttons[i];
+      break;
+    }
+  }
+
+  ok(buttonLeave, "the Leave page button was found");
+
+  // Accept page navigation.
+  executeSoon(function(){
+    buttonLeave.doCommand();
+  });
+}
+
+function testEnd() {
+  notificationBox = null;
+  gBrowser.removeCurrentTab();
+  executeSoon(finish);
+}
+
+function test() {
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
+    waitForFocus(startLocationTests, content);
+  }, true);
+
+  content.location = "data:text/html,<div>location change tests for " +
+    "inspector.</div><p>init</p>";
+}
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_665880.js b/browser/devtools/highlighter/test/browser_inspector_bug_665880.js
similarity index 52%
rename from browser/devtools/inspector/test/browser_inspector_bug_665880.js
rename to browser/devtools/highlighter/test/browser_inspector_bug_665880.js
index b80de1cc211..b5e23af2bb2 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_665880.js
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_665880.js
@@ -23,25 +23,37 @@ function test()
   {
     objectNode = doc.querySelector("object");
     ok(objectNode, "we have the object node");
-    openInspector(runObjectInspectionTest);
+    Services.obs.addObserver(runObjectInspectionTest,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function runObjectInspectionTest(inspector)
+  function runObjectInspectionTest()
   {
-    inspector.highlighter.once("locked", performTestComparison);
-    inspector.selection.setNode(objectNode, "");
+    Services.obs.removeObserver(runObjectInspectionTest,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+    executeSoon(function() {
+      InspectorUI.highlighter.addListener("nodeselected", performTestComparison);
+
+      InspectorUI.inspectNode(objectNode);
+    });
   }
 
   function performTestComparison()
   {
-    is(getActiveInspector().selection.node, objectNode, "selection matches node");
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
-    finishUp();
+    InspectorUI.highlighter.removeListener("nodeselected", performTestComparison);
+
+    is(InspectorUI.selection, objectNode, "selection matches node");
+
+    Services.obs.addObserver(finishUp,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    InspectorUI.closeInspectorUI();
   }
 
 
   function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = objectNode = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js b/browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js
similarity index 51%
rename from browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
rename to browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js
index f44ad7ba983..1e11ec60e94 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_672902_keyboard_shortcuts.js
@@ -11,7 +11,6 @@ function test()
 
   let doc;
   let node;
-  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -27,19 +26,23 @@ function test()
 
   function setupKeyBindingsTest()
   {
-    openInspector(findAndHighlightNode);
+    Services.obs.addObserver(findAndHighlightNode,
+                             InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED,
+                             false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function findAndHighlightNode(aInspector)
+  function findAndHighlightNode()
   {
-    inspector = aInspector;
+    Services.obs.removeObserver(findAndHighlightNode,
+                                InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
 
     executeSoon(function() {
-      inspector.selection.once("new-node", highlightBodyNode);
+      InspectorUI.highlighter.addListener("nodeselected", highlightBodyNode);
       // Test that navigating around without a selected node gets us to the
       // body element.
       node = doc.querySelector("body");
-      let bc = inspector.breadcrumbs;
+      let bc = InspectorUI.breadcrumbs;
       bc.nodeHierarchy[bc.currentIndex].button.focus();
       EventUtils.synthesizeKey("VK_RIGHT", { });
     });
@@ -47,10 +50,11 @@ function test()
 
   function highlightBodyNode()
   {
-    is(inspector.selection.node, node, "selected body element");
+    InspectorUI.highlighter.removeListener("nodeselected", highlightBodyNode);
+    is(InspectorUI.selection, node, "selected body element");
 
     executeSoon(function() {
-      inspector.selection.once("new-node", highlightHeaderNode);
+      InspectorUI.highlighter.addListener("nodeselected", highlightHeaderNode);
       // Test that moving to the child works.
       node = doc.querySelector("h1");
       EventUtils.synthesizeKey("VK_RIGHT", { });
@@ -59,10 +63,11 @@ function test()
 
   function highlightHeaderNode()
   {
-    is(inspector.selection.node, node, "selected h1 element");
+    InspectorUI.highlighter.removeListener("nodeselected", highlightHeaderNode);
+    is(InspectorUI.selection, node, "selected h1 element");
 
     executeSoon(function() {
-      inspector.selection.once("new-node", highlightParagraphNode);
+      InspectorUI.highlighter.addListener("nodeselected", highlightParagraphNode);
       // Test that moving to the next sibling works.
       node = doc.querySelector("p");
       EventUtils.synthesizeKey("VK_DOWN", { });
@@ -71,10 +76,11 @@ function test()
 
   function highlightParagraphNode()
   {
-    is(inspector.selection.node, node, "selected p element");
+    InspectorUI.highlighter.removeListener("nodeselected", highlightParagraphNode);
+    is(InspectorUI.selection, node, "selected p element");
 
     executeSoon(function() {
-      inspector.selection.once("new-node", highlightHeaderNodeAgain);
+      InspectorUI.highlighter.addListener("nodeselected", highlightHeaderNodeAgain);
       // Test that moving to the previous sibling works.
       node = doc.querySelector("h1");
       EventUtils.synthesizeKey("VK_UP", { });
@@ -83,10 +89,11 @@ function test()
 
   function highlightHeaderNodeAgain()
   {
-    is(inspector.selection.node, node, "selected h1 element");
+    InspectorUI.highlighter.removeListener("nodeselected", highlightHeaderNodeAgain);
+    is(InspectorUI.selection, node, "selected h1 element");
 
     executeSoon(function() {
-      inspector.selection.once("new-node", highlightParentNode);
+      InspectorUI.highlighter.addListener("nodeselected", highlightParentNode);
       // Test that moving to the parent works.
       node = doc.querySelector("body");
       EventUtils.synthesizeKey("VK_LEFT", { });
@@ -95,11 +102,27 @@ function test()
 
   function highlightParentNode()
   {
-    is(inspector.selection.node, node, "selected body element");
-    finishUp();
+    InspectorUI.highlighter.removeListener("nodeselected", highlightParentNode);
+    is(InspectorUI.selection, node, "selected body element");
+
+    // Test that locking works.
+    synthesizeKeyFromKeyTag("key_inspect");
+
+    executeSoon(isTheNodeLocked);
+  }
+
+  function isTheNodeLocked()
+  {
+    ok(!InspectorUI.inspecting, "the node is locked");
+    Services.obs.addObserver(finishUp,
+                             InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED,
+                             false);
+    InspectorUI.closeInspectorUI();
   }
 
   function finishUp() {
+    Services.obs.removeObserver(finishUp,
+                                InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = node = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_674871.js b/browser/devtools/highlighter/test/browser_inspector_bug_674871.js
similarity index 68%
rename from browser/devtools/inspector/test/browser_inspector_bug_674871.js
rename to browser/devtools/highlighter/test/browser_inspector_bug_674871.js
index ed448d8f161..6b6e3d16742 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_674871.js
@@ -1,6 +1,7 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+
 function test()
 {
   waitForExplicitFinish();
@@ -45,45 +46,52 @@ function test()
     iframeBodyNode = iframeNode.contentDocument.querySelector("body");
     ok(iframeNode, "we have the iframe node");
     ok(iframeBodyNode, "we have the body node");
-    openInspector(runTests);
+    Services.obs.addObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function runTests(inspector)
+  function runTests()
   {
+    Services.obs.removeObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
     executeSoon(function() {
-      inspector.highlighter.once("highlighting", isTheIframeSelected);
+      InspectorUI.highlighter.addListener("nodeselected", isTheIframeSelected);
+
       moveMouseOver(iframeNode, 1, 1);
     });
   }
 
   function isTheIframeSelected()
   {
-    let inspector = getActiveInspector();
+    InspectorUI.highlighter.removeListener("nodeselected", isTheIframeSelected);
 
-    is(inspector.selection.node, iframeNode, "selection matches node");
+    is(InspectorUI.selection, iframeNode, "selection matches node");
     iframeNode.style.marginBottom = doc.defaultView.innerHeight + "px";
     doc.defaultView.scrollBy(0, 40);
 
     executeSoon(function() {
-      inspector.selection.once("new-node", isTheIframeContentSelected);
+      InspectorUI.highlighter.addListener("nodeselected", isTheIframeContentSelected);
       moveMouseOver(iframeNode, 40, 40);
     });
   }
 
   function isTheIframeContentSelected()
   {
-    let inspector = getActiveInspector();
-    is(inspector.selection.node, iframeBodyNode, "selection matches node");
+    InspectorUI.highlighter.removeListener("nodeselected", isTheIframeContentSelected);
+    is(InspectorUI.selection, iframeBodyNode, "selection matches node");
     // 184 == 200 + 11(border) + 13(padding) - 40(scroll)
-    is(inspector.highlighter._highlightRect.height, 184,
+    is(InspectorUI.highlighter._highlightRect.height, 184,
       "highlighter height");
 
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
-    finishUp();
+    Services.obs.addObserver(finishUp,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    InspectorUI.closeInspectorUI();
   }
 
   function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = iframeNode = iframeBodyNode = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_690361.js b/browser/devtools/highlighter/test/browser_inspector_bug_690361.js
new file mode 100644
index 00000000000..c60a258acf5
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_690361.js
@@ -0,0 +1,107 @@
+/* -*- Mode: C++; 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/. */
+
+let doc;
+let salutation;
+let closing;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
+    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
+    '<h1>Some header text</h1>\n' +
+    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
+    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
+    'solely to provide some things to test the inspector initialization.</p>\n' +
+    'If you are reading this, you should go do something else instead. Maybe ' +
+    'read a book. Or better yet, write some test-cases for another bit of code. ' +
+    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
+    '<p id="closing">end transmission</p>\n' +
+    '</div>';
+  doc.title = "Inspector Opening and Closing Test";
+  startInspectorTests();
+}
+
+function startInspectorTests()
+{
+  ok(InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests()
+{
+  Services.obs.removeObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  Services.obs.addObserver(closeInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+  ok(InspectorUI.toolbar, "we have the toolbar.");
+  ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
+  ok(InspectorUI.inspecting, "Inspector is inspecting");
+  ok(!InspectorUI.currentInspector._markupOpen, "Inspector Tree Panel is not open");
+  ok(InspectorUI.highlighter, "Highlighter is up");
+
+  salutation = doc.getElementById("salutation");
+  InspectorUI.inspectNode(salutation);
+
+  let button = document.getElementById("highlighter-closebutton");
+  button.click();
+}
+
+function closeInspectorTests()
+{
+  Services.obs.removeObserver(closeInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+  Services.obs.addObserver(inspectorOpenedTrap,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  ok(!InspectorUI.isInspectorOpen, "Inspector is not open");
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    gBrowser.removeCurrentTab();
+  }, true);
+
+  gBrowser.tabContainer.addEventListener("TabSelect", finishInspectorTests, false);
+}
+
+function inspectorOpenedTrap()
+{
+  ok(false, "Inspector opened! Should not have done so.");
+  InspectorUI.closeInspectorUI(false);
+}
+
+function finishInspectorTests()
+{
+  gBrowser.tabContainer.removeEventListener("TabSelect", finishInspectorTests, false);
+
+  Services.obs.removeObserver(inspectorOpenedTrap,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  requestLongerTimeout(4); // give the inspector a chance to open
+  executeSoon(function() {
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  ignoreAllUncaughtExceptions();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
new file mode 100644
index 00000000000..50beccc16e2
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let iframe;
+let iframeLoads = 0;
+let checksAfterLoads = false;
+
+function startTest() {
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests() {
+  Services.obs.removeObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+
+  iframe = content.document.querySelector("iframe");
+  ok(iframe, "found the iframe element");
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.isInspectorOpen, "Inspector is open");
+
+  Services.obs.addObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+  iframe.addEventListener("load", onIframeLoad, false);
+
+  executeSoon(function() {
+    iframe.contentWindow.location = "javascript:location.reload()";
+  });
+}
+
+function onIframeLoad() {
+  if (++iframeLoads != 2) {
+    executeSoon(function() {
+      iframe.contentWindow.location = "javascript:location.reload()";
+    });
+    return;
+  }
+
+  iframe.removeEventListener("load", onIframeLoad, false);
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting after iframe nav");
+  ok(InspectorUI.isInspectorOpen, "Inspector Panel is open after iframe nav");
+
+  checksAfterLoads = true;
+
+  InspectorUI.closeInspectorUI();
+}
+
+function finishTest() {
+  Services.obs.removeObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+
+  is(iframeLoads, 2, "iframe loads");
+  ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
+  ok(!InspectorUI.isInspectorOpen, "Inspector Panel is not open");
+
+  iframe = null;
+  gBrowser.removeCurrentTab();
+  executeSoon(finish);
+}
+
+function test() {
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
+    waitForFocus(startTest, content);
+  }, true);
+
+  content.location = "data:text/html,<p>bug 699308 - test iframe navigation" +
+    "<iframe src='data:text/html,hello world'></iframe>";
+}
diff --git a/browser/devtools/highlighter/test/browser_inspector_changes.js b/browser/devtools/highlighter/test/browser_inspector_changes.js
new file mode 100644
index 00000000000..ce122a01341
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_changes.js
@@ -0,0 +1,124 @@
+/* -*- Mode: C++; 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/. */
+let doc;
+let testDiv;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
+  doc.title = "Inspector Change Test";
+  startInspectorTests();
+}
+
+
+function getInspectorProp(aName)
+{
+  for each (let view in computedViewTree().propertyViews) {
+    if (view.name == aName) {
+      return view;
+    }
+  }
+  return null;
+}
+
+function startInspectorTests()
+{
+  ok(InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests()
+{
+  Services.obs.removeObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  testDiv = doc.getElementById("testdiv");
+
+  testDiv.style.fontSize = "10px";
+
+  InspectorUI.inspectNode(testDiv);
+  InspectorUI.stopInspecting();
+
+  // Start up the style inspector panel...
+  Services.obs.addObserver(stylePanelTests, "StyleInspector-populated", false);
+
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("computedview");
+}
+
+function stylePanelTests()
+{
+  Services.obs.removeObserver(stylePanelTests, "StyleInspector-populated");
+
+  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
+  ok(computedViewTree(), "Style Panel has a cssHtmlTree");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "10px", "Style inspector should be showing the correct font size.");
+
+  Services.obs.addObserver(stylePanelAfterChange, "StyleInspector-populated", false);
+
+  testDiv.style.fontSize = "15px";
+  InspectorUI.nodeChanged();
+}
+
+function stylePanelAfterChange()
+{
+  Services.obs.removeObserver(stylePanelAfterChange, "StyleInspector-populated");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "15px", "Style inspector should be showing the new font size.");
+
+  stylePanelNotActive();
+}
+
+function stylePanelNotActive()
+{
+  // Tests changes made while the style panel is not active.
+  InspectorUI.sidebar.activatePanel("ruleview");
+
+  executeSoon(function() {
+    Services.obs.addObserver(stylePanelAfterSwitch, "StyleInspector-populated", false);
+    testDiv.style.fontSize = "20px";
+    InspectorUI.nodeChanged();
+    InspectorUI.sidebar.activatePanel("computedview");
+  });
+}
+
+function stylePanelAfterSwitch()
+{
+  Services.obs.removeObserver(stylePanelAfterSwitch, "StyleInspector-populated");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "20px", "Style inspector should be showing the newest font size.");
+
+  Services.obs.addObserver(finishTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI(true);
+  });
+}
+
+function finishTest()
+{
+  Services.obs.removeObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/inspector/test/browser_inspector_cmd_inspect.html b/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.html
similarity index 100%
rename from browser/devtools/inspector/test/browser_inspector_cmd_inspect.html
rename to browser/devtools/highlighter/test/browser_inspector_cmd_inspect.html
diff --git a/browser/devtools/inspector/test/browser_inspector_cmd_inspect.js b/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js
similarity index 97%
rename from browser/devtools/inspector/test/browser_inspector_cmd_inspect.js
rename to browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js
index 545e60799c7..3879ffbebed 100644
--- a/browser/devtools/inspector/test/browser_inspector_cmd_inspect.js
+++ b/browser/devtools/highlighter/test/browser_inspector_cmd_inspect.js
@@ -3,7 +3,7 @@
 
 // Tests that the inspect command works as it should
 
-const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
+const TEST_URI = "http://example.com/browser/browser/devtools/highlighter/" +
                  "test/browser_inspector_cmd_inspect.html";
 
 function test() {
diff --git a/browser/devtools/inspector/test/browser_inspector_destroyselection.html b/browser/devtools/highlighter/test/browser_inspector_destroyselection.html
similarity index 100%
rename from browser/devtools/inspector/test/browser_inspector_destroyselection.html
rename to browser/devtools/highlighter/test/browser_inspector_destroyselection.html
diff --git a/browser/devtools/inspector/test/browser_inspector_destroyselection.js b/browser/devtools/highlighter/test/browser_inspector_destroyselection.js
similarity index 55%
rename from browser/devtools/inspector/test/browser_inspector_destroyselection.js
rename to browser/devtools/highlighter/test/browser_inspector_destroyselection.js
index bf24c5e34d0..73fe34d71a2 100644
--- a/browser/devtools/inspector/test/browser_inspector_destroyselection.js
+++ b/browser/devtools/highlighter/test/browser_inspector_destroyselection.js
@@ -6,7 +6,7 @@ function test()
   waitForExplicitFinish();
   //ignoreAllUncaughtExceptions();
 
-  let node, iframe, inspector;
+  let node, iframe;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -14,28 +14,42 @@ function test()
     waitForFocus(setupTest, content);
   }, true);
 
-  content.location = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_destroyselection.html";
+  content.location = "http://mochi.test:8888/browser/browser/devtools/highlighter/test/browser_inspector_destroyselection.html";
 
   function setupTest()
   {
     iframe = content.document.querySelector("iframe");
     node = iframe.contentDocument.querySelector("span");
-    openInspector(runTests);
+
+    Services.obs.addObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.openInspectorUI(node);
   }
 
-  function runTests(aInspector)
+  function runTests()
   {
-    inspector = aInspector;
-    inspector.selection.setNode(node);
-
+    Services.obs.removeObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    is(InspectorUI.selection, node, "node selected");
     iframe.parentNode.removeChild(iframe);
     iframe = null;
 
     let tmp = {};
     Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tmp);
     ok(!tmp.LayoutHelpers.isNodeConnected(node), "Node considered as disconnected.");
-    ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
 
+    Services.obs.addObserver(testBreadcrumbs,
+                             InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+    executeSoon(function() {
+      InspectorUI.closeInspectorUI();
+    });
+  }
+
+  function testBreadcrumbs()
+  {
+    Services.obs.removeObserver(testBreadcrumbs, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    ok(!InspectorUI.breadcrumbs, "Breadcrumbs destroyed");
     finishUp();
   }
 
diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter.js b/browser/devtools/highlighter/test/browser_inspector_highlighter.js
similarity index 78%
rename from browser/devtools/inspector/test/browser_inspector_highlighter.js
rename to browser/devtools/highlighter/test/browser_inspector_highlighter.js
index d7ad02c8486..b2b0c133f18 100644
--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/highlighter/test/browser_inspector_highlighter.js
@@ -48,45 +48,56 @@ function createDocument()
   doc.body.appendChild(div2);
   doc.body.appendChild(div3);
 
-  openInspector(setupHighlighterTests);
+  setupHighlighterTests();
 }
 
 function setupHighlighterTests()
 {
   h1 = doc.querySelector("h1");
   ok(h1, "we have the header");
+  Services.obs.addObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
 
-  let i = getActiveInspector();
-  i.highlighter.unlock();
-  i.highlighter.outline.setAttribute("disable-transitions", "true");
+function runSelectionTests(subject)
+{
+  Services.obs.removeObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  is(subject.wrappedJSObject, InspectorUI,
+     "InspectorUI accessible in the observer");
+
+  InspectorUI.highlighter.outline.setAttribute("disable-transitions", "true");
 
   executeSoon(function() {
-    i.selection.once("new-node", performTestComparisons);
+    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
   });
 }
 
 function performTestComparisons(evt)
 {
-  let i = getActiveInspector();
-  i.highlighter.lock();
+  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
+
+  InspectorUI.stopInspecting();
   ok(isHighlighting(), "highlighter is highlighting");
   is(getHighlitNode(), h1, "highlighter matches selection")
-  is(i.selection.node, h1, "selection matches node");
-  is(i.selection.node, getHighlitNode(), "selection matches highlighter");
+  is(InspectorUI.selection, h1, "selection matches node");
+  is(InspectorUI.selection, getHighlitNode(), "selection matches highlighter");
 
 
   div = doc.querySelector("div#checkOutThisWickedSpread");
 
   executeSoon(function() {
-    i.selection.once("new-node", finishTestComparisons);
-    i.selection.setNode(div);
+    InspectorUI.highlighter.addListener("nodeselected", finishTestComparisons);
+    InspectorUI.inspectNode(div);
   });
 }
 
 function finishTestComparisons()
 {
-  let i = getActiveInspector();
+  InspectorUI.highlighter.removeListener("nodeselected", finishTestComparisons);
 
   // get dimensions of div element
   let divDims = div.getBoundingClientRect();
@@ -94,7 +105,8 @@ function finishTestComparisons()
   let divHeight = divDims.height;
 
   // get dimensions of the outline
-  let outlineDims = i.highlighter.outline.getBoundingClientRect();
+  let outlineDims = 
+    InspectorUI.highlighter.outline.getBoundingClientRect();
   let outlineWidth = outlineDims.width;
   let outlineHeight = outlineDims.height;
 
@@ -103,7 +115,7 @@ function finishTestComparisons()
   //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
 
   // zoom the page by a factor of 2
-  let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
+  let contentViewer = InspectorUI.browser.docShell.contentViewer
                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
   contentViewer.fullZoom = 2;
 
@@ -112,7 +124,7 @@ function finishTestComparisons()
 
   window.setTimeout(function() {
     // check what zoom factor we're at, should be 2
-    let zoom = i.highlighter.zoom;
+    let zoom = InspectorUI.highlighter.zoom;
     is(zoom, 2, "zoom is 2?");
 
     // simulate the zoomed dimensions of the div element
@@ -121,7 +133,8 @@ function finishTestComparisons()
     let divHeight = divDims.height * zoom;
 
     // now zoomed, get new dimensions the outline
-    let outlineDims = i.highlighter.outline.getBoundingClientRect();
+    let outlineDims = 
+      InspectorUI.highlighter.outline.getBoundingClientRect();
     let outlineWidth = outlineDims.width;
     let outlineHeight = outlineDims.height;
 
@@ -135,8 +148,7 @@ function finishTestComparisons()
 }
 
 function finishUp() {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.closeToolbox(target);
+  InspectorUI.closeInspectorUI();
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js b/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
new file mode 100644
index 00000000000..5878b4f12f8
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let doc;
+
+function createDocument() {
+  doc.body.innerHTML = '<h1>highlighter autohide test</h1>';
+
+  InspectorUI.openInspectorUI(doc.querySelector("h1"));
+
+  // Open the sidebar and wait for the default view (the rule view) to show.
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", inspectorRuleViewOpened);
+
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
+}
+
+function inspectorRuleViewOpened() {
+  let deck = InspectorUI.sidebar._deck;
+
+  EventUtils.synthesizeMouse(InspectorUI.highlighter.highlighterContainer, 2, 2, {type: "mousemove"}, window);
+
+  executeSoon(function() {
+    ok(!InspectorUI.highlighter.hidden, "Outline visible (1)");
+
+    EventUtils.synthesizeMouse(deck, 10, 2, {type: "mousemove"}, window);
+
+    executeSoon(function() {
+      ok(InspectorUI.highlighter.hidden, "Outline not visible");
+
+      EventUtils.synthesizeMouse(deck, -10, 2, {type: "mousemove"}, window);
+
+      executeSoon(function() {
+        ok(!InspectorUI.highlighter.hidden, "Outline visible (2)");
+        finishTest();
+      });
+    });
+  });
+}
+
+function finishTest() {
+  InspectorUI.closeInspectorUI();
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test() {
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for highlighter";
+}
+
+
diff --git a/browser/devtools/inspector/test/browser_inspector_iframeTest.js b/browser/devtools/highlighter/test/browser_inspector_iframeTest.js
similarity index 72%
rename from browser/devtools/inspector/test/browser_inspector_iframeTest.js
rename to browser/devtools/highlighter/test/browser_inspector_iframeTest.js
index 8d23b0493f4..f146046ef74 100644
--- a/browser/devtools/inspector/test/browser_inspector_iframeTest.js
+++ b/browser/devtools/highlighter/test/browser_inspector_iframeTest.js
@@ -32,7 +32,7 @@ function createDocument()
       div2.textContent = 'nested div';
       iframe2.contentDocument.body.appendChild(div2);
 
-      openInspector(runIframeTests);
+      setupIframeTests();
     }, false);
 
     iframe2.src = 'data:text/html,nested iframe';
@@ -49,29 +49,43 @@ function moveMouseOver(aElement)
     aElement.ownerDocument.defaultView);
 }
 
+function setupIframeTests()
+{
+  Services.obs.addObserver(runIframeTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
 function runIframeTests()
 {
-  getActiveInspector().selection.once("new-node", performTestComparisons1);
-  moveMouseOver(div1)
+  Services.obs.removeObserver(runIframeTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+
+  executeSoon(function() {
+    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons1);
+    moveMouseOver(div1)
+  });
 }
 
 function performTestComparisons1()
 {
-  let i = getActiveInspector();
-  is(i.selection.node, div1, "selection matches div1 node");
+  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons1);
+
+  is(InspectorUI.selection, div1, "selection matches div1 node");
   is(getHighlitNode(), div1, "highlighter matches selection");
 
-  i.selection.once("new-node", performTestComparisons2);
   executeSoon(function() {
+    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons2);
     moveMouseOver(div2);
   });
 }
 
 function performTestComparisons2()
 {
-  let i = getActiveInspector();
+  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons2);
 
-  is(i.selection.node, div2, "selection matches div2 node");
+  is(InspectorUI.selection, div2, "selection matches div2 node");
   is(getHighlitNode(), div2, "highlighter matches selection");
 
   finish();
@@ -91,8 +105,7 @@ function test() {
   content.location = "data:text/html,iframe tests for inspector";
 
   registerCleanupFunction(function () {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
+    InspectorUI.closeInspectorUI(true);
     gBrowser.removeCurrentTab();
   });
 }
diff --git a/browser/devtools/inspector/test/browser_inspector_infobar.js b/browser/devtools/highlighter/test/browser_inspector_infobar.js
similarity index 72%
rename from browser/devtools/inspector/test/browser_inspector_infobar.js
rename to browser/devtools/highlighter/test/browser_inspector_infobar.js
index 1e20539cd1f..1ca3ed741c9 100644
--- a/browser/devtools/inspector/test/browser_inspector_infobar.js
+++ b/browser/devtools/highlighter/test/browser_inspector_infobar.js
@@ -9,7 +9,6 @@ function test()
   let doc;
   let nodes;
   let cursor;
-  let inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
@@ -37,15 +36,19 @@ function test()
       ok(nodes[i].node, "node " + i + " found");
     }
 
-    openInspector(runTests);
+    Services.obs.addObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function runTests(aInspector)
+  function runTests()
   {
-    inspector = aInspector;
+    Services.obs.removeObserver(runTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
     cursor = 0;
     executeSoon(function() {
-      inspector.selection.setNode(nodes[0].node, "");
+      InspectorUI.inspectNode(nodes[0].node);
       nodeSelected();
     });
   }
@@ -56,10 +59,16 @@ function test()
       performTest();
       cursor++;
       if (cursor >= nodes.length) {
-        finishUp();
+
+        Services.obs.addObserver(finishUp,
+          InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+        executeSoon(function() {
+          InspectorUI.closeInspectorUI();
+        });
       } else {
         let node = nodes[cursor].node;
-        inspector.selection.setNode(node, "");
+        InspectorUI.inspectNode(node);
         nodeSelected();
       }
     });
@@ -67,23 +76,21 @@ function test()
 
   function performTest()
   {
-    let browser = gBrowser.selectedBrowser;
-    let stack = browser.parentNode;
-
-    let container = stack.querySelector(".highlighter-nodeinfobar-container");
+    let container = document.getElementById("highlighter-nodeinfobar-container");
     is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");
 
-    let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
+    let tagNameLabel = document.getElementById("highlighter-nodeinfobar-tagname");
     is(tagNameLabel.textContent, nodes[cursor].tag, "node " + cursor  + ": tagName matches.");
 
-    let idLabel = stack.querySelector(".highlighter-nodeinfobar-id");
+    let idLabel = document.getElementById("highlighter-nodeinfobar-id");
     is(idLabel.textContent, nodes[cursor].id, "node " + cursor  + ": id matches.");
 
-    let classesBox = stack.querySelector(".highlighter-nodeinfobar-classes");
+    let classesBox = document.getElementById("highlighter-nodeinfobar-classes");
     is(classesBox.textContent, nodes[cursor].classes, "node " + cursor  + ": classes match.");
   }
 
   function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     doc = nodes = null;
     gBrowser.removeCurrentTab();
     finish();
diff --git a/browser/devtools/highlighter/test/browser_inspector_initialization.js b/browser/devtools/highlighter/test/browser_inspector_initialization.js
new file mode 100644
index 00000000000..3c8c84b8328
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_initialization.js
@@ -0,0 +1,191 @@
+/* -*- Mode: C++; 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/. */
+let doc;
+let salutation;
+let closing;
+let winId;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
+    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
+    '<h1>Some header text</h1>\n' +
+    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
+    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
+    'solely to provide some things to test the inspector initialization.</p>\n' +
+    'If you are reading this, you should go do something else instead. Maybe ' +
+    'read a book. Or better yet, write some test-cases for another bit of code. ' +
+    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
+    '<p id="closing">end transmission</p>\n' +
+    '</div>';
+  doc.title = "Inspector Initialization Test";
+  startInspectorTests();
+}
+
+function startInspectorTests()
+{
+  ok(InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests()
+{
+  Services.obs.removeObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  ok(InspectorUI.toolbar, "we have the toolbar.");
+  ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
+  ok(InspectorUI.inspecting, "Inspector is inspecting");
+  ok(!InspectorUI.markupOpen, "Inspector Tree Panel is not open");
+  ok(!InspectorUI.sidebar.visible, "Inspector sidebar should not visible.");
+  ok(InspectorUI.highlighter, "Highlighter is up");
+  InspectorUI.inspectNode(doc.body);
+  InspectorUI.stopInspecting();
+
+  InspectorUI.currentInspector.once("markuploaded", treePanelTests);
+  InspectorUI.currentInspector.openMarkup();
+}
+
+function treePanelTests()
+{
+  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
+
+  InspectorUI.toggleSidebar();
+  ok(InspectorUI.sidebar.visible, "Inspector Sidebar should be open");
+  InspectorUI.toggleSidebar();
+  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar should be closed");
+  InspectorUI.sidebar.show();
+  InspectorUI.currentInspector.once("sidebaractivated-computedview",
+    stylePanelTests)
+  InspectorUI.sidebar.activatePanel("computedview");
+}
+
+function stylePanelTests()
+{
+  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
+  is(InspectorUI.sidebar.activePanel, "computedview", "Computed View is open");
+  ok(computedViewTree(), "Computed view has a cssHtmlTree");
+
+  InspectorUI.sidebar.activatePanel("ruleview");
+  executeSoon(function() {
+    ruleViewTests();
+  });
+}
+
+function ruleViewTests()
+{
+  Services.obs.addObserver(runContextMenuTest,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+  is(InspectorUI.sidebar.activePanel, "ruleview", "Rule View is open");
+  ok(ruleView(), "InspectorUI has a cssRuleView");
+
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI();
+  });
+}
+
+function runContextMenuTest()
+{
+  Services.obs.removeObserver(runContextMenuTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  Services.obs.addObserver(inspectNodesFromContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  salutation = doc.getElementById("salutation");
+  ok(salutation, "hello, context menu test!");
+  let eventDeets = { type : "contextmenu", button : 2 };
+  let contextMenu = document.getElementById("contentAreaContextMenu");
+  ok(contextMenu, "we have the context menu");
+  let contextInspectMenuItem = document.getElementById("context-inspect");
+  ok(contextInspectMenuItem, "we have the inspect context menu item");
+  EventUtils.synthesizeMouse(salutation, 2, 2, eventDeets);
+  is(contextMenu.state, "showing", "context menu is open");
+  is(!contextInspectMenuItem.hidden, gPrefService.getBoolPref("devtools.inspector.enabled"), "is context menu item enabled?");
+  contextMenu.hidePopup();
+  executeSoon(function() {
+    InspectorUI.openInspectorUI(salutation);
+  });
+}
+
+function inspectNodesFromContextTest()
+{
+  Services.obs.removeObserver(inspectNodesFromContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  Services.obs.addObserver(openInspectorForContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  ok(!InspectorUI.inspecting, "Inspector is not actively highlighting");
+  is(InspectorUI.selection, salutation, "Inspector is highlighting salutation");
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI(true);
+  });
+}
+
+function openInspectorForContextTest()
+{
+  Services.obs.removeObserver(openInspectorForContextTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+  Services.obs.addObserver(inspectNodesFromContextTestWhileOpen, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  executeSoon(function() {
+    InspectorUI.openInspectorUI(salutation);
+  });
+}
+
+function inspectNodesFromContextTestWhileOpen()
+{
+  Services.obs.removeObserver(inspectNodesFromContextTestWhileOpen, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  Services.obs.addObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.highlighter.addListener("nodeselected", inspectNodesFromContextTestHighlight);
+  is(InspectorUI.selection, salutation, "Inspector is highlighting salutation");
+  closing = doc.getElementById("closing");
+  ok(closing, "we have the closing statement");
+  executeSoon(function() {
+    InspectorUI.openInspectorUI(closing);
+  });
+}
+
+function inspectNodesFromContextTestHighlight()
+{
+  winId = InspectorUI.winID;
+  InspectorUI.highlighter.removeListener("nodeselected", inspectNodesFromContextTestHighlight);
+  Services.obs.addObserver(finishInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED, false);
+  is(InspectorUI.selection, closing, "InspectorUI.selection is header");
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI();
+  });
+}
+
+function inspectNodesFromContextTestTrap()
+{
+  Services.obs.removeObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  ok(false, "Inspector UI has been opened again. We Should Not Be Here!");
+}
+
+function finishInspectorTests(subject, topic, aWinIdString)
+{
+  Services.obs.removeObserver(finishInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED);
+
+  is(parseInt(aWinIdString), winId, "winId of destroyed Inspector matches");
+  ok(!InspectorUI.highlighter, "Highlighter is gone");
+  ok(!InspectorUI.inspecting, "Inspector is not inspecting");
+  ok(!InspectorUI._sidebar, "Inspector Sidebar is closed");
+  ok(!InspectorUI.toolbar, "toolbar is hidden");
+
+  Services.obs.removeObserver(inspectNodesFromContextTestTrap, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_invalidate.js b/browser/devtools/highlighter/test/browser_inspector_invalidate.js
new file mode 100644
index 00000000000..dba5cd7862d
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_invalidate.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let doc;
+let div;
+
+function createDocument()
+{
+  div = doc.createElement("div");
+  div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
+  doc.body.appendChild(div);
+
+  Services.obs.addObserver(runTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runTest(subject)
+{
+  Services.obs.removeObserver(runTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  InspectorUI.highlighter.highlight(div);
+
+  executeSoon(function() {
+    let outline = InspectorUI.highlighter.outline;
+    is(outline.style.width, "100px", "selection has the right width");
+
+    div.style.width = "200px";
+    function pollTest() {
+      if (outline.style.width == "100px") {
+    	setTimeout(pollTest, 10);
+    	return;
+      }
+      is(outline.style.width, "200px", "selection updated");
+      InspectorUI.closeInspectorUI();
+      gBrowser.removeCurrentTab();
+      finish();
+    }
+    setTimeout(pollTest, 10);
+  });
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_keybindings.js b/browser/devtools/highlighter/test/browser_inspector_keybindings.js
new file mode 100644
index 00000000000..4e8fc459d8f
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_keybindings.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  let doc;
+  let node;
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    doc = content.document;
+    waitForFocus(setupKeyBindingsTest, content);
+  }, true);
+
+  content.location = "data:text/html,<h1>foobar</h1>";
+
+  function setupKeyBindingsTest()
+  {
+    node = doc.querySelector("h1");
+    Services.obs.addObserver(highlightNode,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
+  }
+
+  function highlightNode()
+  {
+    Services.obs.removeObserver(highlightNode,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+    executeSoon(function() {
+      InspectorUI.highlighter.addListener("nodeselected", lockNode);
+      InspectorUI.inspectNode(node);
+    });
+  }
+
+  function lockNode()
+  {
+    InspectorUI.highlighter.removeListener("nodeselected", lockNode);
+    synthesizeKeyFromKeyTag("key_inspect");
+    executeSoon(isTheNodeLocked);
+  }
+
+  function isTheNodeLocked()
+  {
+    is(InspectorUI.selection, node, "selection matches node");
+    ok(!InspectorUI.inspecting, "the node is locked");
+    unlockNode();
+  }
+
+  function unlockNode() {
+    synthesizeKeyFromKeyTag("key_inspect");
+    executeSoon(isTheNodeUnlocked);
+  }
+
+  function isTheNodeUnlocked()
+  {
+    ok(InspectorUI.inspecting, "the node is unlocked");
+
+    // Let's close the inspector
+    Services.obs.addObserver(finishUp,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+    EventUtils.synthesizeKey("VK_ESCAPE", {});
+    ok(true, "Inspector is closing successfuly");
+  }
+
+  function finishUp() {
+    Services.obs.removeObserver(finishUp,
+                                InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    doc = node = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+}
diff --git a/browser/devtools/inspector/test/browser_inspector_menu.js b/browser/devtools/highlighter/test/browser_inspector_menu.js
similarity index 62%
rename from browser/devtools/inspector/test/browser_inspector_menu.js
rename to browser/devtools/highlighter/test/browser_inspector_menu.js
index 88f0c57e6de..61c95ed1a7c 100644
--- a/browser/devtools/inspector/test/browser_inspector_menu.js
+++ b/browser/devtools/highlighter/test/browser_inspector_menu.js
@@ -9,7 +9,6 @@ function test() {
   let doc;
   let node1;
   let div;
-  let inspector;
 
   function createDocument() {
     div = doc.createElement("div");
@@ -23,7 +22,7 @@ function test() {
     div.appendChild(p1);
     doc.body.appendChild(div);
     node1 = p1;
-    openInspector(runTests);
+    setupTest();
   }
 
   gBrowser.selectedTab = gBrowser.addTab();
@@ -35,14 +34,20 @@ function test() {
 
   content.location = content.location = "data:text/html,basic tests for inspector";;
 
-  function runTests(aInspector) {
-    inspector = aInspector;
-    inspector.selection.setNode(node1);
+  function setupTest() {
+    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
+  }
+
+  function runTests() {
+    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    InspectorUI.stopInspecting();
+    InspectorUI.inspectNode(node1, true);
     testCopyInnerMenu();
   }
 
   function testCopyInnerMenu() {
-    let copyInner = inspector.panelDoc.getElementById("node-menu-copyinner");
+    let copyInner = document.getElementById("inspectorHTMLCopyInner");
     ok(copyInner, "the popup menu has a copy inner html menu item");
 
     waitForClipboard("This is some example text",
@@ -51,7 +56,7 @@ function test() {
   }
 
   function testCopyOuterMenu() {
-    let copyOuter = inspector.panelDoc.getElementById("node-menu-copyouter");
+    let copyOuter = document.getElementById("inspectorHTMLCopyOuter");
     ok(copyOuter, "the popup menu has a copy outer html menu item");
 
     waitForClipboard("<p>This is some example text</p>",
@@ -60,10 +65,10 @@ function test() {
   }
 
   function testDeleteNode() {
-    let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
+    let deleteNode = document.getElementById("inspectorHTMLDelete");
     ok(deleteNode, "the popup menu has a delete menu item");
 
-    inspector.selection.once("detached", deleteTest);
+    InspectorUI.highlighter.addListener("nodeselected", deleteTest);
 
     let commandEvent = document.createEvent("XULCommandEvent");
     commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
@@ -72,16 +77,19 @@ function test() {
   }
 
   function deleteTest() {
+    InspectorUI.highlighter.removeListener("nodeselected", deleteTest);
+    is(InspectorUI.selection, div, "parent node selected");
     let p = doc.querySelector("P");
     is(p, null, "node deleted");
 
-    deleteRootNode();
+    InspectorUI.highlighter.addListener("nodeselected", deleteRootNode);
+    InspectorUI.inspectNode(doc.documentElement, true);
   }
 
   function deleteRootNode() {
-    inspector.selection.setNode(doc.documentElement);
-    let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
-    let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
+    InspectorUI.highlighter.removeListener("nodeselected", deleteRootNode);
+    let deleteNode = document.getElementById("inspectorHTMLDelete");
+    let commandEvent = document.createEvent("XULCommandEvent");
     commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
                                   false, false, null);
     deleteNode.dispatchEvent(commandEvent);
@@ -90,6 +98,15 @@ function test() {
 
   function isRootStillAlive() {
     ok(doc.documentElement, "Document element still alive.");
+    Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    executeSoon(function() {
+      InspectorUI.closeInspectorUI();
+    });
+  }
+
+  function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    doc = node1 = div = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js b/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
new file mode 100644
index 00000000000..5cbcceb88de
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_pseudoClass_menu.js
@@ -0,0 +1,87 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+
+let pseudos = [":hover", ":active", ":focus"];
+
+let doc;
+let div;
+let menu;
+
+function test()
+{
+  waitForExplicitFinish();
+  ignoreAllUncaughtExceptions();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,pseudo-class lock node menu tests";
+}
+
+function createDocument()
+{
+  div = doc.createElement("div");
+  div.textContent = "test div";
+
+  doc.body.appendChild(div);
+
+  setupTests();
+}
+
+function setupTests()
+{
+  Services.obs.addObserver(selectNode,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function selectNode()
+{
+  Services.obs.removeObserver(selectNode,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  executeSoon(function() {
+    InspectorUI.highlighter.addListener("nodeselected", performTests);
+    InspectorUI.inspectNode(div);
+  });
+}
+
+function performTests()
+{
+  InspectorUI.highlighter.removeListener("nodeselected", performTests);
+
+  menu = document.getElementById("highlighter-node-menu");
+  menu.addEventListener("popupshowing", testMenuItems, true);
+
+  menu.openPopup();
+}
+
+function testMenuItems()
+{
+  menu.removeEventListener("popupshowing", testMenuItems, true);
+
+  for each (let pseudo in pseudos) {
+    let menuitem = document.getElementById("highlighter-pseudo-class-menuitem-"
+                   + pseudo);
+    ok(menuitem, pseudo + " menuitem exists");
+
+    menuitem.doCommand();
+
+    is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
+       "pseudo-class lock has been applied");
+  }
+  finishUp();
+}
+
+function finishUp()
+{
+  InspectorUI.closeInspectorUI();
+  doc = div = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js b/browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js
similarity index 59%
rename from browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
rename to browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js
index 6f8fc29a7c4..6dcfee24d91 100644
--- a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
+++ b/browser/devtools/highlighter/test/browser_inspector_pseudoclass_lock.js
@@ -1,16 +1,10 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 
 let doc;
 let div;
-let inspector;
-let ruleview;
 
 let pseudo = ":hover";
 
@@ -41,38 +35,57 @@ function createDocument()
   head.appendChild(style);
   doc.body.appendChild(div);
 
-  openInspector(selectNode);
+  setupTests();
 }
 
-function selectNode(aInspector)
+function setupTests()
 {
-  inspector = aInspector;
-  inspector.selection.setNode(div);
-  inspector.sidebar.once("ruleview-ready", function() {
-    ruleview = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
-    inspector.sidebar.select("ruleview");
-    performTests();
+  Services.obs.addObserver(selectNode,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function selectNode()
+{
+  Services.obs.removeObserver(selectNode,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  executeSoon(function() {
+    InspectorUI.highlighter.addListener("locked", openRuleView);
+    InspectorUI.inspectNode(div);
+    InspectorUI.stopInspecting();
   });
 }
 
+function openRuleView()
+{
+  InspectorUI.sidebar.show();
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", performTests);
+  InspectorUI.sidebar.activatePanel("ruleview");
+}
+
 function performTests()
 {
+  InspectorUI.highlighter.removeListener("locked", performTests);
+
   // toggle the class
-  inspector.togglePseudoClass(pseudo);
+  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);
 
   testAdded();
 
   // toggle the lock off
-  inspector.togglePseudoClass(pseudo);
+  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);
 
   testRemoved();
   testRemovedFromUI();
 
   // toggle it back on
-  inspector.togglePseudoClass(pseudo);
+  InspectorUI.highlighter.pseudoClassLockToggled(pseudo);  
 
   // close the inspector
-  finishUp();
+  Services.obs.addObserver(testInspectorClosed,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  InspectorUI.closeInspectorUI();
 }
 
 function testAdded()
@@ -86,14 +99,14 @@ function testAdded()
   } while (node.parentNode)
 
   // infobar selector contains pseudo-class
-  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
+  let pseudoClassesBox = document.getElementById("highlighter-nodeinfobar-pseudo-classes");
   is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
-
+  
   // ruleview contains pseudo-class rule
-  is(ruleview.element.children.length, 3,
+  is(ruleView().element.children.length, 3,
      "rule view is showing 3 rules for pseudo-class locked div");
-
-  is(ruleview.element.children[1]._ruleEditor.rule.selectorText,
+     
+  is(ruleView().element.children[1]._ruleEditor.rule.selectorText,
      "div:hover", "rule view is showing " + pseudo + " rule");
 }
 
@@ -111,25 +124,27 @@ function testRemoved()
 function testRemovedFromUI()
 {
   // infobar selector doesn't contain pseudo-class
-  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
+  let pseudoClassesBox = document.getElementById("highlighter-nodeinfobar-pseudo-classes");
   is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");    
 
   // ruleview no longer contains pseudo-class rule
-  is(ruleview.element.children.length, 2,
+  is(ruleView().element.children.length, 2,
      "rule view is showing 2 rules after removing lock");    
 }
 
+function testInspectorClosed()
+{
+  Services.obs.removeObserver(testInspectorClosed,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+
+  testRemoved();
+
+  finishUp();  
+}
+
 function finishUp()
 {
-  gDevTools.once("toolbox-destroyed", function() {
-    testRemoved();
-    inspector = ruleview = null;
-    doc = div = null;
-    gBrowser.removeCurrentTab();
-    finish();
-  });
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  toolbox.destroy();
+  doc = div = null;
+  gBrowser.removeCurrentTab();
+  finish();
 }
diff --git a/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js b/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
new file mode 100644
index 00000000000..c4c8039654d
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
@@ -0,0 +1,105 @@
+/* -*- Mode: C++; 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/. */
+
+/**
+ * Tests that properties disabled in the rule view survive a tab switch.
+ */
+
+let div;
+let tab1;
+
+function waitForRuleView(aCallback)
+{
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", aCallback);
+}
+
+function inspectorTabOpen1()
+{
+  Services.obs.addObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen1()
+{
+  Services.obs.removeObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Highlight a node.
+  div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+  InspectorUI.stopInspecting();
+
+  // Open the rule view sidebar.
+  waitForRuleView(ruleViewOpened1);
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
+}
+
+function ruleViewOpened1()
+{
+  let prop = ruleView()._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  prop.setEnabled(false);
+
+  // Open second tab and switch to it
+  gBrowser.selectedTab = gBrowser.addTab();
+
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+                                                 true);
+    waitForFocus(inspectorTabOpen2, content);
+  }, true);
+  content.location = "data:text/html,<p>tab 2: the inspector should close now";
+}
+
+function inspectorTabOpen2()
+{
+  // Switch back to tab 1.
+  executeSoon(function() {
+    Services.obs.addObserver(inspectorFocusTab1,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    gBrowser.removeCurrentTab();
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorFocusTab1()
+{
+  Services.obs.removeObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Now wait for the rule view to load again...
+  waitForRuleView(ruleViewOpened2);
+}
+
+function ruleViewOpened2()
+{
+  let prop = ruleView()._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  ok(!prop.enabled, "First prop should be disabled.");
+
+  InspectorUI.closeInspectorUI();
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+
+  tab1 = gBrowser.addTab();
+  gBrowser.selectedTab = tab1;
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen1, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab switching tests for inspector" +
+    '<div style="background-color: green;">tab 1</div>';
+}
+
diff --git a/browser/devtools/inspector/test/browser_inspector_scrolling.js b/browser/devtools/highlighter/test/browser_inspector_scrolling.js
similarity index 76%
rename from browser/devtools/inspector/test/browser_inspector_scrolling.js
rename to browser/devtools/highlighter/test/browser_inspector_scrolling.js
index 85db0080e7e..2116188fbd7 100644
--- a/browser/devtools/inspector/test/browser_inspector_scrolling.js
+++ b/browser/devtools/highlighter/test/browser_inspector_scrolling.js
@@ -7,7 +7,6 @@
 let doc;
 let div;
 let iframe;
-let inspector;
 
 function createDocument()
 {
@@ -22,25 +21,35 @@ function createDocument()
     div.textContent = "big div";
     div.setAttribute("style", "height:500px; width:500px; border:1px solid gray;");
     iframe.contentDocument.body.appendChild(div);
-    openInspector(inspectNode);
+    toggleInspector();
   }, false);
 
   iframe.src = "data:text/html,foo bar";
   doc.body.appendChild(iframe);
 }
 
-function inspectNode(aInspector)
+function toggleInspector()
 {
-  inspector = aInspector;
+  Services.obs.addObserver(inspectNode, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function inspectNode()
+{
+  Services.obs.removeObserver(inspectNode,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  InspectorUI.highlighter.addListener("nodeselected", performScrollingTest);
 
-  inspector.highlighter.once("locked", performScrollingTest);
   executeSoon(function() {
-    inspector.selection.setNode(div, "");
+    InspectorUI.inspectNode(div);
   });
 }
 
 function performScrollingTest()
 {
+  InspectorUI.highlighter.removeListener("nodeselected", performScrollingTest);
+
   executeSoon(function() {
     EventUtils.synthesizeWheel(div, 10, 10,
       { deltaY: 50.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL },
@@ -53,9 +62,8 @@ function performScrollingTest()
 
     is(iframe.contentDocument.body.scrollTop, 50, "inspected iframe scrolled");
 
-    inspector = div = iframe = doc = null;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
+    div = iframe = doc = null;
+    InspectorUI.closeInspectorUI();
     gBrowser.removeCurrentTab();
     finish();
   }, false);
diff --git a/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js b/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
new file mode 100644
index 00000000000..4c0756beccd
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_sidebarstate.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let doc;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<h1>Sidebar state test</h1>';
+  doc.title = "Sidebar State Test";
+
+  InspectorUI.openInspectorUI();
+
+  // Open the sidebar and wait for the default view (the rule view) to show.
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", inspectorRuleViewOpened);
+
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
+}
+
+function inspectorRuleViewOpened()
+{
+  is(InspectorUI.sidebar.activePanel, "ruleview", "Rule View is selected by default");
+
+  // Select the computed view and turn off the inspector.
+  InspectorUI.sidebar.activatePanel("computedview");
+
+  Services.obs.addObserver(inspectorClosed,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  InspectorUI.closeInspectorUI();
+}
+
+function inspectorClosed()
+{
+  // Reopen the inspector, expect the computed view to be loaded.
+  Services.obs.removeObserver(inspectorClosed,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+
+  Services.obs.addObserver(computedViewPopulated,
+    "StyleInspector-populated", false);
+
+  InspectorUI.openInspectorUI();
+}
+
+function computedViewPopulated()
+{
+  Services.obs.removeObserver(computedViewPopulated,
+    "StyleInspector-populated");
+  is(InspectorUI.sidebar.activePanel, "computedview", "Computed view is selected by default.");
+
+  finishTest();
+}
+
+
+function finishTest()
+{
+  InspectorUI.closeInspectorUI();
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_tab_switch.js b/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
new file mode 100644
index 00000000000..9b01e0ebe3d
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_tab_switch.js
@@ -0,0 +1,247 @@
+/* -*- Mode: C++; 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/. */
+
+let div;
+let tab1;
+let tab2;
+let tab1window;
+
+function inspectorTabOpen1()
+{
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
+
+  Services.obs.addObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen1()
+{
+  Services.obs.removeObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar is not open");
+  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
+  // Highlight a node.
+  div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+  is(InspectorUI.selection, div, "selection matches the div element");
+
+  // Open the second tab.
+  tab2 = gBrowser.addTab();
+  gBrowser.selectedTab = tab2;
+
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen2, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab 2: the inspector should close now";
+}
+
+function inspectorTabOpen2()
+{
+  // Make sure the inspector is closed.
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
+  // Activate the inspector again.
+  executeSoon(function() {
+    Services.obs.addObserver(inspectorUIOpen2,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    clearUserPrefs();
+    InspectorUI.openInspectorUI();
+  });
+}
+
+function inspectorUIOpen2()
+{
+  Services.obs.removeObserver(inspectorUIOpen2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
+
+  // Disable highlighting.
+  InspectorUI.toggleInspection();
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+
+
+  // Switch back to tab 1.
+  executeSoon(function() {
+    Services.obs.addObserver(inspectorFocusTab1,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorFocusTab1()
+{
+  Services.obs.removeObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is still open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
+  is(InspectorUI.selection, div, "selection matches the div element");
+
+  InspectorUI.currentInspector.once("markuploaded", inspectorOpenTreePanelTab1);
+  InspectorUI.toggleHTMLPanel();
+}
+
+function inspectorOpenTreePanelTab1()
+{
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
+  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
+  is(InspectorUI.selection, div, "selection matches the div element");
+
+  InspectorUI.currentInspector.once("sidebaractivated-computedview",
+    inspectorSidebarStyleView1);
+
+  executeSoon(function() {
+    InspectorUI.sidebar.show();
+    InspectorUI.sidebar.activatePanel("computedview");
+  });
+}
+
+function inspectorSidebarStyleView1()
+{
+  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
+  ok(computedView(), "Inspector Has a computed view Instance");
+
+  InspectorUI.sidebar._toolObjects().forEach(function (aTool) {
+    let btn = aTool.button;
+    is(btn.hasAttribute("checked"),
+      (aTool.id == "computedview"),
+      "Button " + btn.label + " has correct checked attribute");
+  });
+
+  // Switch back to tab 2.
+  Services.obs.addObserver(inspectorFocusTab2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  gBrowser.selectedTab = tab2;
+}
+
+function inspectorFocusTab2()
+{
+  Services.obs.removeObserver(inspectorFocusTab2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is still open.
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  ok(!InspectorUI.sidebar.visible, "Inspector Sidebar is not open");
+  is(InspectorUI.store.length, 2, "Inspector.store.length is 2");
+  isnot(InspectorUI.selection, div, "selection does not match the div element");
+
+
+  executeSoon(function() {
+    // Make sure keybindings still work
+    synthesizeKeyFromKeyTag("key_inspect");
+
+    ok(InspectorUI.inspecting, "Inspector is highlighting");
+    InspectorUI.toggleInspection();
+
+    // Switch back to tab 1.
+    Services.obs.addObserver(inspectorSecondFocusTab1,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorSecondFocusTab1()
+{
+  Services.obs.removeObserver(inspectorSecondFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  InspectorUI.currentInspector.once("sidebaractivated-computedview",
+    inspectorSecondFocusTabSidebarLoaded);
+}
+
+function inspectorSecondFocusTabSidebarLoaded()
+{
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is open");
+  is(InspectorUI.store.length, 2, "Inspector.store.length = 2");
+  is(InspectorUI.selection, div, "selection matches the div element");
+
+  ok(InspectorUI.sidebar.visible, "Inspector Sidebar is open");
+  ok(computedView(), "Inspector Has a Style Panel Instance");
+  InspectorUI.sidebar._toolObjects().forEach(function(aTool) {
+    let btn = aTool.button;
+    is(btn.hasAttribute("checked"),
+      (aTool.id == "computedview"),
+      "Button " + btn.label + " has correct checked attribute");
+  });
+
+  // Switch back to tab 2.
+  Services.obs.addObserver(inspectorSecondFocusTab2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  gBrowser.selectedTab = tab2;
+}
+
+function inspectorSecondFocusTab2()
+{
+  Services.obs.removeObserver(inspectorSecondFocusTab2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  // Make sure the inspector is still open.
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
+
+  is(InspectorUI.store.length, 2, "Inspector.store.length is 2");
+  isnot(InspectorUI.selection, div, "selection does not match the div element");
+
+  // Remove tab 1.
+  tab1window = gBrowser.getBrowserForTab(tab1).contentWindow;
+  tab1window.addEventListener("pagehide", inspectorTabUnload1, false);
+  gBrowser.removeTab(tab1);
+}
+
+function inspectorTabUnload1(evt)
+{
+  tab1window.removeEventListener(evt.type, arguments.callee, false);
+  tab1window = tab1 = tab2 = div = null;
+
+  // Make sure the Inspector is still open and that the state is correct.
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(!InspectorUI.currentInspector.markupOpen, "Inspector Tree Panel is not open");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
+  InspectorUI.closeInspectorUI();
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  ignoreAllUncaughtExceptions();
+
+  tab1 = gBrowser.addTab();
+  gBrowser.selectedTab = tab1;
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen1, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab switching tests for inspector" +
+    "<div>tab 1</div>";
+}
+
diff --git a/browser/devtools/highlighter/test/browser_inspector_treeSelection.js b/browser/devtools/highlighter/test/browser_inspector_treeSelection.js
new file mode 100644
index 00000000000..6e681623377
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_treeSelection.js
@@ -0,0 +1,84 @@
+/* -*- Mode: C++; 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/. */
+
+let doc;
+let h1;
+
+function createDocument()
+{
+  let div = doc.createElement("div");
+  let h1 = doc.createElement("h1");
+  let p1 = doc.createElement("p");
+  let p2 = doc.createElement("p");
+  doc.title = "Inspector Tree Selection Test";
+  h1.textContent = "Inspector Tree Selection Test";
+  p1.textContent = "This is some example text";
+  p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
+    "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
+    "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
+    "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
+    "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
+    "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
+    "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+  div.appendChild(h1);
+  div.appendChild(p1);
+  div.appendChild(p2);
+  doc.body.appendChild(div);
+  setupSelectionTests();
+}
+
+function setupSelectionTests()
+{
+  h1 = doc.querySelectorAll("h1")[0];
+  ok(h1, "we have the header node");
+  Services.obs.addObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function runSelectionTests()
+{
+  Services.obs.removeObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  executeSoon(function() {
+    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
+    InspectorUI.inspectNode(h1);
+  });
+}
+
+function performTestComparisons(evt)
+{
+  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
+
+  is(h1, InspectorUI.selection, "selection matches node");
+  ok(isHighlighting(), "highlighter is highlighting");
+  is(getHighlitNode(), h1, "highlighter highlighting correct node");
+
+  finishUp();
+}
+
+function finishUp() {
+  InspectorUI.closeInspectorUI();
+  doc = h1 = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  ignoreAllUncaughtExceptions();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/inspector/test/browser_inspector_tree_height.js b/browser/devtools/highlighter/test/browser_inspector_tree_height.js
similarity index 100%
rename from browser/devtools/inspector/test/browser_inspector_tree_height.js
rename to browser/devtools/highlighter/test/browser_inspector_tree_height.js
diff --git a/browser/devtools/inspector/test/head.js b/browser/devtools/highlighter/test/head.js
similarity index 64%
rename from browser/devtools/inspector/test/head.js
rename to browser/devtools/highlighter/test/head.js
index 45332a27bf0..7c34572aee6 100644
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/highlighter/test/head.js
@@ -6,44 +6,30 @@ const Cu = Components.utils;
 let tempScope = {};
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
 let LayoutHelpers = tempScope.LayoutHelpers;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
-function openInspector(callback)
+// Clear preferences that may be set during the course of tests.
+function clearUserPrefs()
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-  if (inspector && inspector.isReady) {
-    callback(inspector);
-  } else {
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-ready", function(event, panel) {
-      let inspector = gDevTools.getPanelForTarget("inspector", target);
-      callback(inspector);
-    });
-  }
+  Services.prefs.clearUserPref("devtools.inspector.htmlPanelOpen");
+  Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
+  Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
 }
 
-function getActiveInspector()
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  return gDevTools.getPanelForTarget("inspector", target);
-}
+registerCleanupFunction(clearUserPrefs);
 
 function isHighlighting()
 {
-  let outline = getActiveInspector().highlighter.outline;
+  let outline = InspectorUI.highlighter.outline;
   return !(outline.getAttribute("hidden") == "true");
 }
 
 function getHighlitNode()
 {
-  let h = getActiveInspector().highlighter;
+  let h = InspectorUI.highlighter;
   if (!isHighlighting() || !h._contentRect)
     return null;
 
@@ -75,9 +61,7 @@ function midPoint(aPointA, aPointB)
 
 function computedView()
 {
-  let sidebar = getActiveInspector().sidebar;
-  let iframe = sidebar.tabbox.querySelector(".iframe-computedview");
-  return iframe.contentWindow.computedView;
+  return InspectorUI.sidebar._toolContext("computedview");
 }
 
 function computedViewTree()
@@ -87,11 +71,8 @@ function computedViewTree()
 
 function ruleView()
 {
-  let sidebar = getActiveInspector().sidebar;
-  let iframe = sidebar.tabbox.querySelector(".iframe-ruleview");
-  return iframe.contentWindow.ruleView;
+  return InspectorUI.sidebar._toolContext("ruleview").view;
 }
-
 function synthesizeKeyFromKeyTag(aKeyId) {
   let key = document.getElementById(aKeyId);
   isnot(key, null, "Successfully retrieved the <key> node");
diff --git a/browser/devtools/inspector/test/helpers.js b/browser/devtools/highlighter/test/helpers.js
similarity index 100%
rename from browser/devtools/inspector/test/helpers.js
rename to browser/devtools/highlighter/test/helpers.js
diff --git a/browser/devtools/inspector/Breadcrumbs.jsm b/browser/devtools/inspector/Breadcrumbs.jsm
deleted file mode 100644
index b0625140a27..00000000000
--- a/browser/devtools/inspector/Breadcrumbs.jsm
+++ /dev/null
@@ -1,593 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-
-const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
-
-this.EXPORTED_SYMBOLS = ["HTMLBreadcrumbs"];
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
-Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-
-const LOW_PRIORITY_ELEMENTS = {
-  "HEAD": true,
-  "BASE": true,
-  "BASEFONT": true,
-  "ISINDEX": true,
-  "LINK": true,
-  "META": true,
-  "SCRIPT": true,
-  "STYLE": true,
-  "TITLE": true,
-};
-
-///////////////////////////////////////////////////////////////////////////
-//// HTML Breadcrumbs
-
-/**
- * Display the ancestors of the current node and its children.
- * Only one "branch" of children are displayed (only one line).
- *
- * Mechanism:
- * . If no nodes displayed yet:
- *    then display the ancestor of the selected node and the selected node;
- *   else select the node;
- * . If the selected node is the last node displayed, append its first (if any).
- */
-this.HTMLBreadcrumbs = function HTMLBreadcrumbs(aInspector)
-{
-  this.inspector = aInspector;
-  this.selection = this.inspector.selection;
-  this.chromeWin = this.inspector.panelWin;
-  this.chromeDoc = this.inspector.panelDoc;
-  this.DOMHelpers = new DOMHelpers(this.chromeWin);
-  this._init();
-}
-
-HTMLBreadcrumbs.prototype = {
-  _init: function BC__init()
-  {
-    this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
-    this.container.addEventListener("mousedown", this, true);
-    this.container.addEventListener("keypress", this, true);
-
-    // We will save a list of already displayed nodes in this array.
-    this.nodeHierarchy = [];
-
-    // Last selected node in nodeHierarchy.
-    this.currentIndex = -1;
-
-    // By default, hide the arrows. We let the <scrollbox> show them
-    // in case of overflow.
-    this.container.removeAttribute("overflows");
-    this.container._scrollButtonUp.collapsed = true;
-    this.container._scrollButtonDown.collapsed = true;
-
-    this.onscrollboxreflow = function() {
-      if (this.container._scrollButtonDown.collapsed)
-        this.container.removeAttribute("overflows");
-      else
-        this.container.setAttribute("overflows", true);
-    }.bind(this);
-
-    this.container.addEventListener("underflow", this.onscrollboxreflow, false);
-    this.container.addEventListener("overflow", this.onscrollboxreflow, false);
-
-    this.update = this.update.bind(this);
-    this.updateSelectors = this.updateSelectors.bind(this);
-    this.selection.on("new-node", this.update);
-    this.selection.on("detached", this.update);
-    this.selection.on("pseudoclass", this.updateSelectors);
-    this.selection.on("attribute-changed", this.updateSelectors);
-    this.update();
-  },
-
-  /**
-   * Build a string that represents the node: tagName#id.class1.class2.
-   *
-   * @param aNode The node to pretty-print
-   * @returns a string
-   */
-  prettyPrintNodeAsText: function BC_prettyPrintNodeText(aNode)
-  {
-    let text = aNode.tagName.toLowerCase();
-    if (aNode.id) {
-      text += "#" + aNode.id;
-    }
-    for (let i = 0; i < aNode.classList.length; i++) {
-      text += "." + aNode.classList[i];
-    }
-    for (let i = 0; i < PSEUDO_CLASSES.length; i++) {
-      let pseudo = PSEUDO_CLASSES[i];
-      if (DOMUtils.hasPseudoClassLock(aNode, pseudo)) {
-        text += pseudo;
-      }
-    }
-
-    return text;
-  },
-
-
-  /**
-   * Build <label>s that represent the node:
-   *   <label class="inspector-breadcrumbs-tag">tagName</label>
-   *   <label class="inspector-breadcrumbs-id">#id</label>
-   *   <label class="inspector-breadcrumbs-classes">.class1.class2</label>
-   *
-   * @param aNode The node to pretty-print
-   * @returns a document fragment.
-   */
-  prettyPrintNodeAsXUL: function BC_prettyPrintNodeXUL(aNode)
-  {
-    let fragment = this.chromeDoc.createDocumentFragment();
-
-    let tagLabel = this.chromeDoc.createElement("label");
-    tagLabel.className = "inspector-breadcrumbs-tag plain";
-
-    let idLabel = this.chromeDoc.createElement("label");
-    idLabel.className = "inspector-breadcrumbs-id plain";
-
-    let classesLabel = this.chromeDoc.createElement("label");
-    classesLabel.className = "inspector-breadcrumbs-classes plain";
-
-    let pseudosLabel = this.chromeDoc.createElement("label");
-    pseudosLabel.className = "inspector-breadcrumbs-pseudo-classes plain";
-
-    tagLabel.textContent = aNode.tagName.toLowerCase();
-    idLabel.textContent = aNode.id ? ("#" + aNode.id) : "";
-
-    let classesText = "";
-    for (let i = 0; i < aNode.classList.length; i++) {
-      classesText += "." + aNode.classList[i];
-    }
-    classesLabel.textContent = classesText;
-
-    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(aNode, pseudo);
-    }, this);
-    pseudosLabel.textContent = pseudos.join("");
-
-    fragment.appendChild(tagLabel);
-    fragment.appendChild(idLabel);
-    fragment.appendChild(classesLabel);
-    fragment.appendChild(pseudosLabel);
-
-    return fragment;
-  },
-
-  /**
-   * Open the sibling menu.
-   *
-   * @param aButton the button representing the node.
-   * @param aNode the node we want the siblings from.
-   */
-  openSiblingMenu: function BC_openSiblingMenu(aButton, aNode)
-  {
-    // We make sure that the targeted node is selected
-    // because we want to use the nodemenu that only works
-    // for inspector.selection
-    this.selection.setNode(aNode, "breadcrumbs");
-
-    let title = this.chromeDoc.createElement("menuitem");
-    title.setAttribute("label", this.inspector.strings.GetStringFromName("breadcrumbs.siblings"));
-    title.setAttribute("disabled", "true");
-
-    let separator = this.chromeDoc.createElement("menuseparator");
-
-    let items = [title, separator];
-
-    let nodes = aNode.parentNode.childNodes;
-    for (let i = 0; i < nodes.length; i++) {
-      if (nodes[i].nodeType == aNode.ELEMENT_NODE) {
-        let item = this.chromeDoc.createElement("menuitem");
-        if (nodes[i] === aNode) {
-          item.setAttribute("disabled", "true");
-          item.setAttribute("checked", "true");
-        }
-
-        item.setAttribute("type", "radio");
-        item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
-
-        let selection = this.selection;
-        item.onmouseup = (function(aNode) {
-          return function() {
-            selection.setNode(aNode, "breadcrumbs");
-          }
-        })(nodes[i]);
-
-        items.push(item);
-      }
-    }
-    this.inspector.showNodeMenu(aButton, "before_start", items);
-  },
-
-  /**
-   * Generic event handler.
-   *
-   * @param nsIDOMEvent event
-   *        The DOM event object.
-   */
-  handleEvent: function BC_handleEvent(event)
-  {
-    if (event.type == "mousedown" && event.button == 0) {
-      // on Click and Hold, open the Siblings menu
-
-      let timer;
-      let container = this.container;
-
-      function openMenu(event) {
-        cancelHold();
-        let target = event.originalTarget;
-        if (target.tagName == "button") {
-          target.onBreadcrumbsHold();
-        }
-      }
-
-      function handleClick(event) {
-        cancelHold();
-        let target = event.originalTarget;
-        if (target.tagName == "button") {
-          target.onBreadcrumbsClick();
-        }
-      }
-
-      let window = this.chromeWin;
-      function cancelHold(event) {
-        window.clearTimeout(timer);
-        container.removeEventListener("mouseout", cancelHold, false);
-        container.removeEventListener("mouseup", handleClick, false);
-      }
-
-      container.addEventListener("mouseout", cancelHold, false);
-      container.addEventListener("mouseup", handleClick, false);
-      timer = window.setTimeout(openMenu, 500, event);
-    }
-
-    if (event.type == "keypress" && this.selection.isElementNode()) {
-      let node = null;
-      switch (event.keyCode) {
-        case this.chromeWin.KeyEvent.DOM_VK_LEFT:
-          if (this.currentIndex != 0) {
-            node = this.nodeHierarchy[this.currentIndex - 1].node;
-          }
-          break;
-        case this.chromeWin.KeyEvent.DOM_VK_RIGHT:
-          if (this.currentIndex < this.nodeHierarchy.length - 1) {
-            node = this.nodeHierarchy[this.currentIndex + 1].node;
-          }
-          break;
-        case this.chromeWin.KeyEvent.DOM_VK_UP:
-          node = this.selection.node.previousSibling;
-          while (node && (node.nodeType != node.ELEMENT_NODE)) {
-            node = node.previousSibling;
-          }
-          break;
-        case this.chromeWin.KeyEvent.DOM_VK_DOWN:
-          node = this.selection.node.nextSibling;
-          while (node && (node.nodeType != node.ELEMENT_NODE)) {
-            node = node.nextSibling;
-          }
-          break;
-      }
-      if (node) {
-        this.selection.setNode(node, "breadcrumbs");
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  },
-
-  /**
-   * Remove nodes and delete properties.
-   */
-  destroy: function BC_destroy()
-  {
-    this.nodeHierarchy.forEach(function(crumb) {
-      if (LayoutHelpers.isNodeConnected(crumb.node)) {
-        DOMUtils.clearPseudoClassLocks(crumb.node);
-      }
-    });
-
-    this.selection.off("new-node", this.update);
-    this.selection.off("detached", this.update);
-    this.selection.off("pseudoclass", this.updateSelectors);
-    this.selection.off("attribute-changed", this.updateSelectors);
-
-    this.container.removeEventListener("underflow", this.onscrollboxreflow, false);
-    this.container.removeEventListener("overflow", this.onscrollboxreflow, false);
-    this.onscrollboxreflow = null;
-
-    this.empty();
-    this.container.removeEventListener("mousedown", this, true);
-    this.container.removeEventListener("keypress", this, true);
-    this.container = null;
-    this.nodeHierarchy = null;
-  },
-
-  /**
-   * Empty the breadcrumbs container.
-   */
-  empty: function BC_empty()
-  {
-    while (this.container.hasChildNodes()) {
-      this.container.removeChild(this.container.firstChild);
-    }
-  },
-
-  /**
-   * Re-init the cache and remove all the buttons.
-   */
-  invalidateHierarchy: function BC_invalidateHierarchy()
-  {
-    this.inspector.hideNodeMenu();
-    this.nodeHierarchy = [];
-    this.empty();
-  },
-
-  /**
-   * Set which button represent the selected node.
-   *
-   * @param aIdx Index of the displayed-button to select
-   */
-  setCursor: function BC_setCursor(aIdx)
-  {
-    // Unselect the previously selected button
-    if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
-      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
-    }
-    if (aIdx > -1) {
-      this.nodeHierarchy[aIdx].button.setAttribute("checked", "true");
-      if (this.hadFocus)
-        this.nodeHierarchy[aIdx].button.focus();
-    }
-    this.currentIndex = aIdx;
-  },
-
-  /**
-   * Get the index of the node in the cache.
-   *
-   * @param aNode
-   * @returns integer the index, -1 if not found
-   */
-  indexOf: function BC_indexOf(aNode)
-  {
-    let i = this.nodeHierarchy.length - 1;
-    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
-      if (this.nodeHierarchy[i].node === aNode) {
-        return i;
-      }
-    }
-    return -1;
-  },
-
-  /**
-   * Remove all the buttons and their references in the cache
-   * after a given index.
-   *
-   * @param aIdx
-   */
-  cutAfter: function BC_cutAfter(aIdx)
-  {
-    while (this.nodeHierarchy.length > (aIdx + 1)) {
-      let toRemove = this.nodeHierarchy.pop();
-      this.container.removeChild(toRemove.button);
-    }
-  },
-
-  /**
-   * Build a button representing the node.
-   *
-   * @param aNode The node from the page.
-   * @returns aNode The <button>.
-   */
-  buildButton: function BC_buildButton(aNode)
-  {
-    let button = this.chromeDoc.createElement("button");
-    button.appendChild(this.prettyPrintNodeAsXUL(aNode));
-    button.className = "inspector-breadcrumbs-button";
-
-    button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
-
-    button.onkeypress = function onBreadcrumbsKeypress(e) {
-      if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
-          e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
-        button.click();
-    }
-
-    button.onBreadcrumbsClick = function onBreadcrumbsClick() {
-      this.selection.setNode(aNode, "breadcrumbs");
-    }.bind(this);
-
-    button.onclick = (function _onBreadcrumbsRightClick(event) {
-      button.focus();
-      if (event.button == 2) {
-        this.openSiblingMenu(button, aNode);
-      }
-    }).bind(this);
-
-    button.onBreadcrumbsHold = (function _onBreadcrumbsHold() {
-      this.openSiblingMenu(button, aNode);
-    }).bind(this);
-    return button;
-  },
-
-  /**
-   * Connecting the end of the breadcrumbs to a node.
-   *
-   * @param aNode The node to reach.
-   */
-  expand: function BC_expand(aNode)
-  {
-      let fragment = this.chromeDoc.createDocumentFragment();
-      let toAppend = aNode;
-      let lastButtonInserted = null;
-      let originalLength = this.nodeHierarchy.length;
-      let stopNode = null;
-      if (originalLength > 0) {
-        stopNode = this.nodeHierarchy[originalLength - 1].node;
-      }
-      while (toAppend && toAppend.tagName && toAppend != stopNode) {
-        let button = this.buildButton(toAppend);
-        fragment.insertBefore(button, lastButtonInserted);
-        lastButtonInserted = button;
-        this.nodeHierarchy.splice(originalLength, 0, {node: toAppend, button: button});
-        toAppend = this.DOMHelpers.getParentObject(toAppend);
-      }
-      this.container.appendChild(fragment, this.container.firstChild);
-  },
-
-  /**
-   * Get a child of a node that can be displayed in the breadcrumbs
-   * and that is probably visible. See LOW_PRIORITY_ELEMENTS.
-   *
-   * @param aNode The parent node.
-   * @returns nsIDOMNode|null
-   */
-  getInterestingFirstNode: function BC_getInterestingFirstNode(aNode)
-  {
-    let nextChild = this.DOMHelpers.getChildObject(aNode, 0);
-    let fallback = null;
-
-    while (nextChild) {
-      if (nextChild.nodeType == aNode.ELEMENT_NODE) {
-        if (!(nextChild.tagName in LOW_PRIORITY_ELEMENTS)) {
-          return nextChild;
-        }
-        if (!fallback) {
-          fallback = nextChild;
-        }
-      }
-      nextChild = this.DOMHelpers.getNextSibling(nextChild);
-    }
-    return fallback;
-  },
-
-
-  /**
-   * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
-   *
-   * @param aNode
-   * @returns Index of the ancestor in the cache
-   */
-  getCommonAncestor: function BC_getCommonAncestor(aNode)
-  {
-    let node = aNode;
-    while (node) {
-      let idx = this.indexOf(node);
-      if (idx > -1) {
-        return idx;
-      } else {
-        node = this.DOMHelpers.getParentObject(node);
-      }
-    }
-    return -1;
-  },
-
-  /**
-   * Make sure that the latest node in the breadcrumbs is not the selected node
-   * if the selected node still has children.
-   */
-  ensureFirstChild: function BC_ensureFirstChild()
-  {
-    // If the last displayed node is the selected node
-    if (this.currentIndex == this.nodeHierarchy.length - 1) {
-      let node = this.nodeHierarchy[this.currentIndex].node;
-      let child = this.getInterestingFirstNode(node);
-      // If the node has a child
-      if (child) {
-        // Show this child
-        this.expand(child);
-      }
-    }
-  },
-
-  /**
-   * Ensure the selected node is visible.
-   */
-  scroll: function BC_scroll()
-  {
-    // FIXME bug 684352: make sure its immediate neighbors are visible too.
-
-    let scrollbox = this.container;
-    let element = this.nodeHierarchy[this.currentIndex].button;
-    scrollbox.ensureElementIsVisible(element);
-  },
-
-  updateSelectors: function BC_updateSelectors()
-  {
-    for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
-      let crumb = this.nodeHierarchy[i];
-      let button = crumb.button;
-
-      while(button.hasChildNodes()) {
-        button.removeChild(button.firstChild);
-      }
-      button.appendChild(this.prettyPrintNodeAsXUL(crumb.node));
-      button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(crumb.node));
-    }
-  },
-
-  /**
-   * Update the breadcrumbs display when a new node is selected.
-   */
-  update: function BC_update()
-  {
-    this.inspector.hideNodeMenu();
-
-    let cmdDispatcher = this.chromeDoc.commandDispatcher;
-    this.hadFocus = (cmdDispatcher.focusedElement &&
-                     cmdDispatcher.focusedElement.parentNode == this.container);
-
-    if (!this.selection.isConnected()) {
-      this.cutAfter(-1); // remove all the crumbs
-      return;
-    }
-
-    if (!this.selection.isElementNode()) {
-      this.setCursor(-1); // no selection
-      return;
-    }
-
-    let idx = this.indexOf(this.selection.node);
-
-    // Is the node already displayed in the breadcrumbs?
-    if (idx > -1) {
-      // Yes. We select it.
-      this.setCursor(idx);
-    } else {
-      // No. Is the breadcrumbs display empty?
-      if (this.nodeHierarchy.length > 0) {
-        // No. We drop all the element that are not direct ancestors
-        // of the selection
-        let parent = this.DOMHelpers.getParentObject(this.selection.node);
-        let idx = this.getCommonAncestor(parent);
-        this.cutAfter(idx);
-      }
-      // we append the missing button between the end of the breadcrumbs display
-      // and the current node.
-      this.expand(this.selection.node);
-
-      // we select the current node button
-      idx = this.indexOf(this.selection.node);
-      this.setCursor(idx);
-    }
-    // Add the first child of the very last node of the breadcrumbs if possible.
-    this.ensureFirstChild();
-
-    // Make sure the selected node and its neighbours are visible.
-    this.scroll();
-
-    this.updateSelectors();
-  },
-}
-
-XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
-  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-});
diff --git a/browser/devtools/inspector/CmdInspect.jsm b/browser/devtools/inspector/CmdInspect.jsm
deleted file mode 100644
index bde650c86aa..00000000000
--- a/browser/devtools/inspector/CmdInspect.jsm
+++ /dev/null
@@ -1,48 +0,0 @@
-/* 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/. */
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-this.EXPORTED_SYMBOLS = [ ];
-
-Cu.import("resource:///modules/devtools/gcli.jsm");
-Cu.import('resource://gre/modules/XPCOMUtils.jsm');
-
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
-
-/**
- * 'inspect' command
- */
-gcli.addCommand({
-  name: "inspect",
-  description: gcli.lookup("inspectDesc"),
-  manual: gcli.lookup("inspectManual"),
-  params: [
-    {
-      name: "selector",
-      type: "node",
-      description: gcli.lookup("inspectNodeDesc"),
-      manual: gcli.lookup("inspectNodeManual")
-    }
-  ],
-  exec: function Command_inspect(args, context) {
-    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-    let node = args.selector;
-
-    let inspector = gDevTools.getPanelForTarget("inspector", target);
-    if (inspector && inspector.isReady) {
-      inspector.selection.setNode(node, "gcli");
-    } else {
-      let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-      toolbox.once("inspector-ready", function(event, panel) {
-        let inspector = gDevTools.getPanelForTarget("inspector", target);
-        inspector.selection.setNode(node, "gcli");
-      }.bind(this));
-    }
-  }
-});
diff --git a/browser/devtools/inspector/InspectorDefinition.jsm b/browser/devtools/inspector/InspectorDefinition.jsm
deleted file mode 100644
index 97a9a683ea6..00000000000
--- a/browser/devtools/inspector/InspectorDefinition.jsm
+++ /dev/null
@@ -1,45 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = ["InspectorDefinition"];
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-const properties = "chrome://browser/locale/devtools/inspector.properties";
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-XPCOMUtils.defineLazyGetter(this, "osString",
-  function() Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
-
-XPCOMUtils.defineLazyGetter(this, "Strings",
-  function() Services.strings.createBundle(properties));
-
-function l10n(aName) Strings.GetStringFromName(aName);
-
-Cu.import("resource://gre/modules/Services.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "InspectorPanel", "resource:///modules/devtools/InspectorPanel.jsm");
-
-this.InspectorDefinition = {
-  id: "inspector",
-  accesskey: l10n("inspector.accesskey"),
-  key: l10n("inspector.commandkey"),
-  ordinal: 2,
-  modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
-  url: "chrome://browser/content/devtools/inspector/inspector.xul",
-  label: l10n("inspector.label"),
-
-  isTargetSupported: function(target) {
-    return !target.isRemote;
-  },
-
-  build: function(iframeWindow, toolbox) {
-    return new InspectorPanel(iframeWindow, toolbox);
-  }
-};
diff --git a/browser/devtools/inspector/InspectorPanel.jsm b/browser/devtools/inspector/InspectorPanel.jsm
deleted file mode 100644
index 1f45c547441..00000000000
--- a/browser/devtools/inspector/InspectorPanel.jsm
+++ /dev/null
@@ -1,536 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-const Cr = Components.results;
-
-this.EXPORTED_SYMBOLS = ["InspectorPanel"];
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/MarkupView.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource:///modules/devtools/Selection.jsm");
-Cu.import("resource:///modules/devtools/Breadcrumbs.jsm");
-Cu.import("resource:///modules/devtools/Highlighter.jsm");
-Cu.import("resource:///modules/devtools/Sidebar.jsm");
-
-const LAYOUT_CHANGE_TIMER = 250;
-
-/**
- * Represents an open instance of the Inspector for a tab.
- * The inspector controls the highlighter, the breadcrumbs,
- * the markup view, and the sidebar (computed view, rule view
- * and layout view).
- */
-this.InspectorPanel = function InspectorPanel(iframeWindow, toolbox) {
-  this._toolbox = toolbox;
-  this._target = toolbox._target;
-
-  if (this.target.isRemote) {
-    throw "Unsupported target";
-  }
-
-  this.tabTarget = (this.target.tab != null);
-  this.winTarget = (this.target.window != null);
-
-  new EventEmitter(this);
-
-  this.preventNavigateAway = this.preventNavigateAway.bind(this);
-  this.onNavigatedAway = this.onNavigatedAway.bind(this);
-  this.target.on("will-navigate", this.preventNavigateAway);
-  this.target.on("navigate", this.onNavigatedAway);
-
-  this.panelDoc = iframeWindow.document;
-  this.panelWin = iframeWindow;
-  this.panelWin.inspector = this;
-
-  this.nodemenu = this.panelDoc.getElementById("inspector-node-popup");
-  this.lastNodemenuItem = this.nodemenu.lastChild;
-  this._setupNodeMenu = this._setupNodeMenu.bind(this);
-  this._resetNodeMenu = this._resetNodeMenu.bind(this);
-  this.nodemenu.addEventListener("popupshowing", this._setupNodeMenu, true);
-  this.nodemenu.addEventListener("popuphiding", this._resetNodeMenu, true);
-
-  // Create an empty selection
-  this._selection = new Selection();
-  this.onNewSelection = this.onNewSelection.bind(this);
-  this.selection.on("new-node", this.onNewSelection);
-
-  this.breadcrumbs = new HTMLBreadcrumbs(this);
-
-  if (this.tabTarget) {
-    this.browser = this.target.tab.linkedBrowser;
-    this.scheduleLayoutChange = this.scheduleLayoutChange.bind(this);
-    this.browser.addEventListener("resize", this.scheduleLayoutChange, true);
-
-    this.highlighter = new Highlighter(this.target, this, this._toolbox);
-    let button = this.panelDoc.getElementById("inspector-inspect-toolbutton");
-    button.hidden = false;
-    this.updateInspectorButton = function() {
-      if (this.highlighter.locked) {
-        button.removeAttribute("checked");
-      } else {
-        button.setAttribute("checked", "true");
-      }
-    }.bind(this);
-    this.highlighter.on("locked", this.updateInspectorButton);
-    this.highlighter.on("unlocked", this.updateInspectorButton);
-  }
-
-  this._initMarkup();
-  this.isReady = false;
-
-  this.once("markuploaded", function() {
-    this.isReady = true;
-
-    // All the components are initialized. Let's select a node.
-    if (this.tabTarget) {
-      let root = this.browser.contentDocument.documentElement;
-      this._selection.setNode(root);
-    }
-    if (this.winTarget) {
-      let root = this.target.window.document.documentElement;
-      this._selection.setNode(root);
-    }
-
-    if (this.highlighter) {
-      this.highlighter.unlock();
-    }
-
-    this.emit("ready");
-  }.bind(this));
-
-  this.setupSidebar();
-}
-
-InspectorPanel.prototype = {
-  /**
-   * Selection object (read only)
-   */
-  get selection() {
-    return this._selection;
-  },
-
-  /**
-   * Target getter.
-   */
-  get target() {
-    return this._target;
-  },
-
-  /**
-   * Target setter.
-   */
-  set target(value) {
-    this._target = value;
-  },
-
-  /**
-   * Expose gViewSourceUtils so that other tools can make use of them.
-   */
-  get viewSourceUtils() {
-    return this.panelWin.gViewSourceUtils;
-  },
-
-  /**
-   * Indicate that a tool has modified the state of the page.  Used to
-   * decide whether to show the "are you sure you want to navigate"
-   * notification.
-   */
-  markDirty: function InspectorPanel_markDirty() {
-    this.isDirty = true;
-  },
-
-  /**
-   * Build the sidebar.
-   */
-  setupSidebar: function InspectorPanel_setupSidebar() {
-    let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
-    this.sidebar = new ToolSidebar(tabbox, this);
-
-    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
-
-    this._setDefaultSidebar = function(event, toolId) {
-      Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
-    }.bind(this);
-
-    this.sidebar.on("select", this._setDefaultSidebar);
-
-    this.sidebar.addTab("ruleview",
-                        "chrome://browser/content/devtools/cssruleview.xul",
-                        "ruleview" == defaultTab);
-
-    this.sidebar.addTab("computedview",
-                        "chrome://browser/content/devtools/csshtmltree.xul",
-                        "computedview" == defaultTab);
-
-    this.sidebar.addTab("layoutview",
-                        "chrome://browser/content/devtools/layoutview/view.xhtml",
-                        "layoutview" == defaultTab);
-
-    this.sidebar.show();
-  },
-
-  /**
-   * Reset the inspector on navigate away.
-   */
-  onNavigatedAway: function InspectorPanel_onNavigatedAway(event, newWindow) {
-    this.selection.setNode(null);
-    this._destroyMarkup();
-    this.isDirty = false;
-    let self = this;
-    newWindow.addEventListener("DOMContentLoaded", function onDOMReady() {
-      newWindow.removeEventListener("DOMContentLoaded", onDOMReady, true);;
-      if (!self.selection.node) {
-        self.selection.setNode(newWindow.document.documentElement);
-      }
-      self._initMarkup();
-    }, true);
-  },
-
-  /**
-   * Show a message if the inspector is dirty.
-   */
-  preventNavigateAway: function InspectorPanel_preventNavigateAway(event, request) {
-    if (!this.isDirty) {
-      return;
-    }
-
-    request.suspend();
-
-    let notificationBox = this._toolbox.getNotificationBox();
-    let notification = notificationBox.
-      getNotificationWithValue("inspector-page-navigation");
-
-    if (notification) {
-      notificationBox.removeNotification(notification, true);
-    }
-
-    let cancelRequest = function onCancelRequest() {
-      if (request) {
-        request.cancel(Cr.NS_BINDING_ABORTED);
-        request.resume(); // needed to allow the connection to be cancelled.
-        request = null;
-      }
-    };
-
-    let eventCallback = function onNotificationCallback(event) {
-      if (event == "removed") {
-        cancelRequest();
-      }
-    };
-
-    let buttons = [
-      {
-        id: "inspector.confirmNavigationAway.buttonLeave",
-        label: this.strings.GetStringFromName("confirmNavigationAway.buttonLeave"),
-        accessKey: this.strings.GetStringFromName("confirmNavigationAway.buttonLeaveAccesskey"),
-        callback: function onButtonLeave() {
-          if (request) {
-            request.resume();
-            request = null;
-            return true;
-          }
-          return false;
-        }.bind(this),
-      },
-      {
-        id: "inspector.confirmNavigationAway.buttonStay",
-        label: this.strings.GetStringFromName("confirmNavigationAway.buttonStay"),
-        accessKey: this.strings.GetStringFromName("confirmNavigationAway.buttonStayAccesskey"),
-        callback: cancelRequest
-      },
-    ];
-
-    let message = this.strings.GetStringFromName("confirmNavigationAway.message2");
-
-    notification = notificationBox.appendNotification(message,
-      "inspector-page-navigation", "chrome://browser/skin/Info.png",
-      notificationBox.PRIORITY_WARNING_HIGH, buttons, eventCallback);
-
-    // Make sure this not a transient notification, to avoid the automatic
-    // transient notification removal.
-    notification.persistence = -1;
-  },
-
-  /**
-   * When a new node is selected.
-   */
-  onNewSelection: function InspectorPanel_onNewSelection() {
-    this.cancelLayoutChange();
-  },
-
-  /**
-   * Destroy the inspector.
-   */
-  destroy: function InspectorPanel__destroy() {
-    if (this._destroyed) {
-      return;
-    }
-    this.cancelLayoutChange();
-    this._destroyed = true;
-
-    this._toolbox = null;
-
-    if (this.browser) {
-      this.browser.removeEventListener("resize", this.scheduleLayoutChange, true);
-      this.browser = null;
-    }
-
-    this.target.off("will-navigate", this.preventNavigateAway);
-    this.target.off("navigate", this.onNavigatedAway);
-
-    if (this.highlighter) {
-      this.highlighter.off("locked", this.updateInspectorButton);
-      this.highlighter.off("unlocked", this.updateInspectorButton);
-      this.highlighter.destroy();
-    }
-
-    this.sidebar.off("select", this._setDefaultSidebar);
-    this.sidebar.destroy();
-    this.sidebar = null;
-
-    this.nodemenu.removeEventListener("popupshowing", this._setupNodeMenu, true);
-    this.nodemenu.removeEventListener("popuphiding", this._resetNodeMenu, true);
-    this.breadcrumbs.destroy();
-    this.selection.off("new-node", this.onNewSelection);
-    this._destroyMarkup();
-    this._selection.destroy();
-    this._selection = null;
-    this.panelWin.inspector = null;
-    this.target = null;
-    this.panelDoc = null;
-    this.panelWin = null;
-    this.breadcrumbs = null;
-    this.lastNodemenuItem = null;
-    this.nodemenu = null;
-    this.highlighter = null;
-  },
-
-  /**
-   * Show the node menu.
-   */
-  showNodeMenu: function InspectorPanel_showNodeMenu(aButton, aPosition, aExtraItems) {
-    if (aExtraItems) {
-      for (let item of aExtraItems) {
-        this.nodemenu.appendChild(item);
-      }
-    }
-    this.nodemenu.openPopup(aButton, aPosition, 0, 0, true, false);
-  },
-
-  hideNodeMenu: function InspectorPanel_hideNodeMenu() {
-    this.nodemenu.hidePopup();
-  },
-
-  /**
-   * Disable the delete item if needed. Update the pseudo classes.
-   */
-  _setupNodeMenu: function InspectorPanel_setupNodeMenu() {
-    // Set the pseudo classes
-    for (let name of ["hover", "active", "focus"]) {
-      let menu = this.panelDoc.getElementById("node-menu-pseudo-" + name);
-      let checked = DOMUtils.hasPseudoClassLock(this.selection.node, ":" + name);
-      menu.setAttribute("checked", checked);
-    }
-
-    // Disable delete item if needed
-    let deleteNode = this.panelDoc.getElementById("node-menu-delete");
-    if (this.selection.isRoot()) {
-      deleteNode.setAttribute("disabled", "true");
-    } else {
-      deleteNode.removeAttribute("disabled");
-    }
-  },
-
-  _resetNodeMenu: function InspectorPanel_resetNodeMenu() {
-    // Remove any extra items
-    while (this.lastNodemenuItem.nextSibling) {
-      let toDelete = this.lastNodemenuItem.nextSibling;
-      toDelete.parentNode.removeChild(toDelete);
-    }
-  },
-
-  _initMarkup: function InspectorPanel_initMarkup() {
-    let doc = this.panelDoc;
-
-    this._markupBox = doc.getElementById("markup-box");
-
-    // create tool iframe
-    this._markupFrame = doc.createElement("iframe");
-    this._markupFrame.setAttribute("flex", "1");
-    this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
-    this._markupFrame.setAttribute("context", "inspector-node-popup");
-
-    // This is needed to enable tooltips inside the iframe document.
-    this._boundMarkupFrameLoad = function InspectorPanel_initMarkupPanel_onload() {
-      this._markupFrame.contentWindow.focus();
-      this._onMarkupFrameLoad();
-    }.bind(this);
-    this._markupFrame.addEventListener("load", this._boundMarkupFrameLoad, true);
-
-    this._markupBox.setAttribute("hidden", true);
-    this._markupBox.appendChild(this._markupFrame);
-    this._markupFrame.setAttribute("src", "chrome://browser/content/devtools/markup-view.xhtml");
-  },
-
-  _onMarkupFrameLoad: function InspectorPanel__onMarkupFrameLoad() {
-    this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
-    delete this._boundMarkupFrameLoad;
-
-    this._markupBox.removeAttribute("hidden");
-
-    let controllerWindow;
-    if (this.tabTarget) {
-      controllerWindow = this.target.tab.ownerDocument.defaultView;
-    } else if (this.winTarget) {
-      controllerWindow = this.target.window;
-    }
-    this.markup = new MarkupView(this, this._markupFrame, controllerWindow);
-
-    this.emit("markuploaded");
-  },
-
-  _destroyMarkup: function InspectorPanel__destroyMarkup() {
-    if (this._boundMarkupFrameLoad) {
-      this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
-      delete this._boundMarkupFrameLoad;
-    }
-
-    if (this.markup) {
-      this.markup.destroy();
-      delete this.markup;
-    }
-
-    if (this._markupFrame) {
-      this._markupFrame.parentNode.removeChild(this._markupFrame);
-      delete this._markupFrame;
-    }
-  },
-
-  /**
-   * Toggle a pseudo class.
-   */
-  togglePseudoClass: function InspectorPanel_togglePseudoClass(aPseudo) {
-    if (this.selection.isElementNode()) {
-      if (DOMUtils.hasPseudoClassLock(this.selection.node, aPseudo)) {
-        this.breadcrumbs.nodeHierarchy.forEach(function(crumb) {
-          DOMUtils.removePseudoClassLock(crumb.node, aPseudo);
-        });
-      } else {
-        let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
-        let node = this.selection.node;
-        do {
-          DOMUtils.addPseudoClassLock(node, aPseudo);
-          node = node.parentNode;
-        } while (hierarchical && node.parentNode)
-      }
-    }
-    this.selection.emit("pseudoclass");
-  },
-
-  /**
-   * Copy the innerHTML of the selected Node to the clipboard.
-   */
-  copyInnerHTML: function InspectorPanel_copyInnerHTML()
-  {
-    if (!this.selection.isNode()) {
-      return;
-    }
-    let toCopy = this.selection.node.innerHTML;
-    if (toCopy) {
-      clipboardHelper.copyString(toCopy);
-    }
-  },
-
-  /**
-   * Copy the outerHTML of the selected Node to the clipboard.
-   */
-  copyOuterHTML: function InspectorPanel_copyOuterHTML()
-  {
-    if (!this.selection.isNode()) {
-      return;
-    }
-    let toCopy = this.selection.node.outerHTML;
-    if (toCopy) {
-      clipboardHelper.copyString(toCopy);
-    }
-  },
-
-  /**
-   * Delete the selected node.
-   */
-  deleteNode: function IUI_deleteNode() {
-    if (!this.selection.isNode() ||
-         this.selection.isRoot()) {
-      return;
-    }
-
-    let toDelete = this.selection.node;
-
-    let parent = this.selection.node.parentNode;
-
-    // If the markup panel is active, use the markup panel to delete
-    // the node, making this an undoable action.
-    if (this.markup) {
-      this.markup.deleteNode(toDelete);
-    } else {
-      // remove the node from content
-      parent.removeChild(toDelete);
-    }
-  },
-
-  /**
-   * Schedule a low-priority change event for things like paint
-   * and resize.
-   */
-  scheduleLayoutChange: function Inspector_scheduleLayoutChange()
-  {
-    if (this._timer) {
-      return null;
-    }
-    this._timer = this.panelWin.setTimeout(function() {
-      this.emit("layout-change");
-      this._timer = null;
-    }.bind(this), LAYOUT_CHANGE_TIMER);
-  },
-
-  /**
-   * Cancel a pending low-priority change event if any is
-   * scheduled.
-   */
-  cancelLayoutChange: function Inspector_cancelLayoutChange()
-  {
-    if (this._timer) {
-      this.panelWin.clearTimeout(this._timer);
-      delete this._timer;
-    }
-  },
-
-}
-
-/////////////////////////////////////////////////////////////////////////
-//// Initializers
-
-XPCOMUtils.defineLazyGetter(InspectorPanel.prototype, "strings",
-  function () {
-    return Services.strings.createBundle(
-            "chrome://browser/locale/devtools/inspector.properties");
-  });
-
-XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
-  return Cc["@mozilla.org/widget/clipboardhelper;1"].
-    getService(Ci.nsIClipboardHelper);
-});
-
-
-XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
-  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-});
diff --git a/browser/devtools/inspector/Selection.jsm b/browser/devtools/inspector/Selection.jsm
deleted file mode 100644
index a5cbf9020b2..00000000000
--- a/browser/devtools/inspector/Selection.jsm
+++ /dev/null
@@ -1,230 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cu = Components.utils;
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-this.EXPORTED_SYMBOLS = ["Selection"];
-
-/**
- * API
- *
- *   new Selection(node=null, track={attributes,detached});
- *   destroy()
- *   node (readonly)
- *   setNode(node, origin="unknown")
- *
- * Helpers:
- *
- *   window
- *   document
- *   isRoot()
- *   isNode()
- *   isHTMLNode()
- *
- * Check the nature of the node:
- *
- *   isElementNode()
- *   isAttributeNode()
- *   isTextNode()
- *   isCDATANode()
- *   isEntityRefNode()
- *   isEntityNode()
- *   isProcessingInstructionNode()
- *   isCommentNode()
- *   isDocumentNode()
- *   isDocumentTypeNode()
- *   isDocumentFragmentNode()
- *   isNotationNode()
- *
- * Events:
- *   "new-node" when the inner node changed
- *   "attribute-changed" when an attribute is changed (only if tracked)
- *   "detached" when the node (or one of its parents) is removed from the document (only if tracked)
- *   "reparented" when the node (or one of its parents) is moved under a different node (only if tracked)
- */
-
-/**
- * A Selection object. Hold a reference to a node.
- * Includes some helpers, fire some helpful events.
- *
- * @param node Inner node.
- *    Can be null. Can be (un)set in the future via the "node" property;
- * @param trackAttribute Tell if events should be fired when the attributes of
- *    the ndoe change.
- *
- */
-this.Selection = function Selection(node=null, track={attributes:true,detached:true}) {
-  new EventEmitter(this);
-  this._onMutations = this._onMutations.bind(this);
-  this.track = track;
-  this.setNode(node);
-}
-
-Selection.prototype = {
-  _node: null,
-
-  _onMutations: function(mutations) {
-    let attributeChange = false;
-    let detached = false;
-    for (let m of mutations) {
-      if (!attributeChange && m.type == "attributes") {
-        attributeChange = true;
-      }
-      if (m.type == "childList") {
-        if (!detached && !this.isConnected()) {
-          detached = true;
-        }
-      }
-    }
-
-    if (attributeChange)
-      this.emit("attribute-changed");
-    if (detached)
-      this.emit("detached");
-  },
-
-  _attachEvents: function SN__attachEvents() {
-    if (!this.window || !this.isNode() || !this.track) {
-      return;
-    }
-
-    if (this.track.attributes) {
-      this._nodeObserver = new this.window.MutationObserver(this._onMutations);
-      this._nodeObserver.observe(this.node, {attributes: true});
-    }
-
-    if (this.track.detached) {
-      this._docObserver = new this.window.MutationObserver(this._onMutations);
-      this._docObserver.observe(this.document.documentElement, {childList: true, subtree: true});
-    }
-  },
-
-  _detachEvents: function SN__detachEvents() {
-    // `disconnect` fail if node's document has
-    // been deleted.
-    try {
-      if (this._nodeObserver)
-        this._nodeObserver.disconnect();
-    } catch(e) {}
-    try {
-      if (this._docObserver)
-        this._docObserver.disconnect();
-    } catch(e) {}
-  },
-
-  destroy: function SN_destroy() {
-    this._detachEvents();
-    this.setNode(null);
-  },
-
-  setNode: function SN_setNode(value, reason="unknown") {
-    this.reason = reason;
-    if (value !== this._node) {
-      let previousNode = this._node;
-      this._detachEvents();
-      this._node = value;
-      this._attachEvents();
-      this.emit("new-node", previousNode, this.reason);
-    }
-  },
-
-  get node() {
-    return this._node;
-  },
-
-  get window() {
-    if (this.isNode()) {
-      return this.node.ownerDocument.defaultView;
-    }
-    return null;
-  },
-
-  get document() {
-    if (this.isNode()) {
-      return this.node.ownerDocument;
-    }
-    return null;
-  },
-
-  isRoot: function SN_isRootNode() {
-    return this.isNode() &&
-           this.isConnected() &&
-           this.node.ownerDocument.documentElement === this.node;
-  },
-
-  isNode: function SN_isNode() {
-    return (this.node &&
-            this.node.ownerDocument &&
-            this.node.ownerDocument.defaultView &&
-            this.node instanceof this.node.ownerDocument.defaultView.Node);
-  },
-
-  isConnected: function SN_isConnected() {
-    try {
-      let doc = this.document;
-      return doc && doc.defaultView && doc.documentElement.contains(this.node);
-    } catch (e) {
-      // "can't access dead object" error
-      return false;
-    }
-  },
-
-  isHTMLNode: function SN_isHTMLNode() {
-    let xhtml_ns = "http://www.w3.org/1999/xhtml";
-    return this.isNode() && this.node.namespaceURI == xhtml_ns;
-  },
-
-  // Node type
-
-  isElementNode: function SN_isElementNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.ELEMENT_NODE;
-  },
-
-  isAttributeNode: function SN_isAttributeNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.ATTRIBUTE_NODE;
-  },
-
-  isTextNode: function SN_isTextNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.TEXT_NODE;
-  },
-
-  isCDATANode: function SN_isCDATANode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.CDATA_SECTION_NODE;
-  },
-
-  isEntityRefNode: function SN_isEntityRefNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.ENTITY_REFERENCE_NODE;
-  },
-
-  isEntityNode: function SN_isEntityNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.ENTITY_NODE;
-  },
-
-  isProcessingInstructionNode: function SN_isProcessingInstructionNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.PROCESSING_INSTRUCTION_NODE;
-  },
-
-  isCommentNode: function SN_isCommentNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.PROCESSING_INSTRUCTION_NODE;
-  },
-
-  isDocumentNode: function SN_isDocumentNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.DOCUMENT_NODE;
-  },
-
-  isDocumentTypeNode: function SN_isDocumentTypeNode() {
-    return this.isNode() && this.node.nodeType ==this.window. Node.DOCUMENT_TYPE_NODE;
-  },
-
-  isDocumentFragmentNode: function SN_isDocumentFragmentNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.DOCUMENT_FRAGMENT_NODE;
-  },
-
-  isNotationNode: function SN_isNotationNode() {
-    return this.isNode() && this.node.nodeType == this.window.Node.NOTATION_NODE;
-  },
-}
diff --git a/browser/devtools/inspector/inspector.css b/browser/devtools/inspector/inspector.css
deleted file mode 100644
index 981c7f54748..00000000000
--- a/browser/devtools/inspector/inspector.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.inspector-breadcrumbs-button {
-  direction: ltr;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-#inspector-sidebar {
-  min-width: 250px;
-}
diff --git a/browser/devtools/inspector/inspector.xul b/browser/devtools/inspector/inspector.xul
deleted file mode 100644
index 0331d35a0ad..00000000000
--- a/browser/devtools/inspector/inspector.xul
+++ /dev/null
@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-<?xml-stylesheet href="chrome://browser/content/devtools/inspector/inspector.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/inspector.css" type="text/css"?>
-<!DOCTYPE window [
-<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/inspector.dtd" >
- %inspectorDTD;
-]>
-
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <script type="application/javascript"
-          src="chrome://global/content/viewSourceUtils.js"/>
-
-  <popupset id="inspectorPopupSet">
-    <!-- Used by the Markup Panel, the Highlighter and the Breadcrumbs -->
-    <menupopup id="inspector-node-popup">
-      <menuitem id="node-menu-copyinner"
-        label="&inspectorHTMLCopyInner.label;"
-        accesskey="&inspectorHTMLCopyInner.accesskey;"
-        oncommand="inspector.copyInnerHTML()"/>
-      <menuitem id="node-menu-copyouter"
-        label="&inspectorHTMLCopyOuter.label;"
-        accesskey="&inspectorHTMLCopyOuter.accesskey;"
-        oncommand="inspector.copyOuterHTML()"/>
-      <menuseparator/>
-      <menuitem id="node-menu-delete"
-        label="&inspectorHTMLDelete.label;"
-        accesskey="&inspectorHTMLDelete.accesskey;"
-        oncommand="inspector.deleteNode()"/>
-      <menuseparator/>
-      <menuitem id="node-menu-pseudo-hover"
-        label=":hover" type="checkbox"
-        oncommand="inspector.togglePseudoClass(':hover')"/>
-      <menuitem id="node-menu-pseudo-active"
-        label=":active" type="checkbox"
-        oncommand="inspector.togglePseudoClass(':active')"/>
-      <menuitem id="node-menu-pseudo-focus"
-        label=":focus" type="checkbox"
-        oncommand="inspector.togglePseudoClass(':focus')"/>
-    </menupopup>
-  </popupset>
-
-  <hbox flex="1">
-    <vbox flex="1">
-      <toolbar id="inspector-toolbar"
-        class="devtools-toolbar"
-        nowindowdrag="true">
-        <toolbarbutton id="inspector-inspect-toolbutton"
-          tooltiptext="&inspector.selectButton.tooltip;"
-          class="devtools-toolbarbutton"
-          hidden="true"
-          oncommand="inspector.highlighter.unlock()"/>
-        <arrowscrollbox id="inspector-breadcrumbs"
-          flex="1" orient="horizontal"
-          clicktoscroll="true"/>
-      </toolbar>
-      <vbox flex="1" id="markup-box">
-      </vbox>
-    </vbox>
-    <splitter class="devtools-side-splitter"/>
-    <tabbox id="inspector-sidebar" class="devtools-sidebar-tabs" hidden="true">
-      <tabs/>
-      <tabpanels flex="1"/>
-    </tabbox>
-  </hbox>
-</window>
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js b/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
deleted file mode 100644
index c209f9f6e93..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_bug_566084_location_changed.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-function test() {
-  let notificationBox, inspector;
-  let alertActive1_called = false;
-  let alertActive2_called = false;
-
-  function startLocationTests() {
-    openInspector(runInspectorTests);
-  }
-
-  function runInspectorTests(aInspector) {
-    inspector = aInspector;
-
-    let para = content.document.querySelector("p");
-    ok(para, "found the paragraph element");
-    is(para.textContent, "init", "paragraph content is correct");
-
-    inspector.markDirty();
-
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.getToolboxForTarget(target);
-    notificationBox = toolbox.getNotificationBox();
-    notificationBox.addEventListener("AlertActive", alertActive1, false);
-
-    ok(toolbox, "We have access to the notificationBox");
-
-    gBrowser.selectedBrowser.addEventListener("load", onPageLoad, true);
-
-    content.location = "data:text/html,<div>location change test 1 for " +
-      "inspector</div><p>test1</p>";
-  }
-
-  function alertActive1() {
-    alertActive1_called = true;
-    notificationBox.removeEventListener("AlertActive", alertActive1, false);
-
-    let notification = notificationBox.
-      getNotificationWithValue("inspector-page-navigation");
-    ok(notification, "found the inspector-page-navigation notification");
-
-    // By closing the notification it is expected that page navigation is
-    // canceled.
-    executeSoon(function() {
-      notification.close();
-      locationTest2();
-    });
-  }
-
-  function locationTest2() {
-    // Location did not change.
-    let para = content.document.querySelector("p");
-    ok(para, "found the paragraph element, second time");
-    is(para.textContent, "init", "paragraph content is correct");
-
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let inspector = gDevTools.getPanelForTarget("inspector", target);
-    ok(inspector, "Inspector still alive");
-
-    notificationBox.addEventListener("AlertActive", alertActive2, false);
-
-    content.location = "data:text/html,<div>location change test 2 for " +
-      "inspector</div><p>test2</p>";
-  }
-
-  function alertActive2() {
-    alertActive2_called = true;
-    notificationBox.removeEventListener("AlertActive", alertActive2, false);
-
-    let notification = notificationBox.
-      getNotificationWithValue("inspector-page-navigation");
-    ok(notification, "found the inspector-page-navigation notification");
-
-    let buttons = notification.querySelectorAll("button");
-    let buttonLeave = null;
-    for (let i = 0; i < buttons.length; i++) {
-      if (buttons[i].buttonInfo.id == "inspector.confirmNavigationAway.buttonLeave") {
-        buttonLeave = buttons[i];
-        break;
-      }
-    }
-
-    ok(buttonLeave, "the Leave page button was found");
-
-    // Accept page navigation.
-    executeSoon(function(){
-      buttonLeave.doCommand();
-    });
-  }
-
-  function onPageLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onPageLoad, true);
-
-    isnot(content.location.href.indexOf("test2"), -1,
-          "page navigated to the correct location");
-
-    let para = content.document.querySelector("p");
-    ok(para, "found the paragraph element, third time");
-    is(para.textContent, "test2", "paragraph content is correct");
-
-    let root = content.document.documentElement;
-    ok(inspector.selection.node, root, "Selection is the root of the new page.");
-
-    ok(alertActive1_called, "first notification box has been showed");
-    ok(alertActive2_called, "second notification box has been showed");
-    testEnd();
-  }
-
-
-  function testEnd() {
-    notificationBox = null;
-    gBrowser.removeCurrentTab();
-    executeSoon(finish);
-  }
-
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-    waitForFocus(startLocationTests, content);
-  }, true);
-
-  content.location = "data:text/html,<div>location change tests for " +
-    "inspector.</div><p>init</p>";
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
deleted file mode 100644
index 3f9355dd733..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-  let iframe;
-  let iframeLoads = 0;
-  let checksAfterLoads = false;
-  let inspector;
-
-  function startTest() {
-    openInspector(runInspectorTests);
-  }
-
-  function runInspectorTests(aInspector) {
-    inspector = aInspector;
-
-    iframe = content.document.querySelector("iframe");
-    ok(iframe, "found the iframe element");
-
-    ok(inspector.highlighter._highlighting, "Inspector is highlighting");
-
-    iframe.addEventListener("load", onIframeLoad, false);
-
-    executeSoon(function() {
-      iframe.contentWindow.location = "javascript:location.reload()";
-    });
-  }
-
-  function onIframeLoad() {
-    if (++iframeLoads != 2) {
-      executeSoon(function() {
-        iframe.contentWindow.location = "javascript:location.reload()";
-      });
-      return;
-    }
-
-    iframe.removeEventListener("load", onIframeLoad, false);
-
-    ok(inspector.highlighter._highlighting, "Inspector is highlighting after iframe nav");
-
-    checksAfterLoads = true;
-
-    finishTest();
-  }
-
-  function finishTest() {
-    is(iframeLoads, 2, "iframe loads");
-    ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
-
-    iframe = null;
-    gBrowser.removeCurrentTab();
-    executeSoon(finish);
-  }
-
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-    waitForFocus(startTest, content);
-  }, true);
-
-  content.location = "data:text/html,<p>bug 699308 - test iframe navigation" +
-    "<iframe src='data:text/html,hello world'></iframe>";
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_changes.js b/browser/devtools/inspector/test/browser_inspector_changes.js
deleted file mode 100644
index a3088e51d22..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_changes.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* -*- Mode: C++; 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/. */
-let doc;
-let testDiv;
-
-function test() {
-  let inspector;
-
-  function createDocument()
-  {
-    doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
-    doc.title = "Inspector Change Test";
-    openInspector(runInspectorTests);
-  }
-
-
-  function getInspectorProp(aName)
-  {
-    let computedview = inspector.sidebar.getWindowForTab("computedview").computedview.view;
-    for each (let view in computedview.propertyViews) {
-      if (view.name == aName) {
-        return view;
-      }
-    }
-    return null;
-  }
-
-  function runInspectorTests(aInspector)
-  {
-    inspector = aInspector;
-    inspector.sidebar.once("computedview-ready", function() {
-      info("Computed View ready");
-      inspector.sidebar.select("computedview");
-
-      testDiv = doc.getElementById("testdiv");
-
-      testDiv.style.fontSize = "10px";
-
-      // Start up the style inspector panel...
-      Services.obs.addObserver(stylePanelTests, "StyleInspector-populated", false);
-
-      inspector.selection.setNode(testDiv);
-    });
-  }
-
-  function stylePanelTests()
-  {
-    Services.obs.removeObserver(stylePanelTests, "StyleInspector-populated");
-
-    let computedview = inspector.sidebar.getWindowForTab("computedview").computedview;
-    ok(computedview, "Style Panel has a cssHtmlTree");
-
-    let propView = getInspectorProp("font-size");
-    is(propView.value, "10px", "Style inspector should be showing the correct font size.");
-
-    Services.obs.addObserver(stylePanelAfterChange, "StyleInspector-populated", false);
-
-    testDiv.style.fontSize = "15px";
-    inspector.emit("layout-change");
-  }
-
-  function stylePanelAfterChange()
-  {
-    Services.obs.removeObserver(stylePanelAfterChange, "StyleInspector-populated");
-
-    let propView = getInspectorProp("font-size");
-    is(propView.value, "15px", "Style inspector should be showing the new font size.");
-
-    stylePanelNotActive();
-  }
-
-  function stylePanelNotActive()
-  {
-    // Tests changes made while the style panel is not active.
-    inspector.sidebar.select("ruleview");
-
-    executeSoon(function() {
-      Services.obs.addObserver(stylePanelAfterSwitch, "StyleInspector-populated", false);
-      testDiv.style.fontSize = "20px";
-      inspector.sidebar.select("computedview");
-    });
-  }
-
-  function stylePanelAfterSwitch()
-  {
-    Services.obs.removeObserver(stylePanelAfterSwitch, "StyleInspector-populated");
-
-    let propView = getInspectorProp("font-size");
-    is(propView.value, "20px", "Style inspector should be showing the newest font size.");
-
-    finishTest();
-  }
-
-  function finishTest()
-  {
-    gBrowser.removeCurrentTab();
-    finish();
-  }
-
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js b/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
deleted file mode 100644
index 8dfca604b74..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-
-function test()
-{
-  let toolbox;
-  let inspector;
-
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    waitForFocus(startInspector, content);
-  }, true);
-  content.location = "data:text/html,mop"
-
-  function startInspector() {
-    info("Tab loaded");
-    openInspector(function(aInspector) {
-      inspector = aInspector;
-      ok(!inspector.highlighter.hidden, "Highlighter is visible");
-      toolbox = inspector._toolbox;
-      toolbox.once("webconsole-selected", onWebConsoleSelected);
-      toolbox.selectTool("webconsole");
-    });
-  }
-
-  function onWebConsoleSelected() {
-    executeSoon(function() {
-      ok(inspector.highlighter.hidden, "Highlighter is hidden");
-      toolbox.once("inspector-selected", onInspectorSelected);
-      toolbox.selectTool("inspector");
-    });
-  }
-
-  function onInspectorSelected() {
-    executeSoon(function() {
-      ok(!inspector.highlighter.hidden, "Highlighter is visible once inspector reopen");
-      gBrowser.removeCurrentTab();
-      finish();
-    });
-  }
-}
-
diff --git a/browser/devtools/inspector/test/browser_inspector_initialization.js b/browser/devtools/inspector/test/browser_inspector_initialization.js
deleted file mode 100644
index 4083dd29b17..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_initialization.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/* -*- Mode: C++; 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/. */
-let doc;
-let salutation;
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
-    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
-    '<h1>Some header text</h1>\n' +
-    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
-    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
-    'solely to provide some things to test the inspector initialization.</p>\n' +
-    'If you are reading this, you should go do something else instead. Maybe ' +
-    'read a book. Or better yet, write some test-cases for another bit of code. ' +
-    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
-    '<p id="closing">end transmission</p>\n' +
-    '</div>';
-  doc.title = "Inspector Initialization Test";
-
-  openInspector(startInspectorTests);
-}
-
-function startInspectorTests()
-{
-  ok(true, "Inspector started, and notification received.");
-
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-
-  ok(inspector, "Inspector instance is accessible");
-  ok(inspector.isReady, "Inspector instance is ready");
-  is(inspector.target.tab, gBrowser.selectedTab, "Valid target");
-  ok(inspector.highlighter, "Highlighter is up");
-
-  let p = doc.querySelector("p");
-
-  inspector.selection.setNode(p);
-
-  testHighlighter(p);
-  testMarkupView(p);
-  testBreadcrumbs(p);
-
-  let span = doc.querySelector("span");
-  span.scrollIntoView();
-
-  inspector.selection.setNode(span);
-
-  testHighlighter(span);
-  testMarkupView(span);
-  testBreadcrumbs(span);
-
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  toolbox.once("destroyed", function() {
-    ok("true", "'destroyed' notification received.");
-    let toolbox = gDevTools.getToolboxForTarget(target);
-    ok(!toolbox, "Toolbox destroyed.");
-    executeSoon(runContextMenuTest);
-  });
-  toolbox.destroy();
-}
-
-
-function testHighlighter(node)
-{
-  ok(isHighlighting(), "Highlighter is highlighting");
-  is(getHighlitNode(), node, "Right node is highlighted");
-}
-
-function testMarkupView(node)
-{
-  let i = getActiveInspector();
-  is(i.markup._selectedContainer.node, node, "Right node is selected in the markup view");
-}
-
-function testBreadcrumbs(node)
-{
-  let b = getActiveInspector().breadcrumbs;
-  let expectedText = b.prettyPrintNodeAsText(node);
-  let button = b.container.querySelector("button[checked=true]");
-  ok(button, "A crumbs is checked=true");
-  is(button.getAttribute("tooltiptext"), expectedText, "Crumb refers to the right node");
-}
-
-function _clickOnInspectMenuItem(node) {
-  document.popupNode = node;
-  var contentAreaContextMenu = document.getElementById("contentAreaContextMenu");
-  var contextMenu = new nsContextMenu(contentAreaContextMenu, gBrowser);
-  contextMenu.inspectNode();
-}
-
-function runContextMenuTest()
-{
-  salutation = doc.getElementById("salutation");
-  _clickOnInspectMenuItem(salutation);
-  gDevTools.once("inspector-ready", testInitialNodeIsSelected);
-}
-
-function testInitialNodeIsSelected() {
-  testHighlighter(salutation);
-  testMarkupView(salutation);
-  testBreadcrumbs(salutation);
-  inspectNodesFromContextTestWhileOpen();
-}
-
-function inspectNodesFromContextTestWhileOpen()
-{
-  let closing = doc.getElementById("closing");
-  getActiveInspector().selection.once("new-node", function() {
-    ok(true, "Get selection's 'new-node' selection");
-    executeSoon(function() {
-      testHighlighter(closing);
-      testMarkupView(closing);
-      testBreadcrumbs(closing);
-      finishInspectorTests();
-    }
-  )});
-  _clickOnInspectMenuItem(closing);
-}
-
-function finishInspectorTests(subject, topic, aWinIdString)
-{
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
-
diff --git a/browser/devtools/inspector/test/browser_inspector_invalidate.js b/browser/devtools/inspector/test/browser_inspector_invalidate.js
deleted file mode 100644
index 3fc9a20434e..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_invalidate.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-
-  let doc;
-  let div;
-  let inspector;
-
-  function createDocument()
-  {
-    div = doc.createElement("div");
-    div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
-    doc.body.appendChild(div);
-
-    openInspector(runTest);
-  }
-
-  function runTest(inspector)
-  {
-    inspector.selection.setNode(div);
-
-    executeSoon(function() {
-      let outline = inspector.highlighter.outline;
-      is(outline.style.width, "100px", "selection has the right width");
-
-      div.style.width = "200px";
-      function pollTest() {
-        if (outline.style.width == "100px") {
-          setTimeout(pollTest, 10);
-          return;
-        }
-        is(outline.style.width, "200px", "selection updated");
-        gBrowser.removeCurrentTab();
-        finish();
-      }
-      setTimeout(pollTest, 10);
-    });
-  }
-
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
deleted file mode 100644
index f8e2baf1ccf..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-
-  let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-
-  let pseudos = ["hover", "active", "focus"];
-
-  let doc;
-  let div;
-  let menu;
-  let inspector;
-
-  waitForExplicitFinish();
-  ignoreAllUncaughtExceptions();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,pseudo-class lock node menu tests";
-
-  function createDocument()
-  {
-    div = doc.createElement("div");
-    div.textContent = "test div";
-
-    doc.body.appendChild(div);
-
-    openInspector(selectNode);
-  }
-
-  function selectNode(aInspector)
-  {
-    inspector = aInspector;
-    inspector.selection.setNode(div);
-    performTests();
-  }
-
-  function performTests()
-  {
-    menu = inspector.panelDoc.getElementById("inspector-node-popup");
-    menu.addEventListener("popupshowing", testMenuItems, true);
-    menu.openPopup();
-  }
-
-  function testMenuItems()
-  {
-    menu.removeEventListener("popupshowing", testMenuItems, true);
-
-    for each (let pseudo in pseudos) {
-      let menuitem = inspector.panelDoc.getElementById("node-menu-pseudo-" + pseudo);
-      ok(menuitem, ":" + pseudo + " menuitem exists");
-
-      menuitem.doCommand();
-
-      is(DOMUtils.hasPseudoClassLock(div, ":" + pseudo), true,
-        "pseudo-class lock has been applied");
-    }
-    finishUp();
-  }
-
-  function finishUp()
-  {
-    gBrowser.removeCurrentTab();
-    finish();
-  }
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_sidebarstate.js b/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
deleted file mode 100644
index ba51db9a584..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-let doc;
-let inspector;
-
-function createDocument()
-{
-  doc.body.innerHTML = '<h1>Sidebar state test</h1>';
-  doc.title = "Sidebar State Test";
-
-  openInspector(function(panel) {
-    inspector = panel;
-    inspector.sidebar.select("ruleview");
-    inspectorRuleViewOpened();
-  });
-}
-
-function inspectorRuleViewOpened()
-{
-  is(inspector.sidebar.getCurrentTabID(), "ruleview", "Rule View is selected by default");
-
-  // Select the computed view and turn off the inspector.
-  inspector.sidebar.select("computedview");
-
-  gDevTools.once("toolbox-destroyed", inspectorClosed);
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  executeSoon(function() {
-    toolbox.destroy();
-  });
-}
-
-function inspectorClosed()
-{
-  openInspector(function(panel) {
-    inspector = panel;
-    if (inspector.sidebar.getCurrentTabID()) {
-      // Default sidebar already selected.
-      testNewDefaultTab();
-    } else {
-      // Default sidebar still to be selected.
-      inspector.sidebar.once("select", testNewDefaultTab);
-    }
-  });
-}
-
-function testNewDefaultTab()
-{
-  is(inspector.sidebar.getCurrentTabID(), "computedview", "Computed view is selected by default.");
-
-  finishTest();
-}
-
-
-function finishTest()
-{
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic tests for inspector";
-}
diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn
index ea3f4638947..d3435d62059 100644
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -7,7 +7,7 @@ browser.jar:
     content/browser/devtools/markup-view.css      (markupview/markup-view.css)
     content/browser/NetworkPanel.xhtml            (webconsole/NetworkPanel.xhtml)
     content/browser/devtools/webconsole.js        (webconsole/webconsole.js)
-    content/browser/devtools/webconsole.xul       (webconsole/webconsole.xul)
+*   content/browser/devtools/webconsole.xul       (webconsole/webconsole.xul)
 *   content/browser/scratchpad.xul                (scratchpad/scratchpad.xul)
     content/browser/scratchpad.js                 (scratchpad/scratchpad.js)
     content/browser/splitview.css                 (shared/splitview.css)
@@ -16,12 +16,11 @@ browser.jar:
     content/browser/devtools/csshtmltree.xul      (styleinspector/csshtmltree.xul)
     content/browser/devtools/cssruleview.xul      (styleinspector/cssruleview.xul)
     content/browser/devtools/styleinspector.css   (styleinspector/styleinspector.css)
-    content/browser/devtools/layoutview/view.js   (layoutview/view.js)
     content/browser/devtools/layoutview/view.xhtml  (layoutview/view.xhtml)
     content/browser/devtools/layoutview/view.css  (layoutview/view.css)
     content/browser/orion.js                      (sourceeditor/orion/orion.js)
 *   content/browser/source-editor-overlay.xul     (sourceeditor/source-editor-overlay.xul)
-    content/browser/debugger.xul                  (debugger/debugger.xul)
+*   content/browser/debugger.xul                  (debugger/debugger.xul)
     content/browser/debugger.css                  (debugger/debugger.css)
     content/browser/debugger-controller.js        (debugger/debugger-controller.js)
     content/browser/debugger-view.js              (debugger/debugger-view.js)
@@ -30,11 +29,3 @@ browser.jar:
     content/browser/devtools/commandline.css      (commandline/commandline.css)
     content/browser/devtools/commandlineoutput.xhtml  (commandline/commandlineoutput.xhtml)
     content/browser/devtools/commandlinetooltip.xhtml  (commandline/commandlinetooltip.xhtml)
-    content/browser/devtools/framework/toolbox-window.xul    (framework/toolbox-window.xul)
-    content/browser/devtools/framework/toolbox.xul           (framework/toolbox.xul)
-    content/browser/devtools/framework/toolbox.css           (framework/toolbox.css)
-    content/browser/devtools/inspector/inspector.xul         (inspector/inspector.xul)
-    content/browser/devtools/inspector/inspector.css         (inspector/inspector.css)
-    content/browser/devtools/connect.xhtml  (framework/connect/connect.xhtml)
-    content/browser/devtools/connect.css    (framework/connect/connect.css)
-    content/browser/devtools/connect.js     (framework/connect/connect.js)
diff --git a/browser/devtools/layoutview/LayoutView.jsm b/browser/devtools/layoutview/LayoutView.jsm
new file mode 100644
index 00000000000..b07d411acff
--- /dev/null
+++ b/browser/devtools/layoutview/LayoutView.jsm
@@ -0,0 +1,368 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+"use strict";
+
+const Cu = Components.utils;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/inspector.jsm");
+Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
+Cu.import("resource:///modules/devtools/CssLogic.jsm");
+
+this.EXPORTED_SYMBOLS = ["LayoutView"];
+
+this.LayoutView = function LayoutView(aOptions)
+{
+  this.chromeDoc = aOptions.document;
+  this.inspector = aOptions.inspector;
+  this.browser = this.inspector.chromeWindow.gBrowser;
+
+  this.init();
+}
+
+LayoutView.prototype = {
+  init: function LV_init() {
+    this.cssLogic = new CssLogic();
+
+    this.update = this.update.bind(this);
+    this.onMessage = this.onMessage.bind(this);
+
+    this.isOpen = false;
+    this.documentReady = false;
+
+    // Is the layout view was open before?
+    if (!("_layoutViewIsOpen" in this.inspector)) {
+      this.inspector._layoutViewIsOpen =
+        Services.prefs.getBoolPref("devtools.layoutview.open");
+    }
+
+    // We update the values when:
+    //  a node is locked
+    //  we get the MozAfterPaint event and the node is locked
+    function onSelect() {
+      if (this.inspector.locked) {
+        this.cssLogic.highlight(this.inspector.selection);
+        this.undim();
+        this.update();
+        // We make sure we never add 2 listeners.
+        if (!this.trackingPaint) {
+          this.browser.addEventListener("MozAfterPaint", this.update, true);
+          this.trackingPaint = true;
+        }
+      }
+    }
+
+    function onUnlock() {
+      this.browser.removeEventListener("MozAfterPaint", this.update, true);
+      this.trackingPaint = false;
+      this.dim();
+    }
+
+    this.onSelect= onSelect.bind(this);
+    this.onUnlock = onUnlock.bind(this);
+    this.inspector.on("select", this.onSelect);
+    this.inspector.on("unlocked", this.onUnlock);
+
+    // Build the layout view in the sidebar.
+    this.buildView();
+
+    this.bound_handleKeypress = this.handleKeypress.bind(this);
+    this.iframe.addEventListener("keypress", this.bound_handleKeypress, true);
+
+    // Get messages from the iframe.
+    this.inspector.chromeWindow.addEventListener("message", this.onMessage, true);
+
+    // Store for the different dimensions of the node.
+    // 'selector' refers to the element that holds the value in view.xhtml;
+    // 'property' is what we are measuring;
+    // 'value' is the computed dimension, computed in update().
+    this.map = {
+      marginTop: {selector: ".margin.top > span",
+                  property: "margin-top",
+                  value: undefined},
+      marginBottom: {selector: ".margin.bottom > span",
+                  property: "margin-bottom",
+                  value: undefined},
+      marginLeft: {selector: ".margin.left > span",
+                  property: "margin-left",
+                  value: undefined},
+      marginRight: {selector: ".margin.right > span",
+                  property: "margin-right",
+                  value: undefined},
+      paddingTop: {selector: ".padding.top > span",
+                  property: "padding-top",
+                  value: undefined},
+      paddingBottom: {selector: ".padding.bottom > span",
+                  property: "padding-bottom",
+                  value: undefined},
+      paddingLeft: {selector: ".padding.left > span",
+                  property: "padding-left",
+                  value: undefined},
+      paddingRight: {selector: ".padding.right > span",
+                  property: "padding-right",
+                  value: undefined},
+      borderTop: {selector: ".border.top > span",
+                  property: "border-top-width",
+                  value: undefined},
+      borderBottom: {selector: ".border.bottom > span",
+                  property: "border-bottom-width",
+                  value: undefined},
+      borderLeft: {selector: ".border.left > span",
+                  property: "border-left-width",
+                  value: undefined},
+      borderRight: {selector: ".border.right > span",
+                  property: "border-right-width",
+                  value: undefined},
+    };
+  },
+
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy: function LV_destroy() {
+    this.inspector.off("select", this.onSelect);
+    this.inspector.off("unlocked", this.onUnlock);
+    this.browser.removeEventListener("MozAfterPaint", this.update, true);
+    this.iframe.removeEventListener("keypress", this.bound_handleKeypress, true);
+    this.inspector.chromeWindow.removeEventListener("message", this.onMessage, true);
+    this.close();
+    this.sizeHeadingLabel = null;
+    this.sizeLabel = null;
+    this.iframe = null;
+    this.view.parentNode.removeChild(this.view);
+  },
+
+  /**
+   * Build the Layout container:
+   *
+   * <vbox id="inspector-layoutview-container">
+   *  <iframe src="chrome://browser/content/devtools/layoutview/view.xhtml"/>
+   * </vbox>
+   */
+  buildView: function LV_buildPanel() {
+    this.iframe = this.chromeDoc.createElement("iframe");
+    this.iframe.setAttribute("src", "chrome://browser/content/devtools/layoutview/view.xhtml");
+
+    this.view = this.chromeDoc.createElement("vbox");
+    this.view.id = "inspector-layoutview-container";
+    this.view.appendChild(this.iframe);
+
+    let sidebar = this.chromeDoc.getElementById("devtools-sidebar-box");
+    sidebar.appendChild(this.view);
+  },
+
+  /**
+   * Called when the iframe is loaded.
+   */
+  onDocumentReady: function LV_onDocumentReady() {
+    this.documentReady = true;
+    this.doc = this.iframe.contentDocument;
+
+    // Save reference to the labels displaying size of the node.
+    this.sizeLabel = this.doc.querySelector(".size > span");
+    this.sizeHeadingLabel = this.doc.getElementById("element-size");
+
+    // We can't do that earlier because open() and close() need to do stuff
+    // inside the iframe.
+
+    if (this.inspector.locked)
+      this.onSelect();
+    else
+      this.onUnlock();
+
+    if (this.inspector._layoutViewIsOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+
+  },
+
+  /**
+   * This is where we get messages from the layout view iframe.
+   */
+  onMessage: function LV_onMessage(e) {
+    switch (e.data) {
+      case "layoutview-toggle-view":
+        this.toggle(true);
+        break;
+      case "layoutview-ready":
+        this.onDocumentReady();
+        break;
+      default:
+        break;
+    }
+  },
+
+  /**
+   * Handle keypress.
+   */
+   handleKeypress: function LV_handleKeypress(event) {
+     let win = this.inspector.chromeWindow;
+
+     // avoid scroll
+     if (event.keyCode == win.KeyEvent.DOM_VK_LEFT ||
+         event.keyCode == win.KeyEvent.DOM_VK_RIGHT ||
+         event.keyCode == win.KeyEvent.DOM_VK_UP ||
+         event.keyCode == win.KeyEvent.DOM_VK_DOWN ||
+         event.keyCode == win.KeyEvent.DOM_VK_PAGE_UP ||
+         event.keyCode == win.KeyEvent.DOM_VK_PAGE_DOWN) {
+
+        event.preventDefault();
+     }
+
+     if (event.charCode == win.KeyEvent.DOM_VK_SPACE) {
+       this.toggle(true);
+     }
+   },
+
+  /**
+   * Open the view container.
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  open: function LV_open(aUserAction) {
+    this.isOpen = true;
+    if (this.documentReady)
+      this.doc.body.classList.add("open");
+    if (aUserAction) {
+      this.inspector._layoutViewIsOpen = true;
+      Services.prefs.setBoolPref("devtools.layoutview.open", true);
+      this.view.removeAttribute("disable-transitions");
+    } else {
+      this.view.setAttribute("disable-transitions", "true");
+    }
+    this.iframe.setAttribute("open", "true");
+    this.update();
+  },
+
+  /**
+   * Close the view container.
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  close: function LV_close(aUserAction) {
+    this.isOpen = false;
+    if (this.documentReady)
+      this.doc.body.classList.remove("open");
+    if (aUserAction) {
+      this.inspector._layoutViewIsOpen = false;
+      Services.prefs.setBoolPref("devtools.layoutview.open", false);
+      this.view.removeAttribute("disable-transitions");
+    } else {
+      this.view.setAttribute("disable-transitions", "true");
+    }
+    this.iframe.removeAttribute("open");
+  },
+
+  /**
+   * Toggle view container state (open/close).
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  toggle: function LV_toggle(aUserAction) {
+    this.isOpen ? this.close(aUserAction):this.open(aUserAction);
+  },
+
+  /**
+   * Hide the layout boxes. No node are selected.
+   */
+  dim: function LV_dim() {
+    if (!this.documentReady) return;
+    this.doc.body.classList.add("dim");
+  },
+
+  /**
+   * Show the layout boxes. A node is selected.
+   */
+  undim: function LV_dim() {
+    if (!this.documentReady) return;
+    this.doc.body.classList.remove("dim");
+  },
+
+  /**
+   * Compute the dimensions of the node and update the values in
+   * the layoutview/view.xhtml document.
+   */
+  update: function LV_update() {
+    let node = this.inspector.selection;
+    if (!node ||
+        !LayoutHelpers.isNodeConnected(node) ||
+        !this.documentReady) {
+      return;
+    }
+
+    // First, we update the first part of the layout view, with
+    // the size of the element.
+
+    let clientRect = node.getBoundingClientRect();
+    let width = Math.round(clientRect.width);
+    let height = Math.round(clientRect.height);
+
+    let newLabel = width + "x" + height;
+    if (this.sizeHeadingLabel.textContent != newLabel) {
+      this.sizeHeadingLabel.textContent = newLabel;
+    }
+
+    // If the view is closed, no need to do anything more.
+    if (!this.isOpen) return;
+
+    // We compute and update the values of margins & co.
+    let style = this.browser.contentWindow.getComputedStyle(node);;
+
+    for (let i in this.map) {
+      let property = this.map[i].property;
+      this.map[i].value = parseInt(style.getPropertyValue(property));
+    }
+
+    let margins = this.processMargins(node);
+    if ("top" in margins) this.map.marginTop.value = "auto";
+    if ("right" in margins) this.map.marginRight.value = "auto";
+    if ("bottom" in margins) this.map.marginBottom.value = "auto";
+    if ("left" in margins) this.map.marginLeft.value = "auto";
+
+    for (let i in this.map) {
+      let selector = this.map[i].selector;
+      let span = this.doc.querySelector(selector);
+      if (span.textContent.length > 0 &&
+          span.textContent == this.map[i].value) {
+        continue;
+      }
+      span.textContent = this.map[i].value;
+    }
+
+    width -= this.map.borderLeft.value + this.map.borderRight.value +
+             this.map.paddingLeft.value + this.map.paddingRight.value;
+
+    height -= this.map.borderTop.value + this.map.borderBottom.value +
+              this.map.paddingTop.value + this.map.paddingBottom.value;
+
+    let newValue = width + "x" + height;
+    if (this.sizeLabel.textContent != newValue) {
+      this.sizeLabel.textContent = newValue;
+    }
+  },
+
+  /**
+   * Find margins declared 'auto'
+   */
+  processMargins: function LV_processMargins(node) {
+    let margins = {};
+
+    for each (let prop in ["top", "bottom", "left", "right"]) {
+      let info = this.cssLogic.getPropertyInfo("margin-" + prop);
+      let selectors = info.matchedSelectors;
+      if (selectors && selectors.length > 0 && selectors[0].value == "auto") {
+        margins[prop] = "auto";
+      }
+    }
+
+    return margins;
+  },
+}
diff --git a/browser/devtools/layoutview/Makefile.in b/browser/devtools/layoutview/Makefile.in
index a8d0b209397..df206dadd99 100644
--- a/browser/devtools/layoutview/Makefile.in
+++ b/browser/devtools/layoutview/Makefile.in
@@ -13,3 +13,6 @@ include $(DEPTH)/config/autoconf.mk
 TEST_DIRS += test
 
 include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/layoutview/test/browser_layoutview.js b/browser/devtools/layoutview/test/browser_layoutview.js
index 3767c54424f..291b8d267b0 100644
--- a/browser/devtools/layoutview/test/browser_layoutview.js
+++ b/browser/devtools/layoutview/test/browser_layoutview.js
@@ -1,10 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test() {
   waitForExplicitFinish();
 
@@ -14,7 +10,6 @@ function test() {
   let doc;
   let node;
   let view;
-  let inspector;
 
   // Expected values:
   let res1 = [
@@ -66,36 +61,44 @@ function test() {
     node = doc.querySelector("div");
     ok(node, "node found");
 
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-ready", function(event, panel) {
-      let inspector = gDevTools.getPanelForTarget("inspector", target);
-      openLayoutView(inspector);
-    });
+    Services.obs.addObserver(openLayoutView,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function openLayoutView(aInspector) {
-    inspector = aInspector;
+  function openLayoutView() {
+    Services.obs.removeObserver(openLayoutView,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
 
     info("Inspector open");
 
-    inspector.selection.setNode(node);
-    inspector.sidebar.select("layoutview");
-    inspector.sidebar.once("layoutview-ready", viewReady);
+    let highlighter = InspectorUI.highlighter;
+    highlighter.highlight(node);
+    highlighter.lock();
+
+    window.addEventListener("message", viewReady, true);
   }
 
-  function viewReady() {
+  function viewReady(e) {
+    if (e.data != "layoutview-ready") return;
+
+    window.removeEventListener("message", viewReady, true);
+
     info("Layout view ready");
 
-    view = inspector.sidebar.getWindowForTab("layoutview");
+    view = InspectorUI._sidebar._layoutview;
 
-    ok(!!view.layoutview, "LayoutView document is alive.");
+    ok(!!view, "LayoutView document is alive.");
+
+    view.open();
+
+    ok(view.iframe.getAttribute("open"), "true", "View is open.");
 
     test1();
   }
 
   function test1() {
-    let viewdoc = view.document;
+    let viewdoc = view.iframe.contentDocument;
 
     for (let i = 0; i < res1.length; i++) {
       let elt = viewdoc.querySelector(res1[i].selector);
@@ -104,14 +107,14 @@ function test() {
 
     gBrowser.selectedBrowser.addEventListener("MozAfterPaint", test2, false);
 
-    inspector.selection.node.style.height = "150px";
-    inspector.selection.node.style.paddingRight = "50px";
+    InspectorUI.selection.style.height = "150px";
+    InspectorUI.selection.style.paddingRight = "50px";
   }
 
   function test2() {
     gBrowser.selectedBrowser.removeEventListener("MozAfterPaint", test2, false);
 
-    let viewdoc = view.document;
+    let viewdoc = view.iframe.contentDocument;
 
     for (let i = 0; i < res2.length; i++) {
       let elt = viewdoc.querySelector(res2[i].selector);
@@ -119,14 +122,16 @@ function test() {
     }
 
     executeSoon(function() {
-      gDevTools.once("toolbox-destroyed", finishUp);
-      inspector._toolbox.destroy();
+      Services.obs.addObserver(finishUp,
+        InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+      InspectorUI.closeInspectorUI();
     });
   }
 
   function finishUp() {
     Services.prefs.clearUserPref("devtools.layoutview.enabled");
     Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/layoutview/view.css b/browser/devtools/layoutview/view.css
index 4042929f0d0..a8e9d2861b0 100644
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@@ -38,6 +38,10 @@ body {
   -moz-box-pack: end;
 }
 
+#header:focus {
+  outline: none;
+}
+
 #main {
   margin: 0 10px 10px 10px;
   -moz-box-sizing: border-box;
diff --git a/browser/devtools/layoutview/view.js b/browser/devtools/layoutview/view.js
deleted file mode 100644
index 130b6d790bc..00000000000
--- a/browser/devtools/layoutview/view.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-"use strict";
-
-const Cu = Components.utils;
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-
-function LayoutView(aInspector, aWindow)
-{
-  this.inspector = aInspector;
-
-  // <browser> is not always available (for Chrome targets for example)
-  if (this.inspector.target.tab) {
-    this.browser = aInspector.target.tab.linkedBrowser;
-  }
-
-  this.doc = aWindow.document;
-  this.sizeLabel = this.doc.querySelector(".size > span");
-  this.sizeHeadingLabel = this.doc.getElementById("element-size");
-
-  this.init();
-}
-
-LayoutView.prototype = {
-  init: function LV_init() {
-    this.cssLogic = new CssLogic();
-
-    this.update = this.update.bind(this);
-    this.onNewNode = this.onNewNode.bind(this);
-    this.onHighlighterLocked = this.onHighlighterLocked.bind(this);
-    this.inspector.selection.on("detached", this.onNewNode);
-    this.inspector.selection.on("new-node", this.onNewNode);
-    this.inspector.sidebar.on("layoutview-selected", this.onNewNode);
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.on("locked", this.onHighlighterLocked);
-    }
-
-    // Store for the different dimensions of the node.
-    // 'selector' refers to the element that holds the value in view.xhtml;
-    // 'property' is what we are measuring;
-    // 'value' is the computed dimension, computed in update().
-    this.map = {
-      marginTop: {selector: ".margin.top > span",
-                  property: "margin-top",
-                  value: undefined},
-      marginBottom: {selector: ".margin.bottom > span",
-                  property: "margin-bottom",
-                  value: undefined},
-      marginLeft: {selector: ".margin.left > span",
-                  property: "margin-left",
-                  value: undefined},
-      marginRight: {selector: ".margin.right > span",
-                  property: "margin-right",
-                  value: undefined},
-      paddingTop: {selector: ".padding.top > span",
-                  property: "padding-top",
-                  value: undefined},
-      paddingBottom: {selector: ".padding.bottom > span",
-                  property: "padding-bottom",
-                  value: undefined},
-      paddingLeft: {selector: ".padding.left > span",
-                  property: "padding-left",
-                  value: undefined},
-      paddingRight: {selector: ".padding.right > span",
-                  property: "padding-right",
-                  value: undefined},
-      borderTop: {selector: ".border.top > span",
-                  property: "border-top-width",
-                  value: undefined},
-      borderBottom: {selector: ".border.bottom > span",
-                  property: "border-bottom-width",
-                  value: undefined},
-      borderLeft: {selector: ".border.left > span",
-                  property: "border-left-width",
-                  value: undefined},
-      borderRight: {selector: ".border.right > span",
-                  property: "border-right-width",
-                  value: undefined},
-    };
-
-    this.onNewNode();
-  },
-
-  /**
-   * Is the layoutview visible in the sidebar?
-   */
-  isActive: function LV_isActive() {
-    return this.inspector.sidebar.getCurrentTabID() == "layoutview";
-  },
-
-  /**
-   * Destroy the nodes. Remove listeners.
-   */
-  destroy: function LV_destroy() {
-    this.inspector.sidebar.off("layoutview-selected", this.onNewNode);
-    this.inspector.selection.off("new-node", this.onNewNode);
-    this.inspector.selection.off("detached", this.onNewNode);
-    if (this.browser) {
-      this.browser.removeEventListener("MozAfterPaint", this.update, true);
-    }
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.on("locked", this.onHighlighterLocked);
-    }
-    this.sizeHeadingLabel = null;
-    this.sizeLabel = null;
-    this.inspector = null;
-    this.doc = null;
-  },
-
-  /**
-   * Selection 'new-node' event handler.
-   */
-  onNewNode: function LV_onNewNode() {
-    if (this.isActive() &&
-        this.inspector.selection.isConnected() &&
-        this.inspector.selection.isElementNode() &&
-        this.inspector.selection.reason != "highlighter") {
-      this.cssLogic.highlight(this.inspector.selection.node);
-      this.undim();
-      this.update();
-    } else {
-      this.dim();
-    }
-  },
-
-  /**
-   * Highlighter 'locked' event handler
-   */
-  onHighlighterLocked: function LV_onHighlighterLocked() {
-    this.cssLogic.highlight(this.inspector.selection.node);
-    this.undim();
-    this.update();
-  },
-
-  /**
-   * Hide the layout boxes. No node are selected.
-   */
-  dim: function LV_dim() {
-    if (this.browser) {
-      this.browser.removeEventListener("MozAfterPaint", this.update, true);
-    }
-    this.trackingPaint = false;
-    this.doc.body.classList.add("dim");
-    this.dimmed = true;
-  },
-
-  /**
-   * Show the layout boxes. A node is selected.
-   */
-  undim: function LV_undim() {
-    if (!this.trackingPaint) {
-      if (this.browser) {
-        this.browser.addEventListener("MozAfterPaint", this.update, true);
-      }
-      this.trackingPaint = true;
-    }
-    this.doc.body.classList.remove("dim");
-    this.dimmed = false;
-  },
-
-  /**
-   * Compute the dimensions of the node and update the values in
-   * the layoutview/view.xhtml document.
-   */
-  update: function LV_update() {
-    if (!this.isActive() ||
-        !this.inspector.selection.isConnected() ||
-        !this.inspector.selection.isElementNode()) {
-      return;
-    }
-
-    let node = this.inspector.selection.node;
-
-    // First, we update the first part of the layout view, with
-    // the size of the element.
-
-    let clientRect = node.getBoundingClientRect();
-    let width = Math.round(clientRect.width);
-    let height = Math.round(clientRect.height);
-
-    let newLabel = width + "x" + height;
-    if (this.sizeHeadingLabel.textContent != newLabel) {
-      this.sizeHeadingLabel.textContent = newLabel;
-    }
-
-    // If the view is dimmed, no need to do anything more.
-    if (this.dimmed) return;
-
-    // We compute and update the values of margins & co.
-    let style = node.ownerDocument.defaultView.getComputedStyle(node);
-
-    for (let i in this.map) {
-      let property = this.map[i].property;
-      this.map[i].value = parseInt(style.getPropertyValue(property));
-    }
-
-    let margins = this.processMargins(node);
-    if ("top" in margins) this.map.marginTop.value = "auto";
-    if ("right" in margins) this.map.marginRight.value = "auto";
-    if ("bottom" in margins) this.map.marginBottom.value = "auto";
-    if ("left" in margins) this.map.marginLeft.value = "auto";
-
-    for (let i in this.map) {
-      let selector = this.map[i].selector;
-      let span = this.doc.querySelector(selector);
-      if (span.textContent.length > 0 &&
-          span.textContent == this.map[i].value) {
-        continue;
-      }
-      span.textContent = this.map[i].value;
-    }
-
-    width -= this.map.borderLeft.value + this.map.borderRight.value +
-             this.map.paddingLeft.value + this.map.paddingRight.value;
-
-    height -= this.map.borderTop.value + this.map.borderBottom.value +
-              this.map.paddingTop.value + this.map.paddingBottom.value;
-
-    let newValue = width + "x" + height;
-    if (this.sizeLabel.textContent != newValue) {
-      this.sizeLabel.textContent = newValue;
-    }
-  },
-
-  /**
-   * Find margins declared 'auto'
-   */
-  processMargins: function LV_processMargins(node) {
-    let margins = {};
-
-    for each (let prop in ["top", "bottom", "left", "right"]) {
-      let info = this.cssLogic.getPropertyInfo("margin-" + prop);
-      let selectors = info.matchedSelectors;
-      if (selectors && selectors.length > 0 && selectors[0].value == "auto") {
-        margins[prop] = "auto";
-      }
-    }
-
-    return margins;
-  },
-}
diff --git a/browser/devtools/layoutview/view.xhtml b/browser/devtools/layoutview/view.xhtml
index c4a20c0e7bf..d6f6db6ee2c 100644
--- a/browser/devtools/layoutview/view.xhtml
+++ b/browser/devtools/layoutview/view.xhtml
@@ -10,9 +10,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
-    <title>&title;</title>
+    <title>Layout View</title>
 
-    <script type="application/javascript;version=1.8" src="view.js"></script>
     <script type="application/javascript;version=1.8">
     <![CDATA[
       let elts;
@@ -21,8 +20,7 @@
       const Ci = Components.interfaces;
       const Cc = Components.classes;
 
-      window.setPanel = function(panel) {
-        this.layoutview = new LayoutView(panel, window);
+      window.onload = function() {
 
         // Tooltip mechanism
         elts = document.querySelectorAll("*[tooltip]");
@@ -43,7 +41,6 @@
       }
 
       window.onunload = function() {
-        this.layoutview.destroy();
         if (elts) {
           for (let i = 0; i < elts.length; i++) {
             let elt = elts[i];
@@ -60,6 +57,10 @@
       function onmouseout(e) {
         tooltip.textContent = "";
       }
+
+      function toggleView() {
+        window.parent.postMessage("layoutview-toggle-view", "*");
+      }
     ]]>
     </script>
 
@@ -69,10 +70,13 @@
   </head>
   <body>
 
-    <p id="header">
+    <!-- Header: always visible, even when the view is closed. -->
+    <a onclick="toggleView()" href="#" id="header">
         <span id="element-size"></span>
-    </p>
+        <span id="togglebutton"></span>
+    </a>
 
+    <!-- Boxes: hidden when the view is closed. -->
     <div id="main">
 
       <div id="margins" tooltip="&margins.tooltip;">
diff --git a/browser/devtools/markupview/MarkupView.jsm b/browser/devtools/markupview/MarkupView.jsm
index a0ab2eeb6cc..55967b0d3ca 100644
--- a/browser/devtools/markupview/MarkupView.jsm
+++ b/browser/devtools/markupview/MarkupView.jsm
@@ -39,7 +39,7 @@ Cu.import("resource://gre/modules/Services.jsm");
  * @param iframe aFrame
  *        An iframe in which the caller has kindly loaded markup-view.xhtml.
  */
-this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
+this.MarkupView = function MarkupView(aInspector, aFrame)
 {
   this._inspector = aInspector;
   this._frame = aFrame;
@@ -47,15 +47,15 @@ this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
   this._elt = this.doc.querySelector("#root");
 
   this.undo = new UndoStack();
-  this.undo.installController(aControllerWindow);
+  this.undo.installController(this._frame.ownerDocument.defaultView);
 
   this._containers = new WeakMap();
 
   this._observer = new this.doc.defaultView.MutationObserver(this._mutationObserver.bind(this));
 
-  this._boundOnNewSelection = this._onNewSelection.bind(this);
-  this._inspector.selection.on("new-node", this._boundOnNewSelection);
-  this._onNewSelection();
+  this._boundSelect = this._onSelect.bind(this);
+  this._inspector.on("select", this._boundSelect);
+  this._onSelect();
 
   this._boundKeyDown = this._onKeyDown.bind(this);
   this._frame.addEventListener("keydown", this._boundKeyDown, false);
@@ -69,6 +69,13 @@ this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
 MarkupView.prototype = {
   _selectedContainer: null,
 
+  /**
+   * Return the selected node.
+   */
+  get selected() {
+    return this._selectedContainer ? this._selectedContainer.node : null;
+  },
+
   template: function MT_template(aName, aDest, aOptions)
   {
     let node = this.doc.getElementById("template-" + aName).cloneNode(true);
@@ -87,16 +94,14 @@ MarkupView.prototype = {
   },
 
   /**
-   * Highlight the inspector selected node.
+   * Highlight the given element in the markup panel.
    */
-  _onNewSelection: function MT__onNewSelection()
+  _onSelect: function MT__onSelect()
   {
-    if (this._inspector.selection.isNode()) {
-      this.showNode(this._inspector.selection.node, true);
-      this.markNodeAsSelected(this._inspector.selection.node);
-    } else {
-      this.unmarkSelectedNode();
+    if (this._inspector.selection) {
+      this.showNode(this._inspector.selection, true);
     }
+    this.selectNode(this._inspector.selection);
   },
 
   /**
@@ -250,11 +255,12 @@ MarkupView.prototype = {
 
     let node = aContainer.node;
     this.showNode(node, false);
+    this.selectNode(node);
 
-    this._inspector.selection.setNode(node, "treepanel");
-    // This event won't be fired if the node is the same. But the highlighter
-    // need to lock the node if it wasn't.
-    this._inspector.selection.emit("new-node");
+    if (this._inspector._IUI.highlighter.isNodeHighlightable(node)) {
+      this._inspector._IUI.select(node, true, false, "treepanel");
+      this._inspector._IUI.highlighter.highlight(node);
+    }
 
     if (!aIgnoreFocus) {
       aContainer.focus();
@@ -407,7 +413,7 @@ MarkupView.prototype = {
   /**
    * Mark the given node selected.
    */
-  markNodeAsSelected: function MT_markNodeAsSelected(aNode)
+  selectNode: function MT_selectNode(aNode)
   {
     let container = this._containers.get(aNode);
     if (this._selectedContainer === container) {
@@ -421,18 +427,9 @@ MarkupView.prototype = {
       this._selectedContainer.selected = true;
     }
 
-    return true;
-  },
+    this._selectedContainer.focus();
 
-  /**
-   * Unmark selected node (no node selected).
-   */
-  unmarkSelectedNode: function MT_unmarkSelectedNode()
-  {
-    if (this._selectedContainer) {
-      this._selectedContainer.selected = false;
-      this._selectedContainer = null;
-    }
+    return true;
   },
 
   /**
@@ -493,8 +490,8 @@ MarkupView.prototype = {
     this._frame.removeEventListener("keydown", this._boundKeyDown, true);
     delete this._boundKeyDown;
 
-    this._inspector.selection.off("new-node", this._boundOnNewSelection);
-    delete this._boundOnNewSelection;
+    this._inspector.off("select", this._boundSelect);
+    delete this._boundSelect;
 
     delete this._elt;
 
@@ -950,9 +947,9 @@ ElementEditor.prototype = {
         start: function EE_editAttribute_start(aEditor, aEvent) {
           // If the editing was started inside the name or value areas,
           // select accordingly.
-          if (aEvent && aEvent.target === name) {
+          if (aEvent.target === name) {
             aEditor.input.setSelectionRange(0, name.textContent.length);
-          } else if (aEvent && aEvent.target === val) {
+          } else if (aEvent.target === val) {
             let length = val.textContent.length;
             let editorLength = aEditor.input.value.length;
             let start = editorLength - (length + 1);
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.js b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
index dfe1ed6d734..280f025dce5 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
@@ -17,10 +17,8 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
  */
 
 function test() {
-  let inspector;
   let tempScope = {}
   Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-
   let inplaceEditor = tempScope._getInplaceEditorForSpan;
 
   waitForExplicitFinish();
@@ -54,8 +52,8 @@ function test() {
 
   // All the mutation types we want to test.
   let edits = [
+    // Change an attribute
     {
-      desc: "Change an attribute",
       before: function() {
         assertAttributes(doc.querySelector("#node1"), {
           id: "node1",
@@ -75,8 +73,8 @@ function test() {
       }
     },
 
+    // Try change an attribute to a badly formed string
     {
-      desc: "Try change an attribute to a badly formed string",
       before: function() {
         assertAttributes(doc.querySelector("#node22"), {
           id: "node22",
@@ -96,8 +94,9 @@ function test() {
       }
     },
 
+
+    // Remove an attribute
     {
-      desc: "Remove an attribute",
       before: function() {
         assertAttributes(doc.querySelector("#node4"), {
           id: "node4",
@@ -116,8 +115,8 @@ function test() {
       }
     },
 
+    // Add an attribute by clicking the empty space after a node
     {
-      desc: "Add an attribute by clicking the empty space after a node",
       before: function() {
         assertAttributes(doc.querySelector("#node14"), {
           id: "node14",
@@ -137,8 +136,8 @@ function test() {
       }
     },
 
+    // Try add a badly formed attribute by clicking the empty space after a node
     {
-      desc: "Try add a badly formed attribute by clicking the empty space after a node",
       before: function() {
         assertAttributes(doc.querySelector("#node23"), {
           id: "node23",
@@ -156,8 +155,34 @@ function test() {
       }
     },
 
+    // Add attributes by adding to an existing attribute's entry
+    {
+      setup: function() {
+        InspectorUI.select(doc.querySelector("#node18"), true, true, true);
+      },
+      before: function() {
+        assertAttributes(doc.querySelector("#node18"), {
+          id: "node18",
+        });
+        is(InspectorUI.highlighter.nodeInfo.classesBox.textContent, "", "No classes in the infobar before edit.");
+      },
+      execute: function() {
+        let editor = markup.getContainer(doc.querySelector("#node18")).editor;
+        let attr = editor.attrs["id"].querySelector(".editable");
+        editField(attr, attr.textContent + ' class="newclass" style="color:green"');
+      },
+      after: function() {
+        assertAttributes(doc.querySelector("#node18"), {
+          id: "node18",
+          class: "newclass",
+          style: "color:green"
+        });
+        is(InspectorUI.highlighter.nodeInfo.classesBox.textContent, ".newclass", "Correct classes in the infobar after edit.");
+      }
+    },
+
+    // Try add attributes by adding to an existing attribute's entry
     {
-      desc: "Try add attributes by adding to an existing attribute's entry",
       before: function() {
         assertAttributes(doc.querySelector("#node24"), {
           id: "node24",
@@ -175,8 +200,22 @@ function test() {
       }
     },
 
+    // Remove an element with the delete key
+    {
+      before: function() {
+        ok(!!doc.querySelector("#node18"), "Node 18 should exist.");
+      },
+      execute: function() {
+        markup.selectNode(doc.querySelector("#node18"));
+        EventUtils.sendKey("delete");
+      },
+      after: function() {
+        ok(!doc.querySelector("#node18"), "Node 18 should not exist.")
+      }
+    },
+
+    // Edit text
     {
-      desc: "Edit text",
       before: function() {
         let node = doc.querySelector('.node6').firstChild;
         is(node.nodeValue, "line6", "Text should be unchanged");
@@ -192,103 +231,19 @@ function test() {
         is(node.nodeValue, "New text", "Text should be changed.");
       },
     },
-  ];
 
-  // Create the helper tab for parsing...
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    doc = content.document;
-    waitForFocus(setupTest, content);
-  }, true);
-  content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_edit.html";
-
-  function setupTest() {
-    var target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
-      inspector = aInspector;
-      runTests();
-    });
-  }
-
-  function runTests() {
-    inspector.selection.once("new-node", startTests);
-    executeSoon(function() {
-      inspector.selection.setNode(doc.body);
-    });
-  }
-
-  function startTests() {
-    let startNode = doc.documentElement.cloneNode();
-    markup = inspector.markup;
-    markup.expandAll();
-    for (let step of edits) {
-      info("START " + step.desc);
-      if (step.setup) {
-        step.setup();
-      }
-      step.before();
-      step.execute();
-      step.after();
-      ok(markup.undo.canUndo(), "Should be able to undo.");
-      markup.undo.undo();
-      step.before();
-      ok(markup.undo.canRedo(), "Should be able to redo.");
-      markup.undo.redo();
-      step.after();
-      info("END " + step.desc);
-    }
-    addAttributes();
-  }
-
-  function addAttributes() {
-    let test = {
-      desc: "Add attributes by adding to an existing attribute's entry",
+    // Edit the tag name
+    {
       setup: function() {
-        inspector.selection.setNode(doc.querySelector("#node18"));
-      },
-      before: function() {
-        assertAttributes(doc.querySelector("#node18"), {
-          id: "node18",
-        });
-
-        is(inspector.highlighter.nodeInfo.classesBox.textContent, "",
-          "No classes in the infobar before edit.");
-      },
-      execute: function() {
-        let editor = markup.getContainer(doc.querySelector("#node18")).editor;
-        let attr = editor.attrs["id"].querySelector(".editable");
-        editField(attr, attr.textContent + ' class="newclass" style="color:green"');
-      },
-      after: function() {
-        assertAttributes(doc.querySelector("#node18"), {
-          id: "node18",
-          class: "newclass",
-          style: "color:green"
-        });
-        is(inspector.highlighter.nodeInfo.classesBox.textContent, ".newclass",
-          "Correct classes in the infobar after edit.");
-      }
-    };
-    testAsyncSetup(test, editTagName);
-  }
-
-  function editTagName() {
-    let test =  {
-      desc: "Edit the tag name",
-      setup: function() {
-        inspector.selection.setNode(doc.querySelector("#retag-me"));
+        markup.selectNode(doc.querySelector("#retag-me"));
       },
       before: function() {
         let node = doc.querySelector("#retag-me");
         let container = markup.getContainer(node);
-
         is(node.tagName, "DIV", "retag-me should be a div.");
         ok(container.selected, "retag-me should be selected.");
         ok(container.expanded, "retag-me should be expanded.");
-        is(doc.querySelector("#retag-me-2").parentNode, node,
-          "retag-me-2 should be a child of the old element.");
+        is(doc.querySelector("#retag-me-2").parentNode, node, "retag-me-2 should be a child of the old element.");
       },
       execute: function() {
         let node = doc.querySelector("#retag-me");
@@ -302,80 +257,65 @@ function test() {
         is(node.tagName, "P", "retag-me should be a p.");
         ok(container.selected, "retag-me should be selected.");
         ok(container.expanded, "retag-me should be expanded.");
-        is(doc.querySelector("#retag-me-2").parentNode, node,
-          "retag-me-2 should be a child of the new element.");
+        is(doc.querySelector("#retag-me-2").parentNode, node, "retag-me-2 should be a child of the new element.");
       }
-    };
-    testAsyncSetup(test, removeElementWithDelete);
+    },
+  ];
+
+  // Create the helper tab for parsing...
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    doc = content.document;
+    waitForFocus(setupTest, content);
+  }, true);
+  content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_edit.html";
+
+  function setupTest() {
+    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
   }
 
-  function removeElementWithDelete() {
-    let test =  {
-      desc: "Remove an element with the delete key",
-      before: function() {
-        ok(!!doc.querySelector("#node18"), "Node 18 should exist.");
-      },
-      execute: function() {
-        inspector.selection.setNode(doc.querySelector("#node18"));
-      },
-      executeCont: function() {
-        EventUtils.sendKey("delete");
-      },
-      after: function() {
-        ok(!doc.querySelector("#node18"), "Node 18 should not exist.")
+  function runTests() {
+    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    InspectorUI.currentInspector.once("markuploaded", startTests);
+    InspectorUI.select(doc.body, true, true, true);
+    InspectorUI.stopInspecting();
+    InspectorUI.toggleHTMLPanel();
+  }
+
+  function startTests() {
+    let startNode = doc.documentElement.cloneNode();
+    markup = InspectorUI.currentInspector.markup;
+    markup.expandAll();
+    for (let step of edits) {
+      if (step.setup) {
+        step.setup();
       }
-    };
-    testAsyncExecute(test, finishUp);
-  }
-
-  function testAsyncExecute(test, callback) {
-    info("START " + test.desc);
-
-    test.before();
-    inspector.selection.once("new-node", function BIMET_testAsyncExecNewNode() {
-      test.executeCont();
-      test.after();
-      undoRedo(test, callback);
-    });
-    executeSoon(function BIMET_setNode1() {
-      test.execute();
-    });
-  }
-
-  function testAsyncSetup(test, callback) {
-    info("START " + test.desc);
-
-    inspector.selection.once("new-node", function BIMET_testAsyncSetupNewNode() {
-      test.before();
-      test.execute();
-      test.after();
-      undoRedo(test, callback);
-    });
-    executeSoon(function BIMET_setNode2() {
-      test.setup();
-    });
-  }
-
-  function undoRedo(test, callback) {
-    ok(markup.undo.canUndo(), "Should be able to undo.");
-    markup.undo.undo();
-    executeSoon(function() {
-      test.before();
+      step.before();
+      step.execute();
+      step.after();
+      ok(markup.undo.canUndo(), "Should be able to undo.");
+      markup.undo.undo();
+      step.before();
       ok(markup.undo.canRedo(), "Should be able to redo.");
       markup.undo.redo();
-      executeSoon(function() {
-        test.after();
-        info("END " + test.desc);
-        callback();
-      });
-    });
-  }
+      step.after();
+    }
 
-  function finishUp() {
     while (markup.undo.canUndo()) {
       markup.undo.undo();
     }
-    doc = inspector = null;
+    // By now we should have a healthy undo stack, clear it out and we should be back where
+    // we started.
+    ok(doc.documentElement.isEqualNode(startNode), "Clearing the undo stack should leave us where we started.");
+    Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    InspectorUI.closeInspectorUI();
+  }
+
+  function finishUp() {
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    doc = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_mutation.js b/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
index 463fc8e4880..a34d86fd65a 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_mutation.js
@@ -24,8 +24,6 @@ function test() {
   let parseTab;
   let parseDoc;
 
-  let inspector;
-
   // Strip whitespace from a node and its children.
   function stripWhitespace(node)
   {
@@ -145,27 +143,32 @@ function test() {
   content.location = "data:text/html,<html></html>";
 
   function setupTest() {
-    var target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-selected", function BIMMT_selected(id, aInspector) {
-      inspector = aInspector;
-      startTests();
-    });
+    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
+  }
+
+  function runTests() {
+    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    InspectorUI.currentInspector.once("markuploaded", startTests);
+    InspectorUI.select(doc.body, true, true, true);
+    InspectorUI.stopInspecting();
+    InspectorUI.toggleHTMLPanel();
   }
 
   function startTests() {
-    markup = inspector.markup;
+    markup = InspectorUI.currentInspector.markup;
     checkMarkup();
     nextStep(0);
   }
 
   function nextStep(cursor) {
     if (cursor >= mutations.length) {
-      finishUp();
+      Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+      InspectorUI.closeInspectorUI();
       return;
     }
     mutations[cursor]();
-    inspector.once("markupmutation", function() {
+    InspectorUI.currentInspector.once("markupmutation", function() {
       executeSoon(function() {
         checkMarkup();
         nextStep(cursor + 1);
@@ -174,7 +177,8 @@ function test() {
   }
 
   function finishUp() {
-    doc = inspector = null;
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    doc = null;
     gBrowser.removeTab(contentTab);
     gBrowser.removeTab(parseTab);
     finish();
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_navigation.html b/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
index 9633052e17f..fe5561181b1 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
+++ b/browser/devtools/markupview/test/browser_inspector_markup_navigation.html
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 
 <html class="html">
-  <head class="head">
-    <meta charset=utf-8 />
-  </head>
+  <meta charset=utf-8 />
 
   <body class="body">
     <div class="node0">
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_navigation.js b/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
index 3cc3a18c505..4540c1e5c60 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_navigation.js
@@ -3,16 +3,12 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
 
 
 function test() {
-  let inspector;
 
   waitForExplicitFinish();
 
   let doc;
 
   let keySequences = [
-    ["right", "html"],
-    ["down", "head"],
-    ["down", "body"],
     ["right", "body"],
     ["down", "node0"],
     ["right", "node0"],
@@ -72,28 +68,34 @@ function test() {
 
   content.location = "http://mochi.test:8888/browser/browser/devtools/markupview/test/browser_inspector_markup_navigation.html";
 
+  let markup = null;
+
   function setupTest() {
-    var target = TargetFactory.forTab(gBrowser.selectedTab);
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-selected", function BIMNT_selected(id, aInspector) {
-      inspector = aInspector;
-      startNavigation();
-    });
+    Services.obs.addObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
+  }
+
+  function runTests() {
+    Services.obs.removeObserver(runTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+    InspectorUI.currentInspector.once("markuploaded", startNavigation);
+    InspectorUI.select(doc.body, true, true, true);
+    InspectorUI.toggleHTMLPanel();
   }
 
   function startNavigation() {
+    markup = InspectorUI.currentInspector.markup;
     nextStep(0);
   }
 
   function nextStep(cursor) {
     if (cursor >= keySequences.length) {
-      finishUp();
+      Services.obs.addObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+      InspectorUI.closeInspectorUI();
       return;
     }
 
     let key = keySequences[cursor][0];
     let className = keySequences[cursor][1];
-    inspector.markup._frame.focus();
 
     switch(key) {
       case "right":
@@ -119,9 +121,8 @@ function test() {
         break;
     }
 
-    executeSoon(function BIMNT_newNode() {
-      let node = inspector.selection.node;
-
+    executeSoon(function() {
+      let node = markup.selected;
       if (className == "*comment*") {
         is(node.nodeType, Node.COMMENT_NODE, "[" + cursor + "] should be a comment after moving " + key);
       } else if (className == "*text*") {
@@ -131,13 +132,13 @@ function test() {
       } else {
         is(node.className, className, "[" + cursor + "] right node selected: " + className + " after moving " + key);
       }
-
       nextStep(cursor + 1);
     });
   }
 
   function finishUp() {
-    doc = inspector = null;
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    doc = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/markupview/test/head.js b/browser/devtools/markupview/test/head.js
index 61cc0427410..3907fad4fbd 100644
--- a/browser/devtools/markupview/test/head.js
+++ b/browser/devtools/markupview/test/head.js
@@ -4,12 +4,6 @@
 
 const Cu = Components.utils;
 
-let TargetFactory = (function() {
-  let tempScope = {};
-  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-  return tempScope.TargetFactory;
-})();
-
 // Clear preferences that may be set during the course of tests.
 function clearUserPrefs()
 {
diff --git a/browser/devtools/responsivedesign/CmdResize.jsm b/browser/devtools/responsivedesign/CmdResize.jsm
index d35fdf33ed7..1303136c296 100644
--- a/browser/devtools/responsivedesign/CmdResize.jsm
+++ b/browser/devtools/responsivedesign/CmdResize.jsm
@@ -30,8 +30,6 @@ gcli.addCommand({
 
 gcli.addCommand({
   name: 'resize toggle',
-  buttonId: "command-button-responsive",
-  buttonClass: "command-button",
   description: gcli.lookup('resizeModeToggleDesc'),
   manual: gcli.lookup('resizeModeManual'),
   exec: gcli_cmd_resize
diff --git a/browser/devtools/responsivedesign/responsivedesign.jsm b/browser/devtools/responsivedesign/responsivedesign.jsm
index 8f45f9eecf5..a74df04f9da 100644
--- a/browser/devtools/responsivedesign/responsivedesign.jsm
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -9,10 +9,8 @@ const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import("resource:///modules/devtools/FloatingScrollbars.jsm");
 Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
 
 this.EXPORTED_SYMBOLS = ["ResponsiveUIManager"];
 
@@ -163,8 +161,7 @@ function ResponsiveUI(aWindow, aTab)
   this.buildUI();
   this.checkMenus();
 
-  let target = TargetFactory.forTab(this.tab);
-  this.toolboxWasOpen = !!gDevTools.getToolboxForTarget(target);
+  this.inspectorWasOpen = this.mainWindow.InspectorUI.isInspectorOpen;
 
   try {
     if (Services.prefs.getBoolPref("devtools.responsiveUI.rotate")) {
@@ -244,13 +241,12 @@ ResponsiveUI.prototype = {
     if (aEvent.keyCode == this.mainWindow.KeyEvent.DOM_VK_ESCAPE &&
         this.mainWindow.gBrowser.selectedBrowser == this.browser) {
 
-      // If the toolbox wasn't open at first but is open now,
+      // If the inspector wasn't open at first but is open now,
       // we don't want to close the Responsive Mode on Escape.
-      // We let the toolbox close first.
+      // We let the inspector close first.
 
-      let target = TargetFactory.forTab(this.tab);
-      let isToolboxOpen =  !!gDevTools.getToolboxForTarget(target);
-      if (this.toolboxWasOpen || !isToolboxOpen) {
+      let isInspectorOpen = this.mainWindow.InspectorUI.isInspectorOpen;
+      if (this.inspectorWasOpen || !isInspectorOpen) {
         aEvent.preventDefault();
         aEvent.stopPropagation();
         this.close();
diff --git a/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js b/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
index 540e918f596..bfdcb11d600 100644
--- a/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
+++ b/browser/devtools/responsivedesign/test/browser_responsivecomputedview.js
@@ -5,7 +5,6 @@ function test() {
   let instance;
 
   let computedView;
-  let inspector;
 
   waitForExplicitFinish();
 
@@ -53,27 +52,29 @@ function test() {
 
     instance.setSize(500, 500);
 
-    openInspector(onInspectorUIOpen);
+    Services.obs.addObserver(onInspectorUIOpen,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.openInspectorUI();
   }
 
-  function onInspectorUIOpen(aInspector) {
-    inspector = aInspector;
-    ok(inspector, "Got inspector instance");
-    inspector.sidebar.select("computedview");
+  function onInspectorUIOpen() {
+    Services.obs.removeObserver(onInspectorUIOpen,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
 
     let div = content.document.getElementsByTagName("div")[0];
+    InspectorUI.inspectNode(div);
+    InspectorUI.stopInspecting();
 
-    inspector.sidebar.once("computedview-ready", function() {
-      Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
-      inspector.selection.setNode(div);
-    });
+    Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
+
+    InspectorUI.sidebar.show();
+    InspectorUI.sidebar.activatePanel("computedview");
   }
 
   function testShrink() {
     Services.obs.removeObserver(testShrink, "StyleInspector-populated", false);
 
-    computedView = inspector.sidebar.getWindowForTab("computedview").computedview.view;
-    ok(computedView, "We have access to the Computed View object");
+    computedView = InspectorUI.sidebar._toolContext("computedview").view;
 
     is(computedWidth(), "500px", "Should show 500px initially.");
 
@@ -102,6 +103,8 @@ function test() {
     // Menus are correctly updated?
     is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "false", "menu unchecked");
 
+    InspectorUI.closeInspectorUI();
+
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/responsivedesign/test/browser_responsiveruleview.js b/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
index 9aeb3147a30..8161e8dc0d2 100644
--- a/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
+++ b/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
@@ -5,7 +5,6 @@ function test() {
   let instance;
 
   let ruleView;
-  let inspector;
 
   waitForExplicitFinish();
 
@@ -48,26 +47,27 @@ function test() {
 
     instance.setSize(500, 500);
 
-    openInspector(onInspectorUIOpen);
+    Services.obs.addObserver(onInspectorUIOpen,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.openInspectorUI();
   }
 
-  function onInspectorUIOpen(aInspector) {
-    inspector = aInspector;
-    ok(inspector, "Got inspector instance");
-    inspector.sidebar.select("ruleview");
+  function onInspectorUIOpen() {
+    Services.obs.removeObserver(onInspectorUIOpen,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
 
     let div = content.document.getElementsByTagName("div")[0];
+    InspectorUI.inspectNode(div);
+    InspectorUI.stopInspecting();
 
-    inspector.sidebar.once("ruleview-ready", function() {
-      Services.obs.addObserver(testShrink, "StyleInspector-populated", false);
-      inspector.selection.setNode(div);
-    });
+    InspectorUI.currentInspector.once("sidebaractivated-ruleview", testShrink);
+
+    InspectorUI.sidebar.show();
+    InspectorUI.sidebar.activatePanel("ruleview");
   }
 
   function testShrink() {
-    Services.obs.removeObserver(testShrink, "StyleInspector-populated");
-
-    ruleView = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
+    ruleView = InspectorUI.sidebar._toolContext("ruleview").view;
 
     is(numberOfRules(), 2, "Should have two rules initially.");
 
@@ -96,6 +96,7 @@ function test() {
     // Menus are correctly updated?
     is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "false", "menu unchecked");
 
+    InspectorUI.closeInspectorUI();
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/responsivedesign/test/head.js b/browser/devtools/responsivedesign/test/head.js
index cc6b0832a7e..d4dc324c438 100644
--- a/browser/devtools/responsivedesign/test/head.js
+++ b/browser/devtools/responsivedesign/test/head.js
@@ -3,27 +3,6 @@
 
 "use strict";
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
-
-function openInspector(callback)
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-  if (inspector && inspector.isReady) {
-    callback(inspector);
-  } else {
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-ready", function(event, panel) {
-      let inspector = gDevTools.getPanelForTarget("inspector", target);
-      callback(inspector);
-    });
-  }
-}
-
diff --git a/browser/devtools/scratchpad/CmdScratchpad.jsm b/browser/devtools/scratchpad/CmdScratchpad.jsm
deleted file mode 100644
index 859b287f1fa..00000000000
--- a/browser/devtools/scratchpad/CmdScratchpad.jsm
+++ /dev/null
@@ -1,21 +0,0 @@
-/* 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/. */
-
-this.EXPORTED_SYMBOLS = [ ];
-
-Components.utils.import("resource:///modules/devtools/gcli.jsm");
-
-/**
- * 'scratchpad' command
- */
-gcli.addCommand({
-  name: "scratchpad",
-  buttonId: "command-button-scratchpad",
-  buttonClass: "command-button",
-  hidden: true,
-  exec: function(args, context) {
-    let chromeWindow = context.environment.chromeDocument.defaultView;
-    chromeWindow.Scratchpad.ScratchpadManager.openScratchpad();
-  }
-});
diff --git a/browser/devtools/scratchpad/scratchpad.js b/browser/devtools/scratchpad/scratchpad.js
index a8dde0114dc..f69743bab46 100644
--- a/browser/devtools/scratchpad/scratchpad.js
+++ b/browser/devtools/scratchpad/scratchpad.js
@@ -26,8 +26,6 @@ Cu.import("resource:///modules/source-editor.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource:///modules/devtools/scratchpad-manager.jsm");
 Cu.import("resource://gre/modules/jsdebugger.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
 
 const SCRATCHPAD_CONTEXT_CONTENT = 1;
 const SCRATCHPAD_CONTEXT_BROWSER = 2;
@@ -1055,8 +1053,9 @@ var Scratchpad = {
    */
   openWebConsole: function SP_openWebConsole()
   {
-    let target = TargetFactory.forTab(this.gBrowser.selectedTab);
-    gDevTools.openToolboxForTab(target, "webconsole");
+    if (!this.browserWindow.HUDConsoleUI.getOpenHUD()) {
+      this.browserWindow.HUDConsoleUI.toggleHUD();
+    }
     this.browserWindow.focus();
   },
 
diff --git a/browser/devtools/scratchpad/scratchpad.xul b/browser/devtools/scratchpad/scratchpad.xul
index dd6edd351c4..8dfcfa7c372 100644
--- a/browser/devtools/scratchpad/scratchpad.xul
+++ b/browser/devtools/scratchpad/scratchpad.xul
@@ -100,6 +100,10 @@
        key="&errorConsoleCmd.commandkey;"
        command="sp-cmd-errorConsole"
        modifiers="accel,shift"/>
+  <key id="sp-key-webConsole"
+       key="&webConsoleCmd.commandkey;"
+       command="sp-cmd-webConsole"
+       modifiers="accel,shift"/>
   <key id="key_openHelp"
        keycode="VK_F1"
        command="sp-cmd-documentationLink"/>
diff --git a/browser/devtools/shared/DeveloperToolbar.jsm b/browser/devtools/shared/DeveloperToolbar.jsm
index ecf9095cb58..8a921e65c85 100644
--- a/browser/devtools/shared/DeveloperToolbar.jsm
+++ b/browser/devtools/shared/DeveloperToolbar.jsm
@@ -4,7 +4,7 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [ "DeveloperToolbar", "CommandUtils" ];
+this.EXPORTED_SYMBOLS = [ "DeveloperToolbar" ];
 
 const NS_XHTML = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -27,92 +27,6 @@ XPCOMUtils.defineLazyModuleGetter(this, "CmdCommands",
 XPCOMUtils.defineLazyModuleGetter(this, "PageErrorListener",
                                   "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
-XPCOMUtils.defineLazyGetter(this, "prefBranch", function() {
-  var prefService = Components.classes["@mozilla.org/preferences-service;1"]
-          .getService(Components.interfaces.nsIPrefService);
-  return prefService.getBranch(null)
-          .QueryInterface(Components.interfaces.nsIPrefBranch2);
-});
-
-/**
- * A collection of utilities to help working with commands
- */
-this.CommandUtils = {
-  /**
-   * Read a toolbarSpec from preferences
-   * @param aPref The name of the preference to read
-   */
-  getCommandbarSpec: function CU_getCommandbarSpec(aPref) {
-    let value = prefBranch.getComplexValue(aPref,
-                               Components.interfaces.nsISupportsString).data;
-    return JSON.parse(value);
-  },
-
-  /**
-   * A toolbarSpec is an array of buttonSpecs. A buttonSpec is an array of
-   * strings each of which is a GCLI command (including args if needed).
-   */
-  createButtons: function CU_createButtons(toolbarSpec, document, requisition) {
-    var reply = [];
-
-    toolbarSpec.forEach(function(buttonSpec) {
-      var button = document.createElement("toolbarbutton");
-      reply.push(button);
-
-      if (typeof buttonSpec == "string") {
-        buttonSpec = { typed: buttonSpec };
-      }
-      // Ask GCLI to parse the typed string (doesn't execute it)
-      requisition.update(buttonSpec.typed);
-
-      // Ignore invalid commands
-      var command = requisition.commandAssignment.value;
-      if (command == null) {
-        // TODO: Have a broken icon
-        // button.icon = 'Broken';
-        button.setAttribute("label", "X");
-        button.setAttribute("tooltip", "Unknown command: " + buttonSpec.typed);
-        button.setAttribute("disabled", "true");
-      }
-      else {
-        if (command.buttonId != null) {
-          button.id = command.buttonId;
-        }
-        if (command.buttonClass != null) {
-          button.className = command.buttonClass;
-        }
-
-        button.addEventListener("click", function() {
-          requisition.update(buttonSpec.typed);
-          //if (requisition.getStatus() == Status.VALID) {
-            requisition.exec();
-          /*
-          }
-          else {
-            console.error('incomplete commands not yet supported');
-          }
-          */
-        }, false);
-
-        // Allow the command button to be toggleable
-        /*
-        if (command.checkedState) {
-          button.setAttribute("type", "checkbox");
-          button.setAttribute("checked", command.checkedState.get() ? "true" : "false");
-          command.checkedState.on("change", function() {
-            button.checked = command.checkedState.get();
-          });
-        }
-        */
-      }
-    });
-
-    requisition.update('');
-
-    return reply;
-  }
-};
-
 /**
  * Due to a number of panel bugs we need a way to check if we are running on
  * Linux. See the comments for TooltipPanel and OutputPanel for further details.
@@ -143,10 +57,10 @@ this.DeveloperToolbar = function DeveloperToolbar(aChromeWindow, aToolbarElement
   this._lastState = NOTIFICATIONS.HIDE;
   this._pendingShowCallback = undefined;
   this._pendingHide = false;
-  this._errorsCount = {};
-  this._errorListeners = {};
-  this._errorCounterButton = this._doc
-                             .getElementById("developer-toolbar-toolbox-button");
+  this._errorsCount = Object.create(null);
+  this._errorListeners = Object.create(null);
+  this._webConsoleButton = this._doc
+                           .getElementById("developer-toolbar-webconsole");
 
   try {
     CmdCommands.refreshAutoCommands(aChromeWindow);
@@ -583,9 +497,9 @@ function DT__updateErrorsCount(aChangedTabId)
   let errors = this._errorsCount[tabId];
 
   if (errors) {
-    this._errorCounterButton.setAttribute("error-count", errors);
+    this._webConsoleButton.setAttribute("error-count", errors);
   } else {
-    this._errorCounterButton.removeAttribute("error-count");
+    this._webConsoleButton.removeAttribute("error-count");
   }
 };
 
diff --git a/browser/devtools/shared/EventEmitter.jsm b/browser/devtools/shared/EventEmitter.jsm
index fdeda407459..d70324fc570 100644
--- a/browser/devtools/shared/EventEmitter.jsm
+++ b/browser/devtools/shared/EventEmitter.jsm
@@ -1,23 +1,8 @@
-/* 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/. */
+// XXXkhuey this should have a license header.
 
 this.EXPORTED_SYMBOLS = ["EventEmitter"];
 
-/**
- * EventEmitter.
- *
- * @param Object aObjectToExtend
- *        If aObjectToExtend is not null, the public methods of EventEmitter
- *        are bound to the object.
- */
-this.EventEmitter = function EventEmitter(aObjectToExtend) {
-  if (aObjectToExtend) {
-    aObjectToExtend.on = this.on.bind(this);
-    aObjectToExtend.off = this.off.bind(this);
-    aObjectToExtend.once = this.once.bind(this);
-    aObjectToExtend.emit = this.emit.bind(this);
-  }
+this.EventEmitter = function EventEmitter() {
 }
 
 EventEmitter.prototype = {
@@ -49,7 +34,7 @@ EventEmitter.prototype = {
   once: function EventEmitter_once(aEvent, aListener) {
     let handler = function() {
       this.off(aEvent, handler);
-      aListener.apply(null, arguments);
+      aListener();
     }.bind(this);
     this.on(aEvent, handler);
   },
@@ -67,9 +52,7 @@ EventEmitter.prototype = {
     if (!this._eventEmitterListeners)
       return;
     let listeners = this._eventEmitterListeners.get(aEvent);
-    if (listeners) {
-      this._eventEmitterListeners.set(aEvent, listeners.filter(function(l) aListener != l));
-    }
+    this._eventEmitterListeners.set(aEvent, listeners.filter(function(l) aListener != l));
   },
 
   /**
diff --git a/browser/devtools/shared/test/browser_eventemitter_basic.js b/browser/devtools/shared/test/browser_eventemitter_basic.js
index e15adbe72e2..c54ce5420ee 100644
--- a/browser/devtools/shared/test/browser_eventemitter_basic.js
+++ b/browser/devtools/shared/test/browser_eventemitter_basic.js
@@ -1,24 +1,10 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+
 function test() {
-  testEmitter();
-  testEmitter({});
-}
-
-
-function testEmitter(aObject) {
   Cu.import("resource:///modules/devtools/EventEmitter.jsm", this);
-
-  let emitter;
-
-  if (aObject) {
-    emitter = aObject;
-    new EventEmitter(emitter);
-  } else {
-    emitter = new EventEmitter();
-  }
-
+  let emitter = new EventEmitter();
   ok(emitter, "We have an event emitter");
 
   emitter.on("next", next);
diff --git a/browser/devtools/shared/test/browser_toolbar_basic.js b/browser/devtools/shared/test/browser_toolbar_basic.js
index 10734464cf8..31d3ae19a0d 100644
--- a/browser/devtools/shared/test/browser_toolbar_basic.js
+++ b/browser/devtools/shared/test/browser_toolbar_basic.js
@@ -31,34 +31,102 @@ function isChecked(b) {
 
 function checkOpen() {
   ok(DeveloperToolbar.visible, "DeveloperToolbar is visible in checkOpen");
+
   let close = document.getElementById("developer-toolbar-closebutton");
+  let webconsole = document.getElementById("developer-toolbar-webconsole");
+  let inspector = document.getElementById("developer-toolbar-inspector");
+  let styleeditor = document.getElementById("developer-toolbar-styleeditor");
+  let debuggr = document.getElementById("developer-toolbar-debugger");
+
   ok(close, "Close button exists");
 
-  let toggleToolbox =
-    document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
-  ok(!isChecked(toggleToolbox), "toggle toolbox button is not checked");
+  ok(!isChecked(webconsole), "web console button state 1");
+  ok(!isChecked(inspector), "inspector button state 1");
+  ok(!isChecked(debuggr), "debugger button state 1");
+  ok(!isChecked(styleeditor), "styleeditor button state 1");
 
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.openToolboxForTab(target, "webconsole");
-  toolbox.once("webconsole-selected", function BTBT_selected(id, aInspector) {
-    ok(isChecked(toggleToolbox), "toggle toolbox button is checked");
+  document.getElementById("Tools:WebConsole").doCommand();
 
-    addTab("about:blank", function(browser, tab) {
-      info("Opened a new tab");
+  ok(isChecked(webconsole), "web console button state 2");
+  ok(!isChecked(inspector), "inspector button state 2");
+  ok(!isChecked(debuggr), "debugger button state 2");
+  ok(!isChecked(styleeditor), "styleeditor button state 2");
 
-      ok(!isChecked(toggleToolbox), "toggle toolbox button is not checked");
+  document.getElementById("Tools:Inspect").doCommand();
 
-      gBrowser.removeCurrentTab();
+  ok(isChecked(webconsole), "web console button state 3");
+  ok(isChecked(inspector), "inspector button state 3");
+  ok(!isChecked(debuggr), "debugger button state 3");
+  ok(!isChecked(styleeditor), "styleeditor button state 3");
 
-      oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
-      document.getElementById("Tools:DevToolbar").doCommand();
-    });
+  // Christmas tree!
+
+  // The web console opens synchronously, but closes asynchronously.
+  let hud = imported.HUDService.getHudByWindow(content);
+  imported.HUDService.disableAnimation(hud.hudId);
+
+  document.getElementById("Tools:WebConsole").doCommand();
+
+  ok(!isChecked(webconsole), "web console button state 6");
+  ok(isChecked(inspector), "inspector button state 6");
+  ok(!isChecked(debuggr), "debugger button state 6");
+  ok(!isChecked(styleeditor), "styleeditor button state 6");
+
+  document.getElementById("Tools:Inspect").doCommand();
+
+  ok(!isChecked(webconsole), "web console button state 7");
+  ok(!isChecked(inspector), "inspector button state 7");
+  ok(!isChecked(debuggr), "debugger button state 7");
+  ok(!isChecked(styleeditor), "styleeditor button state 7");
+
+  // All closed
+
+  // Check we can open and close and retain button state
+  document.getElementById("Tools:Inspect").doCommand();
+
+  ok(!isChecked(webconsole), "web console button state 8");
+  ok(isChecked(inspector), "inspector button state 8");
+  ok(!isChecked(debuggr), "debugger button state 8");
+  ok(!isChecked(styleeditor), "styleeditor button state 8");
+
+
+  // Test Style Editor
+  document.getElementById("Tools:StyleEditor").doCommand();
+
+  ok(!isChecked(webconsole), "web console button state 9");
+  ok(isChecked(inspector), "inspector button state 9");
+  ok(!isChecked(debuggr), "debugger button state 9");
+  ok(isChecked(styleeditor), "styleeditor button state 9");
+
+  // Test Debugger
+  document.getElementById("Tools:Debugger").doCommand();
+
+  ok(!isChecked(webconsole), "web console button state 9");
+  ok(isChecked(inspector), "inspector button state 9");
+  ok(isChecked(debuggr), "debugger button state 9");
+  ok(isChecked(styleeditor), "styleeditor button state 9");
+
+  addTab("about:blank", function(browser, tab) {
+    info("Opening a new tab");
+
+    ok(!isChecked(webconsole), "web console button state 10");
+    ok(!isChecked(inspector), "inspector button state 10");
+    ok(!isChecked(debuggr), "debugger button state 10");
+    ok(!isChecked(styleeditor), "styleeditor button state 10");
+
+    gBrowser.removeCurrentTab();
+
+    oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkClosed));
+    document.getElementById("Tools:DevToolbar").doCommand();
   });
 }
 
 function checkClosed() {
   ok(!DeveloperToolbar.visible, "DeveloperToolbar is not visible in checkClosed");
 
+  // Check we grok state even when closed
+  document.getElementById("Tools:WebConsole").doCommand();
+
   oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.SHOW, catchFail(checkReOpen));
   document.getElementById("Tools:DevToolbar").doCommand();
 }
@@ -66,9 +134,18 @@ function checkClosed() {
 function checkReOpen() {
   ok(DeveloperToolbar.visible, "DeveloperToolbar is visible in checkReOpen");
 
-  let toggleToolbox =
-    document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
-  ok(isChecked(toggleToolbox), "toggle toolbox button is checked");
+  let webconsole = document.getElementById("developer-toolbar-webconsole");
+  let inspector = document.getElementById("developer-toolbar-inspector");
+  let debuggr = document.getElementById("developer-toolbar-debugger");
+  let styleeditor = document.getElementById("developer-toolbar-styleeditor");
+
+  ok(isChecked(webconsole), "web console button state 99");
+  ok(isChecked(inspector), "inspector button state 99");
+  ok(isChecked(debuggr), "debugger button state 99");
+  ok(isChecked(styleeditor), "styleeditor button state 99");
+
+  // We close the style editor (not automatically closed)
+  document.getElementById("Tools:StyleEditor").doCommand();
 
   oneTimeObserve(DeveloperToolbar.NOTIFICATIONS.HIDE, catchFail(checkReClosed));
   document.getElementById("developer-toolbar-closebutton").doCommand();
diff --git a/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js b/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
index ee5e36c5747..9dfbdc12c00 100644
--- a/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
+++ b/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js
@@ -4,20 +4,13 @@
 // Tests that the developer toolbar errors count works properly.
 
 function test() {
-  const TEST_URI = "http://example.com/browser/browser/devtools/shared/test/" +
-                   "browser_toolbar_webconsole_errors_count.html";
+  const TEST_URI = "http://example.com/browser/browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.html";
 
   let imported = {};
   Components.utils.import("resource:///modules/HUDService.jsm", imported);
   let HUDService = imported.HUDService;
 
-  Components.utils.import("resource:///modules/devtools/gDevTools.jsm", imported);
-  let gDevTools = imported.gDevTools;
-
-  Components.utils.import("resource:///modules/devtools/Target.jsm", imported);
-  let TargetFactory = imported.TargetFactory;
-
-  let webconsole = document.getElementById("developer-toolbar-toolbox-button");
+  let webconsole = document.getElementById("developer-toolbar-webconsole");
   let toolbar = document.getElementById("Tools:DevToolbar");
   let tab1, tab2;
 
@@ -111,8 +104,7 @@ function test() {
 
     oneTimeObserve("web-console-created", _onWebConsoleOpen);
 
-    let target = TargetFactory.forTab(tab);
-    gDevTools.openToolboxForTab(target, "webconsole");
+    HUDService.activateHUDForContext(tab);
   }
 
   function onWebConsoleOpen(hud) {
@@ -214,8 +206,7 @@ function test() {
 
   function testEnd() {
     document.getElementById("developer-toolbar-closebutton").doCommand();
-    let target1 = TargetFactory.forTab(tab1);
-    gDevTools.closeToolbox(target1);
+    HUDService.deactivateHUDForContext(tab1);
     gBrowser.removeTab(tab1);
     gBrowser.removeTab(tab2);
     finish();
diff --git a/browser/devtools/shared/test/head.js b/browser/devtools/shared/test/head.js
index 6c299965980..abb1dc76f14 100644
--- a/browser/devtools/shared/test/head.js
+++ b/browser/devtools/shared/test/head.js
@@ -8,12 +8,6 @@ let console = (function() {
   return tempScope.console;
 })();
 
-let TargetFactory = (function() {
-  let tempScope = {};
-  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-  return tempScope.TargetFactory;
-})();
-
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
diff --git a/browser/devtools/shared/test/leakhunt.js b/browser/devtools/shared/test/leakhunt.js
index 66d067a3c85..c5b95698131 100644
--- a/browser/devtools/shared/test/leakhunt.js
+++ b/browser/devtools/shared/test/leakhunt.js
@@ -10,12 +10,22 @@
  *   otherthing: otherthing
  * });
  */
-function leakHunt(root) {
-  var path = [];
-  var seen = [];
+
+var noRecurse = [
+  /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/,
+  /^Window$/, /^Document$/,
+  /^XULDocument$/, /^XULElement$/,
+  /^DOMWindow$/, /^HTMLDocument$/, /^HTML.*Element$/
+];
+
+var hide = [ /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/ ];
+
+function leakHunt(root, path, seen) {
+  path = path || [];
+  seen = seen || [];
 
   try {
-    var output = leakHunt.inner(root, path, seen);
+    var output = leakHuntInner(root, path, seen);
     output.forEach(function(line) {
       dump(line + '\n');
     });
@@ -25,7 +35,7 @@ function leakHunt(root) {
   }
 }
 
-leakHunt.inner = function LH_inner(root, path, seen) {
+function leakHuntInner(root, path, seen) {
   var prefix = new Array(path.length).join('  ');
 
   var reply = [];
@@ -42,93 +52,70 @@ leakHunt.inner = function LH_inner(root, path, seen) {
     return reply;
   }
 
-  try {
-    var index = 0;
-    for (var data of root) {
-      var prop = '' + index;
-      leakHunt.digProperty(prop, data, path, seen, direct, log);
-      index++;
-    }
-  }
-  catch (ex) { /* Ignore things that are not enumerable */ }
-
   for (var prop in root) {
+    var newPath = path.slice();
+    newPath.push(prop);
+    prefix = new Array(newPath.length).join('  ');
+
     var data;
     try {
       data = root[prop];
     }
     catch (ex) {
-      log(prefix + '  ' + prop + ' = Error: ' + ex.toString().substring(0, 30));
+      log(prefix + prop + '  Error reading: ' + ex);
       continue;
     }
 
-    leakHunt.digProperty(prop, data, path, seen, direct, log);
+    var recurse = true;
+    var message = getType(data);
+
+    if (matchesAnyPattern(message, hide)) {
+      continue;
+    }
+
+    if (message === 'function' && direct.indexOf(prop) == -1) {
+      continue;
+    }
+
+    if (message === 'string') {
+      var extra = data.length > 10 ? data.substring(0, 9) + '_' : data;
+      message += ' "' + extra.replace(/\n/g, "|") + '"';
+      recurse = false;
+    }
+    else if (matchesAnyPattern(message, noRecurse)) {
+      message += ' (no recurse)'
+      recurse = false;
+    }
+    else if (seen.indexOf(data) !== -1) {
+      message += ' (already seen)';
+      recurse = false;
+    }
+
+    if (recurse) {
+      seen.push(data);
+      var lines = leakHuntInner(data, newPath, seen);
+      if (lines.length == 0) {
+        if (message !== 'function') {
+          log(prefix + prop + ' = ' + message + ' { }');
+        }
+      }
+      else {
+        log(prefix + prop + ' = ' + message + ' {');
+        lines.forEach(function(line) {
+          reply.push(line);
+        });
+        log(prefix + '}');
+      }
+    }
+    else {
+      log(prefix + prop + ' = ' + message);
+    }
   }
 
   return reply;
 }
 
-leakHunt.hide = [ /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/ ];
-
-leakHunt.noRecurse = [
-  /^string$/, /^number$/, /^boolean$/, /^null/, /^undefined/,
-  /^Window$/, /^Document$/,
-  /^XULDocument$/, /^XULElement$/,
-  /^DOMWindow$/, /^HTMLDocument$/, /^HTML.*Element$/, /^ChromeWindow$/
-];
-
-leakHunt.digProperty = function LH_digProperty(prop, data, path, seen, direct, log) {
-  var newPath = path.slice();
-  newPath.push(prop);
-  var prefix = new Array(newPath.length).join('  ');
-
-  var recurse = true;
-  var message = leakHunt.getType(data);
-
-  if (leakHunt.matchesAnyPattern(message, leakHunt.hide)) {
-    return;
-  }
-
-  if (message === 'function' && direct.indexOf(prop) == -1) {
-    return;
-  }
-
-  if (message === 'string') {
-    var extra = data.length > 10 ? data.substring(0, 9) + '_' : data;
-    message += ' "' + extra.replace(/\n/g, "|") + '"';
-    recurse = false;
-  }
-  else if (leakHunt.matchesAnyPattern(message, leakHunt.noRecurse)) {
-    message += ' (no recurse)'
-    recurse = false;
-  }
-  else if (seen.indexOf(data) !== -1) {
-    message += ' (already seen)';
-    recurse = false;
-  }
-
-  if (recurse) {
-    seen.push(data);
-    var lines = leakHunt.inner(data, newPath, seen);
-    if (lines.length == 0) {
-      if (message !== 'function') {
-        log(prefix + prop + ' = ' + message + ' { }');
-      }
-    }
-    else {
-      log(prefix + prop + ' = ' + message + ' {');
-      lines.forEach(function(line) {
-        log(line);
-      });
-      log(prefix + '}');
-    }
-  }
-  else {
-    log(prefix + prop + ' = ' + message);
-  }
-};
-
-leakHunt.matchesAnyPattern = function LH_matchesAnyPattern(str, patterns) {
+function matchesAnyPattern(str, patterns) {
   var match = false;
   patterns.forEach(function(pattern) {
     if (str.match(pattern)) {
@@ -136,9 +123,9 @@ leakHunt.matchesAnyPattern = function LH_matchesAnyPattern(str, patterns) {
     }
   });
   return match;
-};
+}
 
-leakHunt.getType = function LH_getType(data) {
+function getType(data) {
   if (data === null) {
     return 'null';
   }
@@ -148,13 +135,13 @@ leakHunt.getType = function LH_getType(data) {
 
   var type = typeof data;
   if (type === 'object' || type === 'Object') {
-    type = leakHunt.getCtorName(data);
+    type = getCtorName(data);
   }
 
   return type;
-};
+}
 
-leakHunt.getCtorName = function LH_getCtorName(aObj) {
+function getCtorName(aObj) {
   try {
     if (aObj.constructor && aObj.constructor.name) {
       return aObj.constructor.name;
@@ -167,4 +154,4 @@ leakHunt.getCtorName = function LH_getCtorName(aObj) {
   // If that fails, use Objects toString which sometimes gives something
   // better than 'Object', and at least defaults to Object if nothing better
   return Object.prototype.toString.call(aObj).slice(8, -1);
-};
+}
diff --git a/browser/devtools/styleeditor/StyleEditor.jsm b/browser/devtools/styleeditor/StyleEditor.jsm
index c7464162268..685d039d2a0 100644
--- a/browser/devtools/styleeditor/StyleEditor.jsm
+++ b/browser/devtools/styleeditor/StyleEditor.jsm
@@ -5,7 +5,7 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags"];
+this.EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags", "StyleEditorManager"];
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
@@ -298,7 +298,7 @@ StyleEditor.prototype = {
           }
           let source = NetUtil.readInputStreamToString(aStream, aStream.available());
           aStream.close();
-
+    
           this._appendNewStyleSheet(source);
           this.clearFlag(StyleEditorFlags.ERROR);
         }.bind(this));
@@ -1120,7 +1120,6 @@ StyleEditor.prototype = {
       accel: true,
       callback: function save() {
         this.saveToFile(this._savedFile);
-        return true;
       }.bind(this)
     });
 
@@ -1131,7 +1130,6 @@ StyleEditor.prototype = {
       shift: true,
       callback: function saveAs() {
         this.saveToFile();
-        return true;
       }.bind(this)
     });
 
@@ -1279,3 +1277,134 @@ function setupBracketCompletion(aSourceEditor)
     aSourceEditor.setCaretOffset(aSourceEditor.getCaretOffset() - 1);
   }, false);
 }
+
+/**
+  * Manage the different editors instances.
+  */
+
+this.StyleEditorManager = function StyleEditorManager(aWindow) {
+  this.chromeWindow = aWindow;
+  this.listenToTabs();
+  this.editors = new WeakMap();
+}
+
+StyleEditorManager.prototype = {
+
+  /**
+   * Get the editor for a specific content window.
+   */
+  getEditorForWindow: function SEM_getEditorForWindow(aContentWindow) {
+    return this.editors.get(aContentWindow);
+  },
+
+  /**
+   * Focus the editor and select a stylesheet.
+   *
+   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
+   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
+   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
+   */
+  selectEditor: function SEM_selectEditor(aWindow, aSelectedStyleSheet, aLine, aCol) {
+    if (aSelectedStyleSheet) {
+      aWindow.styleEditorChrome.selectStyleSheet(aSelectedStyleSheet, aLine, aCol);
+    }
+    aWindow.focus();
+  },
+
+  /**
+   * Open a new editor.
+   *
+   * @param {Window} content window.
+   * @param {Window} chrome window.
+   * @param {CSSStyleSheet} [aSelectedStyleSheet] default Stylesheet.
+   * @param {Number} [aLine] Line to which the caret should be moved (one-indexed).
+   * @param {Number} [aCol] Column to which the caret should be moved (one-indexed).
+   */
+  newEditor: function SEM_newEditor(aContentWindow, aChromeWindow, aSelectedStyleSheet, aLine, aCol) {
+    const CHROME_URL = "chrome://browser/content/styleeditor.xul";
+    const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
+
+    let args = {
+      contentWindow: aContentWindow,
+      selectedStyleSheet: aSelectedStyleSheet,
+      line: aLine,
+      col: aCol
+    };
+    args.wrappedJSObject = args;
+    let chromeWindow = Services.ww.openWindow(aChromeWindow, CHROME_URL, "_blank",
+                                              CHROME_WINDOW_FLAGS, args);
+
+    chromeWindow.onunload = function() {
+      if (chromeWindow.location == CHROME_URL) {
+        // not about:blank being unloaded
+        this.unregisterEditor(aContentWindow);
+      }
+    }.bind(this);
+    chromeWindow.focus();
+
+    this.editors.set(aContentWindow, chromeWindow);
+
+    this.refreshCommand();
+
+    return chromeWindow;
+  },
+
+  /**
+   * Toggle an editor.
+   *
+   * @param {Window} associated content window.
+   */
+  toggleEditor: function SEM_toggleEditor(aContentWindow, aChromeWindow) {
+    let editor = this.getEditorForWindow(aContentWindow);
+    if (editor) {
+      editor.close();
+    } else {
+      this.newEditor(aContentWindow, aChromeWindow);
+    }
+  },
+
+  /**
+   * Close an editor.
+   *
+   * @param {Window} associated content window.
+   */
+  unregisterEditor: function SEM_unregisterEditor(aContentWindow) {
+    let chromeWindow = this.editors.get(aContentWindow);
+    if (chromeWindow) {
+      chromeWindow.close();
+    }
+    this.editors.delete(aContentWindow);
+    this.refreshCommand();
+  },
+
+  /**
+   * Update the status of tool's menuitems and buttons.
+   */
+  refreshCommand: function SEM_refreshCommand() {
+    let contentWindow = this.chromeWindow.gBrowser.contentWindow;
+    let command = this.chromeWindow.document.getElementById("Tools:StyleEditor");
+
+    let win = this.getEditorForWindow(contentWindow);
+    if (win) {
+      command.setAttribute("checked", "true");
+    } else {
+      command.setAttribute("checked", "false");
+    }
+  },
+
+  /**
+   * Trigger refreshCommand when needed.
+   */
+  listenToTabs: function SEM_listenToTabs() {
+    let win = this.chromeWindow;
+    let tabs = win.gBrowser.tabContainer;
+
+    let bound_refreshCommand = this.refreshCommand.bind(this);
+    tabs.addEventListener("TabSelect", bound_refreshCommand, true);
+
+    win.addEventListener("unload", function onClose(aEvent) {
+      tabs.removeEventListener("TabSelect", bound_refreshCommand, true);
+      win.removeEventListener("unload", onClose, false);
+    }, false);
+  },
+}
diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
index 7c2aeb6099e..ca9dccd9e2f 100644
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -69,8 +69,6 @@ this.StyleEditorChrome = function StyleEditorChrome(aRoot, aContentWindow)
 }
 
 StyleEditorChrome.prototype = {
-  _styleSheetToSelect: null,
-
   /**
    * Retrieve the content window attached to this chrome.
    *
@@ -276,7 +274,7 @@ StyleEditorChrome.prototype = {
   /**
    * Reset the chrome UI to an empty and ready state.
    */
-  resetChrome: function SEC__resetChrome()
+  _resetChrome: function SEC__resetChrome()
   {
     this._editors.forEach(function (aEditor) {
       aEditor.removeActionListener(this);
@@ -299,7 +297,7 @@ StyleEditorChrome.prototype = {
    */
   _populateChrome: function SEC__populateChrome()
   {
-    this.resetChrome();
+    this._resetChrome();
 
     let document = this.contentDocument;
     this._document.title = _("chromeWindowTitle",
@@ -339,60 +337,49 @@ StyleEditorChrome.prototype = {
    */
   selectStyleSheet: function SEC_selectSheet(aSheet, aLine, aCol)
   {
-    let alreadyCalled = !!this._styleSheetToSelect;
-
-    this._styleSheetToSelect = {
-      sheet: aSheet,
-      line: aLine,
-      col: aCol,
-    };
-
-    if (alreadyCalled) {
-      return;
-    }
-
     let select = function DEC_select(aEditor) {
-      let sheet = this._styleSheetToSelect.sheet;
-      let line = this._styleSheetToSelect.line;
-      let col = this._styleSheetToSelect.col;
-      let summary = sheet ? this.getSummaryElementForEditor(aEditor)
-                          : this._view.getSummaryElementByOrdinal(0);
+      let summary = aSheet ? this.getSummaryElementForEditor(aEditor)
+                           : this._view.getSummaryElementByOrdinal(0);
+      let setCaret = false;
 
-      if (line) {
-        col = col || 1;
-
-        if (!aEditor.sourceEditor) {
-          // If a line or column was specified we move the caret appropriately.
+      if (aLine || aCol) {
+        aLine = aLine || 1;
+        aCol = aCol || 1;
+        setCaret = true;
+      }
+      if (!aEditor.sourceEditor) {
+        // If a line or column was specified we move the caret appropriately.
+        if (setCaret) {
           let self = this;
           aEditor.addActionListener({
             onAttach: function SEC_selectSheet_onAttach()
             {
               aEditor.removeActionListener(this);
               self.selectedStyleSheetIndex = aEditor.styleSheetIndex;
-              aEditor.sourceEditor.setCaretPosition(line - 1, col - 1);
+              aEditor.sourceEditor.setCaretPosition(aLine - 1, aCol - 1);
             }
           });
-        } else {
-          // If a line or column was specified we move the caret appropriately.
-          aEditor.sourceEditor.setCaretPosition(line - 1, col - 1);
+        }
+        this._view.activeSummary = summary;
+      } else {
+        this._view.activeSummary = summary;
+
+        // If a line or column was specified we move the caret appropriately.
+        if (setCaret) {
+          aEditor.sourceEditor.setCaretPosition(aLine - 1, aCol - 1);
         }
       }
-
-      this._view.activeSummary = summary;
       this.selectedStyleSheetIndex = aEditor.styleSheetIndex;
-      this._styleSheetToSelect = null;
     }.bind(this);
 
     if (!this.editors.length) {
       // We are in the main initialization phase so we wait for the editor
       // containing the target stylesheet to be added and select the target
       // stylesheet, optionally moving the cursor to a selected line.
-      let self = this;
       this.addChromeListener({
         onEditorAdded: function SEC_selectSheet_onEditorAdded(aChrome, aEditor) {
-          let sheet = self._styleSheetToSelect.sheet;
-          if ((sheet && aEditor.styleSheet == sheet) ||
-              aEditor.styleSheetIndex == 0) {
+          if ((!aSheet && aEditor.styleSheetIndex == 0) ||
+              aEditor.styleSheet == aSheet) {
             aChrome.removeChromeListener(this);
             select(aEditor);
           }
diff --git a/browser/devtools/styleeditor/StyleEditorDefinition.jsm b/browser/devtools/styleeditor/StyleEditorDefinition.jsm
deleted file mode 100644
index 654e304d420..00000000000
--- a/browser/devtools/styleeditor/StyleEditorDefinition.jsm
+++ /dev/null
@@ -1,56 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = [ "StyleEditorDefinition" ];
-
-const Cu = Components.utils;
-const STRINGS_URI = "chrome://browser/locale/devtools/styleeditor.properties";
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorChrome.jsm");
-Cu.import("resource://gre/modules/Services.jsm");
-
-XPCOMUtils.defineLazyGetter(this, "_strings",
-  function() Services.strings.createBundle(STRINGS_URI));
-
-XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorPanel",
-  "resource:///modules/devtools/StyleEditorPanel.jsm");
-
-/**
- * The external API allowing us to be registered with DevTools.jsm
- */
-this.StyleEditorDefinition = {
-  id: "styleeditor",
-  key: l10n("open.commandkey"),
-  ordinal: 3,
-  accesskey: l10n("open.accesskey"),
-  modifiers: "shift",
-  label: l10n("ToolboxStyleEditor.label"),
-  url: "chrome://browser/content/styleeditor.xul",
-
-  isTargetSupported: function(target) {
-    return !target.isRemote && !target.isChrome;
-  },
-
-  build: function(iframeWindow, toolbox) {
-    return new StyleEditorPanel(iframeWindow, toolbox);
-  }
-};
-
-/**
- * Lookup l10n string from a string bundle.
- * @param {string} aName The key to lookup.
- * @returns A localized version of the given key.
- */
-function l10n(aName)
-{
-  try {
-    return _strings.GetStringFromName(aName);
-  } catch (ex) {
-    Services.console.logStringMessage("Error reading '" + aName + "'");
-    throw new Error("l10n error with " + aName);
-  }
-}
diff --git a/browser/devtools/styleeditor/StyleEditorPanel.jsm b/browser/devtools/styleeditor/StyleEditorPanel.jsm
deleted file mode 100644
index ff0d3c18e16..00000000000
--- a/browser/devtools/styleeditor/StyleEditorPanel.jsm
+++ /dev/null
@@ -1,109 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const Cu = Components.utils;
-const Ci = Components.interfaces;
-
-this.EXPORTED_SYMBOLS = ["StyleEditorPanel"];
-
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorChrome.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-this.StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
-  new EventEmitter(this);
-
-  this._toolbox = toolbox;
-  this._target = toolbox.target;
-
-  this.reset = this.reset.bind(this);
-  this.newPage = this.newPage.bind(this);
-  this.destroy = this.destroy.bind(this);
-
-  this._target.on("will-navigate", this.reset);
-  this._target.on("navigate", this.newPage);
-  this._target.on("close", this.destroy);
-
-  this._panelWin = panelWin;
-  this._panelDoc = panelWin.document;
-
-  let contentWin = toolbox.target.tab.linkedBrowser.contentWindow;
-  this.setPage(contentWin);
-
-  this.isReady = true;
-}
-
-StyleEditorPanel.prototype = {
-  /**
-   * Target getter.
-   */
-  get target() {
-    return this._target;
-  },
-
-  /**
-   * Panel window getter.
-   */
-  get panelWindow() this._panelWin,
-
-  /**
-   * StyleEditorChrome instance getter.
-   */
-  get styleEditorChrome() this._panelWin.styleEditorChrome,
-
-  /**
-   * Set the page to target.
-   */
-  setPage: function StyleEditor_setPage(contentWindow) {
-    if (this._panelWin.styleEditorChrome) {
-      this._panelWin.styleEditorChrome.contentWindow = contentWindow;
-    } else {
-      let chromeRoot = this._panelDoc.getElementById("style-editor-chrome");
-      let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
-      this._panelWin.styleEditorChrome = chrome;
-    }
-    this.selectStyleSheet(null, null, null);
-  },
-
-  /**
-   * Navigated to a new page.
-   */
-  newPage: function StyleEditor_newPage(event, window) {
-    this.setPage(window);
-  },
-
-  /**
-   * No window available anymore.
-   */
-  reset: function StyleEditor_reset() {
-    this._panelWin.styleEditorChrome.resetChrome();
-  },
-
-  /**
-   * Select a stylesheet.
-   */
-  selectStyleSheet: function StyleEditor_selectStyleSheet(stylesheet, line, col) {
-    this._panelWin.styleEditorChrome.selectStyleSheet(stylesheet, line, col);
-  },
-
-  /**
-   * Destroy StyleEditor
-   */
-  destroy: function StyleEditor_destroy() {
-    if (this._destroyed) {
-      return;
-    }
-    this._destroyed = true;
-
-    this._target.off("will-navigate", this.reset);
-    this._target.off("navigate", this.newPage);
-    this._target.off("close", this.destroy);
-    this._target = null;
-    this._toolbox = null;
-    this._panelWin = null;
-    this._panelDoc = null;
-  },
-}
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
index 6a3cff7c5f6..93887d1e125 100644
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -16,95 +16,117 @@
 <?xul-overlay href="chrome://browser/content/source-editor-overlay.xul"?>
 <xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.w3.org/1999/xhtml"
-        id="style-editor-chrome-window">
+        id="style-editor-chrome-window"
+        title="&window.title;"
+        windowtype="Tools:StyleEditor"
+        width="800" height="280"
+        persist="screenX screenY width height sizemode">
+<xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 
-  <xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
+<xul:popupset id="style-editor-popups">
+  <xul:menupopup id="sourceEditorContextMenu"
+                 onpopupshowing="goUpdateSourceEditorMenuItems()">
+    <xul:menuitem id="se-cMenu-undo"/>
+    <xul:menuseparator/>
+    <xul:menuitem id="se-cMenu-cut"/>
+    <xul:menuitem id="se-cMenu-copy"/>
+    <xul:menuitem id="se-cMenu-paste"/>
+    <xul:menuitem id="se-cMenu-delete"/>
+    <xul:menuseparator/>
+    <xul:menuitem id="se-cMenu-selectAll"/>
+    <xul:menuseparator/>
+    <xul:menuitem id="se-cMenu-find"/>
+    <xul:menuitem id="se-cMenu-findAgain"/>
+    <xul:menuseparator/>
+    <xul:menuitem id="se-cMenu-gotoLine"/>
+  </xul:menupopup>
+</xul:popupset>
 
-  <xul:popupset id="style-editor-popups">
-    <xul:menupopup id="sourceEditorContextMenu"
-                  onpopupshowing="goUpdateSourceEditorMenuItems()">
-      <xul:menuitem id="se-cMenu-undo"/>
-      <xul:menuseparator/>
-      <xul:menuitem id="se-cMenu-cut"/>
-      <xul:menuitem id="se-cMenu-copy"/>
-      <xul:menuitem id="se-cMenu-paste"/>
-      <xul:menuitem id="se-cMenu-delete"/>
-      <xul:menuseparator/>
-      <xul:menuitem id="se-cMenu-selectAll"/>
-      <xul:menuseparator/>
-      <xul:menuitem id="se-cMenu-find"/>
-      <xul:menuitem id="se-cMenu-findAgain"/>
-      <xul:menuseparator/>
-      <xul:menuitem id="se-cMenu-gotoLine"/>
-    </xul:menupopup>
-  </xul:popupset>
+<xul:commandset id="editMenuCommands"/>
+<xul:commandset id="sourceEditorCommands"/>
+<xul:commandset id="style-editor-commandset">
+  <xul:command id="style-editor-cmd-close" oncommand="window.close();"/>
+</xul:commandset>
 
-  <xul:commandset id="editMenuCommands"/>
-  <xul:commandset id="sourceEditorCommands"/>
+<xul:keyset id="sourceEditorKeys"/>
+<xul:keyset id="style-editor-keyset">
+  <xul:key id="style-editor-key-close"
+           key="&closeCmd.key;"
+           command="style-editor-cmd-close"
+           modifiers="accel"/>
+</xul:keyset>
 
-  <xul:keyset id="sourceEditorKeys"/>
+<xul:box id="style-editor-chrome" class="splitview-root loading">
+  <xul:box class="splitview-controller">
+    <xul:box class="splitview-main">
+      <xul:toolbar class="devtools-toolbar">
+        <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
+                    accesskey="&newButton.accesskey;"
+                    tooltiptext="&newButton.tooltip;"
+                    label="&newButton.label;"
+                    disabled="true"/>
+        <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
+                    accesskey="&importButton.accesskey;"
+                    tooltiptext="&importButton.tooltip;"
+                    label="&importButton.label;"
+                    disabled="true"/>
+      </xul:toolbar>
+    </xul:box>
+    <xul:box id="splitview-resizer-target" class="splitview-nav-container"
+             persist="width height">
+      <ol class="splitview-nav" tabindex="0"></ol>
+      <div class="splitview-nav placeholder empty">
+        <p><strong>&noStyleSheet.label;</strong></p>
+        <p>&noStyleSheet-tip-start.label;
+          <a href="#"
+             class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
+          &noStyleSheet-tip-end.label;</p>
+      </div>
+    </xul:box> <!-- .splitview-nav-container -->
+  </xul:box>   <!-- .splitview-controller -->
+  <xul:box class="splitview-side-details"/>
 
-  <xul:box id="style-editor-chrome" class="splitview-root loading">
-    <xul:box class="splitview-controller">
-      <xul:box class="splitview-main">
-        <xul:toolbar class="devtools-toolbar">
-          <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
-                      accesskey="&newButton.accesskey;"
-                      tooltiptext="&newButton.tooltip;"
-                      label="&newButton.label;"
-                      disabled="true"/>
-          <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
-                      accesskey="&importButton.accesskey;"
-                      tooltiptext="&importButton.tooltip;"
-                      label="&importButton.label;"
-                      disabled="true"/>
-        </xul:toolbar>
-      </xul:box>
-      <xul:box id="splitview-resizer-target" class="splitview-nav-container"
-              persist="width height">
-        <ol class="splitview-nav" tabindex="0"></ol>
-        <div class="splitview-nav placeholder empty">
-          <p><strong>&noStyleSheet.label;</strong></p>
-          <p>&noStyleSheet-tip-start.label;
-            <a href="#"
-              class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
-            &noStyleSheet-tip-end.label;</p>
+  <div id="splitview-templates" hidden="true">
+    <li id="splitview-tpl-summary-stylesheet" tabindex="0">
+      <a class="stylesheet-enabled" tabindex="0" href="#"
+         title="&visibilityToggle.tooltip;"
+         accesskey="&saveButton.accesskey;"></a>
+      <hgroup class="stylesheet-info">
+        <h1><a class="stylesheet-name" href="#"><xul:label crop="start"/></a></h1>
+        <div class="stylesheet-more">
+          <h3 class="stylesheet-title"></h3>
+          <h3 class="stylesheet-rule-count"></h3>
+          <h3 class="stylesheet-error-message"></h3>
+          <xul:spacer/>
+          <h3><a class="stylesheet-saveButton" href="#"
+                 title="&saveButton.tooltip;"
+                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
         </div>
-      </xul:box> <!-- .splitview-nav-container -->
-    </xul:box>   <!-- .splitview-controller -->
-    <xul:box class="splitview-side-details"/>
+      </hgroup>
+    </li>
 
-    <div id="splitview-templates" hidden="true">
-      <li id="splitview-tpl-summary-stylesheet" tabindex="0">
-        <a class="stylesheet-enabled" tabindex="0" href="#"
-          title="&visibilityToggle.tooltip;"
-          accesskey="&saveButton.accesskey;"></a>
-        <hgroup class="stylesheet-info">
-          <h1><a class="stylesheet-name" href="#"><xul:label crop="start"/></a></h1>
-          <div class="stylesheet-more">
-            <h3 class="stylesheet-title"></h3>
-            <h3 class="stylesheet-rule-count"></h3>
-            <h3 class="stylesheet-error-message"></h3>
-            <xul:spacer/>
-            <h3><a class="stylesheet-saveButton" href="#"
-                  title="&saveButton.tooltip;"
-                  accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
-          </div>
-        </hgroup>
-      </li>
+    <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
+      <xul:resizer class="splitview-portrait-resizer"
+                   dir="bottom"
+                   element="splitview-resizer-target"/>
+      <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
+        <xul:resizer class="splitview-landscape-resizer"
+                     dir="bottomend"
+                     element="splitview-resizer-target"/>
+      </xul:toolbar>
+      <xul:box class="stylesheet-editor-input textbox"
+               data-placeholder="&editorTextbox.placeholder;"/>
+    </xul:box>
+  </div> <!-- #splitview-templates -->
+</xul:box>   <!-- .splitview-root -->
 
-      <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
-        <xul:resizer class="splitview-portrait-resizer"
-                    dir="bottom"
-                    element="splitview-resizer-target"/>
-        <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
-          <xul:resizer class="splitview-landscape-resizer"
-                      dir="bottomend"
-                      element="splitview-resizer-target"/>
-        </xul:toolbar>
-        <xul:box class="stylesheet-editor-input textbox"
-                data-placeholder="&editorTextbox.placeholder;"/>
-      </xul:box>
-    </div> <!-- #splitview-templates -->
-  </xul:box>   <!-- .splitview-root -->
+<xul:script type="application/javascript"><![CDATA[
+Components.utils.import("resource:///modules/devtools/StyleEditorChrome.jsm");
+let chromeRoot = document.getElementById("style-editor-chrome");
+let args = window.arguments[0].wrappedJSObject;
+let contentWindow = args.contentWindow;
+let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
+chrome.selectStyleSheet(args.selectedStyleSheet, args.line, args.col);
+window.styleEditorChrome = chrome;
+]]></xul:script>
 </xul:window>
diff --git a/browser/devtools/styleeditor/test/Makefile.in b/browser/devtools/styleeditor/test/Makefile.in
index 95ef1121f73..4ca04ee26ba 100644
--- a/browser/devtools/styleeditor/test/Makefile.in
+++ b/browser/devtools/styleeditor/test/Makefile.in
@@ -23,11 +23,9 @@ _BROWSER_TEST_FILES = \
                  browser_styleeditor_passedinsheet.js \
                  browser_styleeditor_pretty.js \
                  browser_styleeditor_readonly.js \
-                 $(filter disabled-for-intermittent-failures--bug-707891, browser_styleeditor_reopen.js) \
+		 $(filter disabled-for-intermittent-failures--bug-707891, browser_styleeditor_reopen.js) \
                  browser_styleeditor_sv_keynav.js \
                  browser_styleeditor_sv_resize.js \
-                 head.js \
-                 helpers.js \
                  four.html \
                  head.js \
                  helpers.js \
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
index 7835c7c15ba..51f8663aee9 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_init.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
@@ -32,11 +32,19 @@ function run(aChrome)
   let SEC = gChromeWindow.styleEditorChrome;
   is(SEC, aChrome, "StyleEditorChrome object exists as new window property");
 
+  ok(gChromeWindow.document.title.indexOf("simple testcase") >= 0,
+     "the Style Editor window title contains the document's title");
+
   // check editors are instantiated
   is(SEC.editors.length, 2,
      "there is two StyleEditor instances managed");
   ok(SEC.editors[0].styleSheetIndex < SEC.editors[1].styleSheetIndex,
      "editors are ordered by styleSheetIndex");
+
+  // check StyleEditorChrome is a singleton wrt to the same DOMWindow
+  let chromeWindow = StyleEditor.openChrome();
+  is(chromeWindow, gChromeWindow,
+     "attempt to edit the same document returns the same Style Editor window");
 }
 
 let gEditorAddedCount = 0;
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
index 07331c6e092..9b5e86e4d83 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
@@ -15,32 +15,31 @@ function test()
   // this checks that the Style Editor still launches correctly when it is opened
   // *while* the page is still loading
   launchStyleEditorChrome(function (aChrome) {
-    content.location = TESTCASE_URI;
-    executeSoon(function() {
-      isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
-            "content document is still loading");
+    isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
+          "content document is still loading");
 
-      let root = gChromeWindow.document.querySelector(".splitview-root");
-      ok(root.classList.contains("loading"),
-        "style editor root element has 'loading' class name");
+    let root = gChromeWindow.document.querySelector(".splitview-root");
+    ok(root.classList.contains("loading"),
+       "style editor root element has 'loading' class name");
 
-      let button = gChromeWindow.document.querySelector(".style-editor-newButton");
-      ok(button.hasAttribute("disabled"),
-        "new style sheet button is disabled");
+    let button = gChromeWindow.document.querySelector(".style-editor-newButton");
+    ok(button.hasAttribute("disabled"),
+       "new style sheet button is disabled");
 
-      button = gChromeWindow.document.querySelector(".style-editor-importButton");
-      ok(button.hasAttribute("disabled"),
-        "import button is disabled");
+    button = gChromeWindow.document.querySelector(".style-editor-importButton");
+    ok(button.hasAttribute("disabled"),
+       "import button is disabled");
 
-      if (!aChrome.isContentAttached) {
-        aChrome.addChromeListener({
-          onContentAttach: run
-        });
-      } else {
-        run(aChrome);
-      }
-    });
+    if (!aChrome.isContentAttached) {
+      aChrome.addChromeListener({
+        onContentAttach: run
+      });
+    } else {
+      run(aChrome);
+    }
   });
+
+  content.location = TESTCASE_URI;
 }
 
 function run(aChrome)
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js b/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
index d095d1a48c6..05b37019e49 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_passedinsheet.js
@@ -6,53 +6,56 @@ const TESTCASE_URI = TEST_BASE + "simple.html";
 const LINE = 6;
 const COL = 2;
 
+let editor = null;
+let sheet = null;
+
 function test()
 {
-  let editor = null;
-  let sheet = null;
-
   waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
+  gBrowser.selectedBrowser.addEventListener("load", function () {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
     run();
   }, true);
   content.location = TESTCASE_URI;
+}
 
-  function run()
-  {
-    sheet = content.document.styleSheets[1];
-    launchStyleEditorChrome(function attachListeners(aChrome) {
-      aChrome.addChromeListener({
-        onEditorAdded: checkSourceEditor
-      });
-    }, sheet, LINE, COL);
-  }
+function run()
+{
+  sheet = content.document.styleSheets[1];
+  launchStyleEditorChrome(function attachListeners(aChrome) {
+    aChrome.addChromeListener({
+      onEditorAdded: checkSourceEditor
+    });
+  }, sheet, LINE, COL);
+}
 
-  function checkSourceEditor(aChrome, aEditor)
-  {
-    aChrome.removeChromeListener(this);
-    if (!aEditor.sourceEditor) {
-      aEditor.addActionListener({
-        onAttach: function (aEditor) {
-          aEditor.removeActionListener(this);
-          validate(aEditor);
-        }
-      });
-    } else {
-      validate(aEditor);
-    }
-  }
-
-  function validate(aEditor)
-  {
-    info("validating style editor");
-    let sourceEditor = aEditor.sourceEditor;
-    let caretPosition = sourceEditor.getCaretPosition();
-    is(caretPosition.line, LINE - 1, "caret row is correct"); // index based
-    is(caretPosition.col, COL - 1, "caret column is correct");
-    is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
-    finish();
+function checkSourceEditor(aChrome, aEditor)
+{
+  if (!aEditor.sourceEditor) {
+    aEditor.addActionListener({
+      onAttach: function (aEditor) {
+        aEditor.removeActionListener(this);
+        validate(aEditor);
+      }
+    });
+  } else {
+    validate(aEditor);
   }
 }
+
+function validate(aEditor)
+{
+  info("validating style editor");
+  let sourceEditor = aEditor.sourceEditor;
+  let caretPosition = sourceEditor.getCaretPosition();
+  is(caretPosition.line, LINE - 1, "caret row is correct"); // index based
+  is(caretPosition.col, COL - 1, "caret column is correct");
+  is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
+  finishUp();
+}
+
+function finishUp()
+{
+  editor = sheet = null;
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_private.js b/browser/devtools/styleeditor/test/browser_styleeditor_private.js
index e3677e7c5d5..4172caf5e4c 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_private.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_private.js
@@ -19,33 +19,23 @@ function test() {
     finish();
   }
 
-  gBrowser.selectedTab = gBrowser.addTab();
-
   gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
     gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
     cache.evictEntries(Ci.nsICache.STORE_ANYWHERE);
     launchStyleEditorChrome(function(aChrome) {
-      if (aChrome.isContentAttached) {
-        onEditorAdded(aChrome, aChrome.editors[0]);
-      } else {
-        aChrome.addChromeListener({
-          onEditorAdded: onEditorAdded
-        });
-      }
+      aChrome.addChromeListener({
+        onEditorAdded: function(aChrome, aEditor) {
+          if (aEditor.isLoaded) {
+            checkCache();
+          } else {
+            aEditor.addActionListener({
+              onLoad: checkCache
+            });
+          }
+        }
+      });
     });
   }, true);
 
-  function onEditorAdded(aChrome, aEditor) {
-    aChrome.removeChromeListener(this);
-
-    if (aEditor.isLoaded) {
-      checkCache();
-    } else {
-      aEditor.addActionListener({
-        onLoad: checkCache
-      });
-    }
-  }
-
   content.location = 'http://' + TEST_HOST + '/browser/browser/devtools/styleeditor/test/test_private.html';
 }
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
index d2743161722..bf3045a8322 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
@@ -2,30 +2,22 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+// http rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+
 let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
-function test() {
-
-  // http rather than chrome to improve coverage
-  const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
-
-  const Cc = Components.classes;
-  const Ci = Components.interfaces;
-
-  let toolbox;
-  let tempScope = {};
-  Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
-  let FileUtils = tempScope.FileUtils;
+Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
+let FileUtils = tempScope.FileUtils;
 
 
+function test()
+{
   waitForExplicitFinish();
 
   addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    toolbox = gDevTools.getToolboxForTarget(target);
-
     aChrome.addChromeListener({
       onEditorAdded: function (aChrome, aEditor) {
         if (aEditor.styleSheetIndex != 0) {
@@ -42,7 +34,8 @@ function test() {
       }
     });
 
-    toolbox.once("destroyed", function onClose() {
+    gChromeWindow.addEventListener("unload", function onClose() {
+      gChromeWindow.removeEventListener("unload", onClose, true);
       gChromeWindow = null;
       executeSoon(function () {
         waitForFocus(function () {
@@ -50,8 +43,8 @@ function test() {
           // open StyleEditorChrome again (a new one since we closed the previous one)
           launchStyleEditorChrome(function (aChrome) {
             is(gChromeWindow.document.documentElement.hasAttribute("data-marker"),
-              false,
-              "opened a completely new StyleEditorChrome window");
+               false,
+               "opened a completely new StyleEditorChrome window");
 
             aChrome.addChromeListener({
               onEditorAdded: function (aChrome, aEditor) {
@@ -75,91 +68,91 @@ function test() {
   });
 
   content.location = TESTCASE_URI;
+}
 
-  let gFilename;
+let gFilename;
 
-  function run(aEditor)
-  {
-    gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
+function run(aEditor)
+{
+  gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
 
-    aEditor.saveToFile(gFilename, function (aFile) {
-      ok(aFile, "file got saved successfully");
+  aEditor.saveToFile(gFilename, function (aFile) {
+    ok(aFile, "file got saved successfully");
 
-      aEditor.addActionListener({
-        onFlagChange: function (aEditor, aFlag) {
-          if (aFlag != "unsaved") {
-            return;
-          }
-
-          ok(aEditor.hasFlag("unsaved"),
-            "first stylesheet has UNSAVED flag after making a change");
-
-          // marker used to check it does not exist when we reopen
-          // ie. the window we opened is indeed a new one
-          gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
-          toolbox.destroy();
+    aEditor.addActionListener({
+      onFlagChange: function (aEditor, aFlag) {
+        if (aFlag != "unsaved") {
+          return;
         }
-      });
 
-      waitForFocus(function () {
-        // insert char so that this stylesheet has the UNSAVED flag
-        EventUtils.synthesizeKey("x", {}, gChromeWindow);
-      }, gChromeWindow);
+        ok(aEditor.hasFlag("unsaved"),
+           "first stylesheet has UNSAVED flag after making a change");
+
+        // marker used to check it does not exist when we reopen
+        // ie. the window we opened is indeed a new one
+        gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
+        gChromeWindow.close();
+      }
+    });
+
+    waitForFocus(function () {
+      // insert char so that this stylesheet has the UNSAVED flag
+      EventUtils.synthesizeKey("x", {}, gChromeWindow);
+    }, gChromeWindow);
+  });
+}
+
+function testNewChrome(aEditor)
+{
+  ok(aEditor.savedFile,
+     "first stylesheet editor will save directly into the same file");
+
+  is(aEditor.getFriendlyName(), gFilename.leafName,
+     "first stylesheet still has the filename as it was saved");
+  gFilename = null;
+
+  ok(aEditor.hasFlag("unsaved"),
+     "first stylesheet still has UNSAVED flag at reopening");
+
+  ok(!aEditor.hasFlag("inline"),
+     "first stylesheet does not have INLINE flag");
+
+  ok(!aEditor.hasFlag("error"),
+     "editor does not have error flag initially");
+  let hadError = false;
+
+  let onSaveCallback = function (aFile) {
+    aEditor.addActionListener({
+      onFlagChange: function (aEditor, aFlag) {
+        if (!hadError && aFlag == "error") {
+          ok(aEditor.hasFlag("error"),
+             "editor has ERROR flag after attempting to save with invalid path");
+          hadError = true;
+
+          // save using source editor key binding (previous successful path)
+          waitForFocus(function () {
+            EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
+          }, gChromeWindow);
+          return;
+        }
+
+        if (hadError && aFlag == "unsaved") {
+          executeSoon(function () {
+            ok(!aEditor.hasFlag("unsaved"),
+               "first stylesheet has no UNSAVED flag after successful save");
+            ok(!aEditor.hasFlag("error"),
+               "ERROR flag has been removed since last operation succeeded");
+            finish();
+          });
+        }
+      }
     });
   }
 
-  function testNewChrome(aEditor)
-  {
-    ok(aEditor.savedFile,
-      "first stylesheet editor will save directly into the same file");
-
-    is(aEditor.getFriendlyName(), gFilename.leafName,
-      "first stylesheet still has the filename as it was saved");
-    gFilename = null;
-
-    ok(aEditor.hasFlag("unsaved"),
-      "first stylesheet still has UNSAVED flag at reopening");
-
-    ok(!aEditor.hasFlag("inline"),
-      "first stylesheet does not have INLINE flag");
-
-    ok(!aEditor.hasFlag("error"),
-      "editor does not have error flag initially");
-    let hadError = false;
-
-    let onSaveCallback = function (aFile) {
-      aEditor.addActionListener({
-        onFlagChange: function (aEditor, aFlag) {
-          if (!hadError && aFlag == "error") {
-            ok(aEditor.hasFlag("error"),
-              "editor has ERROR flag after attempting to save with invalid path");
-            hadError = true;
-
-            // save using source editor key binding (previous successful path)
-            waitForFocus(function () {
-              EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
-            }, gChromeWindow);
-            return;
-          }
-
-          if (hadError && aFlag == "unsaved") {
-            executeSoon(function () {
-              ok(!aEditor.hasFlag("unsaved"),
-                "first stylesheet has no UNSAVED flag after successful save");
-              ok(!aEditor.hasFlag("error"),
-                "ERROR flag has been removed since last operation succeeded");
-              finish();
-            });
-          }
-        }
-      });
-    }
-
-    let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
-    if (os == "WINNT") {
-      aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
-    } else {
-      aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
-    }
+  let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
+  if (os == "WINNT") {
+    aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
+  } else {
+    aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
   }
 }
diff --git a/browser/devtools/styleeditor/test/head.js b/browser/devtools/styleeditor/test/head.js
index d08249dca05..f2e646a4706 100644
--- a/browser/devtools/styleeditor/test/head.js
+++ b/browser/devtools/styleeditor/test/head.js
@@ -6,10 +6,6 @@ const TEST_BASE_HTTP = "http://example.com/browser/browser/devtools/styleeditor/
 const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleeditor/test/";
 const TEST_HOST = 'mochi.test:8888';
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 let gChromeWindow;               //StyleEditorChrome window
 let cache = Cc["@mozilla.org/network/cache-service;1"]
               .getService(Ci.nsICacheService);
@@ -21,7 +17,10 @@ Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
 function cleanup()
 {
-  gChromeWindow = null;
+  if (gChromeWindow) {
+    gChromeWindow.close();
+    gChromeWindow = null;
+  }
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
@@ -29,26 +28,16 @@ function cleanup()
 
 function launchStyleEditorChrome(aCallback, aSheet, aLine, aCol)
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  let panel = gDevTools.getPanelForTarget("styleeditor", target);
-  if (panel && panel.isReady) {
-    gChromeWindow = panel._panelWin;
-    gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
-    if (aSheet) {
-      panel.selectStyleSheet(aSheet, aLine, aCol);
-    }
-    aCallback(gChromeWindow.styleEditorChrome);
-  } else {
-    let toolbox = gDevTools.openToolboxForTab(target, "styleeditor");
-    toolbox.once("styleeditor-ready", function(event, panel) {
-      gChromeWindow = panel._panelWin;
+  gChromeWindow = StyleEditor.openChrome(aSheet, aLine, aCol);
+  if (gChromeWindow.document.readyState != "complete") {
+    gChromeWindow.addEventListener("load", function onChromeLoad() {
+      gChromeWindow.removeEventListener("load", onChromeLoad, true);
       gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
-      if (aSheet) {
-        panel.selectStyleSheet(aSheet, aLine, aCol);
-      }
       aCallback(gChromeWindow.styleEditorChrome);
-    });
+    }, true);
+  } else {
+    gChromeWindow.styleEditorChrome._alwaysDisableAnimations = true;
+    aCallback(gChromeWindow.styleEditorChrome);
   }
 }
 
diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index 35f3bcbfcec..0e1ddb30da1 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -17,10 +17,6 @@ Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/CssLogic.jsm");
 Cu.import("resource:///modules/devtools/Templater.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
 
 this.EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
 
@@ -122,16 +118,14 @@ UpdateProcess.prototype = {
  */
 this.CssHtmlTree = function CssHtmlTree(aStyleInspector)
 {
-  this.styleWindow = aStyleInspector.window;
-  this.styleDocument = aStyleInspector.window.document;
+  this.styleWin = aStyleInspector.iframe;
   this.styleInspector = aStyleInspector;
   this.cssLogic = aStyleInspector.cssLogic;
+  this.doc = aStyleInspector.document;
+  this.win = aStyleInspector.window;
+  this.getRTLAttr = this.win.getComputedStyle(this.win.gBrowser).direction;
   this.propertyViews = [];
 
-  let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].
-    getService(Ci.nsIXULChromeRegistry);
-  this.getRTLAttr = chromeReg.isLocaleRTL("global") ? "rtl" : "ltr";
-
   // Create bound methods.
   this.siBoundMenuUpdate = this.computedViewMenuUpdate.bind(this);
   this.siBoundCopy = this.computedViewCopy.bind(this);
@@ -139,6 +133,9 @@ this.CssHtmlTree = function CssHtmlTree(aStyleInspector)
   this.siBoundCopyProperty = this.computedViewCopyProperty.bind(this);
   this.siBoundCopyPropertyValue = this.computedViewCopyPropertyValue.bind(this);
 
+  // The document in which we display the results (csshtmltree.xul).
+  this.styleDocument = this.styleWin.contentWindow.document;
+
   this.styleDocument.addEventListener("copy", this.siBoundCopy);
 
   // Nodes used in templating
@@ -269,8 +266,8 @@ CssHtmlTree.prototype = {
       // processed.
       this.refreshSourceFilter();
       this.numVisibleProperties = 0;
-      let fragment = this.styleDocument.createDocumentFragment();
-      this._refreshProcess = new UpdateProcess(this.styleWindow, CssHtmlTree.propertyNames, {
+      let fragment = this.doc.createDocumentFragment();
+      this._refreshProcess = new UpdateProcess(this.win, CssHtmlTree.propertyNames, {
         onItem: function(aPropertyName) {
           // Per-item callback.
           let propView = new PropertyView(this, aPropertyName);
@@ -330,7 +327,7 @@ CssHtmlTree.prototype = {
     this._darkStripe = true;
 
     let display = this.propertyContainer.style.display;
-    this._refreshProcess = new UpdateProcess(this.styleWindow, this.propertyViews, {
+    this._refreshProcess = new UpdateProcess(this.win, this.propertyViews, {
       onItem: function(aPropView) {
         aPropView.refresh();
       }.bind(this),
@@ -350,7 +347,7 @@ CssHtmlTree.prototype = {
    */
   filterChanged: function CssHtmlTree_filterChanged(aEvent)
   {
-    let win = this.styleWindow;
+    let win = this.styleWin.contentWindow;
 
     if (this._filterChangedTimeout) {
       win.clearTimeout(this._filterChangedTimeout);
@@ -400,7 +397,7 @@ CssHtmlTree.prototype = {
 
     // Here we build and cache a list of css properties supported by the browser
     // We could use any element but let's use the main document's root element
-    let styles = this.styleWindow.getComputedStyle(this.styleDocument.documentElement);
+    let styles = this.styleWin.contentWindow.getComputedStyle(this.styleDocument.documentElement);
     let mozProps = [];
     for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
       let prop = styles.item(i);
@@ -471,12 +468,9 @@ CssHtmlTree.prototype = {
    */
   createContextMenu: function SI_createContextMenu()
   {
-    let iframe = this.styleInspector.outerIFrame;
-    let outerDoc = iframe.ownerDocument;
+    let popupSet = this.doc.getElementById("mainPopupSet");
 
-    let popupSet = outerDoc.getElementById("inspectorPopupSet");
-
-    let menu = outerDoc.createElement("menupopup");
+    let menu = this.doc.createElement("menupopup");
     menu.addEventListener("popupshowing", this.siBoundMenuUpdate);
     menu.id = "computed-view-context-menu";
     popupSet.appendChild(menu);
@@ -484,7 +478,7 @@ CssHtmlTree.prototype = {
     // Copy selection
     let label = CssHtmlTree.l10n("style.contextmenu.copyselection");
     let accessKey = CssHtmlTree.l10n("style.contextmenu.copyselection.accesskey");
-    let item = outerDoc.createElement("menuitem");
+    let item = this.doc.createElement("menuitem");
     item.id = "computed-view-copy";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -494,7 +488,7 @@ CssHtmlTree.prototype = {
     // Copy declaration
     label = CssHtmlTree.l10n("style.contextmenu.copydeclaration");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copydeclaration.accesskey");
-    item = outerDoc.createElement("menuitem");
+    item = this.doc.createElement("menuitem");
     item.id = "computed-view-copy-declaration";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -504,7 +498,7 @@ CssHtmlTree.prototype = {
     // Copy property name
     label = CssHtmlTree.l10n("style.contextmenu.copyproperty");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copyproperty.accesskey");
-    item = outerDoc.createElement("menuitem");
+    item = this.doc.createElement("menuitem");
     item.id = "computed-view-copy-property";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
@@ -514,14 +508,14 @@ CssHtmlTree.prototype = {
     // Copy property value
     label = CssHtmlTree.l10n("style.contextmenu.copypropertyvalue");
     accessKey = CssHtmlTree.l10n("style.contextmenu.copypropertyvalue.accesskey");
-    item = outerDoc.createElement("menuitem");
+    item = this.doc.createElement("menuitem");
     item.id = "computed-view-copy-property-value";
     item.setAttribute("label", label);
     item.setAttribute("accesskey", accessKey);
     item.addEventListener("command", this.siBoundCopyPropertyValue);
     menu.appendChild(item);
 
-    iframe.setAttribute("context", menu.id);
+    this.styleWin.setAttribute("context", menu.id);
   },
 
   /**
@@ -530,13 +524,12 @@ CssHtmlTree.prototype = {
    */
   computedViewMenuUpdate: function si_computedViewMenuUpdate()
   {
-    let disable = this.styleWindow.getSelection().isCollapsed;
-
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    let menuitem = outerDoc.querySelector("#computed-view-copy");
+    let win = this.styleDocument.defaultView;
+    let disable = win.getSelection().isCollapsed;
+    let menuitem = this.doc.querySelector("#computed-view-copy");
     menuitem.disabled = disable;
 
-    let node = outerDoc.popupNode;
+    let node = this.doc.popupNode;
     if (!node) {
       return;
     }
@@ -549,11 +542,11 @@ CssHtmlTree.prototype = {
       }
     }
     let disablePropertyItems = !node;
-    menuitem = outerDoc.querySelector("#computed-view-copy-declaration");
+    menuitem = this.doc.querySelector("#computed-view-copy-declaration");
     menuitem.disabled = disablePropertyItems;
-    menuitem = outerDoc.querySelector("#computed-view-copy-property");
+    menuitem = this.doc.querySelector("#computed-view-copy-property");
     menuitem.disabled = disablePropertyItems;
-    menuitem = outerDoc.querySelector("#computed-view-copy-property-value");
+    menuitem = this.doc.querySelector("#computed-view-copy-property-value");
     menuitem.disabled = disablePropertyItems;
   },
 
@@ -573,8 +566,7 @@ CssHtmlTree.prototype = {
 
     // Remove any MDN link titles
     text = text.replace(CssHtmlTree.HELP_LINK_TITLE, "");
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    clipboardHelper.copyString(text, outerDoc);
+    clipboardHelper.copyString(text, this.doc);
 
     if (aEvent) {
       aEvent.preventDefault();
@@ -588,8 +580,7 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyDeclaration: function si_computedViewCopyDeclaration(aEvent)
   {
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    let node = outerDoc.popupNode;
+    let node = this.doc.popupNode;
     if (!node) {
       return;
     }
@@ -605,7 +596,7 @@ CssHtmlTree.prototype = {
       let name = node.querySelector(".property-name").textContent;
       let value = node.querySelector(".property-value").textContent;
 
-      clipboardHelper.copyString(name + ": " + value + ";", outerDoc);
+      clipboardHelper.copyString(name + ": " + value + ";", this.doc);
     }
   },
 
@@ -616,8 +607,7 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyProperty: function si_computedViewCopyProperty(aEvent)
   {
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    let node = outerDoc.popupNode;
+    let node = this.doc.popupNode;
     if (!node) {
       return;
     }
@@ -631,7 +621,7 @@ CssHtmlTree.prototype = {
     }
     if (node) {
       node = node.querySelector(".property-name");
-      clipboardHelper.copyString(node.textContent, outerDoc);
+      clipboardHelper.copyString(node.textContent, this.doc);
     }
   },
 
@@ -642,8 +632,7 @@ CssHtmlTree.prototype = {
    */
   computedViewCopyPropertyValue: function si_computedViewCopyPropertyValue(aEvent)
   {
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    let node = outerDoc.popupNode;
+    let node = this.doc.popupNode;
     if (!node) {
       return;
     }
@@ -657,7 +646,7 @@ CssHtmlTree.prototype = {
     }
     if (node) {
       node = node.querySelector(".property-value");
-      clipboardHelper.copyString(node.textContent, outerDoc);
+      clipboardHelper.copyString(node.textContent, this.doc);
     }
   },
 
@@ -679,23 +668,22 @@ CssHtmlTree.prototype = {
     }
 
     // Remove context menu
-    let outerDoc = this.styleInspector.outerIFrame.ownerDocument;
-    let menu = outerDoc.querySelector("#computed-view-context-menu");
+    let menu = this.doc.querySelector("#computed-view-context-menu");
     if (menu) {
       // Copy selected
-      let menuitem = outerDoc.querySelector("#computed-view-copy");
+      let menuitem = this.doc.querySelector("#computed-view-copy");
       menuitem.removeEventListener("command", this.siBoundCopy);
 
       // Copy property
-      menuitem = outerDoc.querySelector("#computed-view-copy-declaration");
+      menuitem = this.doc.querySelector("#computed-view-copy-declaration");
       menuitem.removeEventListener("command", this.siBoundCopyDeclaration);
 
       // Copy property name
-      menuitem = outerDoc.querySelector("#computed-view-copy-property");
+      menuitem = this.doc.querySelector("#computed-view-copy-property");
       menuitem.removeEventListener("command", this.siBoundCopyProperty);
 
       // Copy property value
-      menuitem = outerDoc.querySelector("#computed-view-copy-property-value");
+      menuitem = this.doc.querySelector("#computed-view-copy-property-value");
       menuitem.removeEventListener("command", this.siBoundCopyPropertyValue);
 
       menu.removeEventListener("popupshowing", this.siBoundMenuUpdate);
@@ -715,9 +703,10 @@ CssHtmlTree.prototype = {
 
     // The element that we're inspecting, and the document that it comes from.
     delete this.propertyViews;
-    delete this.styleWindow;
-    delete this.styleDocument;
+    delete this.styleWin;
     delete this.cssLogic;
+    delete this.doc;
+    delete this.win;
     delete this.styleInspector;
   },
 };
@@ -873,7 +862,7 @@ PropertyView.prototype = {
 
   buildMain: function PropertyView_buildMain()
   {
-    let doc = this.tree.styleDocument;
+    let doc = this.tree.doc;
     this.element = doc.createElementNS(HTML_NS, "tr");
     this.element.setAttribute("class", this.propertyHeaderClassName);
 
@@ -928,7 +917,7 @@ PropertyView.prototype = {
 
   buildSelectorContainer: function PropertyView_buildSelectorContainer()
   {
-    let doc = this.tree.styleDocument;
+    let doc = this.tree.doc;
     let element = doc.createElementNS(HTML_NS, "tr");
     element.setAttribute("class", this.propertyContentClassName);
     this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "td");
@@ -1097,12 +1086,7 @@ PropertyView.prototype = {
    */
   mdnLinkClick: function PropertyView_mdnLinkClick(aEvent)
   {
-    let inspector = this.tree.styleInspector.inspector;
-
-    if (inspector.target.tab) {
-      let browserWin = inspector.target.tab.ownerDocument.defaultView;
-      browserWin.openUILinkIn(this.link, "tab");
-    }
+    this.tree.win.openUILinkIn(this.link, "tab");
     aEvent.preventDefault();
   },
 };
@@ -1213,35 +1197,27 @@ SelectorView.prototype = {
 
   /**
    * When a css link is clicked this method is called in order to either:
-   *   1. Open the link in view source (for chrome stylesheets).
+   *   1. Open the link in view source (for element style attributes).
    *   2. Open the link in the style editor.
    *
-   *   We can only view stylesheets contained in document.styleSheets inside the
-   *   style editor.
+   *   Like the style editor, we only view stylesheets contained in
+   *   document.styleSheets inside the style editor.
    *
    * @param aEvent The click event
    */
   openStyleEditor: function(aEvent)
   {
-    let inspector = this.tree.styleInspector.inspector;
-    let contentDoc = inspector.selection.document;
-    let cssSheet = this.selectorInfo.selector._cssRule._cssSheet;
+    let rule = this.selectorInfo.selector._cssRule;
+    let doc = this.tree.win.content.document;
     let line = this.selectorInfo.ruleLine || 0;
+    let cssSheet = rule._cssSheet;
     let contentSheet = false;
     let styleSheet;
     let styleSheets;
 
-    // The style editor can only display stylesheets coming from content because
-    // chrome stylesheets are not listed in the editor's stylesheet selector.
-    //
-    // If the stylesheet is a content stylesheet we send it to the style
-    // editor else we display it in the view source window.
-    //
-    // We check if cssSheet exists in case of inline styles (which contain no
-    // sheet)
     if (cssSheet) {
       styleSheet = cssSheet.domSheet;
-      styleSheets = contentDoc.styleSheets;
+      styleSheets = doc.styleSheets;
 
       // Array.prototype.indexOf always returns -1 here so we loop through
       // the styleSheets array instead.
@@ -1254,24 +1230,15 @@ SelectorView.prototype = {
     }
 
     if (contentSheet) {
-      let target = inspector.target;
-
-      if (StyleEditorDefinition.isTargetSupported(target)) {
-        let toolbox = gDevTools.getToolboxForTarget(target);
-
-        toolbox.once("styleeditor-selected", function SE_selected(id, styleEditor) {
-          styleEditor.selectStyleSheet(styleSheet, line);
-        });
-        toolbox.selectTool("styleeditor");
-      }
+      this.tree.win.StyleEditor.openChrome(styleSheet, line);
     } else {
       let href = styleSheet ? styleSheet.href : "";
-      let viewSourceUtils = inspector.viewSourceUtils;
+      let viewSourceUtils = this.tree.win.gViewSourceUtils;
 
       if (this.selectorInfo.sourceElement) {
         href = this.selectorInfo.sourceElement.ownerDocument.location.href;
       }
-      viewSourceUtils.viewSource(href, null, contentDoc, line);
+      viewSourceUtils.viewSource(href, null, doc, line);
     }
   },
 };
diff --git a/browser/devtools/styleinspector/StyleInspector.jsm b/browser/devtools/styleinspector/StyleInspector.jsm
index d724a821409..0496c381de4 100644
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/StyleInspector.jsm
@@ -11,44 +11,83 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/CssRuleView.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorDefinition.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource:///modules/inspector.jsm");
 
 // This module doesn't currently export any symbols directly, it only
 // registers inspector tools.
-this.EXPORTED_SYMBOLS = ["RuleViewTool", "ComputedViewTool"];
+this.EXPORTED_SYMBOLS = [];
 
-this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
+/**
+ * Lookup l10n string from a string bundle.
+ * @param {string} aName The key to lookup.
+ * @returns A localized version of the given key.
+ */
+function l10n(aName)
+{
+  try {
+    return _strings.GetStringFromName(aName);
+  } catch (ex) {
+    Services.console.logStringMessage("Error reading '" + aName + "'");
+    throw new Error("l10n error with " + aName);
+  }
+}
+
+function RegisterStyleTools()
+{
+  // Register the rules view
+  if (Services.prefs.getBoolPref("devtools.ruleview.enabled")) {
+    InspectorUI.registerSidebar({
+      id: "ruleview",
+      label: l10n("ruleView.label"),
+      tooltiptext: l10n("ruleView.tooltiptext"),
+      accesskey: l10n("ruleView.accesskey"),
+      contentURL: "chrome://browser/content/devtools/cssruleview.xul",
+      load: function(aInspector, aFrame) new RuleViewTool(aInspector, aFrame),
+      destroy: function(aContext) aContext.destroy()
+    });
+  }
+
+  // Register the computed styles view
+  if (Services.prefs.getBoolPref("devtools.styleinspector.enabled")) {
+    InspectorUI.registerSidebar({
+      id: "computedview",
+      label: this.l10n("style.highlighter.button.label2"),
+      tooltiptext: this.l10n("style.highlighter.button.tooltip2"),
+      accesskey: this.l10n("style.highlighter.accesskey2"),
+      contentURL: "chrome://browser/content/devtools/csshtmltree.xul",
+      load: function(aInspector, aFrame) new ComputedViewTool(aInspector, aFrame),
+      destroy: function(aContext) aContext.destroy()
+    });
+  }
+}
+
+function RuleViewTool(aInspector, aFrame)
 {
   this.inspector = aInspector;
-  this.doc = aWindow.document;
-  this.outerIFrame = aIFrame;
+  this.chromeWindow = this.inspector.chromeWindow;
+  this.doc = aFrame.contentDocument;
 
-  this.view = new CssRuleView(this.doc);
+  if (!this.inspector._ruleViewStore) {
+   this.inspector._ruleViewStore = {};
+  }
+  this.view = new CssRuleView(this.doc, this.inspector._ruleViewStore);
   this.doc.documentElement.appendChild(this.view.element);
 
   this._changeHandler = function() {
     this.inspector.markDirty();
+    this.inspector.change("ruleview");
   }.bind(this);
 
   this.view.element.addEventListener("CssRuleViewChanged", this._changeHandler)
 
   this._cssLinkHandler = function(aEvent) {
-    let contentDoc = this.inspector.selection.document;
     let rule = aEvent.detail.rule;
-    let line = rule.ruleLine || 0;
     let styleSheet = rule.sheet;
-    let styleSheets = contentDoc.styleSheets;
+    let doc = this.chromeWindow.content.document;
+    let styleSheets = doc.styleSheets;
     let contentSheet = false;
+    let line = rule.ruleLine || 0;
 
-    // The style editor can only display stylesheets coming from content because
-    // chrome stylesheets are not listed in the editor's stylesheet selector.
-    //
-    // If the stylesheet is a content stylesheet we send it to the style
-    // editor else we display it in the view source window.
-    //
     // Array.prototype.indexOf always returns -1 here so we loop through
     // the styleSheets object instead.
     for each (let sheet in styleSheets) {
@@ -59,23 +98,14 @@ this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
     }
 
     if (contentSheet)  {
-      let target = this.inspector.target;
-
-      if (StyleEditorDefinition.isTargetSupported(target)) {
-        let toolbox = gDevTools.getToolboxForTarget(target);
-
-        toolbox.once("styleeditor-selected", function SE_selected(id, styleEditor) {
-          styleEditor.selectStyleSheet(styleSheet, line);
-        });
-        toolbox.selectTool("styleeditor");
-      }
+      this.chromeWindow.StyleEditor.openChrome(styleSheet, line);
     } else {
       let href = styleSheet ? styleSheet.href : "";
       if (rule.elementStyle.element) {
         href = rule.elementStyle.element.ownerDocument.location.href;
       }
-      let viewSourceUtils = this.inspector.viewSourceUtils;
-      viewSourceUtils.viewSource(href, null, contentDoc, line);
+      let viewSourceUtils = this.chromeWindow.gViewSourceUtils;
+      viewSourceUtils.viewSource(href, null, doc, line);
     }
   }.bind(this);
 
@@ -83,93 +113,75 @@ this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
                                      this._cssLinkHandler);
 
   this._onSelect = this.onSelect.bind(this);
-  this.inspector.selection.on("new-node", this._onSelect);
-  this.refresh = this.refresh.bind(this);
-  this.inspector.on("layout-change", this.refresh);
-  this.inspector.sidebar.on("ruleview-selected", this.refresh);
-  this.inspector.selection.on("pseudoclass", this.refresh);
-  if (this.inspector.highlighter) {
-    this.inspector.highlighter.on("locked", this._onSelect);
-  }
+  this.inspector.on("select", this._onSelect);
+
+  this._onChange = this.onChange.bind(this);
+  this.inspector.on("change", this._onChange);
+  this.inspector.on("sidebaractivated-ruleview", this._onChange);
 
   this.onSelect();
 }
 
 RuleViewTool.prototype = {
-  onSelect: function RVT_onSelect(aEvent) {
-    if (!this.inspector.selection.isConnected() ||
-        !this.inspector.selection.isElementNode()) {
+  onSelect: function RVT_onSelect(aEvent, aFrom) {
+    let node = this.inspector.selection;
+    if (!node) {
       this.view.highlight(null);
       return;
     }
 
-    if (!aEvent || aEvent == "new-node") {
-      if (this.inspector.selection.reason == "highlighter") {
-        this.view.highlight(null);
-      } else {
-        this.view.highlight(this.inspector.selection.node);
-      }
-    }
-
-    if (aEvent == "locked") {
-      this.view.highlight(this.inspector.selection.node);
+    if (this.inspector.locked) {
+      this.view.highlight(node);
     }
   },
 
-  isActive: function RVT_isActive() {
-    return this.inspector.sidebar.getCurrentTabID() == "ruleview";
-  },
+  onChange: function RVT_onChange(aEvent, aFrom) {
+    if (aFrom == "ruleview" || aFrom == "createpanel") {
+      return;
+    }
 
-  refresh: function RVT_refresh() {
-    if (this.isActive()) {
+    if (this.inspector.locked && this.inspector.isPanelVisible("ruleview")) {
       this.view.nodeChanged();
     }
   },
 
   destroy: function RVT_destroy() {
-    this.inspector.off("layout-change", this.refresh);
-    this.inspector.sidebar.off("ruleview-selected", this.refresh);
-    this.inspector.selection.off("pseudoclass", this.refresh);
-    this.inspector.selection.off("new-node", this._onSelect);
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.off("locked", this._onSelect);
-    }
-
-    this.view.element.removeEventListener("CssRuleViewCSSLinkClicked",
-      this._cssLinkHandler);
-
+    this.inspector.off("select", this._onSelect);
+    this.inspector.off("change", this._onChange);
+    this.inspector.off("sidebaractivated-ruleview", this._onChange);
     this.view.element.removeEventListener("CssRuleViewChanged",
-      this._changeHandler);
-
+                                          this._changeHandler);
+    this.view.element.removeEventListener("CssRuleViewCSSLinkClicked",
+                                          this._cssLinkHandler);
     this.doc.documentElement.removeChild(this.view.element);
 
     this.view.destroy();
 
-    delete this.outerIFrame;
+    delete this._changeHandler;
     delete this.view;
     delete this.doc;
     delete this.inspector;
   }
 }
 
-this.ComputedViewTool = function CVT_ComputedViewTool(aInspector, aWindow, aIFrame)
+function ComputedViewTool(aInspector, aFrame)
 {
   this.inspector = aInspector;
-  this.window = aWindow;
-  this.document = aWindow.document;
-  this.outerIFrame = aIFrame;
+  this.iframe = aFrame;
+  this.window = aInspector.chromeWindow;
+  this.document = this.window.document;
   this.cssLogic = new CssLogic();
   this.view = new CssHtmlTree(this);
 
   this._onSelect = this.onSelect.bind(this);
-  this.inspector.selection.on("new-node", this._onSelect);
-  if (this.inspector.highlighter) {
-    this.inspector.highlighter.on("locked", this._onSelect);
-  }
-  this.refresh = this.refresh.bind(this);
-  this.inspector.on("layout-change", this.refresh);
-  this.inspector.sidebar.on("computedview-selected", this.refresh);
-  this.inspector.selection.on("pseudoclass", this.refresh);
+  this.inspector.on("select", this._onSelect);
+  this._onChange = this.onChange.bind(this);
+  this.inspector.on("change", this._onChange);
+
+  // Since refreshes of the computed view are non-destructive,
+  // refresh when the tab is changed so we can notice script-driven
+  // changes.
+  this.inspector.on("sidebaractivated-computedview", this._onChange);
 
   this.cssLogic.highlight(null);
   this.view.highlight(null);
@@ -180,57 +192,39 @@ this.ComputedViewTool = function CVT_ComputedViewTool(aInspector, aWindow, aIFra
 ComputedViewTool.prototype = {
   onSelect: function CVT_onSelect(aEvent)
   {
-    if (!this.inspector.selection.isConnected() ||
-        !this.inspector.selection.isElementNode()) {
-      // FIXME: We should hide view's content
+    if (this.inspector.locked) {
+      this.cssLogic.highlight(this.inspector.selection);
+      this.view.highlight(this.inspector.selection);
+    }
+  },
+
+  onChange: function CVT_change(aEvent, aFrom)
+  {
+    if (aFrom == "computedview" ||
+        aFrom == "createpanel" ||
+        this.inspector.selection != this.cssLogic.viewedElement) {
       return;
     }
 
-    if (!aEvent || aEvent == "new-node") {
-      if (this.inspector.selection.reason == "highlighter") {
-        // FIXME: We should hide view's content
-      } else {
-        this.cssLogic.highlight(this.inspector.selection.node);
-        this.view.highlight(this.inspector.selection.node);
-      }
-    }
-
-    if (aEvent == "locked") {
-      this.cssLogic.highlight(this.inspector.selection.node);
-      this.view.highlight(this.inspector.selection.node);
-    }
-  },
-
-  isActive: function CVT_isActive() {
-    return this.inspector.sidebar.getCurrentTabID() == "computedview";
-  },
-
-  refresh: function CVT_refresh() {
-    if (this.isActive()) {
-      this.cssLogic.highlight(this.inspector.selection.node);
+    if (this.inspector.locked && this.inspector.isPanelVisible("computedview")) {
+      this.cssLogic.highlight(this.inspector.selection);
       this.view.refreshPanel();
     }
   },
 
   destroy: function CVT_destroy(aContext)
   {
-    this.inspector.off("layout-change", this.refresh);
-    this.inspector.sidebar.off("computedview-selected", this.refresh);
-    this.inspector.selection.off("pseudoclass", this.refresh);
-    this.inspector.selection.off("new-node", this._onSelect);
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.off("locked", this._onSelect);
-    }
-
+    this.inspector.off("select", this._onSelect);
+    this.inspector.off("change", this._onChange);
+    this.inspector.off("sidebaractivated-computedview", this._onChange);
     this.view.destroy();
     delete this.view;
 
-    delete this.outerIFrame;
     delete this.cssLogic;
     delete this.cssHtmlTree;
+    delete this.iframe;
     delete this.window;
     delete this.document;
-    delete this.inspector;
   }
 }
 
@@ -248,3 +242,5 @@ XPCOMUtils.defineLazyGetter(this, "CssHtmlTree", function() {
   Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tmp);
   return tmp.CssHtmlTree;
 });
+
+RegisterStyleTools();
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index dfac610dd95..216ffa30b7a 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -24,20 +24,7 @@
 ]>
 
 <xul:window xmlns="http://www.w3.org/1999/xhtml"
-            xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-            title="&computedViewTitle;">
-
-<script type="application/javascript;version=1.8">
-  window.setPanel = function(panel, iframe) {
-    Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
-    this.computedview = new ComputedViewTool(panel, window, iframe);
-  }
-  window.onunload = function() {
-    if (this.computedview) {
-      this.computedview.destroy();
-    }
-  }
-</script>
+            xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <!-- The output from #templateRoot (below) is inserted here. -->
 <div id="root"></div>
diff --git a/browser/devtools/styleinspector/cssruleview.xul b/browser/devtools/styleinspector/cssruleview.xul
index 058f478257f..6ba8220ad0a 100644
--- a/browser/devtools/styleinspector/cssruleview.xul
+++ b/browser/devtools/styleinspector/cssruleview.xul
@@ -9,16 +9,4 @@
   <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
   %inspectorDTD;
 ]>
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&ruleViewTitle;">
-  <script type="application/javascript;version=1.8">
-    window.setPanel = function(panel, iframe) {
-      Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
-      this.ruleview = new RuleViewTool(panel, window, iframe);
-    }
-    window.onunload = function() {
-      if (this.ruleview) {
-        this.ruleview.destroy();
-      }
-    }
-  </script>
-</window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
diff --git a/browser/devtools/styleinspector/test/Makefile.in b/browser/devtools/styleinspector/test/Makefile.in
index b923418b636..ee9180408e4 100644
--- a/browser/devtools/styleinspector/test/Makefile.in
+++ b/browser/devtools/styleinspector/test/Makefile.in
@@ -16,27 +16,27 @@ MOCHITEST_BROWSER_FILES = \
   browser_bug683672.js \
   browser_styleinspector_bug_672746_default_styles.js \
   browser_styleinspector_bug_672744_search_filter.js \
-  $(filter awaiting-promise-based-init, browser_bug589375_keybindings.js) \
+  browser_bug589375_keybindings.js \
   browser_styleinspector_bug_689759_no_results_placeholder.js \
   browser_bug_692400_element_style.js \
   browser_csslogic_inherited.js \
-  browser_ruleview_734259_style_editor_link.js \
   browser_ruleview_editor.js \
   browser_ruleview_editor_changedvalues.js \
-  browser_ruleview_bug_703643_context_menu_copy.js \
-  browser_ruleview_focus.js \
   browser_ruleview_inherit.js \
   browser_ruleview_manipulation.js \
   browser_ruleview_override.js \
   browser_ruleview_ui.js \
   browser_ruleview_update.js \
+  browser_ruleview_focus.js \
   browser_bug705707_is_content_stylesheet.js \
   browser_bug722196_property_view_media_queries.js \
   browser_bug722196_rule_view_media_queries.js \
   browser_bug_592743_specificity.js \
-  browser_bug722691_rule_view_increment.js \
+  browser_ruleview_bug_703643_context_menu_copy.js \
+  browser_computedview_bug_703643_context_menu_copy.js \
+  browser_ruleview_734259_style_editor_link.js \
   browser_computedview_734259_style_editor_link.js \
-  browser_computedview_bug_703643_context_menu_copy.js\
+  browser_bug722691_rule_view_increment.js \
   head.js \
   $(NULL)
 
diff --git a/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js b/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
index ecbd05aaa40..0e8bacbfbd0 100644
--- a/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
+++ b/browser/devtools/styleinspector/test/browser_bug589375_keybindings.js
@@ -5,9 +5,7 @@
 // Tests that the key bindings work properly.
 
 let doc;
-let inspector;
-let computedView;
-let iframe;
+let stylePanel;
 
 function createDocument()
 {
@@ -16,38 +14,38 @@ function createDocument()
     '<span class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector key binding test";
-
-  openInspector(openComputedView);
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runStyleInspectorTests);
 }
 
-function openComputedView(aInspector)
+function runStyleInspectorTests()
 {
-  inspector = aInspector;
-  iframe = inspector._toolbox.frame;
-
-  Services.obs.addObserver(runTests, "StyleInspector-populated", false);
-
-  inspector.sidebar.select("computedview");
+  Services.obs.addObserver(SI_test, "StyleInspector-populated", false);
+  SI_inspectNode();
 }
 
-function runTests()
+function SI_inspectNode()
 {
-  Services.obs.removeObserver(runTests, "StyleInspector-populated");
-  computedView = getComputedView(inspector);
-
   var span = doc.querySelector(".matches");
   ok(span, "captain, we have the matches span");
 
-  inspector.selection.setNode(span);
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
 
-  is(span, computedView.viewedElement,
+  is(span, htmlTree.viewedElement,
     "style inspector node matches the selected node");
-  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
+}
+
+function SI_test()
+{
+  Services.obs.removeObserver(SI_test, "StyleInspector-populated", false);
 
   info("checking keybindings");
 
-  let searchbar = computedView.searchField;
+  let iframe = stylePanel.iframe;
+  let searchbar = stylePanel.cssHtmlTree.searchField;
   let propView = getFirstVisiblePropertyView();
   let rulesTable = propView.matchedSelectorsContainer;
   let matchedExpander = propView.matchedExpander;
@@ -61,7 +59,7 @@ function runTests()
     testKey(iframe.contentWindow, "VK_RETURN", rulesTable);
 
     checkHelpLinkKeybinding();
-    computedView.destroy();
+    stylePanel.destroy();
     finishUp();
   });
 
@@ -78,13 +76,13 @@ function runTests()
     info("window is focused");
     info("focusing search filter");
     searchbar.focus();
-  }, iframe.contentWindow);
+  }, stylePanel.iframe.contentWindow);
 }
 
 function getFirstVisiblePropertyView()
 {
   let propView = null;
-  computedView.propertyViews.some(function(aPropView) {
+  stylePanel.cssHtmlTree.propertyViews.some(function(aPropView) {
     if (aPropView.visible) {
       propView = aPropView;
       return true;
@@ -109,6 +107,7 @@ function testKey(aContext, aVirtKey, aRulesTable)
 function checkHelpLinkKeybinding()
 {
   info("checking help link keybinding");
+  let iframe = stylePanel.iframe;
   let propView = getFirstVisiblePropertyView();
 
   info("check that MDN link is opened on \"F1\"");
@@ -122,7 +121,7 @@ function checkHelpLinkKeybinding()
 
 function finishUp()
 {
-  doc = inspector = iframe = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug683672.js b/browser/devtools/styleinspector/test/browser_bug683672.js
index bd9064df0de..fc0388cce2d 100644
--- a/browser/devtools/styleinspector/test/browser_bug683672.js
+++ b/browser/devtools/styleinspector/test/browser_bug683672.js
@@ -5,9 +5,7 @@
 // Tests that the style inspector works properly
 
 let doc;
-let inspector;
-let div;
-let computedView;
+let stylePanel;
 
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/test/browser_bug683672.html";
 
@@ -27,24 +25,9 @@ function tabLoaded()
 {
   browser.removeEventListener("load", tabLoaded, true);
   doc = content.document;
-  openInspector(selectNode);
-}
-
-function selectNode(aInspector)
-{
-  inspector = aInspector;
-
-  div = content.document.getElementById("test");
-  ok(div, "captain, we have the div");
-
-  inspector.selection.setNode(div);
-
-  inspector.sidebar.once("computedview-ready", function() {
-    computedView = getComputedView(inspector);
-
-    inspector.sidebar.select("computedview");
-    runTests();
-  });
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runTests);
 }
 
 function runTests()
@@ -53,17 +36,25 @@ function runTests()
   //testUnmatchedSelectors();
 
   info("finishing up");
+  stylePanel.destroy();
   finishUp();
 }
 
 function testMatchedSelectors()
 {
   info("checking selector counts, matched rules and titles");
+  let div = content.document.getElementById("test");
+  ok(div, "captain, we have the div");
 
-  is(div, computedView.viewedElement,
+  info("selecting the div");
+  stylePanel.selectNode(div);
+
+  let htmlTree = stylePanel.cssHtmlTree;
+
+  is(div, htmlTree.viewedElement,
       "style inspector node matches the selected node");
 
-  let propertyView = new PropertyView(computedView, "color");
+  let propertyView = new PropertyView(htmlTree, "color");
   let numMatchedSelectors = propertyView.propertyInfo.matchedSelectors.length;
 
   is(numMatchedSelectors, 6,
@@ -80,12 +71,14 @@ function testUnmatchedSelectors()
   ok(body, "captain, we have a body");
 
   info("selecting content.document.body");
-  inspector.selection.setNode(body);
+  stylePanel.selectNode(body);
 
-  is(body, computedView.viewedElement,
+  let htmlTree = stylePanel.cssHtmlTree;
+
+  is(body, htmlTree.viewedElement,
       "style inspector node matches the selected node");
 
-  let propertyView = new PropertyView(computedView, "color");
+  let propertyView = new PropertyView(htmlTree, "color");
   let numUnmatchedSelectors = propertyView.propertyInfo.unmatchedSelectors.length;
 
   is(numUnmatchedSelectors, 13,
@@ -97,7 +90,7 @@ function testUnmatchedSelectors()
 
 function finishUp()
 {
-  doc = inspector = div = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js b/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
index 9fe1b464a51..c2f94a24c69 100644
--- a/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
+++ b/browser/devtools/styleinspector/test/browser_bug722196_property_view_media_queries.js
@@ -6,7 +6,7 @@
 // property view.
 
 let doc;
-let computedView;
+let stylePanel;
 
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/" +
   "test/browser_bug722196_identify_media_queries.html";
@@ -22,27 +22,18 @@ function docLoaded()
 {
   browser.removeEventListener("load", docLoaded, true);
   doc = content.document;
-
-  openInspector(selectNode);
-}
-
-function selectNode(aInspector)
-{
-  var div = doc.querySelector("div");
-  ok(div, "captain, we have the div");
-
-  aInspector.selection.setNode(div);
-
-  aInspector.sidebar.once("computedview-ready", function() {
-    aInspector.sidebar.select("computedview");
-    computedView = getComputedView(aInspector);
-    checkSheets();
-  });
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, checkSheets);
 }
 
 function checkSheets()
 {
-  let cssLogic = computedView.cssLogic;
+  var div = doc.querySelector("div");
+  ok(div, "captain, we have the div");
+
+  stylePanel.selectNode(div);
+
+  let cssLogic = stylePanel.cssLogic;
   cssLogic.processMatchedSelectors();
 
   let _strings = Services.strings
@@ -57,12 +48,13 @@ function checkSheets()
   is(cssLogic._matchedRules[1][0].source, source2,
     "rule.source gives correct output for rule 2");
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = computedView = null;
+  doc = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js b/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
index 8a5653989a4..56175d968d1 100644
--- a/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
+++ b/browser/devtools/styleinspector/test/browser_bug_692400_element_style.js
@@ -5,31 +5,21 @@
 // Tests for selector text errors.
 
 let doc;
-let computedView;
+let stylePanel;
 
 function createDocument()
 {
   doc.body.innerHTML = "<div style='color:blue;'></div>";
 
   doc.title = "Style Inspector Selector Text Test";
+  stylePanel = new ComputedViewPanel(window);
 
-  openInspector(openComputedView);
-}
+  Services.obs.addObserver(SI_checkText, "StyleInspector-populated", false);
 
+  let span = doc.querySelector("div");
+  ok(span, "captain, we have the test div");
 
-function openComputedView(aInspector)
-{
-  let div = doc.querySelector("div");
-  ok(div, "captain, we have the test div");
-
-  aInspector.selection.setNode(div);
-
-  aInspector.sidebar.once("computedview-ready", function() {
-    aInspector.sidebar.select("computedview");
-    computedView = getComputedView(aInspector);
-
-    Services.obs.addObserver(SI_checkText, "StyleInspector-populated", false);
-  });
+  stylePanel.createPanel(span);
 }
 
 function SI_checkText()
@@ -37,7 +27,7 @@ function SI_checkText()
   Services.obs.removeObserver(SI_checkText, "StyleInspector-populated", false);
 
   let propertyView = null;
-  computedView.propertyViews.some(function(aView) {
+  stylePanel.cssHtmlTree.propertyViews.some(function(aView) {
     if (aView.name == "color") {
       propertyView = aView;
       return true;
@@ -66,12 +56,13 @@ function SI_checkText()
     ok(false, "getting the selector text should not raise an exception");
   }
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js b/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
index 0fcdfdf9933..3e6c40fbb6e 100644
--- a/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_734259_style_editor_link.js
@@ -3,8 +3,8 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 let doc;
-let inspector;
-let computedView;
+let win;
+let stylePanel;
 
 function createDocument()
 {
@@ -27,26 +27,12 @@ function createDocument()
     '</div>';
   doc.title = "Rule view style editor link test";
 
-  openInspector(selectNode);
-}
-
-
-function selectNode(aInspector)
-{
-  inspector = aInspector;
-
   let span = doc.querySelector("span");
   ok(span, "captain, we have the span");
 
-  aInspector.selection.setNode(span);
-
-  aInspector.sidebar.once("computedview-ready", function() {
-    aInspector.sidebar.select("computedview");
-
-    computedView = getComputedView(aInspector);
-
-    Services.obs.addObserver(testInlineStyle, "StyleInspector-populated", false);
-  });
+  Services.obs.addObserver(testInlineStyle, "StyleInspector-populated", false);
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(span);
 }
 
 function testInlineStyle()
@@ -60,7 +46,7 @@ function testInlineStyle()
         return;
       }
       info("window opened");
-      let win = aSubject.QueryInterface(Ci.nsIDOMWindow);
+      win = aSubject.QueryInterface(Ci.nsIDOMWindow);
       win.addEventListener("load", function windowLoad() {
         win.removeEventListener("load", windowLoad);
         info("window load completed");
@@ -81,28 +67,35 @@ function testInlineStyleSheet()
 {
   info("clicking an inline stylesheet");
 
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.openToolboxForTab(target, "styleeditor");
+  Services.ww.registerNotification(function onWindow(aSubject, aTopic) {
+    if (aTopic != "domwindowopened") {
+      return;
+    }
+    info("window opened");
+    win = aSubject.QueryInterface(Ci.nsIDOMWindow);
+    win.addEventListener("load", function windowLoad() {
+      win.removeEventListener("load", windowLoad);
+      info("window load completed");
+      let windowType = win.document.documentElement.getAttribute("windowtype");
+      is(windowType, "Tools:StyleEditor", "style editor window is open");
 
-  toolbox.once("styleeditor-ready", function(event, panel) {
-    let win = panel._panelWin;
-
-    win.styleEditorChrome.addChromeListener({
-      onEditorAdded: function checkEditor(aChrome, aEditor) {
-        if (!aEditor.sourceEditor) {
-          aEditor.addActionListener({
-            onAttach: function (aEditor) {
-              aEditor.removeActionListener(this);
-              validateStyleEditorSheet(aEditor);
-            }
-          });
-        } else {
-          validateStyleEditorSheet(aEditor);
+      win.styleEditorChrome.addChromeListener({
+        onEditorAdded: function checkEditor(aChrome, aEditor) {
+          if (!aEditor.sourceEditor) {
+            aEditor.addActionListener({
+              onAttach: function (aEditor) {
+                aEditor.removeActionListener(this);
+                validateStyleEditorSheet(aEditor);
+              }
+            });
+          } else {
+            validateStyleEditorSheet(aEditor);
+          }
         }
-      }
+      });
+      Services.ww.unregisterNotification(onWindow);
     });
   });
-
   let link = getLinkByIndex(1);
   link.click();
 }
@@ -113,13 +106,18 @@ function validateStyleEditorSheet(aEditor)
 
   let sheet = doc.styleSheets[0];
   is(aEditor.styleSheet, sheet, "loaded stylesheet matches document stylesheet");
+  info("closing window");
+  win.close();
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function expandProperty(aIndex, aCallback)
 {
-  let contentDoc = computedView.styleDocument;
+  let iframe = stylePanel.iframe;
+  let contentDoc = iframe.contentDocument;
+  let contentWindow = iframe.contentWindow;
   let expando = contentDoc.querySelectorAll(".expandable")[aIndex];
   expando.click();
 
@@ -129,14 +127,14 @@ function expandProperty(aIndex, aCallback)
 
 function getLinkByIndex(aIndex)
 {
-  let contentDoc = computedView.styleDocument;
+  let contentDoc = stylePanel.iframe.contentDocument;
   let links = contentDoc.querySelectorAll(".rule-link .link");
   return links[aIndex];
 }
 
 function finishUp()
 {
-  doc = inspector = computedView = null;
+  doc = win = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js b/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
index 4b1046446c3..4f7bad0a241 100644
--- a/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js
@@ -5,8 +5,8 @@
 // Tests that the style inspector works properly
 
 let doc;
-let win;
-let computedView;
+let stylePanel;
+let cssHtmlTree;
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
@@ -32,42 +32,30 @@ function createDocument()
     '</div>';
   doc.title = "Computed view context menu test";
 
-  openInspector(selectNode)
-}
-
-function selectNode(aInspector)
-{
   let span = doc.querySelector("span");
   ok(span, "captain, we have the span");
 
-  aInspector.selection.setNode(span);
-
-  aInspector.sidebar.once("computedview-ready", function() {
-    aInspector.sidebar.select("computedview");
-
-    computedView = getComputedView(aInspector);
-    win = aInspector.sidebar.getWindowForTab("computedview");
-
-    Services.obs.addObserver(runStyleInspectorTests,
-      "StyleInspector-populated", false);
-  });
+  stylePanel = new ComputedViewPanel(window);
+  Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-populated", false);
+  stylePanel.createPanel(span);
 }
 
-
 function runStyleInspectorTests()
 {
-  Services.obs.removeObserver(runStyleInspectorTests,
-    "StyleInspector-populated", false);
+  Services.obs.removeObserver(runStyleInspectorTests, "StyleInspector-populated", false);
 
-  let contentDocument = computedView.styleDocument;
+  cssHtmlTree = stylePanel.cssHtmlTree;
+
+  let contentDocument = stylePanel.iframe.contentDocument;
   let prop = contentDocument.querySelector(".property-view");
   ok(prop, "captain, we have the property-view node");
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  contextMenuClick(prop);
+  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
+    stylePanel.iframe.contentWindow);
 
-  checkCopyProperty();
+  checkCopyProperty()
 }
 
 function checkCopyProperty()
@@ -79,7 +67,7 @@ function checkCopyProperty()
   SimpleTest.waitForClipboard(function CS_boundCopyPropCheck() {
       return checkClipboardData(expectedPattern);
     },
-    computedView.siBoundCopyDeclaration,
+    cssHtmlTree.siBoundCopyDeclaration,
     checkCopyPropertyName, function() {
       failedClipboard(expectedPattern, checkCopyPropertyName);
     });
@@ -94,7 +82,7 @@ function checkCopyPropertyName()
   SimpleTest.waitForClipboard(function CS_boundCopyPropNameCheck() {
       return checkClipboardData(expectedPattern);
     },
-    computedView.siBoundCopyProperty,
+    cssHtmlTree.siBoundCopyProperty,
     checkCopyPropertyValue, function() {
       failedClipboard(expectedPattern, checkCopyPropertyValue);
     });
@@ -109,7 +97,7 @@ function checkCopyPropertyValue()
   SimpleTest.waitForClipboard(function CS_boundCopyPropValueCheck() {
       return checkClipboardData(expectedPattern);
     },
-    computedView.siBoundCopyPropertyValue,
+    cssHtmlTree.siBoundCopyPropertyValue,
     checkCopySelection, function() {
       failedClipboard(expectedPattern, checkCopySelection);
     });
@@ -117,14 +105,15 @@ function checkCopyPropertyValue()
 
 function checkCopySelection()
 {
-  let contentDocument = computedView.styleDocument;
+  let contentDocument = stylePanel.iframe.contentDocument;
+  let contentWindow = stylePanel.iframe.contentWindow;
   let props = contentDocument.querySelectorAll(".property-view");
   ok(props, "captain, we have the property-view nodes");
 
   let range = document.createRange();
   range.setStart(props[0], 0);
   range.setEnd(props[3], 4);
-  win.getSelection().addRange(range);
+  contentWindow.getSelection().addRange(range);
 
   info("Checking that cssHtmlTree.siBoundCopy() " +
        " returns the correct clipboard value");
@@ -137,7 +126,7 @@ function checkCopySelection()
   SimpleTest.waitForClipboard(function CS_boundCopyCheck() {
       return checkClipboardData(expectedPattern);
     },
-    computedView.siBoundCopy, closeStyleInspector, function() {
+    cssHtmlTree.siBoundCopy, closeStyleInspector, function() {
       failedClipboard(expectedPattern, closeStyleInspector);
     });
 }
@@ -173,12 +162,13 @@ function failedClipboard(aExpectedPattern, aCallback)
 
 function closeStyleInspector()
 {
+  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  computedView = doc = win = null;
+  doc = stylePanel = cssHtmlTree = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
index 86e36378bc3..0d933c700e0 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_734259_style_editor_link.js
@@ -5,8 +5,6 @@
 let win;
 let doc;
 let contentWindow;
-let inspector;
-let toolbox;
 
 let tempScope = {};
 Cu.import("resource://gre/modules/Services.jsm", tempScope);
@@ -33,27 +31,41 @@ function createDocument()
     '</div>';
   doc.title = "Rule view style editor link test";
 
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  toolbox = gDevTools.openToolboxForTab(target, "inspector");
-  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
-    inspector = aInspector;
-    inspector.sidebar.select("ruleview");
-    highlightNode();
-  });
+  openInspector();
 }
 
-function highlightNode()
+function openInspector()
 {
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
+
+  Services.obs.addObserver(inspectorUIOpen,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen()
+{
+  Services.obs.removeObserver(inspectorUIOpen,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
+  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
   // Highlight a node.
   let div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+  InspectorUI.stopInspecting();
+  is(InspectorUI.selection, div, "selection matches the div element");
 
-  inspector.selection.once("new-node", function() {
-    is(inspector.selection.node, div, "selection matches the div element");
-    testInlineStyle();
-  });
-  executeSoon(function() {
-    inspector.selection.setNode(div);
-  });
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", testInlineStyle);
+
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
 }
 
 function testInlineStyle()
@@ -76,10 +88,7 @@ function testInlineStyle()
         testInlineStyleSheet();
       });
     });
-
-    let link = getLinkByIndex(0);
-    link.scrollIntoView();
-    link.click();
+    EventUtils.synthesizeMouseAtCenter(getLinkByIndex(0), { }, contentWindow);
   });
 }
 
@@ -87,18 +96,41 @@ function testInlineStyleSheet()
 {
   info("clicking an inline stylesheet");
 
-  toolbox.once("styleeditor-ready", function(id, aToolbox) {
-    aToolbox.panelWindow.styleEditorChrome.addChromeListener({
-      onEditorAdded: validateStyleEditorSheet
+  Services.ww.registerNotification(function onWindow(aSubject, aTopic) {
+    if (aTopic != "domwindowopened") {
+      return;
+    }
+
+    win = aSubject.QueryInterface(Ci.nsIDOMWindow);
+    win.addEventListener("load", function windowLoad() {
+      win.removeEventListener("load", windowLoad);
+
+      let windowType = win.document.documentElement.getAttribute("windowtype");
+      is(windowType, "Tools:StyleEditor", "style editor window is open");
+
+      win.styleEditorChrome.addChromeListener({
+        onEditorAdded: function checkEditor(aChrome, aEditor) {
+          if (!aEditor.sourceEditor) {
+            aEditor.addActionListener({
+              onAttach: function (aEditor) {
+                aEditor.removeActionListener(this);
+                validateStyleEditorSheet(aEditor);
+              }
+            });
+          } else {
+            validateStyleEditorSheet(aEditor);
+          }
+        }
+      });
+
+      Services.ww.unregisterNotification(onWindow);
     });
   });
 
-  let link = getLinkByIndex(1);
-  link.scrollIntoView();
-  link.click();
+  EventUtils.synthesizeMouse(getLinkByIndex(1), 5, 5, { }, contentWindow);
 }
 
-function validateStyleEditorSheet(aChrome, aEditor)
+function validateStyleEditorSheet(aEditor)
 {
   info("validating style editor stylesheet");
 
@@ -120,8 +152,10 @@ function getLinkByIndex(aIndex)
 
 function finishup()
 {
+  InspectorUI.sidebar.hide();
+  InspectorUI.closeInspectorUI();
   gBrowser.removeCurrentTab();
-  contentWindow = doc = inspector = toolbox = win = null;
+  doc = contentWindow = win = null;
   finish();
 }
 
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js b/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
index 62060b704a0..0183314d1db 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_bug_703643_context_menu_copy.js
@@ -6,13 +6,16 @@ let doc;
 let tempScope = {};
 Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
 let inplaceEditor = tempScope._getInplaceEditorForSpan;
-let inspector;
-let win;
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
+function ruleViewFrame()
+{
+  return InspectorUI.sidebar._tools["ruleview"].frame;
+}
+
 function createDocument()
 {
   doc.body.innerHTML = '<style type="text/css"> ' +
@@ -34,28 +37,40 @@ function createDocument()
     '</div>';
   doc.title = "Rule view context menu test";
 
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
-    inspector = aInspector;
-    inspector.sidebar.select("ruleview");
-    win = inspector.sidebar.getWindowForTab("ruleview");
-    highlightNode();
-  });
+  openInspector();
 }
 
-function highlightNode()
+function openInspector()
 {
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
+
+  Services.obs.addObserver(inspectorUIOpen,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen()
+{
+  Services.obs.removeObserver(inspectorUIOpen,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
+  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
   // Highlight a node.
   let div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+  InspectorUI.stopInspecting();
+  is(InspectorUI.selection, div, "selection matches the div element");
 
-  inspector.selection.once("new-node", function() {
-    is(inspector.selection.node, div, "selection matches the div element");
-    testClip();
-  });
-  executeSoon(function() {
-    inspector.selection.setNode(div);
-  });
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", testClip)
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
 }
 
 function testClip()
@@ -80,7 +95,7 @@ function testClip()
 }
 
 function checkCopyRule() {
-  let contentDoc = win.document;
+  let contentDoc = ruleViewFrame().contentDocument;
   let props = contentDoc.querySelectorAll(".ruleview-property");
 
   is(props.length, 5, "checking property length");
@@ -94,7 +109,8 @@ function checkCopyRule() {
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  contextMenuClick(prop);
+  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
+    ruleViewFrame().contentWindow);
 
   ruleView()._boundCopyRule();
   let menu = contentDoc.querySelector("#rule-view-context-menu");
@@ -104,7 +120,7 @@ function checkCopyRule() {
 
 function checkCopyProperty()
 {
-  let contentDoc = win.document;
+  let contentDoc = ruleViewFrame().contentDocument;
   let props = contentDoc.querySelectorAll(".ruleview-property");
   let prop = props[2];
 
@@ -114,7 +130,8 @@ function checkCopyProperty()
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  contextMenuClick(prop);
+  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
+    ruleViewFrame().contentWindow);
 
   SimpleTest.waitForClipboard(function IUI_boundCopyPropCheck() {
     return checkClipboardData(expectedPattern);
@@ -157,7 +174,7 @@ function checkCopyPropertyValue()
 
 function checkCopySelection()
 {
-  let contentDoc = win.document;
+  let contentDoc = ruleViewFrame().contentDocument;
   let props = contentDoc.querySelectorAll(".ruleview-property");
   let values = contentDoc.querySelectorAll(".ruleview-propertycontainer");
 
@@ -165,7 +182,7 @@ function checkCopySelection()
   range.setStart(props[0], 0);
   range.setEnd(values[4], 2);
 
-  let selection = win.getSelection();
+  let selection = ruleViewFrame().contentWindow.getSelection();
   selection.addRange(range);
 
   info("Checking that _boundCopy() returns the correct " +
@@ -206,7 +223,7 @@ function testSimpleCopy()
 }
 
 function checkSimpleCopy() {
-  let contentDoc = win.document;
+  let contentDoc = ruleViewFrame().contentDocument;
   let props = contentDoc.querySelectorAll(".ruleview-code");
 
   is(props.length, 2, "checking property length");
@@ -217,7 +234,8 @@ function checkSimpleCopy() {
 
   // We need the context menu to open in the correct place in order for
   // popupNode to be propertly set.
-  contextMenuClick(prop);
+  EventUtils.synthesizeMouse(prop, 1, 1, { type: "contextmenu", button: 2 },
+    ruleViewFrame().contentWindow);
 
   ruleView()._boundCopy();
   let menu = contentDoc.querySelector("#rule-view-context-menu");
@@ -265,8 +283,10 @@ function failedClipboard(aExpectedPattern, aCallback)
 
 function finishup()
 {
+  InspectorUI.sidebar.hide();
+  InspectorUI.closeInspectorUI();
   gBrowser.removeCurrentTab();
-  doc = inspector = null;
+  doc = null;
   finish();
 }
 
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_focus.js b/browser/devtools/styleinspector/test/browser_ruleview_focus.js
index d9f49f57c2c..10f38c31bf4 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_focus.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_focus.js
@@ -9,31 +9,39 @@ let tempScope = {};
 Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
 let inplaceEditor = tempScope._getInplaceEditorForSpan;
 let doc;
-let inspector;
 let stylePanel;
 
+function waitForRuleView(aCallback)
+{
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", aCallback);
+}
+
 function openRuleView()
 {
-  var target = TargetFactory.forTab(gBrowser.selectedTab);
-  let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-  toolbox.once("inspector-selected", function SE_selected(id, aInspector) {
-    inspector = aInspector;
-    inspector.sidebar.select("ruleview");
+  Services.obs.addObserver(function onOpened() {
+    Services.obs.removeObserver(onOpened,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
 
     // Highlight a node.
     let node = content.document.getElementsByTagName("h1")[0];
-    inspector.selection.once("new-node", testFocus);
-    executeSoon(function() {
-      inspector.selection.setNode(doc.body);
-    });
-  });
+    InspectorUI.inspectNode(node);
+    InspectorUI.stopInspecting();
+
+    // Open the rule view sidebar.
+    waitForRuleView(testFocus);
+
+    InspectorUI.sidebar.show();
+    InspectorUI.sidebar.activatePanel("ruleview");
+
+    testFocus();
+  }, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
 }
 
 function testFocus()
 {
-  let win = inspector.sidebar.getWindowForTab("ruleview");
-  let brace = win.document.querySelectorAll(".ruleview-ruleclose")[0];
-
+  let ruleViewFrame = InspectorUI.sidebar._tools["ruleview"].frame;
+  let brace = ruleViewFrame.contentDocument.querySelectorAll(".ruleview-ruleclose")[0];
   waitForEditorFocus(brace.parentNode, function onNewElement(aEditor) {
     aEditor.input.value = "color";
     waitForEditorFocus(brace.parentNode, function onEditingValue(aEditor) {
@@ -57,7 +65,9 @@ function testFocus()
 
 function finishUp()
 {
-  doc = inspector = stylePanel = null;
+  InspectorUI.sidebar.hide();
+  InspectorUI.closeInspectorUI();
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector.js b/browser/devtools/styleinspector/test/browser_styleinspector.js
index ea8e01203ee..c397b2f2097 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector.js
@@ -5,8 +5,7 @@
 // Tests that the style inspector works properly
 
 let doc;
-let inspector;
-let computedView;
+let stylePanel;
 
 function createDocument()
 {
@@ -27,20 +26,8 @@ function createDocument()
     '<p>Inspect using inspectstyle(document.querySelectorAll("span")[0])</p>' +
     '</div>';
   doc.title = "Style Inspector Test";
-
-  openInspector(openComputedView);
-}
-
-function openComputedView(aInspector)
-{
-  inspector = aInspector;
-
-  inspector.sidebar.once("computedview-ready", function() {
-    computedView = getComputedView(inspector);
-
-    inspector.sidebar.select("computedview");
-    runStyleInspectorTests();
-  });
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runStyleInspectorTests);
 }
 
 function runStyleInspectorTests()
@@ -48,22 +35,25 @@ function runStyleInspectorTests()
   var spans = doc.querySelectorAll("span");
   ok(spans, "captain, we have the spans");
 
-  for (var i = 0, numSpans = spans.length; i < numSpans; i++) {
-    inspector.selection.setNode(spans[i]);
+  let htmlTree = stylePanel.cssHtmlTree;
 
-    is(spans[i], computedView.viewedElement,
+  for (var i = 0, numSpans = spans.length; i < numSpans; i++) {
+    stylePanel.selectNode(spans[i]);
+
+    is(spans[i], htmlTree.viewedElement,
       "style inspector node matches the selected node");
-    is(computedView.viewedElement, computedView.cssLogic.viewedElement,
+    is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
        "cssLogic node matches the cssHtmlTree node");
   }
 
   SI_CheckProperty();
+  stylePanel.destroy();
   finishUp();
 }
 
 function SI_CheckProperty()
 {
-  let cssLogic = computedView.cssLogic;
+  let cssLogic = stylePanel.cssLogic;
   let propertyInfo = cssLogic.getPropertyInfo("color");
   ok(propertyInfo.matchedRuleCount > 0, "color property has matching rules");
   //ok(propertyInfo.unmatchedRuleCount > 0, "color property has unmatched rules");
@@ -71,7 +61,7 @@ function SI_CheckProperty()
 
 function finishUp()
 {
-  doc = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
index a7c48a0befa..b7376923337 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672744_search_filter.js
@@ -5,8 +5,7 @@
 // Tests that the search filter works properly.
 
 let doc;
-let inspector;
-let computedView;
+let stylePanel;
 
 function createDocument()
 {
@@ -15,20 +14,9 @@ function createDocument()
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector Search Filter Test";
-
-  openInspector(openComputedView);
-}
-
-function openComputedView(aInspector)
-{
-  inspector = aInspector;
-
-  inspector.sidebar.once("computedview-ready", function() {
-    inspector.sidebar.select("computedview");
-    computedView = getComputedView(inspector);
-
-    runStyleInspectorTests();
-  });
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runStyleInspectorTests);
 }
 
 function runStyleInspectorTests()
@@ -42,11 +30,12 @@ function SI_inspectNode()
   var span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  inspector.selection.setNode(span);
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
 
-  is(span, computedView.viewedElement,
+  is(span, htmlTree.viewedElement,
     "style inspector node matches the selected node");
-  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -56,34 +45,32 @@ function SI_toggleDefaultStyles()
 
   info("clearing \"only user styles\" checkbox");
 
-  let doc = computedView.styleDocument;
-  let checkbox = doc.querySelector(".onlyuserstyles");
+  let iframe = stylePanel.iframe;
+  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
-  checkbox.click();
+  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
 }
 
 function SI_AddFilterText()
 {
   Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
 
-  let doc = computedView.styleDocument;
-  let searchbar = doc.querySelector(".searchfield");
+  let iframe = stylePanel.iframe;
+  let searchbar = iframe.contentDocument.querySelector(".searchfield");
   Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
   info("setting filter text to \"color\"");
   searchbar.focus();
-
-  let win =computedView.styleWindow;
-  EventUtils.synthesizeKey("c", {}, win);
-  EventUtils.synthesizeKey("o", {}, win);
-  EventUtils.synthesizeKey("l", {}, win);
-  EventUtils.synthesizeKey("o", {}, win);
-  EventUtils.synthesizeKey("r", {}, win);
+  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("l", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("r", {}, iframe.contentWindow);
 }
 
 function SI_checkFilter()
 {
   Services.obs.removeObserver(SI_checkFilter, "StyleInspector-populated", false);
-  let propertyViews = computedView.propertyViews;
+  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
 
   info("check that the correct properties are visible");
   propertyViews.forEach(function(propView) {
@@ -92,12 +79,13 @@ function SI_checkFilter()
       "span " + name + " property visibility check");
   });
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = inspector = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
index 059134f19f0..c9a9913f394 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_672746_default_styles.js
@@ -5,8 +5,7 @@
 // Tests that the checkbox to show only user styles works properly.
 
 let doc;
-let inspector;
-let computedView;
+let stylePanel;
 
 function createDocument()
 {
@@ -15,20 +14,9 @@ function createDocument()
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   doc.title = "Style Inspector Default Styles Test";
-
-  openInspector(openComputedView);
-}
-
-function openComputedView(aInspector)
-{
-  inspector = aInspector;
-
-  inspector.sidebar.once("computedview-ready", function() {
-    inspector.sidebar.select("computedview");
-    computedView = getComputedView(inspector);
-
-    runStyleInspectorTests();
-  });
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runStyleInspectorTests);
 }
 
 function runStyleInspectorTests()
@@ -42,11 +30,12 @@ function SI_inspectNode()
   let span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  inspector.selection.setNode(span);
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
 
-  is(span, computedView.viewedElement,
+  is(span, htmlTree.viewedElement,
     "style inspector node matches the selected node");
-  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -64,11 +53,10 @@ function SI_check()
 function SI_toggleDefaultStyles()
 {
   // Click on the checkbox.
-  let doc = computedView.styleDocument;
-  let checkbox = doc.querySelector(".onlyuserstyles");
+  let iframe = stylePanel.iframe;
+  let checkbox = iframe.contentDocument.querySelector(".onlyuserstyles");
   Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
-
-  checkbox.click();
+  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
 }
 
 function SI_checkDefaultStyles()
@@ -80,13 +68,14 @@ function SI_checkDefaultStyles()
   is(propertyVisible("background-color"), true,
       "span background-color property is visible");
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function propertyVisible(aName)
 {
   info("Checking property visibility for " + aName);
-  let propertyViews = computedView.propertyViews;
+  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
   for each (let propView in propertyViews) {
     if (propView.name == aName) {
       return propView.visible;
@@ -97,7 +86,7 @@ function propertyVisible(aName)
 
 function finishUp()
 {
-  doc = inspector = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js b/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
index 047bebf8f8e..b16871fa4f7 100644
--- a/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_bug_689759_no_results_placeholder.js
@@ -5,8 +5,7 @@
 // Tests that the no results placeholder works properly.
 
 let doc;
-let inspector;
-let computedView;
+let stylePanel;
 
 function createDocument()
 {
@@ -14,23 +13,10 @@ function createDocument()
     '.matches {color: #F00;}</style>' +
     '<span id="matches" class="matches">Some styled text</span>';
   doc.title = "Tests that the no results placeholder works properly";
-
-  openInspector(openComputedView);
+  stylePanel = new ComputedViewPanel(window);
+  stylePanel.createPanel(doc.body, runStyleInspectorTests);
 }
 
-function openComputedView(aInspector)
-{
-  inspector = aInspector;
-
-  inspector.sidebar.once("computedview-ready", function() {
-    inspector.sidebar.select("computedview");
-    computedView = getComputedView(inspector);
-
-    runStyleInspectorTests();
-  });
-}
-
-
 function runStyleInspectorTests()
 {
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
@@ -38,11 +24,12 @@ function runStyleInspectorTests()
   let span = doc.querySelector("#matches");
   ok(span, "captain, we have the matches span");
 
-  inspector.selection.setNode(span);
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
 
-  is(span, computedView.viewedElement,
+  is(span, htmlTree.viewedElement,
     "style inspector node matches the selected node");
-  is(computedView.viewedElement, computedView.cssLogic.viewedElement,
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
      "cssLogic node matches the cssHtmlTree node");
 }
 
@@ -50,14 +37,15 @@ function SI_AddFilterText()
 {
   Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
 
-  let searchbar = computedView.searchField;
+  let iframe = stylePanel.iframe;
+  let searchbar = stylePanel.cssHtmlTree.searchField;
   let searchTerm = "xxxxx";
 
   Services.obs.addObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
   info("setting filter text to \"" + searchTerm + "\"");
   searchbar.focus();
   for each (let c in searchTerm) {
-    EventUtils.synthesizeKey(c, {}, computedView.styleWindow);
+    EventUtils.synthesizeKey(c, {}, iframe.contentWindow);
   }
 }
 
@@ -65,9 +53,9 @@ function SI_checkPlaceholderVisible()
 {
   Services.obs.removeObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
   info("SI_checkPlaceholderVisible called");
-  let placeholder = computedView.noResults;
-  let win = computedView.styleWindow;
-  let display = win.getComputedStyle(placeholder).display;
+  let placeholder = stylePanel.cssHtmlTree.noResults;
+  let iframe = stylePanel.iframe;
+  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
 
   is(display, "block", "placeholder is visible");
 
@@ -76,30 +64,32 @@ function SI_checkPlaceholderVisible()
 
 function SI_ClearFilterText()
 {
-  let searchbar = computedView.searchField;
+  let iframe = stylePanel.iframe;
+  let searchbar = stylePanel.cssHtmlTree.searchField;
 
   Services.obs.addObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
   info("clearing filter text");
   searchbar.focus();
   searchbar.value = "";
-  EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
+  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
 }
 
 function SI_checkPlaceholderHidden()
 {
   Services.obs.removeObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
-  let placeholder = computedView.noResults;
-  let win = computedView.styleWindow;
-  let display = win.getComputedStyle(placeholder).display;
+  let placeholder = stylePanel.cssHtmlTree.noResults;
+  let iframe = stylePanel.iframe;
+  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
 
   is(display, "none", "placeholder is hidden");
 
+  stylePanel.destroy();
   finishUp();
 }
 
 function finishUp()
 {
-  doc = inspector = computedView = null;
+  doc = stylePanel = null;
   gBrowser.removeCurrentTab();
   finish();
 }
diff --git a/browser/devtools/styleinspector/test/head.js b/browser/devtools/styleinspector/test/head.js
index 7c2ee991d62..cf2827811be 100644
--- a/browser/devtools/styleinspector/test/head.js
+++ b/browser/devtools/styleinspector/test/head.js
@@ -6,36 +6,122 @@
 let tempScope = {};
 Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
 Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tempScope);
-Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+Cu.import("resource:///modules/HUDService.jsm", tempScope);
+let HUDService = tempScope.HUDService;
 let ConsoleUtils = tempScope.ConsoleUtils;
 let CssLogic = tempScope.CssLogic;
 let CssHtmlTree = tempScope.CssHtmlTree;
-let gDevTools = tempScope.gDevTools;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 
-let browser, hudId, hud, hudBox, filterBox, outputNode, cs;
+function log(aMsg)
+{
+  dump("*** WebConsoleTest: " + aMsg + "\n");
+}
+
+function pprint(aObj)
+{
+  for (let prop in aObj) {
+    if (typeof aObj[prop] == "function") {
+      log("function " + prop);
+    }
+    else {
+      log(prop + ": " + aObj[prop]);
+    }
+  }
+}
+
+let tab, browser, hudId, hud, hudBox, filterBox, outputNode, cs;
 
 function addTab(aURL)
 {
   gBrowser.selectedTab = gBrowser.addTab();
   content.location = aURL;
-  browser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+  tab = gBrowser.selectedTab;
+  browser = gBrowser.getBrowserForTab(tab);
 }
 
-function openInspector(callback)
-{
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-  if (inspector && inspector.isReady) {
-    callback(inspector);
-  } else {
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-ready", function(event, panel) {
-      let inspector = gDevTools.getPanelForTarget("inspector", target);
-      callback(inspector);
-    });
+function afterAllTabsLoaded(callback, win) {
+  win = win || window;
+
+  let stillToLoad = 0;
+
+  function onLoad() {
+    this.removeEventListener("load", onLoad, true);
+    stillToLoad--;
+    if (!stillToLoad)
+      callback();
   }
+
+  for (let a = 0; a < win.gBrowser.tabs.length; a++) {
+    let browser = win.gBrowser.tabs[a].linkedBrowser;
+    if (browser.contentDocument.readyState != "complete") {
+      stillToLoad++;
+      browser.addEventListener("load", onLoad, true);
+    }
+  }
+
+  if (!stillToLoad)
+    callback();
+}
+
+/**
+ * Check if a log entry exists in the HUD output node.
+ *
+ * @param {Element} aOutputNode
+ *        the HUD output node.
+ * @param {string} aMatchString
+ *        the string you want to check if it exists in the output node.
+ * @param {string} aMsg
+ *        the message describing the test
+ * @param {boolean} [aOnlyVisible=false]
+ *        find only messages that are visible, not hidden by the filter.
+ * @param {boolean} [aFailIfFound=false]
+ *        fail the test if the string is found in the output node.
+ * @param {string} aClass [optional]
+ *        find only messages with the given CSS class.
+ */
+function testLogEntry(aOutputNode, aMatchString, aMsg, aOnlyVisible,
+                      aFailIfFound, aClass)
+{
+  let selector = ".hud-msg-node";
+  // Skip entries that are hidden by the filter.
+  if (aOnlyVisible) {
+    selector += ":not(.hud-filtered-by-type)";
+  }
+  if (aClass) {
+    selector += "." + aClass;
+  }
+
+  let msgs = aOutputNode.querySelectorAll(selector);
+  let found = false;
+  for (let i = 0, n = msgs.length; i < n; i++) {
+    let message = msgs[i].textContent.indexOf(aMatchString);
+    if (message > -1) {
+      found = true;
+      break;
+    }
+
+    // Search the labels too.
+    let labels = msgs[i].querySelectorAll("label");
+    for (let j = 0; j < labels.length; j++) {
+      if (labels[j].getAttribute("value").indexOf(aMatchString) > -1) {
+        found = true;
+        break;
+      }
+    }
+  }
+
+  is(found, !aFailIfFound, aMsg);
+}
+
+/**
+ * A convenience method to call testLogEntry().
+ *
+ * @param string aString
+ *        The string to find.
+ */
+function findLogEntry(aString)
+{
+  testLogEntry(outputNode, aString, "found " + aString);
 }
 
 function addStyle(aDocument, aString)
@@ -47,6 +133,16 @@ function addStyle(aDocument, aString)
   return node;
 }
 
+function openConsole()
+{
+  HUDService.activateHUDForContext(tab);
+}
+
+function closeConsole()
+{
+  HUDService.deactivateHUDForContext(tab);
+}
+
 function finishTest()
 {
   finish();
@@ -55,25 +151,158 @@ function finishTest()
 function tearDown()
 {
   try {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
+    HUDService.deactivateHUDForContext(gBrowser.selectedTab);
   }
   catch (ex) {
-    dump(ex);
+    log(ex);
   }
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
-  browser = hudId = hud = filterBox = outputNode = cs = null;
+  tab = browser = hudId = hud = filterBox = outputNode = cs = null;
 }
 
-function getComputedView(inspector) {
-  return inspector.sidebar.getWindowForTab("computedview").computedview.view;
+/**
+ * Shows the computed view in its own panel.
+ */
+function ComputedViewPanel(aContext)
+{
+  this._init(aContext);
 }
 
+ComputedViewPanel.prototype = {
+  _init: function CVP_init(aContext)
+  {
+    this.window = aContext;
+    this.document = this.window.document;
+    this.cssLogic = new CssLogic();
+    this.panelReady = false;
+    this.iframeReady = false;
+  },
+
+  /**
+   * Factory method to create the actual style panel
+   * @param {function} aCallback (optional) callback to fire when ready.
+   */
+  createPanel: function SI_createPanel(aSelection, aCallback)
+  {
+    let popupSet = this.document.getElementById("mainPopupSet");
+    let panel = this.document.createElement("panel");
+
+    panel.setAttribute("class", "styleInspector");
+    panel.setAttribute("orient", "vertical");
+    panel.setAttribute("ignorekeys", "true");
+    panel.setAttribute("noautofocus", "true");
+    panel.setAttribute("noautohide", "true");
+    panel.setAttribute("titlebar", "normal");
+    panel.setAttribute("close", "true");
+    panel.setAttribute("label", "Computed View");
+    panel.setAttribute("width", 350);
+    panel.setAttribute("height", this.window.screen.height / 2);
+
+    this._openCallback = aCallback;
+    this.selectedNode = aSelection;
+
+    let iframe = this.document.createElement("iframe");
+    let boundIframeOnLoad = function loadedInitializeIframe()
+    {
+      this.iframeReady = true;
+      this.iframe.removeEventListener("load", boundIframeOnLoad, true);
+      this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+    }.bind(this);
+
+    iframe.flex = 1;
+    iframe.setAttribute("tooltip", "aHTMLTooltip");
+    iframe.addEventListener("load", boundIframeOnLoad, true);
+    iframe.setAttribute("src", "chrome://browser/content/devtools/csshtmltree.xul");
+
+    panel.appendChild(iframe);
+    popupSet.appendChild(panel);
+
+    this._boundPopupShown = this.popupShown.bind(this);
+    panel.addEventListener("popupshown", this._boundPopupShown, false);
+
+    this.panel = panel;
+    this.iframe = iframe;
+
+    return panel;
+  },
+
+  /**
+   * Event handler for the popupshown event.
+   */
+  popupShown: function SI_popupShown()
+  {
+    this.panelReady = true;
+    this.cssHtmlTree = new CssHtmlTree(this);
+    let selectedNode = this.selectedNode || null;
+    this.cssLogic.highlight(selectedNode);
+    this.cssHtmlTree.highlight(selectedNode);
+    if (this._openCallback) {
+      this._openCallback();
+      delete this._openCallback;
+    }
+  },
+
+  isLoaded: function SI_isLoaded()
+  {
+    return this.iframeReady && this.panelReady;
+  },
+
+  /**
+   * Select from Path (via CssHtmlTree_pathClick)
+   * @param aNode The node to inspect.
+   */
+  selectFromPath: function SI_selectFromPath(aNode)
+  {
+    this.selectNode(aNode);
+  },
+
+  /**
+   * Select a node to inspect in the Style Inspector panel
+   * @param aNode The node to inspect.
+   */
+  selectNode: function SI_selectNode(aNode)
+  {
+    this.selectedNode = aNode;
+
+    if (this.isLoaded()) {
+      this.cssLogic.highlight(aNode);
+      this.cssHtmlTree.highlight(aNode);
+    }
+  },
+
+  /**
+   * Destroy the style panel, remove listeners etc.
+   */
+  destroy: function SI_destroy()
+  {
+    this.panel.hidePopup();
+
+    if (this.cssHtmlTree) {
+      this.cssHtmlTree.destroy();
+      delete this.cssHtmlTree;
+    }
+
+    if (this.iframe) {
+      this.iframe.parentNode.removeChild(this.iframe);
+      delete this.iframe;
+    }
+
+    delete this.cssLogic;
+    this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
+    delete this._boundPopupShown;
+    this.panel.parentNode.removeChild(this.panel);
+    delete this.panel;
+    delete this.doc;
+    delete this.win;
+    delete CssHtmlTree.win;
+  },
+};
+
 function ruleView()
 {
-  return inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
+  return InspectorUI.sidebar._toolContext("ruleview").view;
 }
 
 function waitForEditorFocus(aParent, aCallback)
@@ -100,18 +329,6 @@ function waitForEditorBlur(aEditor, aCallback)
   }, false);
 }
 
-function contextMenuClick(element) {
-  var evt = element.ownerDocument.createEvent('MouseEvents');
-
-  var button = 2;  // right click
-
-  evt.initMouseEvent('contextmenu', true, true,
-       element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
-       false, false, false, button, null);
-
-  element.dispatchEvent(evt);
-}
-
 registerCleanupFunction(tearDown);
 
 waitForExplicitFinish();
diff --git a/browser/devtools/tilt/CmdTilt.jsm b/browser/devtools/tilt/CmdTilt.jsm
index 3c09b3772c1..ff6d84de145 100644
--- a/browser/devtools/tilt/CmdTilt.jsm
+++ b/browser/devtools/tilt/CmdTilt.jsm
@@ -7,7 +7,6 @@ this.EXPORTED_SYMBOLS = [ ];
 
 Components.utils.import("resource:///modules/devtools/gcli.jsm");
 Components.utils.import("resource:///modules/HUDService.jsm");
-Components.utils.import("resource:///modules/devtools/Tilt.jsm");
 
 
 /**
@@ -27,32 +26,31 @@ gcli.addCommand({
   name: 'tilt open',
   description: gcli.lookup("tiltOpenDesc"),
   manual: gcli.lookup("tiltOpenManual"),
-  exec: function(args, context) {
-    let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
-    Tilt.initializeForCurrentTab();
-  }
-});
-
-
-/**
- * 'tilt toggle' command
- */
-gcli.addCommand({
-  name: "tilt toggle",
-  buttonId: "command-button-tilt",
-  buttonClass: "command-button",
-  hidden: true,
-  exec: function(args, context) {
-    let chromeWindow = context.environment.chromeDocument.defaultView;
-
-    if (TiltManager._instances.has(chromeWindow)) {
-      let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
-      Tilt.destroy(Tilt.currentWindowId);
+  params: [
+    {
+      name: "node",
+      type: "node",
+      defaultValue: null,
+      description: gcli.lookup("inspectNodeDesc"),
+      manual: gcli.lookup("inspectNodeManual")
     }
-    else {
-      let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
-      Tilt.initializeForCurrentTab();
+  ],
+  exec: function(args, context) {
+    let chromeWindow = context.environment.chromeDocument.defaultView;
+    let InspectorUI = chromeWindow.InspectorUI;
+    let Tilt = chromeWindow.Tilt;
+
+    if (Tilt.currentInstance) {
+      Tilt.update(args.node);
+    } else {
+      let hudId = chromeWindow.HUDConsoleUI.getOpenHUD();
+      let hud = HUDService.getHudReferenceById(hudId);
+
+      if (hud && !hud.consolePanel) {
+        HUDService.deactivateHUDForContext(chromeWindow.gBrowser.selectedTab);
+      }
+      InspectorUI.openInspectorUI(args.node);
+      Tilt.initialize();
     }
   }
 });
@@ -83,7 +81,8 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    let Tilt = chromeWindow.Tilt;
+
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.translate([args.x, args.y]);
     }
@@ -123,7 +122,8 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    let Tilt = chromeWindow.Tilt;
+
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.rotate([args.x, args.y, args.z]);
     }
@@ -148,7 +148,7 @@ gcli.addCommand({
   ],
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    let Tilt = chromeWindow.Tilt;
 
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.zoom(-args.zoom);
@@ -166,7 +166,7 @@ gcli.addCommand({
   manual: gcli.lookup("tiltResetManual"),
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    let Tilt = chromeWindow.Tilt;
 
     if (Tilt.currentInstance) {
       Tilt.currentInstance.controller.arcball.reset();
@@ -184,7 +184,7 @@ gcli.addCommand({
   manual: gcli.lookup("tiltCloseManual"),
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;
-    let Tilt = TiltManager.getTiltForBrowser(chromeWindow);
+    let Tilt = chromeWindow.Tilt;
 
     Tilt.destroy(Tilt.currentWindowId);
   }
diff --git a/browser/devtools/tilt/Tilt.jsm b/browser/devtools/tilt/Tilt.jsm
index debbe626a91..a32e80a39f3 100644
--- a/browser/devtools/tilt/Tilt.jsm
+++ b/browser/devtools/tilt/Tilt.jsm
@@ -48,21 +48,7 @@ Cu.import("resource:///modules/devtools/TiltGL.jsm");
 Cu.import("resource:///modules/devtools/TiltUtils.jsm");
 Cu.import("resource:///modules/devtools/TiltVisualizer.jsm");
 
-this.EXPORTED_SYMBOLS = ["TiltManager"];
-
-this.TiltManager = {
-  _instances: new WeakMap(),
-  getTiltForBrowser: function(aChromeWindow)
-  {
-    if (this._instances.has(aChromeWindow)) {
-      return this._instances.get(aChromeWindow);
-    } else {
-      let tilt = new Tilt(aChromeWindow);
-      this._instances.set(aChromeWindow, tilt);
-      return tilt;
-    }
-  },
-}
+this.EXPORTED_SYMBOLS = ["Tilt"];
 
 /**
  * Object managing instances of the visualizer.
@@ -86,8 +72,6 @@ this.Tilt = function Tilt(aWindow)
    * Shortcut for accessing notifications strings.
    */
   this.NOTIFICATIONS = TILT_NOTIFICATIONS;
-
-  this.setup();
 }
 
 Tilt.prototype = {
@@ -95,16 +79,9 @@ Tilt.prototype = {
   /**
    * Initializes a visualizer for the current tab.
    */
-  initializeForCurrentTab: function T_initializeForCurrentTab()
+  initialize: function T_initialize()
   {
-    let contentWindow = this.chromeWindow.gBrowser.selectedBrowser.contentWindow;
     let id = this.currentWindowId;
-    let self = this;
-
-    contentWindow.addEventListener("beforeunload", function onUnload() {
-      contentWindow.removeEventListener("beforeunload", onUnload, false);
-      self.destroy(id, true);
-    }, false);
 
     // if the visualizer for the current tab is already open, destroy it now
     if (this.visualizers[id]) {
@@ -117,8 +94,7 @@ Tilt.prototype = {
       chromeWindow: this.chromeWindow,
       contentWindow: this.chromeWindow.gBrowser.selectedBrowser.contentWindow,
       parentNode: this.chromeWindow.gBrowser.selectedBrowser.parentNode,
-      notifications: this.NOTIFICATIONS,
-      tab: this.chromeWindow.gBrowser.selectedTab
+      notifications: this.NOTIFICATIONS
     });
 
     // make sure the visualizer object was initialized properly
@@ -186,6 +162,42 @@ Tilt.prototype = {
     Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYED, null);
   },
 
+  /**
+   * Handles any supplementary post-initialization work, done immediately
+   * after a TILT_NOTIFICATIONS.INITIALIZING notification.
+   */
+  _whenInitializing: function T__whenInitializing()
+  {
+    this._whenShown();
+  },
+
+  /**
+   * Handles any supplementary post-destruction work, done immediately
+   * after a TILT_NOTIFICATIONS.DESTROYED notification.
+   */
+  _whenDestroyed: function T__whenDestroyed()
+  {
+    this._whenHidden();
+  },
+
+  /**
+   * Handles any necessary changes done when the Tilt surface is shown,
+   * after a TILT_NOTIFICATIONS.SHOWN notification.
+   */
+  _whenShown: function T__whenShown()
+  {
+    this.tiltButton.checked = true;
+  },
+
+  /**
+   * Handles any necessary changes done when the Tilt surface is hidden,
+   * after a TILT_NOTIFICATIONS.HIDDEN notification.
+   */
+  _whenHidden: function T__whenHidden()
+  {
+    this.tiltButton.checked = false;
+  },
+
   /**
    * Handles the event fired when a tab is selected.
    */
@@ -198,16 +210,80 @@ Tilt.prototype = {
     }
   },
 
+  /**
+   * A node was selected in the Inspector.
+   * Called from InspectorUI.
+   *
+   * @param {Element} aNode
+   *                  the newly selected node
+   */
+  update: function T_update(aNode) {
+    if (this.currentInstance) {
+      this.currentInstance.presenter.highlightNode(aNode, "moveIntoView");
+    }
+  },
+
   /**
    * Add the browser event listeners to handle state changes.
+   * Called from InspectorUI.
    */
   setup: function T_setup()
   {
+    if (this._setupFinished) {
+      return;
+    }
+
     // load the preferences from the devtools.tilt branch
     TiltVisualizer.Prefs.load();
 
-    this.chromeWindow.gBrowser.tabContainer.addEventListener(
-      "TabSelect", this._onTabSelect.bind(this), false);
+    // hide the button in the Inspector toolbar if Tilt is not enabled
+    this.tiltButton.hidden = !this.enabled;
+
+    // add the necessary observers to handle specific notifications
+    Services.obs.addObserver(
+      this._whenInitializing.bind(this), TILT_NOTIFICATIONS.INITIALIZING, false);
+    Services.obs.addObserver(
+      this._whenDestroyed.bind(this), TILT_NOTIFICATIONS.DESTROYED, false);
+    Services.obs.addObserver(
+      this._whenShown.bind(this), TILT_NOTIFICATIONS.SHOWN, false);
+    Services.obs.addObserver(
+      this._whenHidden.bind(this), TILT_NOTIFICATIONS.HIDDEN, false);
+
+    Services.obs.addObserver(function(aSubject, aTopic, aWinId) {
+      this.destroy(aWinId); }.bind(this),
+      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.DESTROYED, false);
+
+    this.chromeWindow.gBrowser.tabContainer.addEventListener("TabSelect",
+      this._onTabSelect.bind(this), false);
+
+
+    // FIXME: this shouldn't be done here, see bug #705131
+    let onOpened = function() {
+      if (this.inspector && this.highlighter && this.currentInstance) {
+        this.inspector.stopInspecting();
+        this.inspectButton.disabled = true;
+        this.highlighter.hide();
+      }
+    }.bind(this);
+
+    let onClosed = function() {
+      if (this.inspector && this.highlighter) {
+        this.inspectButton.disabled = false;
+        this.highlighter.show();
+      }
+    }.bind(this);
+
+    Services.obs.addObserver(onOpened,
+      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    Services.obs.addObserver(onClosed,
+      this.chromeWindow.InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+    Services.obs.addObserver(onOpened,
+      TILT_NOTIFICATIONS.INITIALIZING, false);
+    Services.obs.addObserver(onClosed,
+      TILT_NOTIFICATIONS.DESTROYED, false);
+
+
+    this._setupFinished = true;
   },
 
   /**
@@ -235,4 +311,35 @@ Tilt.prototype = {
   {
     return this.visualizers[this.currentWindowId];
   },
+
+  /**
+   * Gets the current InspectorUI instance.
+   */
+  get inspector()
+  {
+    return this.chromeWindow.InspectorUI;
+  },
+
+  /**
+   * Gets the current Highlighter instance from the InspectorUI.
+   */
+  get highlighter()
+  {
+    return this.inspector.highlighter;
+  },
+
+  /**
+   * Gets the Tilt button in the Inspector toolbar.
+   */
+  get tiltButton()
+  {
+    return this.chromeWindow.document.getElementById("inspector-3D-button");
+  },
+
+  /**
+   * Gets the Inspect button in the Inspector toolbar.
+   */
+  get inspectButton() {
+    return this.chromeWindow.document.getElementById("inspector-inspect-toolbutton");
+  }
 };
diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm
index e577b8dfb0c..05d678ad854 100644
--- a/browser/devtools/tilt/TiltVisualizer.jsm
+++ b/browser/devtools/tilt/TiltVisualizer.jsm
@@ -51,8 +51,6 @@ const TILT_CRAFTER = "resource:///modules/devtools/TiltWorkerCrafter.js";
 const TILT_PICKER = "resource:///modules/devtools/TiltWorkerPicker.js";
 
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
 Cu.import("resource:///modules/devtools/TiltGL.jsm");
 Cu.import("resource:///modules/devtools/TiltMath.jsm");
 Cu.import("resource:///modules/devtools/TiltUtils.jsm");
@@ -100,8 +98,6 @@ this.TiltVisualizer = function TiltVisualizer(aProperties)
     aProperties.onError || null,
     aProperties.onLoad || null);
 
-  this.bindToInspector(aProperties.tab);
-
   /**
    * Visualization mouse and keyboard controller.
    */
@@ -136,8 +132,6 @@ TiltVisualizer.prototype = {
    */
   cleanup: function TV_cleanup()
   {
-    this.unbindInspector();
-
     if (this.controller) {
       TiltUtils.destroyObject(this.controller);
     }
@@ -150,124 +144,7 @@ TiltVisualizer.prototype = {
     TiltUtils.destroyObject(this);
     TiltUtils.clearCache();
     TiltUtils.gc(chromeWindow);
-  },
-
-  /**
-   * Listen to the inspector activity.
-   */
-  bindToInspector: function TV_bindToInspector(aTab)
-  {
-    this._browserTab = aTab;
-
-    this.onNewNodeFromInspector = this.onNewNodeFromInspector.bind(this);
-    this.onNewNodeFromTilt = this.onNewNodeFromTilt.bind(this);
-    this.onInspectorReady = this.onInspectorReady.bind(this);
-    this.onToolboxDestroyed = this.onToolboxDestroyed.bind(this);
-
-    gDevTools.on("inspector-ready", this.onInspectorReady);
-    gDevTools.on("toolbox-destroyed", this.onToolboxDestroyed);
-
-    Services.obs.addObserver(this.onNewNodeFromTilt,
-                             this.presenter.NOTIFICATIONS.HIGHLIGHTING,
-                             false);
-    Services.obs.addObserver(this.onNewNodeFromTilt,
-                             this.presenter.NOTIFICATIONS.UNHIGHLIGHTING,
-                             false);
-
-    let target = TargetFactory.forTab(aTab);
-    let inspector = gDevTools.getPanelForTarget("inspector", target);
-    if (inspector) {
-      this.inspector = inspector;
-      this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
-      this.inspector.selection.on("detached", this.onNewNodeFromInspector);
-      this.onNewNodeFromInspector();
-    }
-  },
-
-  /**
-   * Unregister inspector event listeners.
-   */
-  unbindInspector: function TV_unbindInspector()
-  {
-    this._browserTab = null;
-
-    if (this.inspector) {
-      this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
-      this.inspector.selection.off("detached", this.onNewNodeFromInspector);
-      this.inspector = null;
-    }
-
-    gDevTools.off("inspector-ready", this.onInspectorReady);
-    gDevTools.off("toolbox-destroyed", this.onToolboxDestroyed);
-
-    Services.obs.removeObserver(this.onNewNodeFromTilt,
-                                this.presenter.NOTIFICATIONS.HIGHLIGHTING);
-    Services.obs.removeObserver(this.onNewNodeFromTilt,
-                                this.presenter.NOTIFICATIONS.UNHIGHLIGHTING);
-  },
-
-  /**
-   * When a new inspector is started.
-   */
-  onInspectorReady: function TV_onInspectorReady(event, toolbox, panel)
-  {
-    if (toolbox.target.tab === this._browserTab) {
-      this.inspector = panel;
-      this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
-      this.inspector.selection.on("detached", this.onNewNodeFromInspector);
-      this.onNewNodeFromTilt();
-    }
-  },
-
-  /**
-   * When the toolbox, therefor the inspector, is closed.
-   */
-  onToolboxDestroyed: function TV_onToolboxDestroyed(event, tab)
-  {
-    if (tab === this._browserTab &&
-        this.inspector) {
-      if (this.inspector.selection) {
-        this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
-        this.inspector.selection.off("detached", this.onNewNodeFromInspector);
-      }
-      this.inspector = null;
-    }
-  },
-
-  /**
-   * When a new node is selected in the inspector.
-   */
-  onNewNodeFromInspector: function TV_onNewNodeFromInspector()
-  {
-    if (this.inspector &&
-        this.inspector.selection.reason != "tilt") {
-      let selection = this.inspector.selection;
-      let canHighlightNode = selection.isNode() &&
-                              selection.isConnected() &&
-                              selection.isElementNode();
-      if (canHighlightNode) {
-        this.presenter.highlightNode(selection.node);
-      } else {
-        this.presenter.highlightNodeFor(-1);
-      }
-    }
-  },
-
-  /**
-   * When a new node is selected in Tilt.
-   */
-  onNewNodeFromTilt: function TV_onNewNodeFromTilt()
-  {
-    if (!this.inspector) {
-      return;
-    }
-    let nodeIndex = this.presenter._currentSelection;
-    if (nodeIndex < 0) {
-      this.inspector.selection.setNode(null, "tilt");
-    }
-    let node = this.presenter._traverseData.nodes[nodeIndex];
-    this.inspector.selection.setNode(node, "tilt");
-  },
+  }
 };
 
 /**
@@ -295,7 +172,7 @@ TiltVisualizer.Presenter = function TV_Presenter(
   this.canvas = aCanvas;
 
   /**
-   * Save a reference to the top-level window, to access Tilt.
+   * Save a reference to the top-level window, to access InspectorUI or Tilt.
    */
   this.chromeWindow = aChromeWindow;
 
@@ -354,6 +231,7 @@ TiltVisualizer.Presenter = function TV_Presenter(
    * Variables holding information about the initial and current node selected.
    */
   this._currentSelection = -1; // the selected node index
+  this._initialSelection = false; // true if an initial selection was made
   this._initialMeshConfiguration = false; // true if the 3D mesh was configured
 
   /**
@@ -389,6 +267,7 @@ TiltVisualizer.Presenter.prototype = {
   _setup: function TVP__setup()
   {
     let renderer = this._renderer;
+    let inspector = this.chromeWindow.InspectorUI;
 
     // if the renderer was destroyed, don't continue setup
     if (!renderer || !renderer.context) {
@@ -404,7 +283,9 @@ TiltVisualizer.Presenter.prototype = {
     });
 
     // get the document zoom to properly scale the visualization
-    this.transforms.zoom = this._getPageZoom();
+    if (inspector.highlighter) {
+      this.transforms.zoom = inspector.highlighter.zoom;
+    }
 
     // bind the owner object to the necessary functions
     TiltUtils.bindObjectFunc(this, "^_on");
@@ -416,17 +297,6 @@ TiltVisualizer.Presenter.prototype = {
     this.canvas.focus();
   },
 
-  /**
-   * Get page zoom factor.
-   * @return {Number}
-   */
-  _getPageZoom: function TVP__getPageZoom() {
-    return this.contentWindow
-      .QueryInterface(Ci.nsIInterfaceRequestor)
-      .getInterface(Ci.nsIDOMWindowUtils)
-      .fullZoom;
-  },
-
   /**
    * The animation logic.
    */
@@ -683,6 +553,16 @@ TiltVisualizer.Presenter.prototype = {
       });
     }
 
+    // if there's no initial selection made, highlight the required node
+    if (!this._initialSelection) {
+      this._initialSelection = true;
+      this.highlightNode(this.chromeWindow.InspectorUI.selection);
+
+      if (this._currentSelection === 0) { // if the "html" node is selected
+        this._highlight.disabled = true;
+      }
+    }
+
     // configure the required mesh transformations and background only once
     if (!this._initialMeshConfiguration) {
       this._initialMeshConfiguration = true;
@@ -755,7 +635,7 @@ TiltVisualizer.Presenter.prototype = {
    */
   _onResize: function TVP_onResize(e)
   {
-    let zoom = this._getPageZoom();
+    let zoom = this.chromeWindow.InspectorUI.highlighter.zoom;
     let width = e.target.innerWidth * zoom;
     let height = e.target.innerHeight * zoom;
 
@@ -858,6 +738,7 @@ TiltVisualizer.Presenter.prototype = {
 
     let highlight = this._highlight;
     let info = this._traverseData.info[aNodeIndex];
+    let node = this._traverseData.nodes[aNodeIndex];
     let style = TiltVisualizerStyle.nodes;
 
     highlight.disabled = false;
@@ -878,6 +759,10 @@ TiltVisualizer.Presenter.prototype = {
 
     this._currentSelection = aNodeIndex;
 
+    this.chromeWindow.InspectorUI.inspectNode(node,
+      this.contentWindow.innerHeight < y ||
+      this.contentWindow.pageYOffset > 0);
+
     // if something is highlighted, make sure it's inside the current viewport;
     // the point which should be moved into view is considered the center [x, y]
     // position along the top edge of the currently selected node
@@ -961,7 +846,7 @@ TiltVisualizer.Presenter.prototype = {
       }
     }, false);
 
-    let zoom = this._getPageZoom();
+    let zoom = this.chromeWindow.InspectorUI.highlighter.zoom;
     let width = this._renderer.width * zoom;
     let height = this._renderer.height * zoom;
     x *= zoom;
@@ -1398,11 +1283,9 @@ TiltVisualizer.Controller.prototype = {
    */
   _onKeyPress: function TVC__onKeyPress(e)
   {
+    let tilt = this.presenter.chromeWindow.Tilt;
+
     if (e.keyCode === e.DOM_VK_ESCAPE) {
-      let mod = {};
-      Cu.import("resource:///modules/devtools/Tilt.jsm", mod);
-      let tilt =
-        mod.TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
       e.preventDefault();
       e.stopPropagation();
       tilt.destroy(tilt.currentWindowId, true);
@@ -1421,7 +1304,7 @@ TiltVisualizer.Controller.prototype = {
    */
   _onResize: function TVC__onResize(e)
   {
-    let zoom = this.presenter._getPageZoom();
+    let zoom = this.presenter.chromeWindow.InspectorUI.highlighter.zoom;
     let width = e.target.innerWidth * zoom;
     let height = e.target.innerHeight * zoom;
 
diff --git a/browser/devtools/tilt/test/Makefile.in b/browser/devtools/tilt/test/Makefile.in
index 83794742fb4..0083aa51295 100644
--- a/browser/devtools/tilt/test/Makefile.in
+++ b/browser/devtools/tilt/test/Makefile.in
@@ -16,6 +16,7 @@ MOCHITEST_BROWSER_FILES = \
 	browser_tilt_02_notifications-seq.js \
 	browser_tilt_02_notifications.js \
 	browser_tilt_03_tab_switch.js \
+	browser_tilt_04_initialization-key.js \
 	browser_tilt_04_initialization.js \
 	browser_tilt_05_destruction-esc.js \
 	browser_tilt_05_destruction-url.js \
diff --git a/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js b/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
index 0ea5c886f4e..62b599328b9 100644
--- a/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
+++ b/browser/devtools/tilt/test/browser_tilt_03_tab_switch.js
@@ -26,8 +26,22 @@ function createTab1() {
 
   tab1 = createTab(function() {
     createTilt({
+      onInspectorOpen: function()
+      {
+        ok(Tilt.tiltButton.checked === false,
+          "The toolbar tilt button shouldn't be pressed before Tilt is open.");
+        ok(InspectorUI.inspecting,
+          "The Inspector should be inspecting for tab1.");
+        ok(InspectorUI.highlighter.hidden === false,
+          "The Highlighter should be visible for tab1.");
+      },
       onTiltOpen: function()
       {
+        ok(InspectorUI.inspecting === false,
+          "The Inspector should not be inspecting for tab1 after Tilt is open.");
+        ok(InspectorUI.highlighter.hidden,
+          "The Highlighter should not be visible for tab1 after Tilt is open.");
+
         createTab2();
       }
     }, false, function suddenDeath()
@@ -42,8 +56,22 @@ function createTab2() {
   tab2 = createTab(function() {
 
     createTilt({
+      onInspectorOpen: function()
+      {
+        ok(Tilt.tiltButton.checked === false,
+          "The toolbar tilt button shouldn't be pressed before Tilt is open.");
+        ok(InspectorUI.inspecting,
+          "The Inspector should be inspecting for tab2.");
+        ok(InspectorUI.highlighter.hidden === false,
+          "The Highlighter should be visible for tab2.");
+      },
       onTiltOpen: function()
       {
+        ok(InspectorUI.inspecting === false,
+          "The Inspector should not be inspecting for tab2 after Tilt is open.");
+        ok(InspectorUI.highlighter.hidden,
+          "The Highlighter should be visible for tab2 after Tilt is open.");
+
         testStep = 0;
         tabSelect();
       }
@@ -57,28 +85,77 @@ function createTab2() {
 
 let testSteps = [
   function step0() {
+    ok(Tilt.tiltButton.checked === true,
+      "The toolbar tilt button should have been pressed at step0 (tab 2).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step0.");
+    ok(InspectorUI.highlighter.hidden,
+      "The Highlighter should be hidden at step0.");
+
     gBrowser.selectedTab = tab1;
   },
   function step1() {
+    ok(Tilt.tiltButton.checked === true,
+      "The toolbar tilt button should have been pressed at step1 (tab 1).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step1.");
+    ok(InspectorUI.highlighter.hidden,
+      "The Highlighter should be hidden at step1.");
+
     gBrowser.selectedTab = tab0;
   },
   function step2() {
+    ok(Tilt.tiltButton.checked === false,
+      "The toolbar tilt button shouldn't have been pressed at step2 (tab 0).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step2.");
+    is(InspectorUI.highlighter, null,
+      "The Highlighter should be dead while in step2.");
+
     gBrowser.selectedTab = tab1;
   },
   function step3() {
+    ok(Tilt.tiltButton.checked === true,
+      "The toolbar tilt button should have been pressed at step3 (tab 1).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step3.");
+    ok(InspectorUI.highlighter.hidden,
+      "The Highlighter should be hidden at step3.");
+
     gBrowser.selectedTab = tab2;
   },
   function step4() {
+    ok(Tilt.tiltButton.checked === true,
+      "The toolbar tilt button should have been pressed at step4 (tab 2).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step4.");
+    ok(InspectorUI.highlighter.hidden,
+      "The Highlighter should be hidden at step4.");
+
     Tilt.destroy(Tilt.currentWindowId);
     gBrowser.removeCurrentTab();
     tab2 = null;
   },
   function step5() {
+    ok(Tilt.tiltButton.checked === true,
+      "The toolbar tilt button should have been pressed at step5 (tab 1).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step5.");
+    ok(InspectorUI.highlighter.hidden,
+      "The Highlighter should be hidden at step5.");
+
     Tilt.destroy(Tilt.currentWindowId);
     gBrowser.removeCurrentTab();
     tab1 = null;
   },
   function step6_cleanup() {
+    ok(Tilt.tiltButton.checked === false,
+      "The toolbar tilt button shouldn't have been pressed at step6 (tab 0).");
+    ok(InspectorUI.inspecting === false,
+      "The Inspector should not be inspecting at step6.");
+    is(InspectorUI.highlighter, null,
+      "The Highlighter should be dead while in step6.");
+
     cleanup();
   }
 ];
diff --git a/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js b/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
new file mode 100644
index 00000000000..0acd791dfd3
--- /dev/null
+++ b/browser/devtools/tilt/test/browser_tilt_04_initialization-key.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+let id;
+let tiltKey;
+let eventType;
+
+function test() {
+  if (!isTiltEnabled()) {
+    info("Skipping initialization key test because Tilt isn't enabled.");
+    return;
+  }
+  if (!isWebGLSupported()) {
+    info("Skipping initialization key test because WebGL isn't supported.");
+    return;
+  }
+
+  waitForExplicitFinish();
+
+  id = TiltUtils.getWindowId(gBrowser.selectedBrowser.contentWindow);
+  tiltKey = Tilt.tiltButton.getAttribute("accesskey");
+
+  if ("nsILocalFileMac" in Ci) {
+    eventType = { type: "keypress", ctrlKey: true };
+  } else {
+    eventType = { type: "keypress", altKey: true };
+  }
+
+  Services.obs.addObserver(onInspectorOpen, INSPECTOR_OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function suddenDeath() {
+  Services.obs.removeObserver(onTiltOpen, INITIALIZING);
+  cleanup();
+}
+
+function onInspectorOpen() {
+  Services.obs.removeObserver(onInspectorOpen, INSPECTOR_OPENED);
+
+  executeSoon(function() {
+    is(Tilt.visualizers[id], null,
+      "A instance of the visualizer shouldn't be initialized yet.");
+
+    info("Pressing the accesskey should open Tilt.");
+
+    Tilt.failureCallback = suddenDeath;
+
+    Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
+    EventUtils.synthesizeKey(tiltKey, eventType);
+  });
+}
+
+function onTiltOpen() {
+  Services.obs.removeObserver(onTiltOpen, INITIALIZING);
+
+  executeSoon(function() {
+    ok(Tilt.visualizers[id] instanceof TiltVisualizer,
+      "A new instance of the visualizer wasn't created properly.");
+    ok(Tilt.visualizers[id].isInitialized(),
+      "The new instance of the visualizer wasn't initialized properly.");
+
+    info("Pressing the accesskey again should close Tilt.");
+
+    Services.obs.addObserver(onTiltClose, DESTROYED, false);
+    EventUtils.synthesizeKey(tiltKey, eventType);
+  });
+}
+
+function onTiltClose() {
+  is(Tilt.visualizers[id], null,
+    "The current instance of the visualizer wasn't destroyed properly.");
+
+  cleanup();
+}
+
+function cleanup() {
+  Tilt.failureCallback = null;
+  InspectorUI.closeInspectorUI();
+  finish();
+}
diff --git a/browser/devtools/tilt/test/browser_tilt_04_initialization.js b/browser/devtools/tilt/test/browser_tilt_04_initialization.js
index 314fb22e664..b4f34869c3d 100644
--- a/browser/devtools/tilt/test/browser_tilt_04_initialization.js
+++ b/browser/devtools/tilt/test/browser_tilt_04_initialization.js
@@ -21,6 +21,10 @@ function test() {
       "The unique window identifiers should match for the same window.");
 
     createTilt({
+      onInspectorOpen: function() {
+        is(Tilt.visualizers[id], null,
+          "A instance of the visualizer shouldn't be initialized yet.");
+      },
       onTiltOpen: function(instance)
       {
         is(document.activeElement, instance.presenter.canvas,
diff --git a/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js b/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
index 503f7925451..c3e1fbfb563 100644
--- a/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
+++ b/browser/devtools/tilt/test/browser_tilt_05_destruction-esc.js
@@ -39,6 +39,9 @@ function finalize() {
   is(Tilt.visualizers[id], null,
     "The current instance of the visualizer wasn't destroyed properly.");
 
+  ok(InspectorUI.highlighter && InspectorUI.breadcrumbs,
+    "The Inspector should not close while Tilt is opened.");
+
   cleanup();
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_05_destruction.js b/browser/devtools/tilt/test/browser_tilt_05_destruction.js
index a083fa1bcbc..0f78eb3aaa0 100644
--- a/browser/devtools/tilt/test/browser_tilt_05_destruction.js
+++ b/browser/devtools/tilt/test/browser_tilt_05_destruction.js
@@ -23,7 +23,7 @@ function test() {
         tiltOpened = true;
 
         Services.obs.addObserver(finalize, DESTROYED, false);
-        Tilt.destroy(Tilt.currentWindowId);
+        InspectorUI.closeInspectorUI();
       }
     }, false, function suddenDeath()
     {
diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
index 366bfa32318..f70223be939 100644
--- a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
+++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js
@@ -31,7 +31,7 @@ function test() {
 
           Services.prefs.setBoolPref("accessibility.typeaheadfind", false);
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          Tilt.destroy(Tilt.currentWindowId);
+          InspectorUI.closeInspectorUI();
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
index 72e11236e67..4d64d9be8de 100644
--- a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
+++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js
@@ -29,7 +29,7 @@ function test() {
           info("Killing arcball reset test.");
 
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          Tilt.destroy(Tilt.currentWindowId);
+          InspectorUI.closeInspectorUI();
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/browser_tilt_picking.js b/browser/devtools/tilt/test/browser_tilt_picking.js
index c79056a3b4c..ba7a0b968e7 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking.js
@@ -34,7 +34,7 @@ function test() {
 
               pickDone = true;
               Services.obs.addObserver(cleanup, DESTROYED, false);
-              Tilt.destroy(Tilt.currentWindowId);
+              InspectorUI.closeInspectorUI();
             }
           });
         };
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_delete.js b/browser/devtools/tilt/test/browser_tilt_picking_delete.js
index c45d44b0344..95e6b7c6933 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_delete.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_delete.js
@@ -65,7 +65,7 @@ function whenNodeRemoved() {
 
   executeSoon(function() {
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
index abfd4f586ff..4c3624d90a1 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js
@@ -64,7 +64,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
index 82871270ef3..b498d2ac07c 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js
@@ -64,7 +64,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
index fc8d0fc5157..9d873d1ea18 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js
@@ -59,7 +59,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
index 721189f65c3..0412b76b586 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js
@@ -59,7 +59,7 @@ function whenUnhighlighting() {
   executeSoon(function() {
     Services.obs.removeObserver(whenUnhighlighting, UNHIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_picking_miv.js b/browser/devtools/tilt/test/browser_tilt_picking_miv.js
index 64b911a0020..ebac1272174 100644
--- a/browser/devtools/tilt/test/browser_tilt_picking_miv.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_miv.js
@@ -65,7 +65,7 @@ function whenBringingIntoView() {
   executeSoon(function() {
     Services.obs.removeObserver(whenHighlighting, HIGHLIGHTING);
     Services.obs.addObserver(cleanup, DESTROYED, false);
-    Tilt.destroy(Tilt.currentWindowId);
+    InspectorUI.closeInspectorUI();
   });
 }
 
diff --git a/browser/devtools/tilt/test/browser_tilt_visualizer.js b/browser/devtools/tilt/test/browser_tilt_visualizer.js
index 0f25a04fd84..fbbcb737317 100644
--- a/browser/devtools/tilt/test/browser_tilt_visualizer.js
+++ b/browser/devtools/tilt/test/browser_tilt_visualizer.js
@@ -19,8 +19,7 @@ function test() {
     chromeWindow: window,
     contentWindow: gBrowser.selectedBrowser.contentWindow,
     parentNode: gBrowser.selectedBrowser.parentNode,
-    notifications: Tilt.NOTIFICATIONS,
-    tab: gBrowser.selectedTab,
+    inspectorUI: window.InspectorUI,
 
     onError: function onWebGLError()
     {
diff --git a/browser/devtools/tilt/test/browser_tilt_zoom.js b/browser/devtools/tilt/test/browser_tilt_zoom.js
index af6ac2c9141..104bd113a05 100644
--- a/browser/devtools/tilt/test/browser_tilt_zoom.js
+++ b/browser/devtools/tilt/test/browser_tilt_zoom.js
@@ -19,14 +19,16 @@ function test() {
   waitForExplicitFinish();
 
   createTab(function() {
-    TiltUtils.setDocumentZoom(window, ZOOM);
-
     createTilt({
+      onInspectorOpen: function()
+      {
+        TiltUtils.setDocumentZoom(window, ZOOM);
+      },
       onTiltOpen: function(instance)
       {
         tiltOpened = true;
 
-        ok(isApprox(instance.presenter._getPageZoom(), ZOOM),
+        ok(isApprox(InspectorUI.highlighter.zoom, ZOOM),
           "The Highlighter zoom doesn't have the expected results.");
 
         ok(isApprox(instance.presenter.transforms.zoom, ZOOM),
@@ -73,7 +75,7 @@ function test() {
 
 
           Services.obs.addObserver(cleanup, DESTROYED, false);
-          Tilt.destroy(Tilt.currentWindowId);
+          InspectorUI.closeInspectorUI();
         });
       }
     }, false, function suddenDeath()
diff --git a/browser/devtools/tilt/test/head.js b/browser/devtools/tilt/test/head.js
index 349cf6f6dc1..83fe62c1a6c 100644
--- a/browser/devtools/tilt/test/head.js
+++ b/browser/devtools/tilt/test/head.js
@@ -3,13 +3,11 @@
 "use strict";
 
 let tempScope = {};
-Components.utils.import("resource:///modules/devtools/Tilt.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltGL.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltMath.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltUtils.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/TiltVisualizer.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
-let TiltManager = tempScope.TiltManager;
 let TiltGL = tempScope.TiltGL;
 let EPSILON = tempScope.EPSILON;
 let TiltMath = tempScope.TiltMath;
@@ -48,7 +46,8 @@ const DEFAULT_HTML = "data:text/html," +
     "<body>" +
   "</html>";
 
-let Tilt = TiltManager.getTiltForBrowser(window);
+const INSPECTOR_OPENED = InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED;
+const INSPECTOR_CLOSED = InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED;
 
 const INITIALIZING = Tilt.NOTIFICATIONS.INITIALIZING;
 const INITIALIZED = Tilt.NOTIFICATIONS.INITIALIZED;
@@ -144,14 +143,30 @@ function createTilt(callbacks, close, suddenDeath) {
                    ", autoclose param " + close +
           ", and sudden death handler " + typeof suddenDeath + ".");
 
-  handleFailure(suddenDeath);
-
   Services.prefs.setBoolPref("webgl.verbose", true);
   TiltUtils.Output.suppressAlerts = true;
 
-  info("Attempting to start Tilt.");
-  Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
-  Tilt.initializeForCurrentTab();
+  info("Attempting to start the inspector.");
+  Services.obs.addObserver(onInspectorOpen, INSPECTOR_OPENED, false);
+  InspectorUI.toggleInspectorUI();
+
+  function onInspectorOpen() {
+    info("Inspector was opened.");
+    Services.obs.removeObserver(onInspectorOpen, INSPECTOR_OPENED);
+
+    executeSoon(function() {
+      if ("function" === typeof callbacks.onInspectorOpen) {
+        info("Calling 'onInspectorOpen'.");
+        callbacks.onInspectorOpen();
+      }
+      executeSoon(function() {
+        info("Attempting to start Tilt.");
+        Services.obs.addObserver(onTiltOpen, INITIALIZING, false);
+        handleFailure(suddenDeath);
+        Tilt.initialize();
+      });
+    });
+  }
 
   function onTiltOpen() {
     info("Tilt was opened.");
@@ -181,6 +196,25 @@ function createTilt(callbacks, close, suddenDeath) {
         info("Calling 'onTiltClose'.");
         callbacks.onTiltClose();
       }
+      if (close) {
+        executeSoon(function() {
+          info("Attempting to close the Inspector.");
+          Services.obs.addObserver(onInspectorClose, INSPECTOR_CLOSED, false);
+          InspectorUI.closeInspectorUI();
+        });
+      }
+    });
+  }
+
+  function onInspectorClose() {
+    info("Inspector was closed.");
+    Services.obs.removeObserver(onInspectorClose, INSPECTOR_CLOSED);
+
+    executeSoon(function() {
+      if ("function" === typeof callbacks.onInspectorClose) {
+        info("Calling 'onInspectorClose'.");
+        callbacks.onInspectorClose();
+      }
       if ("function" === typeof callbacks.onEnd) {
         info("Calling 'onEnd'.");
         callbacks.onEnd();
diff --git a/browser/devtools/webconsole/HUDService.jsm b/browser/devtools/webconsole/HUDService.jsm
index e1921251244..5f901d74a71 100644
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@@ -13,10 +13,6 @@ const Cu = Components.utils;
 const CONSOLEAPI_CLASS_ID = "{b49c18f8-3379-4fc0-8c90-d7772c1a9ff3}";
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Services",
                                   "resource://gre/modules/Services.jsm");
@@ -46,6 +42,24 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
 // The XUL namespace.
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
+
+// Possible directions that can be passed to HUDService.animate().
+const ANIMATE_OUT = 0;
+const ANIMATE_IN = 1;
+
+// Minimum console height, in pixels.
+const MINIMUM_CONSOLE_HEIGHT = 150;
+
+// Minimum page height, in pixels. This prevents the Web Console from
+// remembering a height that covers the whole page.
+const MINIMUM_PAGE_HEIGHT = 50;
+
+// The default console height, as a ratio from the content window inner height.
+const DEFAULT_CONSOLE_HEIGHT = 0.33;
+
+// points to the file to load in the Web Console iframe.
+const UI_IFRAME_URL = "chrome://browser/content/devtools/webconsole.xul";
+
 ///////////////////////////////////////////////////////////////////////////
 //// The HUD service
 
@@ -53,8 +67,13 @@ function HUD_SERVICE()
 {
   // These methods access the "this" object, but they're registered as
   // event listeners. So we hammer in the "this" binding.
+  this.onTabClose = this.onTabClose.bind(this);
+  this.onTabSelect = this.onTabSelect.bind(this);
   this.onWindowUnload = this.onWindowUnload.bind(this);
 
+  // Remembers the last console height, in pixels.
+  this.lastConsoleHeight = Services.prefs.getIntPref("devtools.hud.height");
+
   /**
    * Keeps a reference for each HeadsUpDisplay that is created
    */
@@ -92,15 +111,19 @@ HUD_SERVICE.prototype =
    *
    * @param nsIDOMElement aTab
    *        The xul:tab element.
-   * @param nsIDOMElement aIframe
-   *        The iframe element into which to place the web console.
-   * @param RemoteTarget aTarget
-   *        The target that the web console will connect to.
+   * @param boolean aAnimated
+   *        True if you want to animate the opening of the Web console.
+   * @param object aOptions
+   *        Options for the Web Console:
+   *        - host
+   *          Server to connect to.
+   *        - port
+   *          Port to connect to.
    * @return object
    *         The new HeadsUpDisplay instance.
    */
-  activateHUDForContext: function HS_activateHUDForContext(aTab, aIframe,
-                                                           aTarget)
+  activateHUDForContext:
+  function HS_activateHUDForContext(aTab, aAnimated, aOptions)
   {
     let hudId = "hud_" + aTab.linkedPanel;
     if (hudId in this.hudReferences) {
@@ -112,11 +135,19 @@ HUD_SERVICE.prototype =
     let window = aTab.ownerDocument.defaultView;
     let gBrowser = window.gBrowser;
 
+    gBrowser.tabContainer.addEventListener("TabClose", this.onTabClose, false);
+    gBrowser.tabContainer.addEventListener("TabSelect", this.onTabSelect, false);
     window.addEventListener("unload", this.onWindowUnload, false);
 
-    let hud = new WebConsole(aTab, aIframe, aTarget);
+    let hud = new WebConsole(aTab, aOptions);
     this.hudReferences[hudId] = hud;
 
+    if (!aAnimated || hud.consolePanel) {
+      this.disableAnimation(hudId);
+    }
+
+    HeadsUpDisplayUICommands.refreshCommand();
+
     return hud;
   },
 
@@ -125,15 +156,21 @@ HUD_SERVICE.prototype =
    *
    * @param nsIDOMElement aTab
    *        The xul:tab element you want to enable the Web Console for.
+   * @param boolean aAnimated
+   *        True if you want to animate the closing of the Web console.
    * @return void
    */
-  deactivateHUDForContext: function HS_deactivateHUDForContext(aTab)
+  deactivateHUDForContext: function HS_deactivateHUDForContext(aTab, aAnimated)
   {
     let hudId = "hud_" + aTab.linkedPanel;
     if (!(hudId in this.hudReferences)) {
       return;
     }
 
+    if (!aAnimated) {
+      this.storeHeight(hudId);
+    }
+
     let hud = this.getHudReferenceById(hudId);
     let document = hud.chromeDocument;
 
@@ -157,12 +194,16 @@ HUD_SERVICE.prototype =
 
       let gBrowser = window.gBrowser;
       let tabContainer = gBrowser.tabContainer;
+      tabContainer.removeEventListener("TabClose", this.onTabClose, false);
+      tabContainer.removeEventListener("TabSelect", this.onTabSelect, false);
 
       this.suspend();
     }
 
     let contentWindow = aTab.linkedBrowser.contentWindow;
     contentWindow.focus();
+
+    HeadsUpDisplayUICommands.refreshCommand();
   },
 
   /**
@@ -214,7 +255,7 @@ HUD_SERVICE.prototype =
   shutdown: function HS_shutdown()
   {
     for (let hud of this.hudReferences) {
-      this.deactivateHUDForContext(hud.tab);
+      this.deactivateHUDForContext(hud.tab, false);
     }
   },
 
@@ -289,6 +330,28 @@ HUD_SERVICE.prototype =
     return sequencer(aInt);
   },
 
+  /**
+   * onTabClose event handler function
+   *
+   * @param aEvent
+   * @returns void
+   */
+  onTabClose: function HS_onTabClose(aEvent)
+  {
+    this.deactivateHUDForContext(aEvent.target, false);
+  },
+
+  /**
+   * onTabSelect event handler function
+   *
+   * @param aEvent
+   * @returns void
+   */
+  onTabSelect: function HS_onTabSelect(aEvent)
+  {
+    HeadsUpDisplayUICommands.refreshCommand();
+  },
+
   /**
    * Called whenever a browser window closes. Cleans up any consoles still
    * around.
@@ -306,12 +369,125 @@ HUD_SERVICE.prototype =
     let gBrowser = window.gBrowser;
     let tabContainer = gBrowser.tabContainer;
 
+    tabContainer.removeEventListener("TabClose", this.onTabClose, false);
+    tabContainer.removeEventListener("TabSelect", this.onTabSelect, false);
+
     let tab = tabContainer.firstChild;
     while (tab != null) {
-      this.deactivateHUDForContext(tab);
+      this.deactivateHUDForContext(tab, false);
       tab = tab.nextSibling;
     }
   },
+
+  /**
+   * Animates the Console appropriately.
+   *
+   * @param string aHUDId The ID of the console.
+   * @param string aDirection Whether to animate the console appearing
+   *        (ANIMATE_IN) or disappearing (ANIMATE_OUT).
+   * @param function aCallback An optional callback, which will be called with
+   *        the "transitionend" event passed as a parameter once the animation
+   *        finishes.
+   */
+  animate: function HS_animate(aHUDId, aDirection, aCallback)
+  {
+    let hudBox = this.getHudReferenceById(aHUDId).iframe;
+    if (!hudBox.hasAttribute("animated")) {
+      if (aCallback) {
+        aCallback();
+      }
+      return;
+    }
+
+    switch (aDirection) {
+      case ANIMATE_OUT:
+        hudBox.style.height = 0;
+        break;
+      case ANIMATE_IN:
+        this.resetHeight(aHUDId);
+        break;
+    }
+
+    if (aCallback) {
+      hudBox.addEventListener("transitionend", aCallback, false);
+    }
+  },
+
+  /**
+   * Disables all animation for a console, for unit testing. After this call,
+   * the console will instantly take on a reasonable height, and the close
+   * animation will not occur.
+   *
+   * @param string aHUDId The ID of the console.
+   */
+  disableAnimation: function HS_disableAnimation(aHUDId)
+  {
+    let hudBox = HUDService.hudReferences[aHUDId].iframe;
+    if (hudBox.hasAttribute("animated")) {
+      hudBox.removeAttribute("animated");
+      this.resetHeight(aHUDId);
+    }
+  },
+
+  /**
+   * Reset the height of the Web Console.
+   *
+   * @param string aHUDId The ID of the Web Console.
+   */
+  resetHeight: function HS_resetHeight(aHUDId)
+  {
+    let HUD = this.hudReferences[aHUDId];
+    let innerHeight = HUD.tab.linkedBrowser.clientHeight;
+    let chromeWindow = HUD.chromeWindow;
+    if (!HUD.consolePanel) {
+      let splitterStyle = chromeWindow.getComputedStyle(HUD.splitter, null);
+      innerHeight += parseInt(splitterStyle.height) +
+                     parseInt(splitterStyle.borderTopWidth) +
+                     parseInt(splitterStyle.borderBottomWidth) +
+                     parseInt(splitterStyle.marginTop) +
+                     parseInt(splitterStyle.marginBottom);
+    }
+
+    let boxStyle = chromeWindow.getComputedStyle(HUD.iframe, null);
+    innerHeight += parseInt(boxStyle.height) +
+                   parseInt(boxStyle.borderTopWidth) +
+                   parseInt(boxStyle.borderBottomWidth);
+
+    let height = this.lastConsoleHeight > 0 ? this.lastConsoleHeight :
+      Math.ceil(innerHeight * DEFAULT_CONSOLE_HEIGHT);
+
+    if ((innerHeight - height) < MINIMUM_PAGE_HEIGHT) {
+      height = innerHeight - MINIMUM_PAGE_HEIGHT;
+    }
+
+    if (isNaN(height) || height < MINIMUM_CONSOLE_HEIGHT) {
+      height = MINIMUM_CONSOLE_HEIGHT;
+    }
+
+    HUD.iframe.style.height = height + "px";
+  },
+
+  /**
+   * Remember the height of the given Web Console, such that it can later be
+   * reused when other Web Consoles are open.
+   *
+   * @param string aHUDId The ID of the Web Console.
+   */
+  storeHeight: function HS_storeHeight(aHUDId)
+  {
+    let hudBox = this.hudReferences[aHUDId].iframe;
+    let window = hudBox.ownerDocument.defaultView;
+    let style = window.getComputedStyle(hudBox, null);
+    let height = parseInt(style.height);
+    height += parseInt(style.borderTopWidth);
+    height += parseInt(style.borderBottomWidth);
+    this.lastConsoleHeight = height;
+
+    let pref = Services.prefs.getIntPref("devtools.hud.height");
+    if (pref > -1) {
+      Services.prefs.setIntPref("devtools.hud.height", height);
+    }
+  },
 };
 
 
@@ -324,36 +500,21 @@ HUD_SERVICE.prototype =
  *
  * @param nsIDOMElement aTab
  *        The xul:tab for which you want the WebConsole object.
- * @param nsIDOMElement aIframe
- *        iframe into which we should create the WebConsole UI.
- * @param RemoteTarget aTarget
- *        The target that the web console will connect to.
+ * @param object aOptions
+ *        Web Console options: host and port, for the remote Web console.
  */
-function WebConsole(aTab, aIframe, aTarget)
+function WebConsole(aTab, aOptions = {})
 {
   this.tab = aTab;
-  if (this.tab == null) {
-    throw new Error('Missing tab');
-  }
-
-  this.iframe = aIframe;
-  if (this.iframe == null) {
-    console.trace();
-    throw new Error('Missing iframe');
-  }
-
   this.chromeDocument = this.tab.ownerDocument;
   this.chromeWindow = this.chromeDocument.defaultView;
   this.hudId = "hud_" + this.tab.linkedPanel;
 
-  this.target = aTarget;
+  this.remoteHost = aOptions.host;
+  this.remotePort = aOptions.port;
 
   this._onIframeLoad = this._onIframeLoad.bind(this);
-
-  this.iframe.className = "web-console-frame";
-  this.iframe.addEventListener("load", this._onIframeLoad, true);
-
-  this.positionConsole();
+  this._initUI();
 }
 
 WebConsole.prototype = {
@@ -374,6 +535,12 @@ WebConsole.prototype = {
    */
   get lastFinishedRequestCallback() HUDService.lastFinishedRequestCallback,
 
+  /**
+   * The xul:panel that holds the Web Console when it is positioned as a window.
+   * @type nsIDOMElement
+   */
+  consolePanel: null,
+
   /**
    * Getter for the xul:popupset that holds any popups we open.
    * @type nsIDOMElement
@@ -394,6 +561,28 @@ WebConsole.prototype = {
 
   get gViewSourceUtils() this.chromeWindow.gViewSourceUtils,
 
+  /**
+   * Initialize the Web Console UI. This method sets up the iframe.
+   * @private
+   */
+  _initUI: function WC__initUI()
+  {
+    this.splitter = this.chromeDocument.createElement("splitter");
+    this.splitter.className = "devtools-horizontal-splitter";
+
+    this.iframe = this.chromeDocument.createElement("iframe");
+    this.iframe.setAttribute("id", this.hudId);
+    this.iframe.className = "web-console-frame";
+    this.iframe.setAttribute("animated", "true");
+    this.iframe.setAttribute("tooltip", "aHTMLTooltip");
+    this.iframe.style.height = 0;
+    this.iframe.addEventListener("load", this._onIframeLoad, true);
+    this.iframe.setAttribute("src", UI_IFRAME_URL);
+
+    let position = Services.prefs.getCharPref("devtools.webconsole.position");
+    this.positionConsole(position);
+  },
+
   /**
    * The "load" event handler for the Web Console iframe.
    * @private
@@ -402,8 +591,144 @@ WebConsole.prototype = {
   {
     this.iframe.removeEventListener("load", this._onIframeLoad, true);
 
+    let position = Services.prefs.getCharPref("devtools.webconsole.position");
+
     this.iframeWindow = this.iframe.contentWindow.wrappedJSObject;
-    this.ui = new this.iframeWindow.WebConsoleFrame(this);
+    this.ui = new this.iframeWindow.WebConsoleFrame(this, position);
+  },
+
+  /**
+   * Create a panel to open the web console if it should float above
+   * the content in its own window.
+   * @private
+   */
+  _createOwnWindowPanel: function WC__createOwnWindowPanel()
+  {
+    if (this.consolePanel) {
+      return;
+    }
+
+    let width = 0;
+    try {
+      width = Services.prefs.getIntPref("devtools.webconsole.width");
+    }
+    catch (ex) {}
+
+    if (width < 1) {
+      width = this.iframe.clientWidth || this.chromeWindow.innerWidth;
+    }
+
+    let height = this.iframe.clientHeight;
+
+    let top = 0;
+    try {
+      top = Services.prefs.getIntPref("devtools.webconsole.top");
+    }
+    catch (ex) {}
+
+    let left = 0;
+    try {
+      left = Services.prefs.getIntPref("devtools.webconsole.left");
+    }
+    catch (ex) {}
+
+    let panel = this.chromeDocument.createElementNS(XUL_NS, "panel");
+
+    let config = { id: "console_window_" + this.hudId,
+                   label: this.getPanelTitle(),
+                   titlebar: "normal",
+                   noautohide: "true",
+                   norestorefocus: "true",
+                   close: "true",
+                   flex: "1",
+                   hudId: this.hudId,
+                   width: width,
+                   position: "overlap",
+                   top: top,
+                   left: left,
+                 };
+
+    for (let attr in config) {
+      panel.setAttribute(attr, config[attr]);
+    }
+
+    panel.classList.add("web-console-panel");
+
+    let onPopupShown = (function HUD_onPopupShown() {
+      panel.removeEventListener("popupshown", onPopupShown, false);
+
+      // Make sure that the HUDBox size updates when the panel is resized.
+
+      let height = panel.clientHeight;
+
+      this.iframe.style.height = "auto";
+      this.iframe.flex = 1;
+
+      panel.setAttribute("height", height);
+    }).bind(this);
+
+    panel.addEventListener("popupshown", onPopupShown,false);
+
+    let onPopupHidden = (function HUD_onPopupHidden(aEvent) {
+      if (aEvent.target != panel) {
+        return;
+      }
+
+      panel.removeEventListener("popuphidden", onPopupHidden, false);
+
+      let width = 0;
+      try {
+        width = Services.prefs.getIntPref("devtools.webconsole.width");
+      }
+      catch (ex) { }
+
+      if (width > 0) {
+        Services.prefs.setIntPref("devtools.webconsole.width", panel.clientWidth);
+      }
+
+      // Are we destroying the HUD or repositioning it?
+      if (this.consoleWindowUnregisterOnHide) {
+        HUDService.deactivateHUDForContext(this.tab, false);
+      }
+    }).bind(this);
+
+    panel.addEventListener("popuphidden", onPopupHidden, false);
+
+    let lastIndex = -1;
+
+    if (this.outputNode && this.outputNode.getIndexOfFirstVisibleRow) {
+      lastIndex = this.outputNode.getIndexOfFirstVisibleRow() +
+                  this.outputNode.getNumberOfVisibleRows() - 1;
+    }
+
+    if (this.splitter.parentNode) {
+      this.splitter.parentNode.removeChild(this.splitter);
+    }
+
+    this._beforePositionConsole("window", lastIndex);
+
+    panel.appendChild(this.iframe);
+
+    let space = this.chromeDocument.createElement("spacer");
+    space.flex = 1;
+
+    let bottomBox = this.chromeDocument.createElement("hbox");
+
+    let resizer = this.chromeDocument.createElement("resizer");
+    resizer.setAttribute("dir", "bottomend");
+    resizer.setAttribute("element", config.id);
+
+    bottomBox.appendChild(space);
+    bottomBox.appendChild(resizer);
+
+    panel.appendChild(bottomBox);
+
+    this.mainPopupSet.appendChild(panel);
+
+    panel.openPopup(null, "overlay", left, top, false, false);
+
+    this.consolePanel = panel;
+    this.consoleWindowUnregisterOnHide = true;
   },
 
   /**
@@ -418,13 +743,44 @@ WebConsole.prototype = {
     return l10n.getFormatStr("webConsoleWindowTitleAndURL", [url]);
   },
 
+  positions: {
+    above: 0, // the childNode index
+    below: 2,
+    window: null
+  },
+
   consoleWindowUnregisterOnHide: true,
 
   /**
    * Position the Web Console UI.
+   *
+   * @param string aPosition
+   *        The desired Web Console UI location: above, below or window.
    */
-  positionConsole: function WC_positionConsole()
+  positionConsole: function WC_positionConsole(aPosition)
   {
+    if (!(aPosition in this.positions)) {
+      throw new Error("Incorrect argument: " + aPosition +
+        ". Cannot position Web Console");
+    }
+
+    if (aPosition == "window") {
+      this._createOwnWindowPanel();
+      return;
+    }
+
+    let height = this.iframe.clientHeight;
+
+    // get the node position index
+    let nodeIdx = this.positions[aPosition];
+    let nBox = this.chromeDocument.getElementById(this.tab.linkedPanel);
+    let node = nBox.childNodes[nodeIdx];
+
+    // check to see if console is already positioned in aPosition
+    if (node == this.iframe) {
+      return;
+    }
+
     let lastIndex = -1;
 
     if (this.outputNode && this.outputNode.getIndexOfFirstVisibleRow) {
@@ -432,18 +788,45 @@ WebConsole.prototype = {
                   this.outputNode.getNumberOfVisibleRows() - 1;
     }
 
-    this._beforePositionConsole(lastIndex);
+    // remove the console and splitter and reposition
+    if (this.splitter.parentNode) {
+      this.splitter.parentNode.removeChild(this.splitter);
+    }
+
+    this._beforePositionConsole(aPosition, lastIndex);
+
+    if (aPosition == "below") {
+      nBox.appendChild(this.splitter);
+      nBox.appendChild(this.iframe);
+    }
+    else {
+      nBox.insertBefore(this.splitter, node);
+      nBox.insertBefore(this.iframe, this.splitter);
+    }
+
+    if (this.consolePanel) {
+      // must destroy the consolePanel
+      this.consoleWindowUnregisterOnHide = false;
+      this.consolePanel.hidePopup();
+      this.consolePanel.parentNode.removeChild(this.consolePanel);
+      this.consolePanel = null;   // remove this as we're not in panel anymore
+      this.iframe.removeAttribute("flex");
+      this.iframe.removeAttribute("height");
+      this.iframe.style.height = height + "px";
+    }
   },
 
   /**
    * Common code that needs to execute before the Web Console is repositioned.
    * @private
+   * @param string aPosition
+   *        The new position: "above", "below" or "window".
    * @param number aLastIndex
    *        The last visible message in the console output before repositioning
    *        occurred.
    */
   _beforePositionConsole:
-  function WC__beforePositionConsole(aLastIndex)
+  function WC__beforePositionConsole(aPosition, aLastIndex)
   {
     if (!this.ui) {
       return;
@@ -452,11 +835,14 @@ WebConsole.prototype = {
     let onLoad = function() {
       this.iframe.removeEventListener("load", onLoad, true);
       this.iframeWindow = this.iframe.contentWindow.wrappedJSObject;
-      this.ui.positionConsole(this.iframeWindow);
+      this.ui.positionConsole(aPosition, this.iframeWindow);
 
       if (aLastIndex > -1 && aLastIndex < this.outputNode.getRowCount()) {
         this.outputNode.ensureIndexIsVisible(aLastIndex);
       }
+
+      this._currentUIPosition = aPosition;
+      Services.prefs.setCharPref("devtools.webconsole.position", aPosition);
     }.bind(this);
 
     this.iframe.addEventListener("load", onLoad, true);
@@ -472,6 +858,16 @@ WebConsole.prototype = {
     return this.ui ? this.ui.jsterm : null;
   },
 
+  /**
+   * The close button handler.
+   */
+  onCloseButton: function WC_onCloseButton()
+  {
+    HUDService.animate(this.hudId, ANIMATE_OUT, function() {
+      HUDService.deactivateHUDForContext(this.tab, true);
+    }.bind(this));
+  },
+
   /**
    * The clear output button handler.
    * @private
@@ -481,6 +877,22 @@ WebConsole.prototype = {
     this.chromeWindow.DeveloperToolbar.resetErrorsCount(this.tab);
   },
 
+  /**
+   * Handler for page location changes. If the Web Console is
+   * opened in a panel the panel title is updated.
+   *
+   * @param string aURI
+   *        New page location.
+   * @param string aTitle
+   *        New page title.
+   */
+  onLocationChange: function WC_onLocationChange(aURI, aTitle)
+  {
+    if (this.consolePanel) {
+      this.consolePanel.label = this.getPanelTitle();
+    }
+  },
+
   /**
    * Alias for the WebConsoleFrame.setFilterState() method.
    * @see webconsole.js::WebConsoleFrame.setFilterState()
@@ -533,14 +945,14 @@ WebConsole.prototype = {
     let styleSheets = this.tab.linkedBrowser.contentWindow.document.styleSheets;
     for each (let style in styleSheets) {
       if (style.href == aSourceURL) {
-        let target = TargetFactory.forTab(this.tab);
-        let gDevTools = this.chromeWindow.gDevTools;
-        let toolbox = gDevTools.getToolboxForTarget(target);
-        toolbox.once("styleeditor-selected",
-          function _onStyleEditorReady(aEvent, aPanel) {
-            aPanel.selectStyleSheet(style, aSourceLine);
-          });
-        toolbox.selectTool("styleeditor");
+        let SEM = this.chromeWindow.StyleEditor.StyleEditorManager;
+        let win = SEM.getEditorForWindow(this.chromeWindow.content.window);
+        if (win) {
+          SEM.selectEditor(win, style, aSourceLine);
+        }
+        else {
+          this.chromeWindow.StyleEditor.openChrome(style, aSourceLine);
+        }
         return;
       }
     }
@@ -565,7 +977,9 @@ WebConsole.prototype = {
     let popupset = this.mainPopupSet;
     let panels = popupset.querySelectorAll("panel[hudId=" + this.hudId + "]");
     for (let panel of panels) {
-      panel.hidePopup();
+      if (panel != this.consolePanel) {
+        panel.hidePopup();
+      }
     }
 
     let onDestroy = function WC_onDestroyUI() {
@@ -581,6 +995,10 @@ WebConsole.prototype = {
         this.iframe.parentNode.removeChild(this.iframe);
       }
 
+      if (this.splitter.parentNode) {
+        this.splitter.parentNode.removeChild(this.splitter);
+      }
+
       aOnDestroy && aOnDestroy();
     }.bind(this);
 
@@ -598,11 +1016,53 @@ WebConsole.prototype = {
 //////////////////////////////////////////////////////////////////////////
 
 var HeadsUpDisplayUICommands = {
+  refreshCommand: function UIC_refreshCommand() {
+    var window = HUDService.currentContext();
+    if (!window) {
+      return;
+    }
+
+    let command = window.document.getElementById("Tools:WebConsole");
+    if (this.getOpenHUD() != null) {
+      command.setAttribute("checked", true);
+    } else {
+      command.setAttribute("checked", false);
+    }
+  },
+
   toggleHUD: function UIC_toggleHUD(aOptions)
   {
     var window = HUDService.currentContext();
-    let target = TargetFactory.forTab(window.gBrowser.selectedTab);
-    gDevTools.toggleToolboxForTarget(target, "webconsole");
+    var gBrowser = window.gBrowser;
+    var linkedBrowser = gBrowser.selectedTab.linkedBrowser;
+    var tabId = gBrowser.getNotificationBox(linkedBrowser).getAttribute("id");
+    var hudId = "hud_" + tabId;
+    var ownerDocument = gBrowser.selectedTab.ownerDocument;
+    var hud = ownerDocument.getElementById(hudId);
+    var hudRef = HUDService.hudReferences[hudId];
+
+    if (hudRef && hud) {
+      if (hudRef.consolePanel) {
+        hudRef.consolePanel.hidePopup();
+      }
+      else {
+        HUDService.storeHeight(hudId);
+
+        HUDService.animate(hudId, ANIMATE_OUT, function() {
+          // If the user closes the console while the console is animating away,
+          // then these callbacks will queue up, but all the callbacks after the
+          // first will have no console to operate on. This test handles this
+          // case gracefully.
+          if (ownerDocument.getElementById(hudId)) {
+            HUDService.deactivateHUDForContext(gBrowser.selectedTab, true);
+          }
+        });
+      }
+    }
+    else {
+      HUDService.activateHUDForContext(gBrowser.selectedTab, true, aOptions);
+      HUDService.animate(hudId, ANIMATE_IN);
+    }
   },
 
   toggleRemoteHUD: function UIC_toggleRemoteHUD()
@@ -684,5 +1144,8 @@ var WebConsoleObserver = {
   },
 };
 
-const HUDService = new HUD_SERVICE();
+
+XPCOMUtils.defineLazyGetter(this, "HUDService", function () {
+  return new HUD_SERVICE();
+});
 
diff --git a/browser/devtools/webconsole/Makefile.in b/browser/devtools/webconsole/Makefile.in
index 4e820ee8403..ed66e5a9fb7 100644
--- a/browser/devtools/webconsole/Makefile.in
+++ b/browser/devtools/webconsole/Makefile.in
@@ -15,7 +15,6 @@ EXTRA_JS_MODULES = \
 		PropertyPanel.jsm \
 		NetworkPanel.jsm \
 		AutocompletePopup.jsm \
-		WebConsolePanel.jsm \
 		$(NULL)
 
 TEST_DIRS = test
diff --git a/browser/devtools/webconsole/WebConsolePanel.jsm b/browser/devtools/webconsole/WebConsolePanel.jsm
deleted file mode 100644
index feec3d7a4ae..00000000000
--- a/browser/devtools/webconsole/WebConsolePanel.jsm
+++ /dev/null
@@ -1,102 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-this.EXPORTED_SYMBOLS = [ "WebConsoleDefinition" ];
-
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "Services",
-                                  "resource://gre/modules/Services.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "WebConsoleUtils",
-                                  "resource://gre/modules/devtools/WebConsoleUtils.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
-                                  "resource:///modules/HUDService.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
-                                  "resource:///modules/devtools/EventEmitter.jsm");
-
-const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
-let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
-
-/**
- * The external API allowing us to be registered with DevTools.jsm
- */
-this.WebConsoleDefinition = {
-  id: "webconsole",
-  key: l10n.getStr("cmd.commandkey"),
-  accesskey: l10n.getStr("webConsoleCmd.accesskey"),
-  modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
-  ordinal: 0,
-  icon: "chrome://browser/skin/devtools/webconsole-tool-icon.png",
-  url: "chrome://browser/content/devtools/webconsole.xul",
-  label: l10n.getStr("ToolboxWebconsole.label"),
-  isTargetSupported: function(target) {
-    return true;
-  },
-  build: function(iframeWindow, toolbox) {
-    return new WebConsolePanel(iframeWindow, toolbox);
-  }
-};
-
-/**
- * A DevToolPanel that controls the Web Console.
- */
-function WebConsolePanel(iframeWindow, toolbox) {
-  this._frameWindow = iframeWindow;
-  this._toolbox = toolbox;
-  new EventEmitter(this);
-
-  let tab = this._toolbox._getHostTab();
-  let parentDoc = iframeWindow.document.defaultView.parent.document;
-  let iframe = parentDoc.getElementById("toolbox-panel-iframe-webconsole");
-  this.hud = HUDService.activateHUDForContext(tab, iframe, toolbox.target);
-
-  let hudId = this.hud.hudId;
-  let onOpen = function _onWebConsoleOpen(aSubject)
-  {
-    aSubject.QueryInterface(Ci.nsISupportsString);
-    if (hudId == aSubject.data) {
-      Services.obs.removeObserver(onOpen, "web-console-created");
-      this.setReady();
-    }
-  }.bind(this);
-
-  Services.obs.addObserver(onOpen, "web-console-created", false);
-}
-
-WebConsolePanel.prototype = {
-  get target() this._toolbox.target,
-
-  _isReady: false,
-  get isReady() this._isReady,
-
-  destroy: function WCP_destroy()
-  {
-    let hudId = this.hud.hudId;
-
-    let onClose = function _onWebConsoleClose(aSubject)
-    {
-      aSubject.QueryInterface(Ci.nsISupportsString);
-      if (hudId == aSubject.data) {
-        Services.obs.removeObserver(onClose, "web-console-destroyed");
-        this.emit("destroyed");
-      }
-    }.bind(this);
-
-    Services.obs.addObserver(onClose, "web-console-destroyed", false);
-    HUDService.deactivateHUDForContext(this.hud.tab, false);
-  },
-
-  setReady: function WCP_setReady()
-  {
-    this._isReady = true;
-    this.emit("ready");
-  },
-}
diff --git a/browser/devtools/webconsole/test/Makefile.in b/browser/devtools/webconsole/test/Makefile.in
index 859962aa4c6..28e16c392af 100644
--- a/browser/devtools/webconsole/test/Makefile.in
+++ b/browser/devtools/webconsole/test/Makefile.in
@@ -46,6 +46,7 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_property_provider.js \
 	browser_webconsole_bug_587617_output_copy.js \
 	browser_webconsole_bug_585237_line_limit.js \
+	browser_webconsole_bug_581231_close_button.js \
 	browser_webconsole_bug_582201_duplicate_errors.js \
 	browser_webconsole_bug_580454_timestamp_l10n.js \
 	browser_webconsole_netlogging.js \
@@ -60,6 +61,7 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_601352_scroll.js \
 	browser_webconsole_bug_592442_closing_brackets.js \
 	browser_webconsole_bug_593003_iframe_wrong_hud.js \
+	browser_webconsole_bug_601909_remember_height.js \
 	browser_webconsole_bug_613013_console_api_iframe.js \
 	browser_webconsole_bug_597756_reopen_closed_tab.js \
 	browser_webconsole_bug_600183_charset.js \
@@ -90,9 +92,11 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_632275_getters_document_width.js \
 	browser_webconsole_bug_644419_log_limits.js \
 	browser_webconsole_bug_646025_console_file_location.js \
+	browser_webconsole_position_ui.js \
 	browser_webconsole_bug_642615_autocomplete.js \
 	browser_webconsole_bug_585991_autocomplete_popup.js \
 	browser_webconsole_bug_585991_autocomplete_keys.js \
+	browser_webconsole_bug_663443_panel_title.js \
 	browser_webconsole_bug_660806_history_nav.js \
 	browser_webconsole_bug_651501_document_body_autocomplete.js \
 	browser_webconsole_bug_653531_highlighter_console_helper.js \
@@ -102,11 +106,13 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_658368_time_methods.js \
 	browser_webconsole_bug_764572_output_open_url.js \
 	browser_webconsole_bug_622303_persistent_filters.js \
-	browser_webconsole_bug_770099_bad_policyuri.js \
-	browser_webconsole_bug_770099_violation.js \
+        browser_webconsole_bug_770099_bad_policyuri.js \
+        browser_webconsole_bug_770099_violation.js \
 	browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js \
+	browser_webconsole_window_zombie.js \
 	browser_cached_messages.js \
 	browser_bug664688_sandbox_update_after_navigation.js \
+	browser_webconsole_menustatus.js \
 	browser_result_format_as_string.js \
 	browser_webconsole_bug_737873_mixedcontent.js \
 	browser_output_breaks_after_console_dir_uninspectable.js \
@@ -196,10 +202,10 @@ MOCHITEST_BROWSER_FILES += \
 	test-bug-658368-time-methods.html \
 	test-webconsole-error-observer.html \
 	test-for-of.html \
-	test_bug_770099_violation.html \
-	test_bug_770099_violation.html^headers^ \
-	test_bug_770099_bad_policy_uri.html \
-	test_bug_770099_bad_policy_uri.html^headers^ \
+        test_bug_770099_violation.html \
+        test_bug_770099_violation.html^headers^ \
+        test_bug_770099_bad_policy_uri.html \
+        test_bug_770099_bad_policy_uri.html^headers^ \
 	test-result-format-as-string.html \
 	test-bug-737873-mixedcontent.html \
 	$(NULL)
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js b/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
new file mode 100644
index 00000000000..afe62c8a21f
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_581231_close_button.js
@@ -0,0 +1,37 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ *
+ * Contributor(s):
+ *  Patrick Walton <pcwalton@mozilla.com>
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+// Tests that the Web Console close button functions.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console.html";
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, testCloseButton);
+  }, true);
+}
+
+function testCloseButton(hud) {
+  let hudId = hud.hudId;
+  HUDService.disableAnimation(hudId);
+  waitForFocus(function() {
+    let closeButton = hud.ui.closeButton;
+    ok(closeButton != null, "we have the close button");
+
+    EventUtils.synthesizeMouse(closeButton, 2, 2, {}, hud.iframeWindow);
+
+    ok(!(hudId in HUDService.hudReferences), "the console is closed when " +
+       "the close button is pressed");
+
+    finishTest();
+  }, hud.iframeWindow);
+}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js b/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
index c5fe4505af0..f1e40dfaa3c 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_597103_deactivateHUDForContext_unfocused_window.js
@@ -44,20 +44,18 @@ function tab2Loaded(aEvent) {
 
   function openConsoles() {
     try {
-      let target1 = TargetFactory.forTab(tab1);
-      gDevTools.openToolboxForTab(target1, "webconsole");
+      HUDService.activateHUDForContext(tab1);
     }
     catch (ex) {
-      ok(false, "gDevTools.openToolboxForTab(target1) exception: " + ex);
+      ok(false, "HUDService.activateHUDForContext(tab1) exception: " + ex);
       noErrors = false;
     }
 
     try {
-      let target2 = TargetFactory.forTab(tab2);
-      gDevTools.openToolboxForTab(target2, "webconsole");
+      HUDService.activateHUDForContext(tab2);
     }
     catch (ex) {
-      ok(false, "gDevTools.openToolboxForTab(target2) exception: " + ex);
+      ok(false, "HUDService.activateHUDForContext(tab2) exception: " + ex);
       noErrors = false;
     }
   }
@@ -76,20 +74,18 @@ function tab2Loaded(aEvent) {
     Services.obs.addObserver(onWebConsoleClose, "web-console-destroyed", false);
 
     try {
-      let target1 = TargetFactory.forTab(tab1);
-      gDevTools.closeToolbox(target1);
+      HUDService.deactivateHUDForContext(tab1);
     }
     catch (ex) {
-      ok(false, "gDevTools.closeToolbox(target1) exception: " + ex);
+      ok(false, "HUDService.deactivateHUDForContext(tab1) exception: " + ex);
       noErrors = false;
     }
 
     try {
-      let target2 = TargetFactory.forTab(tab2);
-      gDevTools.closeToolbox(target2);
+      HUDService.deactivateHUDForContext(tab2);
     }
     catch (ex) {
-      ok(false, "gDevTools.closeToolbox(target2) exception: " + ex);
+      ok(false, "HUDService.deactivateHUDForContext(tab2) exception: " + ex);
       noErrors = false;
     }
   }
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js b/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
new file mode 100644
index 00000000000..de864917915
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js
@@ -0,0 +1,107 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ *
+ * Contributor(s):
+ *  Mihai Șucan <mihai.sucan@gmail.com>
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+// Minimum console height, in pixels.
+const MINIMUM_CONSOLE_HEIGHT = 150;
+
+// Minimum page height, in pixels. This prevents the Web Console from
+// remembering a height that covers the whole page.
+const MINIMUM_PAGE_HEIGHT = 50;
+const HEIGHT_PREF = "devtools.hud.height";
+
+let hud, newHeight, height, innerHeight, testDriver;
+
+function testGen()
+{
+  height = parseInt(hud.style.height);
+
+  toggleConsole();
+  yield;
+
+  is(newHeight, height, "same height after reopening the console");
+  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
+    "pref is correct");
+
+  setHeight(Math.ceil(innerHeight * 0.5));
+  toggleConsole();
+  yield;
+
+  is(newHeight, height, "same height after reopening the console");
+  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
+    "pref is correct");
+
+  setHeight(MINIMUM_CONSOLE_HEIGHT - 1);
+  toggleConsole();
+  yield;
+
+  is(newHeight, MINIMUM_CONSOLE_HEIGHT, "minimum console height is respected");
+  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
+    "pref is correct");
+
+  setHeight(innerHeight - MINIMUM_PAGE_HEIGHT + 1);
+  toggleConsole();
+  yield;
+
+  is(newHeight, innerHeight - MINIMUM_PAGE_HEIGHT,
+    "minimum page height is respected");
+  is(Services.prefs.getIntPref(HEIGHT_PREF), HUDService.lastConsoleHeight,
+    "pref is correct");
+
+  setHeight(Math.ceil(innerHeight * 0.6));
+  Services.prefs.setIntPref(HEIGHT_PREF, -1);
+  toggleConsole();
+  yield;
+
+  is(newHeight, height, "same height after reopening the console");
+  is(Services.prefs.getIntPref(HEIGHT_PREF), -1, "pref is not updated");
+
+  closeConsole();
+  HUDService.lastConsoleHeight = 0;
+  Services.prefs.setIntPref(HEIGHT_PREF, 0);
+
+  hud = testDriver = null;
+  executeSoon(finishTest);
+
+  yield;
+}
+
+function toggleConsole()
+{
+  closeConsole(null, function() {
+    openConsole(null, function() {
+      let hudId = HUDService.getHudIdByWindow(content);
+      hud = HUDService.hudReferences[hudId].iframe;
+      newHeight = parseInt(hud.style.height);
+
+      testDriver.next();
+    });
+  });
+}
+
+function setHeight(aHeight)
+{
+  height = aHeight;
+  hud.style.height = height + "px";
+}
+
+function test()
+{
+  addTab("data:text/html;charset=utf-8,Web Console test for bug 601909");
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    innerHeight = content.innerHeight;
+    openConsole(null, function(aHud) {
+      hud = aHud.iframe;
+      testDriver = testGen();
+      testDriver.next();
+    });
+  }, true);
+}
+
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js b/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
index d22a50c9b3e..5623f52b2cb 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
@@ -46,6 +46,7 @@ function startTest()
   let win2 = tabs[runCount*2 + 1].linkedBrowser.contentWindow;
   let hudId2 = HUDService.getHudIdByWindow(win2);
   huds[1] = HUDService.hudReferences[hudId2];
+  HUDService.disableAnimation(hudId2);
 
   if (runCount == 0) {
     menuitems[1] = huds[1].ui.rootElement.querySelector("#saveBodies");
@@ -114,6 +115,7 @@ function onpopupshown2b(aEvent)
       let win1 = tabs[runCount*2].linkedBrowser.contentWindow;
       let hudId1 = HUDService.getHudIdByWindow(win1);
       huds[0] = HUDService.hudReferences[hudId1];
+      HUDService.disableAnimation(hudId1);
 
       info("iframe1 height " + huds[0].iframe.clientHeight);
       info("iframe1 root height " + huds[0].ui.rootElement.clientHeight);
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js b/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
index 1fd615fb955..9e451d0ca17 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
@@ -1,6 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+let prefService = Services.prefs;
+
 let prefs = {
   "net": [
     "network",
@@ -26,7 +28,7 @@ function test() {
   // Set all prefs to true
   for (let category in prefs) {
     prefs[category].forEach(function(pref) {
-      Services.prefs.setBoolPref("devtools.webconsole.filter." + pref, true);
+      prefService.setBoolPref("devtools.webconsole.filter." + pref, true);
     });
   }
 
@@ -105,11 +107,12 @@ function onConsoleReopen2(hud) {
   // Clear prefs
   for (let category in prefs) {
     prefs[category].forEach(function(pref) {
-      Services.prefs.clearUserPref("devtools.webconsole.filter." + pref);
+      prefService.clearUserPref("devtools.webconsole.filter." + pref);
     });
   }
 
-  prefs = null;
+  prefs = prefService = null;
+  gBrowser.removeCurrentTab();
   finishTest();
 }
 
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
index 22eba17a045..4eeaec88a68 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
@@ -44,17 +44,18 @@ function setupHighlighterTests()
 {
   let h1 = content.document.querySelector("h1");
   ok(h1, "we have the header node");
-
-  openInspector(runSelectionTests);
+  Services.obs.addObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
 }
 
-function runSelectionTests(aInspector)
+function runSelectionTests()
 {
-  aInspector.highlighter.unlock();
-  aInspector.highlighter.outline.setAttribute("disable-transitions", "true");
+  Services.obs.removeObserver(runSelectionTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
 
   executeSoon(function() {
-    aInspector.selection.once("new-node", performTestComparisons);
+    InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
     let h1 = content.document.querySelector("h1");
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
   });
@@ -62,24 +63,19 @@ function runSelectionTests(aInspector)
 
 function performTestComparisons()
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-  inspector.highlighter.lock();
+  InspectorUI.highlighter.removeListener("nodeselected", performTestComparisons);
 
-  let isHighlighting =
-    !(inspector.highlighter.outline.getAttribute("hidden") == "true");
-
-  ok(isHighlighting, "inspector is highlighting");
+  InspectorUI.stopInspecting();
 
   let h1 = content.document.querySelector("h1");
-  is(inspector.selection.node, h1, "selection matches node");
+  is(InspectorUI.highlighter.node, h1, "node selected");
+  is(InspectorUI.selection, h1, "selection matches node");
 
   openConsole(gBrowser.selectedTab, performWebConsoleTests);
 }
 
 function performWebConsoleTests(hud)
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
   let jsterm = hud.jsterm;
   outputNode = hud.outputNode;
 
@@ -116,8 +112,7 @@ function performWebConsoleTests(hud)
       let node = outputNode.querySelector(".webconsole-msg-output");
       isnot(node.textContent.indexOf("bug653531"), -1,
             "correct output for $0.textContent");
-      let inspector = gDevTools.getPanelForTarget("inspector", target);
-      is(inspector.selection.node.textContent, "bug653531",
+      is(InspectorUI.selection.textContent, "bug653531",
          "node successfully updated");
 
       executeSoon(finishUp);
@@ -127,6 +122,7 @@ function performWebConsoleTests(hud)
 }
 
 function finishUp() {
+  InspectorUI.closeInspectorUI();
   finishTest();
 }
 
@@ -134,8 +130,8 @@ function test()
 {
   waitForExplicitFinish();
   gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
     waitForFocus(createDocument, content);
   }, true);
 
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js b/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
index ade0c09363a..0f685f88e67 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_660806_history_nav.js
@@ -21,11 +21,10 @@ function consoleOpened(HUD)
 
   let jsterm = HUD.jsterm;
   let popup = jsterm.autocompletePopup;
-  let onShown = function() {
+  popup._panel.addEventListener("popupshown", function() {
+    popup._panel.removeEventListener("popupshown", arguments.callee, false);
     ok(false, "popup shown");
-  };
-
-  popup._panel.addEventListener("popupshown", onShown, false);
+  }, false);
 
   ok(!popup.isOpen, "popup is not open");
 
@@ -42,7 +41,6 @@ function consoleOpened(HUD)
 
   executeSoon(function() {
     ok(!popup.isOpen, "popup is not open");
-    popup._panel.removeEventListener("popupshown", onShown, false);
     executeSoon(finishTest);
   });
 }
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js b/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
new file mode 100644
index 00000000000..b485165d706
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_663443_panel_title.js
@@ -0,0 +1,57 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 663443. test1";
+
+const POSITION_PREF = "devtools.webconsole.position";
+const POSITION_WINDOW = "window";
+
+function consoleOpened() {
+  document.removeEventListener("popupshown", consoleOpened, false);
+
+  let HUD = HUDService.getHudByWindow(content);
+  ok(HUD.consolePanel, "Web Console opened in a panel");
+
+  let waitForTitleChange = {
+    name: "panel title change",
+    validatorFn: function() {
+      return HUD.consolePanel.label.indexOf("test2") > -1;
+    },
+    successFn: testEnd,
+    failureFn: testEnd,
+  };
+
+  waitForSuccess({
+    name: "initial panel title",
+    validatorFn: function() {
+      return HUD.consolePanel.label.indexOf("test1") > -1;
+    },
+    successFn: function() {
+      content.location = "data:text/html;charset=utf-8,<p>test2 for bug 663443";
+      waitForSuccess(waitForTitleChange);
+    },
+    failureFn: testEnd,
+  });
+}
+
+function testEnd() {
+  closeConsole(null, finishTest);
+}
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+
+    Services.prefs.setCharPref(POSITION_PREF, POSITION_WINDOW);
+
+    registerCleanupFunction(function() {
+      Services.prefs.clearUserPref(POSITION_PREF);
+    });
+  
+    document.addEventListener("popupshown", consoleOpened, false);
+
+    openConsole();
+  }, true);
+}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js b/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
index e3d214aa528..48614c9cc02 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js
@@ -39,9 +39,7 @@ function testViewSource(aHud)
       nodes = hud.outputNode.querySelectorAll(selector);
       is(nodes.length, 2, "correct number of css messages");
 
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
-      let toolbox = gDevTools.getToolboxForTarget(target);
-      toolbox.once("styleeditor-selected", onStyleEditorReady);
+      Services.ww.registerNotification(observer);
 
       EventUtils.sendMouseEvent({ type: "click" }, nodes[0]);
     },
@@ -49,75 +47,88 @@ function testViewSource(aHud)
   });
 }
 
-function onStyleEditorReady(aEvent, aPanel)
-{
-  info(aEvent + " event fired");
-
-  SEC = aPanel.styleEditorChrome;
-  let win = aPanel.panelWindow;
-  ok(win, "Style Editor Window is defined");
-  ok(SEC, "Style Editor Chrome is defined");
-
-  function sheetForNode(aNode)
+let observer = {
+  observe: function(aSubject, aTopic, aData)
   {
-    let href = aNode.getAttribute("title");
-    let sheet, i = 0;
-    while((sheet = content.document.styleSheets[i++])) {
-      if (sheet.href == href) {
-        return sheet;
+    if (aTopic != "domwindowopened") {
+      return;
+    }
+    Services.ww.unregisterNotification(observer);
+    info("Style Editor window was opened in response to clicking " +
+         "the location node");
+
+    function sheetForNode(aNode)
+    {
+      let href = aNode.getAttribute("title");
+      let sheet, i = 0;
+      while((sheet = content.document.styleSheets[i++])) {
+        if (sheet.href == href) {
+          return sheet;
+        }
       }
     }
-  }
 
-  waitForFocus(function() {
-    info("style editor window focused");
+    executeSoon(function() {
+      let styleEditorWin = window.StyleEditor.StyleEditorManager
+                          .getEditorForWindow(content.window);
+      ok(styleEditorWin, "Style Editor window is defined");
 
-    let sheet = sheetForNode(nodes[0]);
-    ok(sheet, "sheet found");
-    let line = nodes[0].sourceLine;
-    ok(line, "found source line");
+      waitForFocus(function() {
+        SEC = styleEditorWin.styleEditorChrome;
+        ok(SEC, "Style Editor Chrome is defined");
 
-    checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
-      info("first check done");
+        let sheet = sheetForNode(nodes[0]);
+        ok(sheet, "sheet found");
+        let line = nodes[0].sourceLine;
+        ok(line, "found source line");
 
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
-      let toolbox = gDevTools.getToolboxForTarget(target);
+        checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
+          let sheet = sheetForNode(nodes[1]);
+          ok(sheet, "sheet found");
+          let line = nodes[1].sourceLine;
+          ok(line, "found source line");
 
-      let sheet = sheetForNode(nodes[1]);
-      ok(sheet, "sheet found");
-      let line = nodes[1].sourceLine;
-      ok(line, "found source line");
-
-      toolbox.once("webconsole-selected", function(aEvent) {
-        info(aEvent + " event fired");
-
-        toolbox.once("styleeditor-selected", function() {
-          info(aEvent + " event fired");
+          EventUtils.sendMouseEvent({ type: "click" }, nodes[1]);
 
           checkStyleEditorForSheetAndLine(sheet, line - 1, function() {
-            info("second check done");
+            window.StyleEditor.toggle();
             finishTest();
           });
         });
-
-        EventUtils.sendMouseEvent({ type: "click" }, nodes[1]);
-      });
-
-      toolbox.selectTool("webconsole");
+      }, styleEditorWin);
     });
-  }, win);
-}
+  }
+};
 
 function checkStyleEditorForSheetAndLine(aStyleSheet, aLine, aCallback)
 {
-  let foundEditor = null;
-  waitForSuccess({
-    name: "style editor for stylesheet",
+  let editor = null;
+
+  let performLineCheck = {
+    name: "source editor load",
     validatorFn: function()
     {
-      for (let editor of SEC.editors) {
-        if (editor.styleSheet == aStyleSheet) {
-          foundEditor = editor;
+      return editor.sourceEditor;
+    },
+    successFn: function()
+    {
+      is(editor.sourceEditor.getCaretPosition().line, aLine,
+         "correct line is selected");
+      is(SEC.selectedStyleSheetIndex, editor.styleSheetIndex,
+         "correct stylesheet is selected in the editor");
+
+      executeSoon(aCallback);
+    },
+    failureFn: aCallback,
+  };
+
+  waitForSuccess({
+    name: "editor for stylesheet",
+    validatorFn: function()
+    {
+      for (let item of SEC.editors) {
+        if (item.styleSheet == aStyleSheet) {
+          editor = item;
           return true;
         }
       }
@@ -125,31 +136,8 @@ function checkStyleEditorForSheetAndLine(aStyleSheet, aLine, aCallback)
     },
     successFn: function()
     {
-      performLineCheck(foundEditor, aLine, aCallback);
+      waitForSuccess(performLineCheck);
     },
     failureFn: finishTest,
   });
 }
-
-function performLineCheck(aEditor, aLine, aCallback)
-{
-  function checkForCorrectState()
-  {
-    is(aEditor.sourceEditor.getCaretPosition().line, aLine,
-       "correct line is selected");
-    is(SEC.selectedStyleSheetIndex, aEditor.styleSheetIndex,
-       "correct stylesheet is selected in the editor");
-
-    aCallback && executeSoon(aCallback);
-  }
-
-  waitForSuccess({
-    name: "source editor load",
-    validatorFn: function()
-    {
-      return aEditor.sourceEditor;
-    },
-    successFn: checkForCorrectState,
-    failureFn: finishTest,
-  });
-}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_menustatus.js b/browser/devtools/webconsole/test/browser_webconsole_menustatus.js
new file mode 100644
index 00000000000..794122beefc
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_menustatus.js
@@ -0,0 +1,33 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+function test() {
+  var tab1 = gBrowser.addTab();
+  var tab2 = gBrowser.addTab();
+  gBrowser.selectedTab = tab2;
+
+  openConsole(tab2, function() {
+    let cmd = document.getElementById("Tools:WebConsole");
+    is(cmd.getAttribute("checked"), "true", "<command Tools:WebConsole> is checked.");
+
+    gBrowser.selectedTab = tab1;
+
+    is(cmd.getAttribute("checked"), "false", "<command Tools:WebConsole> is unchecked after tab switch.");
+
+    gBrowser.selectedTab = tab2;
+
+    is(cmd.getAttribute("checked"), "true", "<command Tools:WebConsole> is checked.");
+
+    closeConsole(tab2, function() {
+      is(cmd.getAttribute("checked"), "false", "<command Tools:WebConsole> is checked once closed.");
+
+      gBrowser.removeTab(tab1);
+      gBrowser.removeTab(tab2);
+
+      finish();
+    });
+  });
+}
diff --git a/browser/devtools/webconsole/test/browser_webconsole_position_ui.js b/browser/devtools/webconsole/test/browser_webconsole_position_ui.js
new file mode 100644
index 00000000000..3639b9a86ae
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_position_ui.js
@@ -0,0 +1,207 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 577721";
+
+const POSITION_PREF = "devtools.webconsole.position";
+const TOP_PREF = "devtools.webconsole.top";
+const LEFT_PREF = "devtools.webconsole.left";
+const WIDTH_PREF = "devtools.webconsole.width";
+const HEIGHT_PREF = "devtools.hud.height";
+
+let hudRef, boxHeight, panelWidth;
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+  registerCleanupFunction(testEnd);
+}
+
+function testEnd() {
+  hudRef = null;
+  Services.prefs.clearUserPref(POSITION_PREF);
+  Services.prefs.clearUserPref(WIDTH_PREF);
+  Services.prefs.clearUserPref(HEIGHT_PREF);
+  Services.prefs.clearUserPref(TOP_PREF);
+  Services.prefs.clearUserPref(LEFT_PREF);
+}
+
+function waitForPosition(aPosition, aCallback) {
+  waitForSuccess({
+    name: "web console position changed to '" + aPosition + "'",
+    validatorFn: function()
+    {
+      return hudRef._currentUIPosition == aPosition;
+    },
+    successFn: executeSoon.bind(null, aCallback),
+    failureFn: finishTest,
+  });
+}
+
+function consoleOpened(aHudRef) {
+  hudRef = aHudRef;
+  testMenuitems();
+
+  let hudBox = hudRef.iframe;
+
+  is(hudBox.parentNode.childNodes[2].getAttribute("id"), hudRef.hudId,
+     "initial console position is correct");
+
+  is(hudRef.ui.positionMenuitems.below.getAttribute("checked"), "true",
+     "position menu checkbox is below");
+  is(Services.prefs.getCharPref(POSITION_PREF), "below", "pref is below");
+
+  executeSoon(function() {
+    hudRef.positionConsole("above");
+    waitForPosition("above", onPositionAbove);
+  });
+}
+
+function onPositionAbove() {
+  let hudBox = hudRef.iframe;
+
+  let id = hudBox.parentNode.childNodes[0].getAttribute("id");
+  is(id, hudRef.hudId, "above position is correct");
+
+  is(hudRef.ui.positionMenuitems.above.getAttribute("checked"), "true",
+     "position menu checkbox is above");
+  is(Services.prefs.getCharPref(POSITION_PREF), "above", "pref is above");
+
+  boxHeight = content.innerHeight * 0.5;
+  panelWidth = content.innerWidth * 0.5;
+
+  hudBox.style.height = boxHeight + "px";
+
+  boxHeight = hudBox.clientHeight;
+
+  Services.prefs.setIntPref(WIDTH_PREF, panelWidth);
+  Services.prefs.setIntPref(TOP_PREF, 50);
+  Services.prefs.setIntPref(LEFT_PREF, 51);
+
+  executeSoon(function() {
+    hudRef.positionConsole("window");
+    waitForPosition("window", onPositionWindow);
+  });
+}
+
+function onPositionWindow() {
+  let hudBox = hudRef.iframe;
+
+  let id = hudBox.parentNode.getAttribute("id");
+  is(id, "console_window_" + hudRef.hudId, "window position is correct");
+  is(Services.prefs.getCharPref(POSITION_PREF), "window", "pref is window");
+
+  let diffHeight = Math.abs(hudBox.clientHeight - boxHeight);
+  ok(diffHeight < 8, "hudBox height is correct");
+
+  let consolePanel = hudRef.consolePanel;
+
+  is(consolePanel.getAttribute("width"), panelWidth, "panel width is correct");
+  is(consolePanel.getAttribute("top"), 50, "panel top position is correct");
+  is(consolePanel.getAttribute("left"), 51, "panel left position is correct");
+
+  let panelHeight = parseInt(consolePanel.getAttribute("height"));
+  let boxWidth = hudBox.clientWidth;
+  boxHeight = hudBox.clientHeight;
+
+  hudRef.consolePanel.sizeTo(panelWidth - 15, panelHeight - 13);
+
+  let popupBoxObject = consolePanel.popupBoxObject;
+  let screenX = popupBoxObject.screenX;
+  let screenY = popupBoxObject.screenY;
+  consolePanel.moveTo(screenX - 11, screenY - 13);
+
+  isnot(hudBox.clientWidth, boxWidth, "hudBox width was updated");
+  isnot(hudBox.clientHeight, boxHeight, "hudBox height was updated");
+
+  isnot(popupBoxObject.screenX, screenX, "panel screenX was updated");
+  isnot(popupBoxObject.screenY, screenY, "panel screenY was updated");
+
+  panelWidth = consolePanel.clientWidth;
+  boxHeight = hudBox.clientHeight;
+
+  executeSoon(function() {
+    hudRef.positionConsole("below");
+    waitForPosition("below", onPositionBelow);
+  });
+}
+
+function onPositionBelow() {
+  let hudBox = hudRef.iframe;
+
+  let id = hudBox.parentNode.childNodes[2].getAttribute("id");
+  is(id, hudRef.hudId, "below position is correct after reopen");
+
+  let diffHeight = Math.abs(hudBox.clientHeight - boxHeight);
+  // dump("Diffheight: " + diffHeight + " clientHeight: " + hudBox.clientHeight + " boxHeight: " + boxHeight + "\n");
+  // XXX TODO bug 702707
+  ok(diffHeight < 8, "hudBox height is still correct");
+
+  is(Services.prefs.getCharPref(POSITION_PREF), "below", "pref is below");
+
+  // following three disabled due to bug 674562
+  // is(Services.prefs.getIntPref(WIDTH_PREF), panelWidth, "width pref updated - bug 674562");
+  // isnot(Services.prefs.getIntPref(TOP_PREF), 50, "top location pref updated - bug 674562");
+  // isnot(Services.prefs.getIntPref(LEFT_PREF), 51, "left location pref updated - bug 674562");
+
+  Services.obs.addObserver(onConsoleClose, "web-console-destroyed", false);
+
+  // Close the window console via the toolbar button
+  let btn = hudRef.ui.closeButton;
+  executeSoon(function() {
+    EventUtils.synthesizeMouse(btn, 2, 2, {}, hudRef.iframeWindow);
+  });
+}
+
+function onConsoleClose()
+{
+  Services.obs.removeObserver(onConsoleClose, "web-console-destroyed");
+
+  executeSoon(function() {
+    hudRef = null;
+    openConsole(null, onConsoleReopen);
+  });
+}
+
+function onConsoleReopen(aHudRef) {
+  let hudBox = aHudRef.iframe;
+
+  let id = hudBox.parentNode.childNodes[2].getAttribute("id");
+  is(id, aHudRef.hudId, "below position is correct after another reopen");
+
+  is(aHudRef.ui.positionMenuitems.below.getAttribute("checked"), "true",
+     "position menu checkbox is below");
+
+  executeSoon(finishTest);
+}
+
+function testMenuitems() {
+  let positionConsole = hudRef.positionConsole;
+  is(typeof positionConsole, "function", "positionConsole() is available");
+
+  let param = null;
+  hudRef.positionConsole = function(aPosition) {
+    param = aPosition;
+  };
+
+  // Make sure the menuitems call the correct method.
+
+  hudRef.ui.positionMenuitems.above.doCommand();
+
+  is(param, "above", "menuitem for above positioning calls positionConsole() correctly");
+
+  hudRef.ui.positionMenuitems.below.doCommand();
+
+  is(param, "below", "menuitem for below positioning calls positionConsole() correctly");
+
+  hudRef.ui.positionMenuitems.window.doCommand();
+
+  is(param, "window", "menuitem for window positioning calls positionConsole() correctly");
+
+  hudRef.positionConsole = positionConsole;
+}
+
diff --git a/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js b/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
new file mode 100644
index 00000000000..d4ce62aa41f
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_webconsole_window_zombie.js
@@ -0,0 +1,42 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URI = "data:text/html;charset=utf-8,<p>test for bug 577721";
+
+const POSITION_PREF = "devtools.webconsole.position";
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+  registerCleanupFunction(testEnd);
+}
+
+function testEnd() {
+  Services.prefs.clearUserPref(POSITION_PREF);
+}
+
+function consoleOpened(hudRef) {
+  let hudBox = hudRef.HUDBox;
+
+  // listen for the panel popupshown event.
+  document.addEventListener("popupshown", function popupShown() {
+    document.removeEventListener("popupshown", popupShown, false);
+
+    ok(hudRef.consolePanel, "console is in a panel");
+
+    Services.obs.addObserver(function onWebConsoleClose() {
+      Services.obs.removeObserver(onWebConsoleClose, "web-console-destroyed");
+      executeSoon(finishTest);
+    }, "web-console-destroyed", false);
+
+    // Close the window console via the menu item
+    let menu = document.getElementById("webConsole");
+    menu.click();
+  }, false);
+
+  hudRef.positionConsole("window");
+}
diff --git a/browser/devtools/webconsole/test/head.js b/browser/devtools/webconsole/test/head.js
index c556de529a6..4e285568d71 100644
--- a/browser/devtools/webconsole/test/head.js
+++ b/browser/devtools/webconsole/test/head.js
@@ -8,11 +8,6 @@ Cu.import("resource:///modules/HUDService.jsm", tempScope);
 let HUDService = tempScope.HUDService;
 Cu.import("resource://gre/modules/devtools/WebConsoleUtils.jsm", tempScope);
 let WebConsoleUtils = tempScope.WebConsoleUtils;
-Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-let gDevTools = tempScope.gDevTools;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 const WEBCONSOLE_STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let WCU_l10n = new WebConsoleUtils.l10n(WEBCONSOLE_STRINGS_URI);
 
@@ -37,7 +32,8 @@ let tab, browser, hudId, hud, hudBox, filterBox, outputNode, cs;
 
 function addTab(aURL)
 {
-  gBrowser.selectedTab = gBrowser.addTab(aURL);
+  gBrowser.selectedTab = gBrowser.addTab();
+  content.location.assign(aURL);
   tab = gBrowser.selectedTab;
   browser = gBrowser.getBrowserForTab(tab);
 }
@@ -137,24 +133,23 @@ function findLogEntry(aString)
  *        Optional function to invoke after the Web Console completes
  *        initialization (web-console-created).
  */
-function openConsole(aTab, aCallback = function() { })
+function openConsole(aTab, aCallback)
 {
-  function onWebConsoleOpen(aEvent, aPanel)
+  function onWebConsoleOpen(aSubject, aTopic)
   {
-    executeSoon(aCallback.bind(null, aPanel.hud));
+    if (aTopic == "web-console-created") {
+      Services.obs.removeObserver(onWebConsoleOpen, "web-console-created");
+      aSubject.QueryInterface(Ci.nsISupportsString);
+      let hud = HUDService.getHudReferenceById(aSubject.data);
+      executeSoon(aCallback.bind(null, hud));
+    }
   }
 
-  let target = TargetFactory.forTab(aTab || tab);
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  if (toolbox) {
-    toolbox.once("webconsole-selected", onWebConsoleOpen);
-    toolbox.selectTool("webconsole");
-  }
-  else {
-    let target = TargetFactory.forTab(aTab || tab);
-    toolbox = gDevTools.openToolboxForTab(target, "webconsole");
-    toolbox.once("webconsole-selected", onWebConsoleOpen);
+  if (aCallback) {
+    Services.obs.addObserver(onWebConsoleOpen, "web-console-created", false);
   }
+
+  HUDService.activateHUDForContext(aTab || tab);
 }
 
 /**
@@ -167,27 +162,23 @@ function openConsole(aTab, aCallback = function() { })
  *        Optional function to invoke after the Web Console completes
  *        closing (web-console-destroyed).
  */
-function closeConsole(aTab, aCallback = function() { })
+function closeConsole(aTab, aCallback)
 {
-  let target = TargetFactory.forTab(aTab || tab);
-  let toolbox = gDevTools.getToolboxForTarget(target);
-  if (toolbox) {
-    let panel = gDevTools.getPanelForTarget("webconsole", target);
-    if (panel) {
-      let hudId = panel.hud.hudId;
-      panel.once("destroyed", function() {
-        executeSoon(aCallback.bind(null, hudId));
-      });
-    }
-    else {
-      toolbox.once("destroyed", aCallback.bind(null, null));
+  function onWebConsoleClose(aSubject, aTopic)
+  {
+    if (aTopic == "web-console-destroyed") {
+      Services.obs.removeObserver(onWebConsoleClose, "web-console-destroyed");
+      aSubject.QueryInterface(Ci.nsISupportsString);
+      let hudId = aSubject.data;
+      executeSoon(aCallback.bind(null, hudId));
     }
+  }
 
-    toolbox.destroy();
-  }
-  else {
-    aCallback();
+  if (aCallback) {
+    Services.obs.addObserver(onWebConsoleClose, "web-console-destroyed", false);
   }
+
+  HUDService.deactivateHUDForContext(aTab || tab);
 }
 
 /**
@@ -259,8 +250,7 @@ function finishTest()
 
 function tearDown()
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.closeToolbox(target);
+  HUDService.deactivateHUDForContext(gBrowser.selectedTab);
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
@@ -317,17 +307,3 @@ function waitForSuccess(aOptions)
 
   wait(aOptions.validatorFn, aOptions.successFn, aOptions.failureFn);
 }
-
-function openInspector(aCallback, aTab = gBrowser.selectedTab)
-{
-  let target = TargetFactory.forTab(aTab);
-  let inspector = gDevTools.getPanelForTarget("inspector", target);
-  if (inspector && inspector.isReady) {
-    aCallback(inspector);
-  } else {
-    let toolbox = gDevTools.openToolboxForTab(target, "inspector");
-    toolbox.once("inspector-ready", function _onSelect(aEvent, aPanel) {
-      aCallback(aPanel);
-    });
-  }
-}
diff --git a/browser/devtools/webconsole/webconsole.js b/browser/devtools/webconsole/webconsole.js
index 973c06a27d5..4116fa3f2e0 100644
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@@ -177,8 +177,10 @@ const PREF_CONNECTION_TIMEOUT = "devtools.debugger.remote-timeout";
  *
  * @param object aWebConsoleOwner
  *        The WebConsole owner object.
+ * @param string aPosition
+ *        Tells the UI location for the Web Console.
  */
-function WebConsoleFrame(aWebConsoleOwner)
+function WebConsoleFrame(aWebConsoleOwner, aPosition)
 {
   this.owner = aWebConsoleOwner;
   this.hudId = this.owner.hudId;
@@ -189,6 +191,7 @@ function WebConsoleFrame(aWebConsoleOwner)
   this._networkRequests = {};
 
   this._toggleFilter = this._toggleFilter.bind(this);
+  this._onPositionConsoleCommand = this._onPositionConsoleCommand.bind(this);
   this._flushMessageQueue = this._flushMessageQueue.bind(this);
   this._connectionTimeout = this._connectionTimeout.bind(this);
 
@@ -197,7 +200,7 @@ function WebConsoleFrame(aWebConsoleOwner)
 
   this._initDefaultFilterPrefs();
   this._commandController = new CommandController(this);
-  this.positionConsole(window);
+  this.positionConsole(aPosition, window);
 
   this.jsterm = new JSTerm(this);
   this.jsterm.inputNode.focus();
@@ -370,7 +373,10 @@ WebConsoleFrame.prototype = {
    */
   _initConnection: function WCF__initConnection()
   {
-    this.proxy = new WebConsoleConnectionProxy(this, this.owner.target);
+    this.proxy = new WebConsoleConnectionProxy(this, {
+      host: this.owner.remoteHost,
+      port: this.owner.remotePort,
+    });
 
     let timeout = Services.prefs.getIntPref(PREF_CONNECTION_TIMEOUT);
     this._connectTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
@@ -433,6 +439,7 @@ WebConsoleFrame.prototype = {
     this.inputNode = doc.querySelector(".jsterm-input-node");
 
     this._setFilterTextBoxEvents();
+    this._initPositionUI();
     this._initFilterButtons();
 
     let fontSize = Services.prefs.getIntPref("devtools.webconsole.fontSize");
@@ -476,6 +483,10 @@ WebConsoleFrame.prototype = {
                                        !this.getFilterState("network");
     }.bind(this));
 
+    this.closeButton = doc.getElementById("webconsole-close-button");
+    this.closeButton.addEventListener("command",
+                                      this.owner.onCloseButton.bind(this.owner));
+
     let clearButton = doc.getElementsByClassName("webconsole-clear-console-button")[0];
     clearButton.addEventListener("command", function WCF__onClearButton() {
       this.owner._onClearButton();
@@ -533,6 +544,31 @@ WebConsoleFrame.prototype = {
     this.filterBox.addEventListener("input", onChange, false);
   },
 
+  /**
+   * Initialize the UI for re-positioning the console
+   * @private
+   */
+  _initPositionUI: function WCF__initPositionUI()
+  {
+    let doc = this.document;
+
+    let itemAbove = doc.querySelector("menuitem[consolePosition='above']");
+    itemAbove.addEventListener("command", this._onPositionConsoleCommand, false);
+
+    let itemBelow = doc.querySelector("menuitem[consolePosition='below']");
+    itemBelow.addEventListener("command", this._onPositionConsoleCommand, false);
+
+    let itemWindow = doc.querySelector("menuitem[consolePosition='window']");
+    itemWindow.addEventListener("command", this._onPositionConsoleCommand, false);
+
+    this.positionMenuitems = {
+      last: null,
+      above: itemAbove,
+      below: itemBelow,
+      window: itemWindow,
+    };
+  },
+
   /**
    * Creates one of the filter buttons on the toolbar.
    *
@@ -579,6 +615,19 @@ WebConsoleFrame.prototype = {
     Services.obs.notifyObservers(id, "web-console-created", null);
   },
 
+  /**
+   * Handle the "command" event for the buttons that allow the user to
+   * reposition the Web Console UI.
+   *
+   * @private
+   * @param nsIDOMEvent aEvent
+   */
+  _onPositionConsoleCommand: function WCF__onPositionConsoleCommand(aEvent)
+  {
+    let position = aEvent.target.getAttribute("consolePosition");
+    this.owner.positionConsole(position);
+  },
+
   /**
    * Position the console in a different location.
    *
@@ -586,12 +635,15 @@ WebConsoleFrame.prototype = {
    * instance that owns this iframe. You need to call this if you write
    * a different owner or you manually reposition the iframe.
    *
+   * @param string aPosition
+   *        The new Web Console iframe location: "above" (the page), "below" or
+   *        "window".
    * @param object aNewWindow
    *        Repositioning causes the iframe to reload - bug 254144. You need to
    *        provide the new window object so we can reinitialize the UI as
    *        needed.
    */
-  positionConsole: function WCF_positionConsole(aNewWindow)
+  positionConsole: function WCF_positionConsole(aPosition, aNewWindow)
   {
     this.window = aNewWindow;
     this.document = this.window.document;
@@ -605,6 +657,14 @@ WebConsoleFrame.prototype = {
     this._initUI();
     this.jsterm && this.jsterm._initUI();
 
+    this.closeButton.hidden = aPosition == "window";
+
+    this.positionMenuitems[aPosition].setAttribute("checked", true);
+    if (this.positionMenuitems.last) {
+      this.positionMenuitems.last.setAttribute("checked", false);
+    }
+    this.positionMenuitems.last = this.positionMenuitems[aPosition];
+
     if (oldOutputNode && oldOutputNode.childNodes.length) {
       let parentNode = this.outputNode.parentNode;
       parentNode.replaceChild(oldOutputNode, this.outputNode);
@@ -1731,9 +1791,7 @@ WebConsoleFrame.prototype = {
   onLocationChange: function WCF_onLocationChange(aURI, aTitle)
   {
     this.contentLocation = aURI;
-    if (this.owner.onLocationChange) {
-      this.owner.onLocationChange(aURI, aTitle);
-    }
+    this.owner.onLocationChange(aURI, aTitle);
   },
 
   /**
@@ -3970,13 +4028,14 @@ CommandController.prototype = {
  * @constructor
  * @param object aWebConsole
  *        The Web Console instance that owns this connection proxy.
- * @param RemoteTarget aTarget
- *        The target that the console will connect to.
+ * @param object aOptions
+ *        Connection options: host and port.
  */
-function WebConsoleConnectionProxy(aWebConsole, aTarget)
+function WebConsoleConnectionProxy(aWebConsole, aOptions = {})
 {
   this.owner = aWebConsole;
-  this.target = aTarget;
+  this.remoteHost = aOptions.host;
+  this.remotePort = aOptions.port;
 
   this._onPageError = this._onPageError.bind(this);
   this._onConsoleAPICall = this._onConsoleAPICall.bind(this);
@@ -4052,18 +4111,17 @@ WebConsoleConnectionProxy.prototype = {
    */
   connect: function WCCP_connect(aCallback)
   {
-    // TODO: convert the non-remote path to use the target API as well.
-    let transport, client;
-    if (this.target.isRemote) {
-      client = this.client = this.target.client;
+    let transport;
+    if (this.remoteHost) {
+      transport = debuggerSocketConnect(this.remoteHost, this.remotePort);
     }
     else {
       this.initServer();
       transport = DebuggerServer.connectPipe();
-
-      client = this.client = new DebuggerClient(transport);
     }
 
+    let client = this.client = new DebuggerClient(transport);
+
     client.addListener("pageError", this._onPageError);
     client.addListener("consoleAPICall", this._onConsoleAPICall);
     client.addListener("networkEvent", this._onNetworkEvent);
@@ -4071,18 +4129,6 @@ WebConsoleConnectionProxy.prototype = {
     client.addListener("fileActivity", this._onFileActivity);
     client.addListener("locationChange", this._onLocationChange);
 
-    if (this.target.isRemote) {
-      this._consoleActor = this.target.form.consoleActor;
-      if (!this.target.chrome) {
-        this.owner.onLocationChange(this.target.url, this.target.name);
-      }
-
-      let listeners = ["PageError", "ConsoleAPI", "NetworkActivity",
-                       "FileActivity", "LocationChange"];
-      this.client.attachConsole(this._consoleActor, listeners,
-                                this._onAttachConsole.bind(this, aCallback));
-      return;
-    }
     client.connect(function(aType, aTraits) {
       client.listTabs(this._onListTabs.bind(this, aCallback));
     }.bind(this));
@@ -4099,7 +4145,32 @@ WebConsoleConnectionProxy.prototype = {
    */
   _onListTabs: function WCCP__onListTabs(aCallback, aResponse)
   {
-    let selectedTab = aResponse.tabs[aResponse.selected];
+    let selectedTab;
+
+    if (this.remoteHost) {
+      this.owner._connectTimer.cancel();
+
+      let tabs = [];
+      for (let tab of aResponse.tabs) {
+        tabs.push(tab.title);
+      }
+
+      tabs.push(l10n.getStr("listTabs.globalConsoleActor"));
+
+      let selected = {};
+      let result = Services.prompt.select(null,
+        l10n.getStr("remoteWebConsoleSelectTabTitle"),
+        l10n.getStr("remoteWebConsoleSelectTabMessage"),
+        tabs.length, tabs, selected);
+
+      if (result && selected.value < aResponse.tabs.length) {
+        selectedTab = aResponse.tabs[selected.value];
+      }
+    }
+    else {
+      selectedTab = aResponse.tabs[aResponse.selected];
+    }
+
     if (selectedTab) {
       this._consoleActor = selectedTab.consoleActor;
       this.owner.onLocationChange(selectedTab.url, selectedTab.title);
@@ -4332,9 +4403,7 @@ WebConsoleConnectionProxy.prototype = {
     this.client.removeListener("locationChange", this._onLocationChange);
 
     try {
-      if (!this.target.isRemote) {
-        this.client.close(onDisconnect);
-      }
+      this.client.close(onDisconnect);
     }
     catch (ex) {
       Cu.reportError("Web Console disconnect exception: " + ex);
diff --git a/browser/devtools/webconsole/webconsole.xul b/browser/devtools/webconsole/webconsole.xul
index 9669d1a46ce..ff602c90dd4 100644
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@@ -63,6 +63,12 @@
   <vbox class="hud-outer-wrapper" flex="1">
     <vbox class="hud-console-wrapper" flex="1">
       <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
+#ifdef XP_MACOSX
+        <toolbarbutton id="webconsole-close-button"
+                       class="devtools-closebutton"
+                       tooltiptext="&btnClose.tooltip;"/>
+#endif
+
         <toolbarbutton label="&btnPageNet.label;" type="menu-button"
                        category="net" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageNet.tooltip;">
@@ -113,10 +119,29 @@
 
         <spacer flex="1"/>
 
+        <toolbarbutton label="&btnPosition.label;" type="menu"
+                       class="devtools-toolbarbutton"
+                       tooltiptext="&btnPosition.tooltip;">
+          <menupopup>
+            <menuitem label="&positionMenu.above;" type="checkbox"
+                      autocheck="false" consolePosition="above"/>
+            <menuitem label="&positionMenu.below;" type="checkbox"
+                      autocheck="false" consolePosition="below"/>
+            <menuitem label="&positionMenu.window;" type="checkbox"
+                      autocheck="false" consolePosition="window"/>
+          </menupopup>
+        </toolbarbutton>
+
         <textbox class="compact hud-filter-box devtools-searchinput" type="search"
                  placeholder="&filterBox.placeholder;"/>
         <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
                        label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
+
+#ifndef XP_MACOSX
+        <toolbarbutton id="webconsole-close-button"
+                       class="devtools-closebutton"
+                       tooltiptext="&btnClose.tooltip;"/>
+#endif
       </toolbar>
       <richlistbox class="hud-output-node" orient="vertical" flex="1"
                    seltype="multiple" context="output-contextmenu"
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index fad262527ba..29b51d7a96e 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -198,15 +198,19 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY webDeveloperMenu.label       "Web Developer">
 <!ENTITY webDeveloperMenu.accesskey   "W">
 
-<!ENTITY devtoolsConnect.label        "Connect…">
-<!ENTITY devtoolsConnect.accesskey    "e">
-
 <!ENTITY errorConsoleCmd.label        "Error Console">
 <!ENTITY errorConsoleCmd.accesskey    "C">
 <!ENTITY errorConsoleCmd.commandkey   "j">
 
+<!ENTITY webConsoleCmd.label          "Web Console">
+<!ENTITY webConsoleCmd.accesskey      "W">
+<!ENTITY webConsoleCmd.commandkey     "k">
 <!ENTITY remoteWebConsoleCmd.label    "Remote Web Console">
 
+<!ENTITY inspectMenu.label            "Inspect">
+<!ENTITY inspectMenu.accesskey        "I">
+<!ENTITY inspectMenu.commandkey       "I">
+
 <!ENTITY inspectContextMenu.label     "Inspect Element">
 <!ENTITY inspectContextMenu.accesskey "Q">
 
@@ -229,15 +233,40 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY scratchpad.keycode           "VK_F4">
 <!ENTITY scratchpad.keytext           "F4">
 
+<!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
+<!ENTITY inspectSidebarCloseButton.tooltiptext "Close sidebar">
+
 <!ENTITY devToolbarCloseButton.tooltiptext "Close Developer Toolbar">
 <!ENTITY devToolbarMenu.label              "Developer Toolbar">
 <!ENTITY devToolbarMenu.accesskey          "v">
 <!ENTITY devToolbar.keycode                "VK_F2">
 <!ENTITY devToolbar.keytext                "F2">
-<!ENTITY devToolbarToolsButton.label       "Toggle Toolbox">
 <!ENTITY devToolbarOtherToolsButton.label  "More Tools">
 
-<!ENTITY devToolbox.accesskey              "B">
+<!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">
+<!ENTITY inspectorHTMLCopyInner.accesskey   "I">
+
+<!ENTITY inspectorHTMLCopyOuter.label       "Copy Outer HTML">
+<!ENTITY inspectorHTMLCopyOuter.accesskey   "O">
+
+<!ENTITY inspectorHTMLDelete.label          "Delete Node">
+<!ENTITY inspectorHTMLDelete.accesskey      "D">
+
+<!-- LOCALIZATION NOTE (inspect3DViewButton.label): This button shows an
+  -  alternate view for the Inspector, creating a 3D visualization of the
+  -  webpage. -->
+<!ENTITY inspect3DViewButton.label     "3D View">
+<!ENTITY inspect3DViewButton.accesskey "W">
+
+<!ENTITY inspectStyleButton.label     "Style">
+<!ENTITY inspectStyleButton.accesskey "S">
+
+<!-- LOCALIZATION NOTE (styleeditor.label): This menu item label appears
+  -  in the Tools menu. -->
+<!ENTITY styleeditor.label            "Style Editor">
+<!ENTITY styleeditor.accesskey        "y">
+<!ENTITY styleeditor.keycode          "VK_F7">
+<!ENTITY styleeditor.keytext          "F7">
 
 <!ENTITY getMoreDevtoolsCmd.label        "Get More Tools">
 <!ENTITY getMoreDevtoolsCmd.accesskey    "M">
@@ -605,6 +634,15 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY addonBarCloseButton.tooltip  "Close Add-on Bar">
 <!ENTITY toggleAddonBarCmd.key        "/">
 
+<!-- LOCALIZATION NOTE (markupButton.arialabel): The markup button is the button
+located in front of the breadcrumbs display in the inspector toolbar. The button
+doesn't display any label, but exposes a label to screen-readers with "aria-label".
+-->
+<!ENTITY markupButton.arialabel          "Markup">
+<!-- LOCALIZATION NOTE (markupButton.accesskey): The key bound to the Markup panel's
+toolbar button -->
+<!ENTITY markupButton.accesskey          "M">
+
 <!ENTITY socialToolbar.title        "Social Toolbar Button">
 <!ENTITY social.notLoggedIn.label   "Not logged in">
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd b/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
deleted file mode 100644
index c00aa6a5ce4..00000000000
--- a/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- 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/. -->
-
-<!-- LOCALIZATION NOTE : FILE This file contains the Remove Connection strings.
-  - The Remote Connection window can be start by running the command:
-  - `devtools connect`
-  - -->
-
-<!ENTITY title      "Connect">
-<!ENTITY host       "Host:">
-<!ENTITY port       "Port:">
-<!ENTITY connect    "Connect">
-<!ENTITY connecting "Connecting…">
-<!ENTITY availability "Available remote objects:">
diff --git a/browser/locales/en-US/chrome/browser/devtools/debugger.properties b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
index 5c2d9cab6e7..c9687bb2907 100644
--- a/browser/locales/en-US/chrome/browser/devtools/debugger.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
@@ -19,14 +19,6 @@ confirmTabSwitch.buttonSwitch.accessKey=S
 confirmTabSwitch.buttonOpen=Open anyway
 confirmTabSwitch.buttonOpen.accessKey=O
 
-# LOCALIZATION NOTE (open.commandkey): The key used to open the debugger in
-# combination to e.g. ctrl + shift
-open.commandkey=S
-
-# LOCALIZATION NOTE (debuggerMenu.accesskey): The access key used to open the
-# debugger.
-debuggerMenu.accesskey=D
-
 # LOCALIZATION NOTE (chromeDebuggerWindowTitle): The title displayed for the
 # chrome (browser) debugger window.
 chromeDebuggerWindowTitle=Browser Debugger
@@ -181,11 +173,6 @@ watchExpressionsScopeLabel=Watch expressions
 # the global scope.
 globalScopeLabel=Global
 
-# LOCALIZATION NOTE (ToolboxDebugger.label):
-# This string is displayed in the title of the tab when the debugger is
-# displayed inside the developer tools window and in the Developer Tools Menu.
-ToolboxDebugger.label=Debugger
-
 # LOCALIZATION NOTE (variablesSeparatorLabel): The text that is displayed
 # in the variables list as a separator between the name and value.
 variablesSeparatorLabel=:
diff --git a/browser/locales/en-US/chrome/browser/devtools/inspector.dtd b/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
deleted file mode 100644
index 897552ca002..00000000000
--- a/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
+++ /dev/null
@@ -1,10 +0,0 @@
-<!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">
-<!ENTITY inspectorHTMLCopyInner.accesskey   "I">
-
-<!ENTITY inspectorHTMLCopyOuter.label       "Copy Outer HTML">
-<!ENTITY inspectorHTMLCopyOuter.accesskey   "O">
-
-<!ENTITY inspectorHTMLDelete.label          "Delete Node">
-<!ENTITY inspectorHTMLDelete.accesskey      "D">
-
-<!ENTITY inspector.selectButton.tooltip     "Select element with mouse">
diff --git a/browser/locales/en-US/chrome/browser/devtools/inspector.properties b/browser/locales/en-US/chrome/browser/devtools/inspector.properties
index c4989cab16c..13cb5e1b9e8 100644
--- a/browser/locales/en-US/chrome/browser/devtools/inspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/inspector.properties
@@ -14,22 +14,38 @@
 # LOCALIZATION NOTE (confirmNavigationAway): Used in the Inspector tool, when
 # the user tries to navigate away from a web page, to confirm the change of
 # page.
-confirmNavigationAway.message2=If you leave this page, the changes you have made will be lost.
+confirmNavigationAway.message=Leaving this page will close the Inspector and the changes you have made will be lost.
 confirmNavigationAway.buttonLeave=Leave Page
 confirmNavigationAway.buttonLeaveAccesskey=L
 confirmNavigationAway.buttonStay=Stay on Page
 confirmNavigationAway.buttonStayAccesskey=S
 
 breadcrumbs.siblings=Siblings
+# LOCALIZATION NOTE (htmlPanel): Used in the Inspector tool's openInspectorUI
+# method when registering the HTML panel.
+
+# LOCALIZATION NOTE (inspectButtonWithShortcutKey.tooltip):
+# This button appears in the Inspector Toolbar. inspectButton is stateful,
+# if it's pressed users can select an element with the mouse.
+# %S is the keyboard shortcut.
+inspectButtonWithShortcutKey.tooltip=Select element with mouse (%S)
+
+# LOCALIZATION NOTE (inspectButton.tooltip):
+# Same as inspectButtonWithShortcutKey.tooltip but used when an add-on
+# overrides the shortcut key.
+inspectButton.tooltip=Select element with mouse
+
+# LOCALIZATION NOTE (markupButton.*):
+# This button is the button located at the beginning of the breadcrumbs
+# in the inspector toolbar. Its tooltip is built dynamically.
+# markupButton.tooltip is used on Mac.
+# On Windows and Linux, we use markupButton.tooltipWithAccesskey, where we append
+# the keyboard shortcut.
+markupButton.tooltip=Markup Panel
+markupButton.tooltipWithAccesskey=Markup Panel (%S)
+
 
 # LOCALIZATION NOTE (nodeMenu.tooltiptext)
 # This menu appears in the Infobar (on top of the highlighted node) once
 # the node is selected.
 nodeMenu.tooltiptext=Node operations
-
-
-# LOCALIZATION NOTE (inspector.*)
-# Used for the menuitem in the tool menu
-inspector.label=Inspector
-inspector.commandkey=I
-inspector.accesskey=I
diff --git a/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
index 53aaf605c55..e88902ff4a4 100644
--- a/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
@@ -16,7 +16,6 @@
   -  The text appears on the bottom right corner of the layout view when
   -  the corresponding box is hovered. -->
 
-<!ENTITY title                  "Box Model">
 <!ENTITY margins.tooltip        "margins">
 <!ENTITY borders.tooltip        "borders">
 <!ENTITY padding.tooltip        "padding">
diff --git a/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd b/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
index 7210060e0c1..6ac78727fa2 100644
--- a/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/scratchpad.dtd
@@ -117,3 +117,9 @@
   -  the same name in browser.dtd.
   -->
 <!ENTITY errorConsoleCmd.commandkey   "j">
+
+<!-- LOCALIZATION NOTE (webConsoleCmd.commandkey): This command key launches
+  -  the browser WebConsole, the key should be identical to the property of
+  -  the same name in browser.dtd.
+  -->
+<!ENTITY webConsoleCmd.commandkey     "k">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
index dca0bc6d81c..2e08c8d07c3 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
@@ -52,14 +52,6 @@ saveStyleSheet.title=Save style sheet
 # LOCALIZATION NOTE  (saveStyleSheet.title): This is the *.css filter title
 saveStyleSheet.filter=CSS files
 
-# LOCALIZATION NOTE  (open.commandkey): This the key to use in
-# conjunction with shift to open the style editor
-open.commandkey=VK_F7
-
-# LOCALIZATION NOTE (open.accesskey): The access key used to open the style
-# editor.
-open.accesskey=y
-
 # LOCALIZATION NOTE  (saveStyleSheet.commandkey): This the key to use in
 # conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
 saveStyleSheet.commandkey=S
@@ -74,7 +66,3 @@ undo.commandkey=Z
 # platforms) to Redo a change in the editor.
 redo.commandkey=Z
 
-# LOCALIZATION NOTE (ToolboxStyleEditor.label):
-# This string is displayed in the title of the tab when the debugger is
-# displayed inside the developer tools window and in the Developer Tools Menu.
-ToolboxStyleEditor.label=Style Editor
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
index e28e4e07b41..f9f86b81913 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
@@ -41,7 +41,3 @@
 <!ENTITY matched               "Matched">
 <!ENTITY parentMatch           "Parent Match">
 <!ENTITY unmatched             "Unmatched">
-
-<!-- FIXME: notes -->
-<!ENTITY computedViewTitle     "Computed">
-<!ENTITY ruleViewTitle         "Rules">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
index 5f7f1861025..5eab4a7b991 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
@@ -36,6 +36,13 @@ rule.sourceElement=element
 # e.g "Inherited from body#bodyID"
 rule.inheritedFrom=Inherited from %S
 
+# LOCALIZATION NOTE (style.highlighter.button): These strings are used inside
+# sidebar of the Highlighter for the style inspector button.
+# "Computed" refers to the Computed Style of the element.
+style.highlighter.button.label2=Computed
+style.highlighter.accesskey2=C
+style.highlighter.button.tooltip2=Inspect element computed styles
+
 # LOCALIZATION NOTE (helpLinkTitle): For each style property
 # the user can hover it and get a help link button which allows one to
 # quickly jump to the documentation from the Mozilla Developer Network site.
@@ -119,6 +126,12 @@ rule.contextmenu.copypropertyvalue=Copy property value
 # view's context menu copy property value access key.
 rule.contextmenu.copypropertyvalue.accesskey=U
 
+# LOCALIZATION NOTE (ruleView.*): Button label, accesskey and tooltip text
+# associated with the Highlighter's CSS Rule View in the Style Sidebar.
+ruleView.label=Rules
+ruleView.accesskey=R
+ruleView.tooltiptext=View and Edit CSS
+
 # LOCALIZATION NOTE (ruleView.empty): Text displayed when the highlighter is
 # first opened and there's no node selected in the rule view.
 rule.empty=No element selected.
diff --git a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
deleted file mode 100644
index 29b63269353..00000000000
--- a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- 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/. -->
-
-<!ENTITY window.title  "Developer Tools">
-
-<!ENTITY closeCmd.key  "W">
diff --git a/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd b/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
index e442518b66c..b72bd488a51 100644
--- a/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
@@ -60,9 +60,30 @@
 <!ENTITY btnConsoleWarnings     "Warnings">
 <!ENTITY btnConsoleLog          "Log">
 
+<!-- LOCALIZATION NOTE (btnPosition.label): The label shown for the menu which
+  -  allows the user to toggle between the Web Console positioning types. -->
+<!ENTITY btnPosition.label     "Position">
+
+<!-- LOCALIZATION NOTE (btnPosition.tooltip): The tooltip shown when the user
+  -  hovers the Position button in the Web Console toolbar. -->
+<!ENTITY btnPosition.tooltip   "Position the Web Console above or below the document">
+
+<!-- LOCALIZATION NOTE (positionMenu.above): When this option is selected the
+  -  Web Console interface is displayed above the web page. -->
+<!ENTITY positionMenu.above    "Above">
+
+<!-- LOCALIZATION NOTE (positionMenu.below): When this option is selected the
+  -  Web Console interface is displayed below the web page. -->
+<!ENTITY positionMenu.below    "Below">
+
+<!-- LOCALIZATION NOTE (positionMenu.window): When this option is selected the
+  -  Web Console interface is displayed in a floating panel. -->
+<!ENTITY positionMenu.window   "Window">
+
 <!ENTITY filterBox.placeholder "Filter">
 <!ENTITY btnClear.label        "Clear">
 <!ENTITY btnClear.tooltip      "Clear the Web Console output">
+<!ENTITY btnClose.tooltip      "Close the Web Console">
 
 <!ENTITY fullZoomEnlargeCmd.commandkey  "+">
 <!ENTITY fullZoomEnlargeCmd.commandkey2 "="> <!-- + is above this key on many keyboards -->
diff --git a/browser/locales/en-US/chrome/browser/devtools/webconsole.properties b/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
index 75784473847..68b02d01437 100644
--- a/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
@@ -32,8 +32,6 @@ close.button=Close
 close.accesskey=C
 update.button=Update
 update.accesskey=U
-cmd.commandkey=k
-webConsoleCmd.accesskey=W
 # LOCALIZATION NOTE FOR `jsPropertyTitle` AND `jsPropertyInspectTitle`:
 #
 # The "PropertyPanel" is used to display a JS object to the user.
@@ -168,12 +166,6 @@ remoteWebConsoleSelectTabMessage=Select one of the tabs you want to attach to, o
 # global console in the tabs selection.
 listTabs.globalConsoleActor=*Global Console*
 
-# LOCALIZATION NOTE (ToolboxWebconsole.label):
-# This string is displayed in the title of the tab when the web console is
-# displayed inside the developer tools window it is probably the same string
-# as webConsoleWindowTitleAndURL before the '-'
-ToolboxWebconsole.label=Web Console
-
 # LOCALIZATION NOTE (longStringEllipsis): The string displayed after a long
 # string. This string is clickable such that the rest of the string is retrieved
 # from the server.
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index eb46acb0418..1cde24633f1 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -37,9 +37,6 @@
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
     locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
     locale/browser/devtools/responsiveUI.properties   (%chrome/browser/devtools/responsiveUI.properties)
-    locale/browser/devtools/toolbox.dtd            (%chrome/browser/devtools/toolbox.dtd)
-    locale/browser/devtools/inspector.dtd          (%chrome/browser/devtools/inspector.dtd)
-    locale/browser/devtools/connection-screen.dtd  (%chrome/browser/devtools/connection-screen.dtd)
     locale/browser/newTab.dtd                      (%chrome/browser/newTab.dtd)
     locale/browser/newTab.properties               (%chrome/browser/newTab.properties)
     locale/browser/openLocation.dtd                (%chrome/browser/openLocation.dtd)
diff --git a/browser/makefiles.sh b/browser/makefiles.sh
index 2931b979c17..762153c4b98 100644
--- a/browser/makefiles.sh
+++ b/browser/makefiles.sh
@@ -39,7 +39,7 @@ browser/components/tabview/Makefile
 browser/components/thumbnails/Makefile
 browser/devtools/Makefile
 browser/devtools/debugger/Makefile
-browser/devtools/inspector/Makefile
+browser/devtools/highlighter/Makefile
 browser/devtools/scratchpad/Makefile
 browser/devtools/shared/Makefile
 browser/devtools/sourceeditor/Makefile
@@ -119,7 +119,7 @@ if [ "$ENABLE_TESTS" ]; then
     browser/components/test/Makefile
     browser/components/thumbnails/test/Makefile
     browser/devtools/debugger/test/Makefile
-    browser/devtools/inspector/test/Makefile
+    browser/devtools/highlighter/test/Makefile
     browser/devtools/scratchpad/test/Makefile
     browser/devtools/shared/test/Makefile
     browser/devtools/sourceeditor/test/Makefile
diff --git a/browser/themes/gnomestripe/browser.css b/browser/themes/gnomestripe/browser.css
index 4bf94b8d4b9..4c9964a0f79 100644
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1970,26 +1970,51 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter */
 
-.highlighter-outline {
+#highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-.highlighter-outline[locked]  {
+#highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Developer toolbar */
+/* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
 }
 
+#devtools-side-splitter {
+  -moz-appearance: none;
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
+#devtools-sidebar-box {
+  background-color: -moz-Field;
+}
+
 /* Highlighter - Node Infobar */
 
-.highlighter-nodeinfobar {
+#highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -1998,21 +2023,21 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter - Node Infobar - text */
 
-.highlighter-nodeinfobar-text {
+#highlighter-nodeinfobar-text {
   /* 100% - size of the buttons and margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*.highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*.highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*.highlighter-nodeinfobar-pseudo-classes {
+html|*#highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -2026,7 +2051,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   min-height: 26px;
 }
 
-.highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -2034,26 +2059,26 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-inspectbutton:active:hover,
-.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-.highlighter-nodeinfobar-menu {
+#highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -2072,7 +2097,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-.highlighter-nodeinfobar-arrow-top {
+#highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -2080,7 +2105,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-.highlighter-nodeinfobar-arrow-bottom {
+#highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -2088,12 +2113,12 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
+#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -2123,6 +2148,259 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
+/* Highlighter toolbar - breadcrumbs */
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin-bottom: -1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up {
+  -moz-border-start-width: 0;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px 13px 2px 13px;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(208,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(205,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  margin-left: 0;
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open],
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  margin-right: 0;
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - HTML Tree */
+
+#inspector-treepanel-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
+  -moz-margin-end: 0;
+  -moz-image-region: rect(0px 18px 16px 0px);
+}
+
+#inspector-treepanel-toolbutton[checked] {
+  -moz-image-region: rect(0px 36px 16px 18px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
+#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
+  border-radius: 3px 0 0 3px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
+#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
+  border-radius: 0 3px 3px 0;
+}
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -2306,13 +2584,33 @@ html|*#gcli-output-frame {
   background: rgba(0,0,0,.4);
 }
 
-#developer-toolbar-toolbox-button {
-  -moz-image-region: rect(64px, 22px, 80px, 0);
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+#developer-toolbar-other-tools {
+  -moz-image-region: rect(64px, 16px, 80px, 0);
+}
+
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
 }
 
 /* Error counter */
 
-#developer-toolbar-toolbox-button[error-count]:before {
+#developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/gnomestripe/devtools/command-responsivemode.png b/browser/themes/gnomestripe/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa599048c1065c7250a5cd74b9684724f3ded3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

diff --git a/browser/themes/gnomestripe/devtools/command-scratchpad.png b/browser/themes/gnomestripe/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cbc6176c96a66f4a56d81fed95c4c9327..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

diff --git a/browser/themes/gnomestripe/devtools/command-tilt.png b/browser/themes/gnomestripe/devtools/command-tilt.png
deleted file mode 100644
index f816bba59cedb2fb2069b4d0a4ff09225e99cdb7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

diff --git a/browser/themes/gnomestripe/devtools/common.css b/browser/themes/gnomestripe/devtools/common.css
index 59b66d44b4b..c2a1feb6378 100644
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -188,65 +188,6 @@
   position: relative;
 }
 
-/* In-tools sidebar */
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  background: transparent;
-  border-radius: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
-  color: white !important;
-}
-
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/gnomestripe/devtools/dock-bottom.png b/browser/themes/gnomestripe/devtools/dock-bottom.png
deleted file mode 100644
index 83842f236ef5ede55a268e67077532fc1764746f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

diff --git a/browser/themes/gnomestripe/devtools/dock-side.png b/browser/themes/gnomestripe/devtools/dock-side.png
deleted file mode 100644
index 9a940bc1e4e50a63d1522fc5604cb2cf44b05e82..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

diff --git a/browser/themes/gnomestripe/devtools/dock-window.png b/browser/themes/gnomestripe/devtools/dock-window.png
deleted file mode 100644
index 29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

diff --git a/browser/themes/gnomestripe/devtools/inspector.css b/browser/themes/gnomestripe/devtools/inspector.css
deleted file mode 100644
index 05465853427..00000000000
--- a/browser/themes/gnomestripe/devtools/inspector.css
+++ /dev/null
@@ -1,214 +0,0 @@
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-/* Highlighter toolbar - breadcrumbs */
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(208,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(205,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  border-left-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  border-right-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
diff --git a/browser/themes/gnomestripe/devtools/layout-background.png b/browser/themes/gnomestripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..6991cc0f2ab221e7488be16c3f9e4aa4d6228e73
GIT binary patch
literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/layout-buttons.png b/browser/themes/gnomestripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..8705bc51475de5e6759371cc30a32e67187f455a
GIT binary patch
literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/layoutview.css b/browser/themes/gnomestripe/devtools/layoutview.css
index 552c9841e84..4d653c5c5e0 100644
--- a/browser/themes/gnomestripe/devtools/layoutview.css
+++ b/browser/themes/gnomestripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,3 +42,17 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+}
+
+body.open > #header > #togglebutton {
+  background-position: -16px 0;
+}
diff --git a/browser/themes/gnomestripe/devtools/toolbox.css b/browser/themes/gnomestripe/devtools/toolbox.css
deleted file mode 100644
index 13b5b4997a5..00000000000
--- a/browser/themes/gnomestripe/devtools/toolbox.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/* 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/. */
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
-}
-
-.command-button {
-  margin: 0 10px;
-  width: 16px;
-  height: 32px;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-#command-button-responsive {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
-}
-#command-button-responsive:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
-}
-#command-button-responsive:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
-}
-#command-button-responsive.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
-}
-
-#command-button-tilt {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
-}
-#command-button-tilt:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
-}
-
-#command-button-tilt:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
-}
-
-#command-button-tilt.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
-}
-
-#command-button-scratchpad {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
-}
-
-#command-button-scratchpad:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
-}
-
-#command-button-scratchpad:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
-}
-
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: 3px 3px 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
-}
-
-.devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
-}
diff --git a/browser/themes/gnomestripe/devtools/treepanel-button.png b/browser/themes/gnomestripe/devtools/treepanel-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a8802216bf178bc05813fc592df30d91cd49415
GIT binary patch
literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn
index f10067a6a65..4fb4850ef75 100644
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -105,9 +105,6 @@ browser.jar:
   skin/classic/browser/devtools/common.css            (devtools/common.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
-  skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
-  skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
-  skin/classic/browser/devtools/command-tilt.png      (devtools/command-tilt.png)
   skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
@@ -156,8 +153,11 @@ browser.jar:
   skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
   skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
+  skin/classic/browser/devtools/treepanel-button.png  (devtools/treepanel-button.png)
+  skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
   skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
+  skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-collapse.png  (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png    (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png     (devtools/debugger-pause.png)
@@ -169,12 +169,7 @@ browser.jar:
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
   skin/classic/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
-  skin/classic/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
-  skin/classic/browser/devtools/dock-side.png             (devtools/dock-side.png)
-  skin/classic/browser/devtools/dock-window.png           (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
-  skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
-  skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
index 614317940f3..a4c6ed912e6 100644
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3368,35 +3368,58 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter */
 
-.highlighter-outline {
+#highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-.highlighter-outline[locked]  {
+#highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Developer toolbar */
+/* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
+#inspector-toolbar:-moz-locale-dir(ltr),
 #developer-toolbar:-moz-locale-dir(ltr) {
   padding-left: 2px;
   padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
+#inspector-toolbar:-moz-locale-dir(rtl),
 #developer-toolbar:-moz-locale-dir(rtl) {
   padding-left: 4px;
   padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
+#devtools-side-splitter {
+  background-image: none !important;
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
 /* Lion Fullscreen window styling */
 @media (-moz-mac-lion-theme) {
   #navigator-toolbox[inFullscreen][tabsontop="true"]:not(:-moz-lwtheme)::before {
@@ -3411,9 +3434,13 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   }
 }
 
+#devtools-sidebar-box {
+  background-color: -moz-Field;
+}
+
 /* Highlighter - Node Infobar */
 
-.highlighter-nodeinfobar {
+#highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -3422,21 +3449,21 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter - Node Infobar - text */
 
-.highlighter-nodeinfobar-text {
+#highlighter-nodeinfobar-text {
   /* 100% - size of the buttons + margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*.highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*.highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*.highlighter-nodeinfobar-pseudo-classes {
+html|*#highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -3451,7 +3478,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-color: transparent;
 }
 
-.highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -3459,26 +3486,26 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-inspectbutton:active:hover,
-.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-.highlighter-nodeinfobar-menu {
+#highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -3497,7 +3524,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-.highlighter-nodeinfobar-arrow-top {
+#highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -3505,7 +3532,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-.highlighter-nodeinfobar-arrow-bottom {
+#highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -3513,12 +3540,12 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
+#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -3548,6 +3575,256 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
+/* Highlighter toolbar - breadcrumbs */
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin-bottom: -1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up {
+  -moz-border-start-width: 0;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  border-style: solid;
+  border-width: 1px 13px 2px 13px;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(208,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(205,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open],
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - HTML Tree */
+
+#inspector-treepanel-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
+  -moz-margin-end: 0;
+  -moz-image-region: rect(0px 18px 16px 0px);
+}
+
+#inspector-treepanel-toolbutton[checked] {
+  -moz-image-region: rect(0px 36px 16px 18px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
+#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
+  border-radius: @toolbarbuttonCornerRadius@ 0 0 @toolbarbuttonCornerRadius@;
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
+#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
+  border-radius: 0 @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0;
+}
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -3726,13 +4003,33 @@ html|*#gcli-output-frame {
   text-shadow: 0 0 6px hsl(208,100%,60%);
 }
 
-#developer-toolbar-toolbox-button {
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+#developer-toolbar-other-tools {
   -moz-image-region: rect(64px, 16px, 80px, 0);
 }
 
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /* Error counter */
 
-#developer-toolbar-toolbox-button[error-count]:before {
+#developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/pinstripe/devtools/command-responsivemode.png b/browser/themes/pinstripe/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa599048c1065c7250a5cd74b9684724f3ded3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

diff --git a/browser/themes/pinstripe/devtools/command-scratchpad.png b/browser/themes/pinstripe/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cbc6176c96a66f4a56d81fed95c4c9327..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

diff --git a/browser/themes/pinstripe/devtools/command-tilt.png b/browser/themes/pinstripe/devtools/command-tilt.png
deleted file mode 100644
index f816bba59cedb2fb2069b4d0a4ff09225e99cdb7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

diff --git a/browser/themes/pinstripe/devtools/common.css b/browser/themes/pinstripe/devtools/common.css
index 7fa892e4575..c8cfa326c10 100644
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -203,60 +203,6 @@
   position: relative;
 }
 
-/* In-tools sidebar */
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  padding: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  padding: 0;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
-  color: white !important;
-}
-
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/pinstripe/devtools/dock-bottom.png b/browser/themes/pinstripe/devtools/dock-bottom.png
deleted file mode 100644
index 83842f236ef5ede55a268e67077532fc1764746f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

diff --git a/browser/themes/pinstripe/devtools/dock-side.png b/browser/themes/pinstripe/devtools/dock-side.png
deleted file mode 100644
index 9a940bc1e4e50a63d1522fc5604cb2cf44b05e82..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

diff --git a/browser/themes/pinstripe/devtools/dock-window.png b/browser/themes/pinstripe/devtools/dock-window.png
deleted file mode 100644
index 29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

diff --git a/browser/themes/pinstripe/devtools/inspector.css b/browser/themes/pinstripe/devtools/inspector.css
deleted file mode 100644
index 0c105cfe4b3..00000000000
--- a/browser/themes/pinstripe/devtools/inspector.css
+++ /dev/null
@@ -1,229 +0,0 @@
-%include ../shared.inc
-%filter substitution
-
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-toolbar {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-#inspector-toolbar:-moz-locale-dir(ltr) {
-  padding-left: 2px;
-  padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
-}
-
-#inspector-toolbar:-moz-locale-dir(rtl) {
-  padding-left: 4px;
-  padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
-}
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(208,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(205,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  border-left-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  border-right-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
diff --git a/browser/themes/pinstripe/devtools/layout-background.png b/browser/themes/pinstripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..6991cc0f2ab221e7488be16c3f9e4aa4d6228e73
GIT binary patch
literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/layout-buttons.png b/browser/themes/pinstripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..8705bc51475de5e6759371cc30a32e67187f455a
GIT binary patch
literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/layoutview.css b/browser/themes/pinstripe/devtools/layoutview.css
index 552c9841e84..4d653c5c5e0 100644
--- a/browser/themes/pinstripe/devtools/layoutview.css
+++ b/browser/themes/pinstripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,3 +42,17 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+}
+
+body.open > #header > #togglebutton {
+  background-position: -16px 0;
+}
diff --git a/browser/themes/pinstripe/devtools/toolbox.css b/browser/themes/pinstripe/devtools/toolbox.css
deleted file mode 100644
index cb8a8b632a9..00000000000
--- a/browser/themes/pinstripe/devtools/toolbox.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/* 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/. */
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
-}
-
-.command-button {
-  margin: 0 10px;
-  width: 16px;
-  height: 32px;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-#command-button-responsive {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
-}
-#command-button-responsive:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
-}
-#command-button-responsive:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
-}
-#command-button-responsive.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
-}
-
-#command-button-tilt {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
-}
-#command-button-tilt:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
-}
-
-#command-button-tilt:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
-}
-
-#command-button-tilt.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
-}
-
-#command-button-scratchpad {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
-}
-
-#command-button-scratchpad:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
-}
-
-#command-button-scratchpad:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
-}
-
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
-}
-
-.devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
-}
diff --git a/browser/themes/pinstripe/devtools/treepanel-button.png b/browser/themes/pinstripe/devtools/treepanel-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a8802216bf178bc05813fc592df30d91cd49415
GIT binary patch
literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn
index e69772656f9..600584c99e5 100644
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -173,9 +173,6 @@ browser.jar:
 * skin/classic/browser/devtools/common.css                  (devtools/common.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png             (devtools/commandline.png)
-  skin/classic/browser/devtools/command-responsivemode.png  (devtools/command-responsivemode.png)
-  skin/classic/browser/devtools/command-scratchpad.png      (devtools/command-scratchpad.png)
-  skin/classic/browser/devtools/command-tilt.png            (devtools/command-tilt.png)
   skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
@@ -226,8 +223,11 @@ browser.jar:
   skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
   skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png              (devtools/dropmarker.png)
+  skin/classic/browser/devtools/treepanel-button.png        (devtools/treepanel-button.png)
+  skin/classic/browser/devtools/layout-background.png       (devtools/layout-background.png)
   skin/classic/browser/devtools/layout-background-grid.png  (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
+  skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-collapse.png       (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png         (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png          (devtools/debugger-pause.png)
@@ -239,12 +239,7 @@ browser.jar:
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png   (devtools/responsive-background.png)
   skin/classic/browser/devtools/tools-icons-small.png       (devtools/tools-icons-small.png)
-  skin/classic/browser/devtools/dock-bottom.png             (devtools/dock-bottom.png)
-  skin/classic/browser/devtools/dock-side.png               (devtools/dock-side.png)
-  skin/classic/browser/devtools/dock-window.png             (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css     (devtools/floating-scrollbars.css)
-* skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
-* skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css
index 96d3b972ad3..b45ccb6932d 100644
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -2652,26 +2652,50 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter */
 
-.highlighter-outline {
+#highlighter-outline {
   box-shadow: 0 0 0 1px black;
   outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-.highlighter-outline[locked]  {
+#highlighter-outline[locked]  {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
   outline-color: rgba(255,255,255,0.7);
 }
 
-/* Developer toolbar */
+/* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked=true] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
 }
 
+#devtools-side-splitter {
+  border: 0;
+  -moz-border-start: 1px solid #242b33;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+}
+
+#devtools-sidebar-box {
+  background-color: -moz-Field;
+}
+
 /* Highlighter - Node Infobar */
 
-.highlighter-nodeinfobar {
+#highlighter-nodeinfobar {
   color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
@@ -2680,21 +2704,21 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter - Node Infobar - text */
 
-.highlighter-nodeinfobar-text {
+#highlighter-nodeinfobar-text {
   /* 100% - size of the buttons and margins */
   max-width: calc(100% - 2 * (26px + 6px));
   padding-bottom: 1px;
 }
 
-html|*.highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-html|*.highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-html|*.highlighter-nodeinfobar-pseudo-classes {
+html|*#highlighter-nodeinfobar-pseudo-classes {
   color: hsl(20, 100%, 70%);
 }
 
@@ -2709,7 +2733,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-color: transparent;
 }
 
-.highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton {
   -moz-border-end-width: 1px;
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-end: 6px;
@@ -2717,26 +2741,26 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-inspectbutton:active:hover,
-.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-.highlighter-nodeinfobar-menu {
+#highlighter-nodeinfobar-menu {
   -moz-border-start-width: 1px;
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
   -moz-margin-start: 6px;
 }
 
-.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
 }
 
-.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
@@ -2755,7 +2779,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-repeat: no-repeat;
 }
 
-.highlighter-nodeinfobar-arrow-top {
+#highlighter-nodeinfobar-arrow-top {
   margin-bottom: -8px;
   margin-top: 8px;
   border-right-color: hsla(210, 19%, 63%, .5);
@@ -2763,7 +2787,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
 }
 
-.highlighter-nodeinfobar-arrow-bottom {
+#highlighter-nodeinfobar-arrow-bottom {
   margin-top: -8px;
   margin-bottom: 8px;
   border-left-color: hsla(210, 19%, 63%, .5);
@@ -2771,12 +2795,12 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
 }
 
-.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
+#highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
 }
 
-.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
+#highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
   margin: 7px 0;
 }
 
@@ -2806,6 +2830,261 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   font-size: 120%;
 }
 
+/* Highlighter toolbar - breadcrumbs */
+
+#inspector-breadcrumbs {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
+     This negative margin compensate the extra row of pixels created
+     by the shadow.*/
+  margin: -1px 0;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up,
+#inspector-breadcrumbs > .scrollbutton-down {
+  -moz-appearance: none;
+  border: 1px solid hsla(210,8%,5%,.45);
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 1px 0 1px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up {
+  -moz-border-start-width: 0;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px 7px 16px 0px);
+  margin: 0 5px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px 14px 16px 7px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.inspector-breadcrumbs-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 2px 13px;
+  outline: none;
+  color: hsl(210,30%,85%);
+  width: 85px; /* Can't use max-width. See bug 723132 */
+  /* The content of the button can be larger than the button */
+  overflow: hidden;
+  min-height: 25px;
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > .button-box {
+  border-width: 0;
+}
+
+.inspector-breadcrumbs-button:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
+  color: hsl(200,100%,60%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
+  color: hsl(200,100%,70%);
+}
+
+.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 70%);
+}
+
+.inspector-breadcrumbs-id,
+.inspector-breadcrumbs-classes {
+  color: #8d99a6;
+}
+
+.inspector-breadcrumbs-pseudo-classes {
+  color: hsl(20, 100%, 85%);
+}
+
+/* Highlighter toolbar - breadcrumbs - LTR */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
+.inspector-breadcrumbs-button:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open],
+.inspector-breadcrumbs-button[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked] {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - breadcrumbs - RTL */
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
+  border-right-width: 0;
+}
+
+.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
+}
+
+#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
+}
+
+.inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
+.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
+}
+
+/* Highlighter toolbar - HTML Tree */
+
+#inspector-treepanel-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
+  -moz-margin-end: 0;
+  -moz-image-region: rect(0px 18px 16px 0px);
+}
+
+#inspector-treepanel-toolbutton[checked] {
+  -moz-image-region: rect(0px 36px 16px 18px);
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
+#inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
+  border-radius: 3px 0 0 3px;
+}
+
+#inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
+#inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
+  border-radius: 0 3px 3px 0;
+}
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
   padding: 0;
@@ -2989,13 +3268,33 @@ html|*#gcli-output-frame {
   background: rgba(0,0,0,.4);
 }
 
-#developer-toolbar-toolbox-button {
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+#developer-toolbar-other-tools {
   -moz-image-region: rect(64px, 16px, 80px, 0);
 }
 
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /* Error counter */
 
-#developer-toolbar-toolbox-button[error-count]:before {
+#developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
diff --git a/browser/themes/winstripe/devtools/command-responsivemode.png b/browser/themes/winstripe/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa599048c1065c7250a5cd74b9684724f3ded3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1083
zcmV-B1jPG^P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000C6Nkl<Zc-qyL
zZAevj9LN9X$h<4O&Glf*%BNah3|g&BTO-FTGBsO4PaCvw=xodCrlOb;F*k=pDYFnW
zn>{UzO0owih;|zVdoglM>cwC%#$YhU7`2<(IQxCw_q6}zaJu(MZ+h|J_xtPTd++so
zJ)EP$j~+kQsO_iXh4I1^PauOVU#LN7^a3-A^a_`}z>Ffl2!DBj8D(s0Nm}ydo%?w`
z1C|$%K~_Ed?*r@^4a|ZIqePKEM~O04@0yv_{;d@_;0<JuwF}q{-Y+ei5I@%Me;ROX
zpIOics%z_$qUGVhC5rq3n!adBj+Tc5mnfsSDl@SEwgr48)#YaH`eHL@T_o9S3e49_
zmYVZdE%OxzKd^md?E)Hryn!LJc4+vYbeVOWwQy|U*gmu1JmBv-nCs;15a=;aA7}DA
z;O|1r-Q)~8^7QQjGF!f}fRSIGx2XN=yMdY`>)&V(-Q&D#&MBA{H!e9*c-hF?ynud0
z0rdcTU;pKdDbv%?b`mDedI7r69h@D(B~J%9eDWKJJx`wn%xb=20i!Uu@Rh0)MK3Jg
zkQtZtRyrom^7F(u58YBg_5l5e0_p(w9cURlCe9HBIDK#iaBpMI&bMJF4xjuAxL?)t
zI6L$7S-`8GUbBEvv@?5ATWC<e<%#lb$7AA*0v7KNDWLm$0W|=7@7eRI@~>xN$HduD
z0DbP@G<lK_YkBO%;gg?%hdg~2u=k1uP{5?JgGDdC_xWVG#f`<pd8B~W>k8<;UO*MV
z{`b&ug}m`JIagxh>?nXfcW?@DZ)U!gvss|$^vO?vdmnTCoPEwbeHJit_XP`}fQ6s*
z|Bw~zD#>lUIEaa}@lO2&J}<=SzFt5OV8^v5`1Q#@JXdh|GQo)vT=H~Q3l5+B2%_Xa
zcK9q{M%_6J7%R5Vjhp>;8m|8*%qyH>Z2T;BUc;Gvs`S81x~~_o4PbX62Oj{t?sEq{
zM7gj^=oZ}kd&DhYAq+Tt7LZZhYXPI6G7Hzfj@$;vy|(jM`|RLx-1jHzzFxpq;8uWq
z3-N*<yY6!bM~QNv<-_j&Ac#Frp9Q4vIB5Z6WlbP=&pD+d1^DFIAjQmCJ4>De65-H~
zDBvR?yAS6m_-vn9aD<HE*%dgNugLc#A$lGTeHM_mwZ{Spn_HL5b)FpY%wN$p)p)ll
z%~-cLLoR_7IP@b5*aBqV77Mn|Ea)OfV?py3xkCnGggy({(rtn4+OMpfy3<bu4*mZN
zxE~%Wl^6Ta3&_|7Jb3u1O=hPTm_Z(Qo|`hi^8zzUp8nEP$~qsUmLImffDE$sHJ%{&
zJ(9ozMx75ogS<Is#dvdW(R_K<&li@)NIo*i{tKm$=he1VCV&6{002ovPDHLkV1ncB
B5lR36

diff --git a/browser/themes/winstripe/devtools/command-scratchpad.png b/browser/themes/winstripe/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cbc6176c96a66f4a56d81fed95c4c9327..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq001xm000mO1^@s6P_F#30006HNkl<Zc-qC5
zPfHt76vbV+5d8}7Tofs2(W;=((r?mDX;F!&U_`-w1(zjaD@B7+1ec|v7^+rcocx)n
z7%gc*P=uDEO^iak2VUTLnAf><<KoAhcjuhp+<`Eut5&OZ^$kt`%Y*0dJ)l&%9noq7
z=ijTeJD=BS_X1NY?JlsQ((e3kwdMuNmD}i_t5U@1w+bD#3gE%<%hL5st)xQ7DPO!Q
zS8_)GQs|<+00t9@&FvN`)~wZ3V0ka&x6AdBR#X1suyFEBu3cKq3ycesK&z?1CzJwO
zP5Cq79B4H!FqTSZyEndWKdFH;<}RqfQpVr!v-3D(?t=2C{=v};JC8HwE_i`aAzHS;
z8FLr>8xR($B+hXcl>Z_8WH5KZ3k-u@FY|OgvDx-7;DMJ4%mXj$_lD)+ftT{%L2m!>
zc~~AEczJ;#!)Q4Kc;KZ1AAwn9A%uB&DPJ%gD=F{-gWy{-)$wJ0<8cj~F%N<Yd;q&%
zw#UxnjCl~0KLF`mzR%9%jCl~eKtGT-91(^rBA5q31!fI%4CX;l-Z$hK%!A+s-fZn8
z+dr?awFZHE@Yqm+ndDx&)0M|Pcx))2@pAcIS04A^vEc<?%iA6h1|1B*V?zaE!fXgJ
z8_Ih^It0(=-U9N8e<{OPTHv<}$R~bU=I^w?Z|DDB-y~$7(gHvKnQIi9v>5+`=kEaG
WYW7HKLO22d0000<MNUMnLSTZG<`g>s

diff --git a/browser/themes/winstripe/devtools/command-tilt.png b/browser/themes/winstripe/devtools/command-tilt.png
deleted file mode 100644
index f816bba59cedb2fb2069b4d0a4ff09225e99cdb7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn000I{Nkl<Zc-qC6
zc~F#f9L9NfQBX_+9WPKhL>7@lZbk!4AxRxGAezZD@!&{M4i(X$6bSLi4nr{%1$IzT
z(FkL7Fbiey)=J}aIhSL(1+|&&`_R75uN{6fP5sdypXuB8d7k&(-^0$kuR8rN{?Hjd
z^0j{hvj2PD>%{%P?Q|k?B!nI@h8PDhV+W1(BCGuY@c+7mC9#;;3^el$Xq*GEyWxZr
zv5`0mG_y0be~{NF77%H~J)oI=plNw=V1dvj3<#sqF>(vrgV%!H(#zy;WZta<m}$2T
z8a(hKGngHqix5VH8?l1e)i>~BOJ`4CU`2JUH^7V?G<e|EWW+;E(v*}yoF(s(uHOFe
zs@l4R05f*b;DJ|@5%cE6dLoZ#diMNfc~4(|^3(c;r2sQ_(BOd=nZW{r5099hROC7P
z(Df9L^s>^q$L<Wcep9Zn-CuIfI_Xjhz>FO<c;H0_Ssl$G66pg*ws&^>|MsN9>+XX`
z&QB_;>{?ZwGJqL7Xz;*`3{yY>?b18Cd&4TKYTn}Ip}_+$GE4y~I$&8>@3Z8pTE$Xc
z9vVFGB7>~3Jay8XBe&E}UzFC(Oewx(^>O}Q*^b<3t2lXxMVx#Mz>FO<c;H0_S+Rh4
zRaZ|$eUs9^sih5HRg0m31`oW*Fa@0J?(09SY;6y1Zf&2-%R_?)USya8+GuyPRn@hJ
z4m_WihXxP4$RH~$-DYXE?<ckFv#SkO2^R{@Vsny=BeOP4jmceZw*5>1z>FO<c;H0_
zS+Rh)o@WE`E$tl%b&butpVl`<H8d&Tp})30z>FQVhUS*g#}(Dy$S?(*?d^Y_PsN<4
zLl!hDThr;k8z}1rFk=Ue?s15&^&T=z0ZRH-C_B3QTG~3gTFG;xMb()|-xe=`89Qin
zk85<TEyy4%ERM38ky@g*-dmz}NV}?b+kZvvl3Jv&NxX2@EJnVAh@<&5cF=5-i)yFD
zX6GV<tXRM{7Ahl-Zn#U)(DVtQ8%EYB>V2}Z<<sclV?Ydtk160Z3zcz(K4?B2_yVA7
z9ieNi`mX2)8Iy-s%r~-78I4p%6CJo2(6!3(d4Bx)rX!PY6brE2Q><o@B^9gflP{}X
zQ~$ztPodIudtRR5s?;?Sw?JoM-dZ2{*aBjB6kaa2)ZA2$c=a;^jVVCRqqMAi_T;H%
zqlU;s7xM}p_a6T0$;m5T6_EJ7nuk&F=R2hC?|VpWeXS*?&c@Pl7Gs3@>+PVi1w`?n
zn@Ksp!BI>BIXrlIXiNb$Ja~C%Vgb{47N~g$UaQ@ulV%!9M^Dx#bO}Msumx=90evW-
zF$J9B0i6S@RdV6yE5!mVw&kmN2!0XPIJ8Gnp^k`{VGG#AgI54FrhpS%_y=IM$2@p>
zXkr28(Rpef&^<o6s6&Wvi6ex71Se>00pUELGYEtQ5d@7XAd?4l27z!Sc4}$A@X*Rj
zh<U^*Q4@SaEzBab)jWhHF)})|lrYc@&oY*6&HczZ{`4bg$POMXzu=M?{l>qod1Vb{
zflf$?S;R`(h0zn)4;it5lIx|j=xH5Bb2@QM3-R^Zi%21k(o;PY8ED|v-TQ8;?%sVg
z-zFYtA--Pw6Bmg)^k$ky8Fy$BSO4*bfeGQp>%P8W8h-qxY4`~>ix8OLY!IGlZWEi6
z=n|KwaEO(^G!4zTW)$@4Mq~#I&^&1LqqoM5uU6F0p`WqUbny^Cx(g9Z^M~}4I0qhh
zkr4|J^JxbU8Pm@lUYqyRK10J|;vjKA*`^ABN6hzY<ui_FnNqnC^rm-(`F8;BeFad-
zo8V#dQWHBpiIu0Z#LmxYq)*5P6IUKMKW#%sr)kKyYG4zYnd!1Mx7~L0NtH?PSJ?)O
zwk(s(UScnic~3?b1pu)KfzXr9vLAix-UD0us{~LP0k`izw8IV>JZz?4gvr0@>-YMT
z%4#oqZH=cg;%WBAPRzf`aPmu*`5V?K8s4QhzHG{$!i?Qec|70<UFrB4qa;%uCrWG<
z*bH+I@*Nwr`%9Cxhbv`a8NW|hu`hX;=W0)h-9njUn&Sj`kwKO%K)Z}##7Kad`!M97
zo#*)ebKW)jBoK>`68cgT`*HLaw#2tW;;_g;Vl&@dI>liuG<e_@bAJM9K6DX`52()o
O0000<MNUMnLSTYCryzI$

diff --git a/browser/themes/winstripe/devtools/common.css b/browser/themes/winstripe/devtools/common.css
index 89ad2d02ab7..50bb5c02066 100644
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -209,65 +209,6 @@
   position: relative;
 }
 
-/* In-tools sidebar */
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  background: transparent;
-  border-radius: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
-  color: white !important;
-}
-
 /* Theme */
 
 .devtools-theme-background {
diff --git a/browser/themes/winstripe/devtools/dock-bottom.png b/browser/themes/winstripe/devtools/dock-bottom.png
deleted file mode 100644
index 83842f236ef5ede55a268e67077532fc1764746f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0YFJa
zK~y-6#gn~C13?spzuCWlN(=#wCY?p<l>U^m#7D5O5DN<nAI8GMLM$wN1jRC8vyGMA
z7J@}2RftI-u(La3lMTzdNrV(0xNz@f&Y64eFhXn1Dlk@J0~UZ&syRSu8qN|<2n>Kh
zIOvAfv{}Bpy}3APx_hQ+E}SZkWA*&<`f+)6eGl{!f$e6~t!l(Liq(<<1g?8r1-8-x
zYak{7r)TG5uj2=R%rNc4gZ=u`<HLqwm=ai@?Enx!1mJc2H?8rLIt9z?_#@yb#hD3^
z+$f+Z1iL`?eFad=PWDUS>oaHojd>f8ks77z^u{G13$|4$*j7bGs-Kr9=kg|q0LGK>
zJ!#C#^DL;Ww?9D5ENB?E+8#=&7+4reskqhl&@coLT5IghS{Xqd*vZ(+Lj?5D1oFGv
d7ytene*n2yf``D{mBs)7002ovPDHLkV1mh##`^#O

diff --git a/browser/themes/winstripe/devtools/dock-side.png b/browser/themes/winstripe/devtools/dock-side.png
deleted file mode 100644
index 9a940bc1e4e50a63d1522fc5604cb2cf44b05e82..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0dYx0
zK~y-6#gn^A13?&tzkg#^qGBXPiUd)DAZTgt4PpYmfM6lMl7fg>Soj`_MNAq&5H*Pw
z3NaSm5~HhonXzzJ)=Nxb;lR(pFz4{i;f!dl`O7l?qz1YG%z?BC4ESSq&?uk@+}IDb
zmoEP>v9Y$YoX=&4Baui)s&b{;oSmCr0WJcAWG<IYYNY9Usv~wLlQDoq*q{gG1z=%u
z$tn~}RlorTFV9bty)knn5I<S=nTP;%gP#E)zJNlpbf7gwz!hNvn0m78lOI4NY(QWD
z+-t3G)ni>p<EdxB>5G}8!KIdEm%}dK3<Q*VtcT0tv@H9mT^?Zr*Wb-(JY_hIs~}Cc
zFJ_K~2#$Xxn3<j&-`U-3MdPVgV8|yp{FOk1tCaE#!(e-BvtLB=AFi&~_$pFL!F!=T
zs(iP)wytd3_FPXrIIedajQ_MxQ`j$}-`j|2t%=6d{XhmG4aC~v2AKfYXev&lb|?S-
a8{Yua!lFpTFEAhg0000<MNUMnLSTZp`P~Wt

diff --git a/browser/themes/winstripe/devtools/dock-window.png b/browser/themes/winstripe/devtools/dock-window.png
deleted file mode 100644
index 29d3b319a99a3c8b2ded8fbd8ae8d70970c792a2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|6?8>dbVG7wVRUJ4ZXi@?ZDjyCFETeT
zF*2O>TrB_q0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#R<lvWx%#0)I(F
zK~y-6rBlyKR8bf`_rCk)jc*)B#2=&c!!Zn76qwRNa|(i>c7@u?RTxEB5kmh%P)N(7
zT`i)>qChBuC?O1glu}BRT7)w?m6JZ7^WK|x@7KZt6L)^g?{Ln6^PP_o5q2_c>!Lii
zyS#bd-dMmeN|lt`l7tX4lU@8dJw1~ZTfxg0`;K&Xo;;DNPjID(6VZPrn#PsmdUAYh
zB6F$#%FV3;C3UsYhK6LEy?HzKJCj{p*M;VT{nd~Po|5K)))u{`Wq*Zfnzf=b(G)p<
z_DnjRZjb#~%9_zwGAcA?Umv(JH}vrCYXIw;3_Ji$PoKX!To;X+j^hMGJRVPVcXu66
z)hEnSgTp0QR>3a@gTYw<;{dj%Y#BzN*_Sd1fVh-0l1e4*sSnc&Ev;>zZ{5DLTo%++
zC=~LyAp?LCLKKO}Q$*lWN=PY-wr%I%O^gg{oM$x7lx0~40DT()({(-KoVy?*A(bL2
zRnas}8$hn6y1E{K-O=9G7&1$aMj{cL^NkQS>B_}rt1(<!8q{^Ypok!_(In3=7JUFt
zHkT``ILhnq>kR<t0KfqtZ+k2p3P1pofc4SI8S=bhK`5n|5W-ot)=B`>T<Gmt8XSBa
zud1pPuICkq2<eW4bnbLdaq!7AV`TWHUlC0>qhsUw?BddbV4M?U%x!GkWjq>saY$!;
z?aSA1`kHMU05Kv$G9L3nC5AsaHMKHu?dk-88~_UlSYl;mHGl8^13J~!S!k$_>rx?j
zOoz(>2iWMk0_4cV$KdSTd=9{S0P<fgm=>-rFDnc035UZ`-}m+HPRBWCQb}w1SN@Zm
k|31GNV>|suz9Tk(KRCWA;;1x%9RL6T07*qoM6N<$g8X4xGynhq

diff --git a/browser/themes/winstripe/devtools/inspector.css b/browser/themes/winstripe/devtools/inspector.css
deleted file mode 100644
index 1b47e9f610f..00000000000
--- a/browser/themes/winstripe/devtools/inspector.css
+++ /dev/null
@@ -1,218 +0,0 @@
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-/* Highlighter toolbar - breadcrumbs */
-
-#inspector-breadcrumbs {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     inspector-breadcrumbs-buttons, to match toolbar-buttons style.
-     This negative margin compensate the extra row of pixels created
-     by the shadow.*/
-  margin: -1px 0;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up,
-#inspector-breadcrumbs > .scrollbutton-down {
-  -moz-appearance: none;
-  border: 1px solid hsla(210,8%,5%,.45);
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 1px 0 1px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px 7px 16px 0px);
-  margin: 0 5px;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px 14px 16px 7px);
-}
-
-#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.inspector-breadcrumbs-button {
-  -moz-appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-width: 2px 13px;
-  outline: none;
-  color: hsl(210,30%,85%);
-  width: 85px; /* Can't use max-width. See bug 723132 */
-  /* The content of the button can be larger than the button */
-  overflow: hidden;
-  min-height: 25px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > .button-box {
-  border-width: 0;
-}
-
-.inspector-breadcrumbs-button:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-  color: hsl(200,100%,60%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
-  color: hsl(200,100%,70%);
-}
-
-.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-.inspector-breadcrumbs-id,
-.inspector-breadcrumbs-classes {
-  color: #8d99a6;
-}
-
-.inspector-breadcrumbs-pseudo-classes {
-  color: hsl(20, 100%, 85%);
-}
-
-/* Highlighter toolbar - breadcrumbs - LTR */
-
-.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
-  border-left-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
-  border-right-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked] {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-/* Highlighter toolbar - breadcrumbs - RTL */
-
-.inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
-  border-right-width: 0;
-}
-
-#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
diff --git a/browser/themes/winstripe/devtools/layout-background.png b/browser/themes/winstripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..6991cc0f2ab221e7488be16c3f9e4aa4d6228e73
GIT binary patch
literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru+yxsDEjaStXd3_k17b-;
zK~y-)Rg}wa+(r;ZPj|D~<P6Cfiqcpy3~Q5Bwt@FqWgp~Q@)h|?$$;U<j5vHXo3HLH
z1P_pHRiSXJ?!gs*|MTzfT5DcjUbw%%r|UY5F|=(<S(emw&Ew-E08tdNZ5!wFnX)W#
z&JjfsNs=&*BayY1d7gQEe57q#(ljN@GK?`S%R-iA^nFi~BzW)9TJ!MmfDi&91byF=
z=Q&N&Ag|XeNs^$orYH)u)_nf_nK+K=x{i16-m$JL(=@Sd8^bUVLLh{|IF3xygb;%L
zevd565-BB3(=d)ByWI|B4Axrq`#tNr5<)--aZ@`@6Mf&4rYQhT(_pPd{yfDPLmbCg
zYf(y(Wf=h1>y@%BDT)H`J*U$N?>)QSj&)sG*Oe^Gn5Kznx7)F88^#!>X+mpFmSrr<
zf^&}3>BKM$EXzU&fxhpNQW8QS%QA!zeEIT)BuS7_6mhv+`1<uLLI}F9V_jF8rr~%z
z^8EZvmSt?)hEj@US*WUt!{Gpcl#*px5JDhB2vk*t)|z>qQA#n6BUM!)gy8AviMp=o
z`~HSOUDv$4ydZ>l`<0Z;^Ncjc;JrsFMb~xA^Gs0`SZjHGeWk8zq?Fv>-}CzVij<PR
z?|FK9;>V94L{Y@U!vj$ip?>-8)BB(N2q8Ee4h+M9bMD4g2!YGxf>H`=Ek#i<jw4x?
zA*IAQhm?}&a5%7S+s*!M+sN~rbzK>Tfh0+Y<Cr*(QA)9G8|%8FwWe)bmSws1BJVxc
z+BY|(#Cy-OEUfE_F@|9n0GQ_)=NunDe#ALP*L5UGf>H`&3?T$$*L4iTK;QQ_&Z??H
zDaC%jrz}f`VW21qwr%74_wRIFhf<0pNl4R_JkN2?p+5cj*ZZH~g%ED1Ow+`&EO_s^
zySpQbB8)Kr9FIqwbN`!}rs>U1t@RC!d7jy}4XrhC9N+5C&(BzENz)W#3~8Dogur``
zbB;XEk>~T7IF6a;nd9+zi=U=x$n%`@`Hc4-V+>VQF^(f`+cJ(L)>^#x0DSxQ?M+$R
zw)B0E5Q4kAJC4WW4GVy2n#i(@%jH5{*J!PA&hg>H2SNz!b~}oqK>hmZkM~g&aXOvo
z`=0Cdddn^EJ^THhWmy=8;TBWZ>lLLGLWtYqaUA&%hHv{do)ciN00000NkvXXu0mjf
DG;`Ue

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/layout-buttons.png b/browser/themes/winstripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..8705bc51475de5e6759371cc30a32e67187f455a
GIT binary patch
literal 447
zcmV;w0YLtVP)<h;3K|Lk000e1NJLTq001BW000mO1^@s6cL04^0004oNkl<Zc-rli
z&q@Mu6h?nCxvizE3iDr!dJM}PeXA_el)ysG3{$Y6f_6Pgw8~ep@5Bsuj1<L1Em|D7
z^WA&AR~gVvCX-*~PaF^vo>*HF4|i4HQFuB3#bx}l_*jrJ4(_VH;~JMbe0AA!TePMr
zwT0zI8wYo`Z_M+90}k#LUQLlHcH=q!3+nHE99;8p{A-sk40-+udd!$_2aFUpL$t6H
z&lU#iZ2~n}bOr}^%1<BN>NzR4W{_mYd^=#M@B*}`rG@=qc?_t@=!J7QxKW?Jmn%J!
z1)c+HGWDLAG2afjQ&`u})6}A#Ew>LKqsI)hIJi+?G+eqkVo`WRWcedKy;BYI?SP)b
zGyOc5dfpas@+f5Vm|+%&Jn9EjwP?UX90-;VwY<uV`E~#=*@?bgO}vTs8PKaSi-SAm
z8>d>>_jbz<Kus2%!Lb8&@;3@A;&?$SIJk5CijM67^(>zQyp4VTTtU~R^6f=nc73l{
p$6eJAU$BJOT9O3rs{a4K;U}VSGM><Zg2Dg*002ovPDHLkV1gOT${7Fv

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/layoutview.css b/browser/themes/winstripe/devtools/layoutview.css
index 552c9841e84..4d653c5c5e0 100644
--- a/browser/themes/winstripe/devtools/layoutview.css
+++ b/browser/themes/winstripe/devtools/layoutview.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
   border-top: 1px solid black;
   -moz-box-sizing: border-box;
@@ -42,3 +42,17 @@ body {
   border-style: solid;
   border-color: hsl(210,100%,85%);
 }
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+}
+
+body.open > #header > #togglebutton {
+  background-position: -16px 0;
+}
diff --git a/browser/themes/winstripe/devtools/toolbox.css b/browser/themes/winstripe/devtools/toolbox.css
deleted file mode 100644
index dae0d34be44..00000000000
--- a/browser/themes/winstripe/devtools/toolbox.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/* 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/. */
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
-}
-
-.command-button {
-  margin: 0 10px;
-  width: 16px;
-  height: 32px;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-#command-button-responsive {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 16, 16, 0);
-}
-#command-button-responsive:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 32, 16, 16);
-}
-#command-button-responsive:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 48, 16, 32);
-}
-#command-button-responsive.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-responsivemode.png), 0, 64, 16, 48);
-}
-
-#command-button-tilt {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 16, 16, 0);
-}
-#command-button-tilt:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 32, 16, 16);
-}
-
-#command-button-tilt:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 48, 16, 32);
-}
-
-#command-button-tilt.toggled {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-tilt.png), 0, 64, 16, 48);
-}
-
-#command-button-scratchpad {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 16, 16, 0);
-}
-
-#command-button-scratchpad:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 32, 16, 16);
-}
-
-#command-button-scratchpad:hover:active {
-  background-image: -moz-image-rect(url(chrome://browser/skin/devtools/command-scratchpad.png), 0, 48, 16, 32);
-}
-
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: linear-gradient(to bottom, hsl(209,18%,34%), hsl(210,24%,16%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: 3px 3px 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
-}
-
-.devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
-}
-
-.devtools-tab > .radio-label-box {
-  -moz-margin-start: 0px
-}
diff --git a/browser/themes/winstripe/devtools/treepanel-button.png b/browser/themes/winstripe/devtools/treepanel-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a8802216bf178bc05813fc592df30d91cd49415
GIT binary patch
literal 805
zcmV+=1KRwFP)<h;3K|Lk000e1NJLTq001Na000mO1^@s6e(T*M0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!$4Nv%RCwCVR$FTmK@^_Z-89vNv{qwm
zODndik(x^}`U{GbLJ)lr5%fv)L45Of_%7H-U%enj2$F&~P-`(Ips`Au*oIzAYMV46
zo88&*oRE}pd&&6Lz{d=kbG|)u_M2~(a?Z&?`cX$mPdkjq03LwSBHjWN0eL`GTreKx
z95A>5$VXf7@J4<aQ^f@h;7i0O@1F^rJ|eS&^!K?xqhqlLFwOq6u=3M08XAZ@R3$3I
zV=!wbk(wVPC;SC_L7hWGLr#-fB^e@&#T<J<^!G1!$v73Q=}hX?v?(NtIowu|0=?5e
zewyBdxhVsT#he{a$feolW-)1+CXoTgV$Kc?X`Y@g+&H}T?ncM3104YOE}Aky9IG%c
z05(KTv1rUmsM1HYw&TF15T{Gy9`7O2?sgJIwP}ho(ssB&y8TPsf1xO9imIL-wNV6$
zl2S_g;*-yAgo0;XGOhpmEnT`ee(9mb$&$#!$M1EWyLS7j!{La?@R$~#na<|NG=&mu
zTSZtqIXpaUf~MAGhysBCZm5$@<gy|UO-*&ISFK2`QkB#ct!qlz<vi+d-@UIij$=z;
z>|UBGmWoNkFo+B=7IV;tniNex>IV$MLwpTQ?d3;XfCB6w1LF^KBG>F_-H+(p2QOJ&
z=qI(xQRtVtI}78ax~0>Nl`T>!E)#AoiVyU?eDUP^NF>}Y)8d&gNiBBy>KiD0o`@X+
zKN@h;xZ3NDl3s619>&;gX6pGB`uZ^*7F{f;GZYN!hRMn@1&xHm8XO%J4nbWvOz@*T
z@kMnecO^Mh8sUTIEo&lI=TSuM#9t*0SwF(qy|hy<SET(2V?{sG1U0YSx^s70@S}ZC
zDa0?sxMsh#XlAy=v#FcgezgCMW)ZWtM!8ku_JZIKbn6sM(vp`Wc2l<p($AA9cGT74
j|L|<*AGFVpzXA*Z|5Kl~6^V5Y00000NkvXXu0mjflR<IX

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn
index 7cfbef7ca4f..efa829dced6 100644
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -133,10 +133,7 @@ browser.jar:
         skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
         skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
-        skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
-        skin/classic/browser/devtools/command-responsivemode.png    (devtools/command-responsivemode.png)
-        skin/classic/browser/devtools/command-scratchpad.png        (devtools/command-scratchpad.png)
-        skin/classic/browser/devtools/command-tilt.png              (devtools/command-tilt.png)
+        skin/classic/browser/devtools/commandline.css                      (devtools/commandline.css)
         skin/classic/browser/devtools/markup-view.css               (devtools/markup-view.css)
         skin/classic/browser/devtools/orion.css                     (devtools/orion.css)
         skin/classic/browser/devtools/orion-container.css           (devtools/orion-container.css)
@@ -182,8 +179,11 @@ browser.jar:
         skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
         skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
         skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
+        skin/classic/browser/devtools/treepanel-button.png          (devtools/treepanel-button.png)
+        skin/classic/browser/devtools/layout-background.png         (devtools/layout-background.png)
         skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
         skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
+        skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
         skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
         skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
         skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
@@ -195,12 +195,7 @@ browser.jar:
         skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
         skin/classic/browser/devtools/tools-icons-small.png         (devtools/tools-icons-small.png)
-        skin/classic/browser/devtools/dock-bottom.png               (devtools/dock-bottom.png)
-        skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.png)
-        skin/classic/browser/devtools/dock-window.png               (devtools/dock-window.png)
         skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
-        skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
-        skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -342,13 +337,10 @@ browser.jar:
         skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
-        skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
-        skin/classic/aero/browser/devtools/command-scratchpad.png    (devtools/command-scratchpad.png)
-        skin/classic/aero/browser/devtools/command-tilt.png          (devtools/command-tilt.png)
         skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
         skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
-        skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)
+        skin/classic/aero/browser/devtools/commandline.css                  (devtools/commandline.css)
         skin/classic/aero/browser/devtools/markup-view.css           (devtools/markup-view.css)
         skin/classic/aero/browser/devtools/orion.css                 (devtools/orion.css)
         skin/classic/aero/browser/devtools/orion-container.css       (devtools/orion-container.css)
@@ -394,8 +386,11 @@ browser.jar:
         skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
         skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
         skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
+        skin/classic/aero/browser/devtools/treepanel-button.png      (devtools/treepanel-button.png)
+        skin/classic/aero/browser/devtools/layout-background.png     (devtools/layout-background.png)
         skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
         skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
+        skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
         skin/classic/aero/browser/devtools/debugger-collapse.png     (devtools/debugger-collapse.png)
         skin/classic/aero/browser/devtools/debugger-expand.png       (devtools/debugger-expand.png)
         skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
@@ -407,12 +402,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
         skin/classic/aero/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
-        skin/classic/aero/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
-        skin/classic/aero/browser/devtools/dock-side.png             (devtools/dock-side.png)
-        skin/classic/aero/browser/devtools/dock-window.png           (devtools/dock-window.png)
         skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
-        skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
-        skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png
diff --git a/toolkit/devtools/webconsole/WebConsoleUtils.jsm b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
index af5763e6e3f..a3422a8827a 100644
--- a/toolkit/devtools/webconsole/WebConsoleUtils.jsm
+++ b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
@@ -28,12 +28,6 @@ XPCOMUtils.defineLazyServiceGetter(this, "gActivityDistributor",
                                    "@mozilla.org/network/http-activity-distributor;1",
                                    "nsIHttpActivityDistributor");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
-
 this.EXPORTED_SYMBOLS = ["WebConsoleUtils", "JSPropertyProvider", "JSTermHelpers",
                          "PageErrorListener", "ConsoleAPIListener",
                          "NetworkResponseListener", "NetworkMonitor",
@@ -1570,12 +1564,7 @@ this.JSTermHelpers = function JSTermHelpers(aOwner)
   Object.defineProperty(aOwner.sandbox, "$0", {
     get: function() {
       try {
-        let window = aOwner.chromeWindow();
-        let target = TargetFactory.forTab(window.gBrowser.selectedTab);
-        let panel = gDevTools.getPanelForTarget("inspector", target);
-        if (panel) {
-          return panel.selection.node;
-        }
+        return aOwner.chromeWindow().InspectorUI.selection;
       }
       catch (ex) {
         aOwner.window.console.error(ex.message);

From 226256c6e356a3ba37de7a21e7751234696878dc Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Tue, 27 Nov 2012 18:19:23 +0200
Subject: [PATCH 4/8] Bug 812814 - Add a way to edit or remove watch
 expressions while the debugger is paused, r=past

---
 .../devtools/debugger/debugger-controller.js  |   9 +-
 browser/devtools/debugger/debugger-panes.js   |  55 +-
 browser/devtools/debugger/test/Makefile.in    |   1 +
 ...wser_dbg_bug727429_watch-expressions-01.js |  16 +-
 .../browser_dbg_propertyview-edit-watch.js    | 502 ++++++++++++++++++
 .../test/browser_dbg_propertyview-edit.js     |   6 +-
 .../test/browser_dbg_watch-expressions.html   |   3 +-
 browser/devtools/shared/VariablesView.jsm     | 240 +++++++--
 .../browser/devtools/debugger.properties      |  12 +
 .../themes/gnomestripe/devtools/debugger.css  |  23 +-
 .../themes/pinstripe/devtools/debugger.css    |  23 +-
 .../themes/winstripe/devtools/debugger.css    |  23 +-
 12 files changed, 837 insertions(+), 76 deletions(-)
 create mode 100644 browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js

diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js
index 110d872834e..3609121173d 100644
--- a/browser/devtools/debugger/debugger-controller.js
+++ b/browser/devtools/debugger/debugger-controller.js
@@ -509,7 +509,7 @@ StackFrames.prototype = {
       // If an error was thrown during the evaluation of the watch expressions,
       // then at least one expression evaluation could not be performed.
       if (this.currentEvaluation.throw) {
-        DebuggerView.WatchExpressions.removeExpression(0);
+        DebuggerView.WatchExpressions.removeExpressionAt(0);
         DebuggerController.StackFrames.syncWatchExpressions();
         return;
       }
@@ -600,11 +600,15 @@ StackFrames.prototype = {
 
     // If watch expressions evaluation results are available, create a scope
     // to contain all the values.
-    if (watchExpressionsEvaluation) {
+    if (this.syncedWatchExpressions && watchExpressionsEvaluation) {
       let label = L10N.getStr("watchExpressionsScopeLabel");
       let arrow = L10N.getStr("watchExpressionsSeparatorLabel");
       let scope = DebuggerView.Variables.addScope(label);
       scope.separator = arrow;
+      scope.allowNameInput = true;
+      scope.allowDeletion = true;
+      scope.switch = DebuggerView.WatchExpressions.switchExpression;
+      scope.delete = DebuggerView.WatchExpressions.deleteExpression;
 
       // The evaluation hasn't thrown, so display the returned results and
       // always expand the watch expressions scope by default.
@@ -939,6 +943,7 @@ StackFrames.prototype = {
       this.syncedWatchExpressions =
         this.currentWatchExpressions = null;
     }
+    this.currentFrame = null;
     this._onFrames();
   },
 
diff --git a/browser/devtools/debugger/debugger-panes.js b/browser/devtools/debugger/debugger-panes.js
index 4299562f62d..ff2fdc84efc 100644
--- a/browser/devtools/debugger/debugger-panes.js
+++ b/browser/devtools/debugger/debugger-panes.js
@@ -945,6 +945,8 @@ create({ constructor: BreakpointsView, proto: MenuContainer.prototype }, {
 function WatchExpressionsView() {
   dumpn("WatchExpressionsView was instantiated");
   MenuContainer.call(this);
+  this.switchExpression = this.switchExpression.bind(this);
+  this.deleteExpression = this.deleteExpression.bind(this);
   this._createItemView = this._createItemView.bind(this);
   this._onClick = this._onClick.bind(this);
   this._onClose = this._onClose.bind(this);
@@ -1028,11 +1030,54 @@ create({ constructor: WatchExpressionsView, proto: MenuContainer.prototype }, {
    * @param number aIndex
    *        The index used to identify the watch expression.
    */
-  removeExpression: function DVWE_removeExpression(aIndex) {
+  removeExpressionAt: function DVWE_removeExpressionAt(aIndex) {
     this.remove(this._cache[aIndex]);
     this._cache.splice(aIndex, 1);
   },
 
+  /**
+   * Changes the watch expression corresponding to the specified variable item.
+   *
+   * @param Variable aVar
+   *        The variable representing the watch expression evaluation.
+   * @param string aExpression
+   *        The new watch expression text.
+   */
+  switchExpression: function DVWE_switchExpression(aVar, aExpression) {
+    let expressionItem =
+      [i for (i of this._cache) if (i.attachment.expression == aVar.name)][0];
+
+    // Remove the watch expression if it's going to be a duplicate.
+    if (!aExpression || this.getExpressions().indexOf(aExpression) != -1) {
+      this.deleteExpression(aVar);
+      return;
+    }
+
+    // Save the watch expression code string.
+    expressionItem.attachment.expression = aExpression;
+    expressionItem.target.inputNode.value = aExpression;
+
+    // Synchronize with the controller's watch expressions store.
+    DebuggerController.StackFrames.syncWatchExpressions();
+  },
+
+  /**
+   * Removes the watch expression corresponding to the specified variable item.
+   *
+   * @param Variable aVar
+   *        The variable representing the watch expression evaluation.
+   */
+  deleteExpression: function DVWE_deleteExpression(aVar) {
+    let expressionItem =
+      [i for (i of this._cache) if (i.attachment.expression == aVar.name)][0];
+
+    // Remove the watch expression at its respective index.
+    this.removeExpressionAt(this._cache.indexOf(expressionItem));
+
+    // Synchronize with the controller's watch expressions store.
+    DebuggerController.StackFrames.syncWatchExpressions();
+  },
+
   /**
    * Gets the watch expression code string for an item in this container.
    *
@@ -1101,7 +1146,7 @@ create({ constructor: WatchExpressionsView, proto: MenuContainer.prototype }, {
    */
   _onClose: function DVWE__onClose(e) {
     let expressionItem = this.getItemForElement(e.target);
-    this.removeExpression(this._cache.indexOf(expressionItem));
+    this.removeExpressionAt(this._cache.indexOf(expressionItem));
 
     // Synchronize with the controller's watch expressions store.
     DebuggerController.StackFrames.syncWatchExpressions();
@@ -1116,15 +1161,15 @@ create({ constructor: WatchExpressionsView, proto: MenuContainer.prototype }, {
   _onBlur: function DVWE__onBlur({ target: textbox }) {
     let expressionItem = this.getItemForElement(textbox);
     let oldExpression = expressionItem.attachment.expression;
-    let newExpression = textbox.value;
+    let newExpression = textbox.value.trim();
 
     // Remove the watch expression if it's empty.
     if (!newExpression) {
-      this.removeExpression(this._cache.indexOf(expressionItem));
+      this.removeExpressionAt(this._cache.indexOf(expressionItem));
     }
     // Remove the watch expression if it's a duplicate.
     else if (!oldExpression && this.getExpressions().indexOf(newExpression) != -1) {
-      this.removeExpression(this._cache.indexOf(expressionItem));
+      this.removeExpressionAt(this._cache.indexOf(expressionItem));
     }
     // Expression is eligible.
     else {
diff --git a/browser/devtools/debugger/test/Makefile.in b/browser/devtools/debugger/test/Makefile.in
index 0918e802d39..97acb87efd6 100644
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -33,6 +33,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_propertyview-09.js \
 	browser_dbg_propertyview-10.js \
 	browser_dbg_propertyview-edit.js \
+	browser_dbg_propertyview-edit-watch.js \
 	browser_dbg_propertyview-data.js \
 	browser_dbg_propertyview-filter-01.js \
 	browser_dbg_propertyview-filter-02.js \
diff --git a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
index 9e938e2f510..29eab3093d5 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug727429_watch-expressions-01.js
@@ -52,6 +52,20 @@ function test()
     is(gWatch.getExpressions().length, 1,
       "Duplicate watch expressions are automatically removed");
 
+    addAndCheckExpressions(2, 0, "a\t", true);
+    addAndCheckExpressions(2, 0, "a\r", true);
+    addAndCheckExpressions(2, 0, "a\n", true);
+    gDebugger.editor.focus();
+    is(gWatch.getExpressions().length, 1,
+      "Duplicate watch expressions are automatically removed");
+
+    addAndCheckExpressions(2, 0, "\ta", true);
+    addAndCheckExpressions(2, 0, "\ra", true);
+    addAndCheckExpressions(2, 0, "\na", true);
+    gDebugger.editor.focus();
+    is(gWatch.getExpressions().length, 1,
+      "Duplicate watch expressions are automatically removed");
+
 
     addAndCheckCustomExpression(2, 0, "bazΩΩka");
     addAndCheckCustomExpression(3, 0, "bambøøcha");
@@ -194,7 +208,7 @@ function test()
   }
 
   function removeAndCheckExpression(total, index, string) {
-    gWatch.removeExpression(index);
+    gWatch.removeExpressionAt(index);
 
     is(gWatch.getExpressions().length, total,
       "There should be " + total + " watch expressions available (1)");
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js
new file mode 100644
index 00000000000..b6c82443faa
--- /dev/null
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js
@@ -0,0 +1,502 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+/**
+ * Make sure that the editing or removing watch expressions works properly.
+ */
+
+const TAB_URL = EXAMPLE_URL + "browser_dbg_watch-expressions.html";
+
+var gPane = null;
+var gTab = null;
+var gDebuggee = null;
+var gDebugger = null;
+var gWatch = null;
+var gVars = null;
+
+requestLongerTimeout(2);
+
+function test() {
+  debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPane = aPane;
+    gDebugger = gPane.contentWindow;
+    gWatch = gDebugger.DebuggerView.WatchExpressions;
+    gVars = gDebugger.DebuggerView.Variables;
+
+    gDebugger.DebuggerController.StackFrames.autoScopeExpand = true;
+    gDebugger.DebuggerView.Variables.nonEnumVisible = false;
+    testFrameEval();
+  });
+}
+
+function testFrameEval() {
+  gDebugger.addEventListener("Debugger:FetchedWatchExpressions", function test() {
+    gDebugger.removeEventListener("Debugger:FetchedWatchExpressions", test, false);
+    Services.tm.currentThread.dispatch({ run: function() {
+
+      is(gDebugger.DebuggerController.activeThread.state, "paused",
+        "Should only be getting stack frames while paused.");
+
+      var localScope = gDebugger.DebuggerView.Variables._list.querySelectorAll(".scope")[1],
+          localNodes = localScope.querySelector(".details").childNodes,
+          aArg = localNodes[1],
+          varT = localNodes[3];
+
+      is(aArg.querySelector(".name").getAttribute("value"), "aArg",
+        "Should have the right name for 'aArg'.");
+      is(varT.querySelector(".name").getAttribute("value"), "t",
+        "Should have the right name for 't'.");
+
+      is(aArg.querySelector(".value").getAttribute("value"), "undefined",
+        "Should have the right initial value for 'aArg'.");
+      is(varT.querySelector(".value").getAttribute("value"), "\"Browser Debugger Watch Expressions Test\"",
+        "Should have the right initial value for 't'.");
+
+      is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 5,
+        "There should be 5 hidden nodes in the watch expressions container");
+      is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+        "There should be 0 visible nodes in the watch expressions container");
+
+      let label = gDebugger.L10N.getStr("watchExpressionsScopeLabel");
+      let scope = gVars._currHierarchy.get(label);
+
+      ok(scope, "There should be a wach expressions scope in the variables view");
+      is(scope._store.size, 5, "There should be 5 evaluations availalble");
+
+      is(scope.get("this")._isShown, true,
+        "Should have the right visibility state for 'this'.");
+      is(scope.get("this").target.querySelectorAll(".dbg-variables-delete").length, 1,
+        "Should have the one close button visible for 'this'.");
+      is(scope.get("this").name, "this",
+        "Should have the right name for 'this'.");
+      is(scope.get("this").value.type, "object",
+        "Should have the right value type for 'this'.");
+      is(scope.get("this").value.class, "Proxy",
+        "Should have the right value type for 'this'.");
+
+      is(scope.get("ermahgerd")._isShown, true,
+        "Should have the right visibility state for 'ermahgerd'.");
+      is(scope.get("ermahgerd").target.querySelectorAll(".dbg-variables-delete").length, 1,
+        "Should have the one close button visible for 'ermahgerd'.");
+      is(scope.get("ermahgerd").name, "ermahgerd",
+        "Should have the right name for 'ermahgerd'.");
+      is(scope.get("ermahgerd").value.type, "object",
+        "Should have the right value type for 'ermahgerd'.");
+      is(scope.get("ermahgerd").value.class, "Function",
+        "Should have the right value type for 'ermahgerd'.");
+
+      is(scope.get("aArg")._isShown, true,
+        "Should have the right visibility state for 'aArg'.");
+      is(scope.get("aArg").target.querySelectorAll(".dbg-variables-delete").length, 1,
+        "Should have the one close button visible for 'aArg'.");
+      is(scope.get("aArg").name, "aArg",
+        "Should have the right name for 'aArg'.");
+      is(scope.get("aArg").value, undefined,
+        "Should have the right value for 'aArg'.");
+
+      is(scope.get("document.title")._isShown, true,
+        "Should have the right visibility state for 'document.title'.");
+      is(scope.get("document.title").target.querySelectorAll(".dbg-variables-delete").length, 1,
+        "Should have the one close button visible for 'document.title'.");
+      is(scope.get("document.title").name, "document.title",
+        "Should have the right name for 'document.title'.");
+      is(scope.get("document.title").value, "42",
+        "Should have the right value for 'document.title'.");
+      is(typeof scope.get("document.title").value, "string",
+        "Should have the right value type for 'document.title'.");
+
+      is(scope.get("document.title = 42")._isShown, true,
+        "Should have the right visibility state for 'document.title = 42'.");
+      is(scope.get("document.title = 42").target.querySelectorAll(".dbg-variables-delete").length, 1,
+        "Should have the one close button visible for 'document.title = 42'.");
+      is(scope.get("document.title = 42").name, "document.title = 42",
+        "Should have the right name for 'document.title = 42'.");
+      is(scope.get("document.title = 42").value, 42,
+        "Should have the right value for 'document.title = 42'.");
+      is(typeof scope.get("document.title = 42").value, "number",
+        "Should have the right value type for 'document.title = 42'.");
+
+      testModification(scope.get("document.title = 42").target, test1, function(scope) {
+        testModification(scope.get("aArg").target, test2, function(scope) {
+          testModification(scope.get("aArg = 44").target, test3, function(scope) {
+            testModification(scope.get("document.title = 43").target, test4, function(scope) {
+              testModification(scope.get("document.title").target, test5, function(scope) {
+                testExprDeletion(scope.get("this").target, test6, function(scope) {
+                  testExprDeletion(scope.get("ermahgerd").target, test7, function(scope) {
+                    resumeAndFinish();
+                  }, 44, 0, true);
+                }, 44);
+              }, " \t\r\n", "\"43\"", 44, 1, true);
+            }, " \t\r\ndocument.title \t\r\n", "\"43\"", 44);
+          }, " \t\r\ndocument.title \t\r\n", "\"43\"", 44);
+        }, "aArg = 44", 44, 44);
+      }, "document.title = 43", 43, "undefined");
+    }}, 0);
+  }, false);
+
+  addWatchExpression("this");
+  addWatchExpression("ermahgerd");
+  addWatchExpression("aArg");
+  addWatchExpression("document.title");
+  addWatchExpression("document.title = 42");
+
+  executeSoon(function() {
+    gDebuggee.ermahgerd(); // ermahgerd!!
+  });
+}
+
+function testModification(aVar, aTest, aCallback, aNewValue, aNewResult, aArgResult,
+                          aLocalScopeIndex = 1, aDeletionFlag = null)
+{
+  function makeChangesAndExitInputMode() {
+    EventUtils.sendString(aNewValue);
+    EventUtils.sendKey("RETURN");
+  }
+
+  EventUtils.sendMouseEvent({ type: "dblclick" },
+    aVar.querySelector(".name"),
+    gDebugger);
+
+  executeSoon(function() {
+    ok(aVar.querySelector(".element-name-input"),
+      "There should be an input element created.");
+
+    let testContinued = false;
+    let fetchedVariables = false;
+    let fetchedExpressions = false;
+
+    let countV = 0;
+    gDebugger.addEventListener("Debugger:FetchedVariables", function testV() {
+      // We expect 2 Debugger:FetchedVariables events, one from the global
+      // object scope and the regular one.
+      if (++countV < 2) {
+        info("Number of received Debugger:FetchedVariables events: " + countV);
+        return;
+      }
+      gDebugger.removeEventListener("Debugger:FetchedVariables", testV, false);
+      fetchedVariables = true;
+      executeSoon(continueTest);
+    }, false);
+
+    let countE = 0;
+    gDebugger.addEventListener("Debugger:FetchedWatchExpressions", function testE() {
+      // We expect only one Debugger:FetchedWatchExpressions event, since all
+      // expressions are evaluated at the same time.
+      if (++countE < 1) {
+        info("Number of received Debugger:FetchedWatchExpressions events: " + countE);
+        return;
+      }
+      gDebugger.removeEventListener("Debugger:FetchedWatchExpressions", testE, false);
+      fetchedExpressions = true;
+      executeSoon(continueTest);
+    }, false);
+
+    function continueTest() {
+      if (testContinued || !fetchedVariables || !fetchedExpressions) {
+        return;
+      }
+      testContinued = true;
+
+      // Get the variable reference anew, since the old ones were discarded when
+      // we resumed.
+      var localScope = gDebugger.DebuggerView.Variables._list.querySelectorAll(".scope")[aLocalScopeIndex],
+          localNodes = localScope.querySelector(".details").childNodes,
+          aArg = localNodes[1];
+
+      is(aArg.querySelector(".value").getAttribute("value"), aArgResult,
+        "Should have the right value for 'aArg'.");
+
+      let label = gDebugger.L10N.getStr("watchExpressionsScopeLabel");
+      let scope = gVars._currHierarchy.get(label);
+      info("Found the watch expressions scope: " + scope);
+
+      let aExp = scope.get(aVar.querySelector(".name").getAttribute("value"));
+      info("Found the watch expression variable: " + aExp);
+
+      if (aDeletionFlag) {
+        ok(fetchedVariables, "The variables should have been fetched.");
+        ok(fetchedExpressions, "The variables should have been fetched.");
+        is(aExp, undefined, "The watch expression should not have been found.");
+        performCallback(scope);
+        return;
+      }
+
+      is(aExp.target.querySelector(".name").getAttribute("value"), aNewValue.trim(),
+        "Should have the right name for '" + aNewValue + "'.");
+      is(aExp.target.querySelector(".value").getAttribute("value"), aNewResult,
+        "Should have the right value for '" + aNewValue + "'.");
+
+      performCallback(scope);
+    }
+
+    makeChangesAndExitInputMode();
+  });
+
+  function performCallback(scope) {
+    executeSoon(function() {
+      aTest(scope);
+      aCallback(scope);
+    });
+  }
+}
+
+function testExprDeletion(aVar, aTest, aCallback, aArgResult,
+                          aLocalScopeIndex = 1, aFinalFlag = null)
+{
+  let testContinued = false;
+  let fetchedVariables = false;
+  let fetchedExpressions = false;
+
+  let countV = 0;
+  gDebugger.addEventListener("Debugger:FetchedVariables", function testV() {
+    // We expect 2 Debugger:FetchedVariables events, one from the global
+    // object scope and the regular one.
+    if (++countV < 2) {
+      info("Number of received Debugger:FetchedVariables events: " + countV);
+      return;
+    }
+    gDebugger.removeEventListener("Debugger:FetchedVariables", testV, false);
+    fetchedVariables = true;
+    executeSoon(continueTest);
+  }, false);
+
+  let countE = 0;
+  gDebugger.addEventListener("Debugger:FetchedWatchExpressions", function testE() {
+    // We expect only one Debugger:FetchedWatchExpressions event, since all
+    // expressions are evaluated at the same time.
+    if (++countE < 1) {
+      info("Number of received Debugger:FetchedWatchExpressions events: " + countE);
+      return;
+    }
+    gDebugger.removeEventListener("Debugger:FetchedWatchExpressions", testE, false);
+    fetchedExpressions = true;
+    executeSoon(continueTest);
+  }, false);
+
+  function continueTest() {
+    if ((testContinued || !fetchedVariables || !fetchedExpressions) && !aFinalFlag) {
+      return;
+    }
+    testContinued = true;
+
+    // Get the variable reference anew, since the old ones were discarded when
+    // we resumed.
+    var localScope = gDebugger.DebuggerView.Variables._list.querySelectorAll(".scope")[aLocalScopeIndex],
+        localNodes = localScope.querySelector(".details").childNodes,
+        aArg = localNodes[1];
+
+    is(aArg.querySelector(".value").getAttribute("value"), aArgResult,
+      "Should have the right value for 'aArg'.");
+
+    let label = gDebugger.L10N.getStr("watchExpressionsScopeLabel");
+    let scope = gVars._currHierarchy.get(label);
+    info("Found the watch expressions scope: " + scope);
+
+    if (aFinalFlag) {
+      ok(fetchedVariables, "The variables should have been fetched.");
+      ok(!fetchedExpressions, "The variables should never have been fetched.");
+      is(scope, undefined, "The watch expressions scope should not have been found.");
+      performCallback(scope);
+      return;
+    }
+
+    let aExp = scope.get(aVar.querySelector(".name").getAttribute("value"));
+    info("Found the watch expression variable: " + aExp);
+
+    is(aExp, undefined, "Should not have found the watch expression after deletion.");
+    performCallback(scope);
+  }
+
+  function performCallback(scope) {
+    executeSoon(function() {
+      aTest(scope);
+      aCallback(scope);
+    });
+  }
+
+  EventUtils.sendMouseEvent({ type: "click" },
+    aVar.querySelector(".dbg-variables-delete"),
+    gDebugger);
+}
+
+function test1(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 5,
+    "There should be 5 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 5, "There should be 5 evaluations availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[1].target.inputNode.value, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[1].attachment.expression, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[2].target.inputNode.value, "aArg",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[2].attachment.expression, "aArg",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[3].target.inputNode.value, "ermahgerd",
+    "The fourth textbox input value is not the correct one");
+  is(gWatch._cache[3].attachment.expression, "ermahgerd",
+    "The fourth textbox input value is not the correct one");
+  is(gWatch._cache[4].target.inputNode.value, "this",
+    "The fifth textbox input value is not the correct one");
+  is(gWatch._cache[4].attachment.expression, "this",
+    "The fifth textbox input value is not the correct one");
+}
+
+function test2(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 5,
+    "There should be 5 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 5, "There should be 5 evaluations availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[1].target.inputNode.value, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[1].attachment.expression, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[2].target.inputNode.value, "aArg = 44",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[2].attachment.expression, "aArg = 44",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[3].target.inputNode.value, "ermahgerd",
+    "The fourth textbox input value is not the correct one");
+  is(gWatch._cache[3].attachment.expression, "ermahgerd",
+    "The fourth textbox input value is not the correct one");
+  is(gWatch._cache[4].target.inputNode.value, "this",
+    "The fifth textbox input value is not the correct one");
+  is(gWatch._cache[4].attachment.expression, "this",
+    "The fifth textbox input value is not the correct one");
+}
+
+function test3(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 4,
+    "There should be 4 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 4, "There should be 4 evaluations availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "document.title = 43",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[1].target.inputNode.value, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[1].attachment.expression, "document.title",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[2].target.inputNode.value, "ermahgerd",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[2].attachment.expression, "ermahgerd",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[3].target.inputNode.value, "this",
+    "The fourth textbox input value is not the correct one");
+  is(gWatch._cache[3].attachment.expression, "this",
+    "The fourth textbox input value is not the correct one");
+}
+
+function test4(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 3,
+    "There should be 3 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 3, "There should be 3 evaluations availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "document.title",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "document.title",
+    "The first textbox input value is not the correct one");
+  is(gWatch._cache[1].target.inputNode.value, "ermahgerd",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[1].attachment.expression, "ermahgerd",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[2].target.inputNode.value, "this",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[2].attachment.expression, "this",
+    "The third textbox input value is not the correct one");
+}
+
+function test5(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 2,
+    "There should be 2 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 2, "There should be 2 evaluations availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "ermahgerd",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "ermahgerd",
+    "The second textbox input value is not the correct one");
+  is(gWatch._cache[1].target.inputNode.value, "this",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[1].attachment.expression, "this",
+    "The third textbox input value is not the correct one");
+}
+
+function test6(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 1,
+    "There should be 1 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  ok(scope, "There should be a wach expressions scope in the variables view");
+  is(scope._store.size, 1, "There should be 1 evaluation availalble");
+
+  is(gWatch._cache[0].target.inputNode.value, "ermahgerd",
+    "The third textbox input value is not the correct one");
+  is(gWatch._cache[0].attachment.expression, "ermahgerd",
+    "The third textbox input value is not the correct one");
+}
+
+function test7(scope) {
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression[hidden=true]").length, 0,
+    "There should be 0 hidden nodes in the watch expressions container");
+  is(gWatch._container._parent.querySelectorAll(".dbg-expression:not([hidden=true])").length, 0,
+    "There should be 0 visible nodes in the watch expressions container");
+
+  is(scope, undefined, "There should be no watch expressions scope available.");
+  is(gWatch._cache.length, 0, "The watch expressions cache should be empty.");
+}
+
+function addWatchExpression(string) {
+  gWatch.addExpression(string);
+  gDebugger.editor.focus();
+}
+
+function resumeAndFinish() {
+  gDebugger.DebuggerController.activeThread.resume(function() {
+    closeDebuggerAndFinish();
+  });
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gPane = null;
+  gTab = null;
+  gDebuggee = null;
+  gDebugger = null;
+  gWatch = null;
+  gVars = null;
+});
diff --git a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
index f3ae5f48a64..6f5ca0cb301 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
@@ -4,6 +4,10 @@
  * http://creativecommons.org/publicdomain/zero/1.0/
  */
 
+/**
+ * Make sure that the editing variables or properties values works properly.
+ */
+
 const TAB_URL = EXAMPLE_URL + "browser_dbg_frame-parameters.html";
 
 var gPane = null;
@@ -70,7 +74,7 @@ function testModification(aVar, aCallback, aNewValue, aNewResult) {
     gDebugger);
 
   executeSoon(function() {
-    ok(aVar.querySelector(".element-input"),
+    ok(aVar.querySelector(".element-value-input"),
       "There should be an input element created.");
 
     let count = 0;
diff --git a/browser/devtools/debugger/test/browser_dbg_watch-expressions.html b/browser/devtools/debugger/test/browser_dbg_watch-expressions.html
index c034a0d5ed6..5ced7372b69 100644
--- a/browser/devtools/debugger/test/browser_dbg_watch-expressions.html
+++ b/browser/devtools/debugger/test/browser_dbg_watch-expressions.html
@@ -6,7 +6,8 @@
     <!-- Any copyright is dedicated to the Public Domain.
          http://creativecommons.org/publicdomain/zero/1.0/ -->
     <script type="text/javascript">
-      function ermahgerd() {
+      function ermahgerd(aArg) {
+        var t = document.title;
         debugger;
         (function() {
           var a = undefined;
diff --git a/browser/devtools/shared/VariablesView.jsm b/browser/devtools/shared/VariablesView.jsm
index 6e9b1bc9223..9c2f575f4ea 100644
--- a/browser/devtools/shared/VariablesView.jsm
+++ b/browser/devtools/shared/VariablesView.jsm
@@ -20,7 +20,9 @@ this.EXPORTED_SYMBOLS = ["VariablesView", "create"];
  * Requires the devtools common.css and debugger.css skin stylesheets.
  *
  * To allow replacing variable or property values in this view, provide an
- * "eval" function property.
+ * "eval" function property. To allow replacing variable or property values,
+ * provide a "switch" function. To handle deleting variables or properties,
+ * provide a "delete" function.
  *
  * @param nsIDOMNode aParentNode
  *        The parent node to hold this view.
@@ -415,6 +417,8 @@ function Scope(aView, aName, aFlags = {}) {
 
   this.ownerView = aView;
   this.eval = aView.eval;
+  this.switch = aView.switch;
+  this.delete = aView.delete;
 
   this._store = new Map();
   this._init(aName.trim(), aFlags);
@@ -635,6 +639,24 @@ Scope.prototype = {
    */
   set twisty(aFlag) aFlag ? this.showArrow() : this.hideArrow(),
 
+  /**
+   * Specifies if editing variable or property names is allowed.
+   * This flag applies non-recursively to the current scope.
+   */
+  allowNameInput: false,
+
+  /**
+   * Specifies if editing variable or property values is allowed.
+   * This flag applies non-recursively to the current scope.
+   */
+  allowValueInput: true,
+
+  /**
+   * Specifies if removing variables or properties values is allowed.
+   * This flag applies non-recursively to the current scope.
+   */
+  allowDeletion: false,
+
   /**
    * Gets the id associated with this item.
    * @return string
@@ -917,11 +939,14 @@ Scope.prototype = {
  *        The variable's descriptor.
  */
 function Variable(aScope, aName, aDescriptor) {
+  this._onClose = this._onClose.bind(this);
   this._displayTooltip = this._displayTooltip.bind(this);
-  this._activateInput = this._activateInput.bind(this);
-  this._deactivateInput = this._deactivateInput.bind(this);
-  this._saveInput = this._saveInput.bind(this);
-  this._onInputKeyPress = this._onInputKeyPress.bind(this);
+  this._activateNameInput = this._activateNameInput.bind(this);
+  this._activateValueInput = this._activateValueInput.bind(this);
+  this._deactivateNameInput = this._deactivateNameInput.bind(this);
+  this._deactivateValueInput = this._deactivateValueInput.bind(this);
+  this._onNameInputKeyPress = this._onNameInputKeyPress.bind(this);
+  this._onValueInputKeyPress = this._onValueInputKeyPress.bind(this);
 
   Scope.call(this, aScope, aName, aDescriptor);
   this._setGrip(aDescriptor.value);
@@ -1180,6 +1205,12 @@ create({ constructor: Variable, proto: Scope.prototype }, {
       separatorLabel.hidden = true;
       valueLabel.hidden = true;
     }
+    if (this.ownerView.allowDeletion) {
+      let closeNode = this._closeNode = document.createElement("toolbarbutton");
+      closeNode.className = "dbg-variables-delete plain devtools-closebutton";
+      closeNode.addEventListener("click", this._onClose, false);
+      this._title.appendChild(closeNode);
+    }
   },
 
   /**
@@ -1215,6 +1246,16 @@ create({ constructor: Variable, proto: Scope.prototype }, {
 
     this._target.appendChild(tooltip);
     this._target.setAttribute("tooltip", tooltip.id);
+
+    if (this.ownerView.allowNameInput) {
+      this._name.setAttribute("tooltiptext", L10N.getStr("variablesEditableNameTooltip"));
+    }
+    if (this.ownerView.allowValueInput) {
+      this._valueLabel.setAttribute("tooltiptext", L10N.getStr("variablesEditableValueTooltip"));
+    }
+    if (this.ownerView.allowDeletion) {
+      this._closeNode.setAttribute("tooltiptext", L10N.getStr("variablesCloseButtonTooltip"));
+    }
   },
 
   /**
@@ -1255,44 +1296,54 @@ create({ constructor: Variable, proto: Scope.prototype }, {
   _addEventListeners: function V__addEventListeners() {
     this._arrow.addEventListener("mousedown", this.toggle, false);
     this._name.addEventListener("mousedown", this.toggle, false);
-    this._valueLabel.addEventListener("click", this._activateInput, false);
+    this._name.addEventListener("dblclick", this._activateNameInput, false);
+    this._valueLabel.addEventListener("click", this._activateValueInput, false);
   },
 
   /**
-   * Makes this variable's value editable.
+   * The click listener for the close button.
    */
-  _activateInput: function V__activateInput(e) {
-    if (!this.eval) {
-      return;
-    }
-    let window = this.window;
-    let document = this.document;
+  _onClose: function V__onClose() {
+    this.hide();
 
-    let title = this._title;
-    let valueLabel = this._valueLabel;
-    let initialString = this._valueLabel.getAttribute("value");
+    if (this.delete) {
+      this.delete(this);
+    }
+  },
+
+  /**
+   * Creates a textbox node in place of a label.
+   *
+   * @param nsIDOMNode aLabel
+   *        The label to be replaced with a textbox.
+   * @param string aClassName
+   *        The class to be applied to the textbox.
+   * @param object aCallbacks
+   *        An object containing the onKeypress and onBlur callbacks.
+   */
+  _activateInput: function V__activateInput(aLabel, aClassName, aCallbacks) {
+    let initialString = aLabel.getAttribute("value");
 
     // Create a texbox input element which will be shown in the current
-    // element's value location.
+    // element's specified label location.
     let input = this.document.createElement("textbox");
     input.setAttribute("value", initialString);
-    input.className = "plain element-input";
+    input.className = "plain " + aClassName;
     input.width = this._target.clientWidth;
 
-    title.removeChild(valueLabel);
-    title.appendChild(input);
+    aLabel.parentNode.replaceChild(input, aLabel);
     input.select();
 
     // When the value is a string (displayed as "value"), then we probably want
     // to change it to another string in the textbox, so to avoid typing the ""
     // again, tackle with the selection bounds just a bit.
-    if (valueLabel.getAttribute("value").match(/^"[^"]*"$/)) {
+    if (aLabel.getAttribute("value").match(/^"[^"]*"$/)) {
       input.selectionEnd--;
       input.selectionStart++;
     }
 
-    input.addEventListener("keypress", this._onInputKeyPress, false);
-    input.addEventListener("blur", this._deactivateInput, false);
+    input.addEventListener("keypress", aCallbacks.onKeypress, false);
+    input.addEventListener("blur", aCallbacks.onBlur, false);
 
     this._prevExpandable = this.twisty;
     this._prevExpanded = this.expanded;
@@ -1302,18 +1353,17 @@ create({ constructor: Variable, proto: Scope.prototype }, {
   },
 
   /**
-   * Deactivates this variable's editable mode.
+   * Removes the textbox node in place of a label.
+   *
+   * @param nsIDOMNode aLabel
+   *        The label which was replaced with a textbox.
+   * @param object aCallbacks
+   *        An object containing the onKeypress and onBlur callbacks.
    */
-  _deactivateInput: function V__deactivateInput(e) {
-    let input = e.target;
-    let title = this._title;
-    let valueLabel = this._valueLabel;
-
-    title.removeChild(input);
-    title.appendChild(valueLabel);
-
-    input.removeEventListener("keypress", this._onInputKeyPress, false);
-    input.removeEventListener("blur", this._deactivateInput, false);
+  _deactivateInput: function V__deactivateInput(aLabel, aInput, aCallbacks) {
+    aInput.parentNode.replaceChild(aLabel, aInput);
+    aInput.removeEventListener("keypress", aCallbacks.onKeypress, false);
+    aInput.removeEventListener("blur", aCallbacks.onBlur, false);
 
     this._locked = false;
     this.twisty = this._prevExpandable;
@@ -1321,37 +1371,123 @@ create({ constructor: Variable, proto: Scope.prototype }, {
   },
 
   /**
-   * Deactivates this variable's editable mode and evaluates a new value.
+   * Makes this variable's name editable.
    */
-  _saveInput: function V__saveInput(e) {
-    let input = e.target;
-    let valueLabel = this._valueLabel;
-    let initialString = this._valueLabel.getAttribute("value");
-    let currentString = input.value;
+  _activateNameInput: function V__activateNameInput() {
+    if (!this.ownerView.allowNameInput || !this.switch) {
+      return;
+    }
+    this._activateInput(this._name, "element-name-input", {
+      onKeypress: this._onNameInputKeyPress,
+      onBlur: this._deactivateNameInput
+    });
+    this._separatorLabel.hidden = true;
+    this._valueLabel.hidden = true;
+  },
 
-    this._deactivateInput(e);
+  /**
+   * Deactivates this variable's editable name mode.
+   */
+  _deactivateNameInput: function V__deactivateNameInput(e) {
+    this._deactivateInput(this._name, e.target, {
+      onKeypress: this._onNameInputKeyPress,
+      onBlur: this._deactivateNameInput
+    });
+    this._separatorLabel.hidden = false;
+    this._valueLabel.hidden = false;
+  },
+
+  /**
+   * Makes this variable's value editable.
+   */
+  _activateValueInput: function V__activateValueInput() {
+    if (!this.ownerView.allowValueInput || !this.eval) {
+      return;
+    }
+    this._activateInput(this._valueLabel, "element-value-input", {
+      onKeypress: this._onValueInputKeyPress,
+      onBlur: this._deactivateValueInput
+    });
+  },
+
+  /**
+   * Deactivates this variable's editable value mode.
+   */
+  _deactivateValueInput: function V__deactivateValueInput(e) {
+    this._deactivateInput(this._valueLabel, e.target, {
+      onKeypress: this._onValueInputKeyPress,
+      onBlur: this._deactivateValueInput
+    });
+  },
+
+  /**
+   * Disables this variable prior to a new name switch or value evaluation.
+   */
+  _disable: function V__disable() {
+    this.twisty = false;
+    this._separatorLabel.hidden = true;
+    this._valueLabel.hidden = true;
+    this._enum.hidden = true;
+    this._nonenum.hidden = true;
+  },
+
+  /**
+   * Deactivates this variable's editable mode and callbacks the new name.
+   */
+  _saveNameInput: function V__saveNameInput(e) {
+    let input = e.target;
+    let initialString = this._name.getAttribute("value");
+    let currentString = input.value.trim();
+    this._deactivateNameInput(e);
 
     if (initialString != currentString) {
-      this._arrow.setAttribute("invisible", "");
-      this._separatorLabel.hidden = true;
-      this._valueLabel.hidden = true;
-      this._enum.hidden = true;
-      this._nonenum.hidden = true;
-      this.eval("(" + this._symbolicName + "=" + currentString + ")");
+      this._disable();
+      this._name.value = currentString;
+      this.switch(this, currentString);
     }
   },
 
   /**
-   * The key press listener for this variable's editable mode textbox.
+   * Deactivates this variable's editable mode and evaluates the new value.
    */
-  _onInputKeyPress: function V__onInputKeyPress(e) {
+  _saveValueInput: function V__saveValueInput(e) {
+    let input = e.target;
+    let initialString = this._valueLabel.getAttribute("value");
+    let currentString = input.value.trim();
+    this._deactivateValueInput(e);
+
+    if (initialString != currentString) {
+      this._disable();
+      this.eval(this._symbolicName + "=" + currentString);
+    }
+  },
+
+  /**
+   * The key press listener for this variable's editable name textbox.
+   */
+  _onNameInputKeyPress: function V__onNameInputKeyPress(e) {
     switch(e.keyCode) {
       case e.DOM_VK_RETURN:
       case e.DOM_VK_ENTER:
-        this._saveInput(e);
+        this._saveNameInput(e);
         return;
       case e.DOM_VK_ESCAPE:
-        this._deactivateInput(e);
+        this._deactivateNameInput(e);
+        return;
+    }
+  },
+
+  /**
+   * The key press listener for this variable's editable value textbox.
+   */
+  _onValueInputKeyPress: function V__onValueInputKeyPress(e) {
+    switch(e.keyCode) {
+      case e.DOM_VK_RETURN:
+      case e.DOM_VK_ENTER:
+        this._saveValueInput(e);
+        return;
+      case e.DOM_VK_ESCAPE:
+        this._deactivateValueInput(e);
         return;
     }
   },
@@ -1361,6 +1497,7 @@ create({ constructor: Variable, proto: Scope.prototype }, {
   _initialDescriptor: null,
   _separatorLabel: null,
   _valueLabel: null,
+  _closeNode: null,
   _tooltip: null,
   _valueGrip: null,
   _valueString: "",
@@ -1700,6 +1837,7 @@ XPCOMUtils.defineLazyGetter(L10N, "stringBundle", function() {
 
 /**
  * The separator label between the variables or properties name and value.
+ * This property applies non-recursively to the current scope.
  */
 Scope.prototype.separator = L10N.getStr("variablesSeparatorLabel");
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/debugger.properties b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
index c9687bb2907..a31821535a9 100644
--- a/browser/locales/en-US/chrome/browser/devtools/debugger.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/debugger.properties
@@ -173,6 +173,18 @@ watchExpressionsScopeLabel=Watch expressions
 # the global scope.
 globalScopeLabel=Global
 
+# LOCALIZATION NOTE (variablesEditableNameTooltip): The text that is displayed
+# in the variables list on an item with an editable name.
+variablesEditableNameTooltip=Double click to edit
+
+# LOCALIZATION NOTE (variablesEditableValueTooltip): The text that is displayed
+# in the variables list on an item with an editable name.
+variablesEditableValueTooltip=Click to change value
+
+# LOCALIZATION NOTE (variablesCloseButtonTooltip): The text that is displayed
+# in the variables list on an item with which can be removed.
+variablesCloseButtonTooltip=Click to remove
+
 # LOCALIZATION NOTE (variablesSeparatorLabel): The text that is displayed
 # in the variables list as a separator between the name and value.
 variablesSeparatorLabel=:
diff --git a/browser/themes/gnomestripe/devtools/debugger.css b/browser/themes/gnomestripe/devtools/debugger.css
index 1c3ee5a5988..f7171955ef0 100644
--- a/browser/themes/gnomestripe/devtools/debugger.css
+++ b/browser/themes/gnomestripe/devtools/debugger.css
@@ -161,6 +161,10 @@
   font-weight: 600;
 }
 
+.dbg-stackframe-details {
+  -moz-padding-start: 4px;
+}
+
 /**
  * Breakpoints view
  */
@@ -209,10 +213,6 @@
   -moz-padding-start: 8px;
 }
 
-.dbg-expression:last-child {
-  margin-bottom: 4px;
-}
-
 .dbg-expression-arrow {
   width: 10px;
   height: auto;
@@ -236,6 +236,11 @@
   min-height: 10px;
 }
 
+.dbg-variables-delete:not(:hover) {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+  opacity: 0.5;
+}
+
 /**
  * Scope element
  */
@@ -278,6 +283,7 @@
 
 .variable > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .variable:not([non-header]) > .details {
@@ -304,6 +310,7 @@
 
 .property > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .property:not([non-header]) > .details {
@@ -373,10 +380,16 @@
  * Variables and properties editing
  */
 
-#variables .element-input {
+#variables .element-value-input {
   -moz-margin-start: 5px !important;
 }
 
+#variables .element-name-input {
+  -moz-margin-start: -1px !important;
+  color: #048;
+  font-weight: 600;
+}
+
 /**
  * Variables and properties searching
  */
diff --git a/browser/themes/pinstripe/devtools/debugger.css b/browser/themes/pinstripe/devtools/debugger.css
index b3410c32f94..8e4fd933d0e 100644
--- a/browser/themes/pinstripe/devtools/debugger.css
+++ b/browser/themes/pinstripe/devtools/debugger.css
@@ -163,6 +163,10 @@
   font-weight: 600;
 }
 
+.dbg-stackframe-details {
+  -moz-padding-start: 4px;
+}
+
 /**
  * Breakpoints view
  */
@@ -211,10 +215,6 @@
   -moz-padding-start: 8px;
 }
 
-.dbg-expression:last-child {
-  margin-bottom: 4px;
-}
-
 .dbg-expression-arrow {
   width: 10px;
   height: auto;
@@ -238,6 +238,11 @@
   min-height: 10px;
 }
 
+.dbg-variables-delete:not(:hover) {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+  opacity: 0.5;
+}
+
 /**
  * Scope element
  */
@@ -280,6 +285,7 @@
 
 .variable > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .variable:not([non-header]) > .details {
@@ -306,6 +312,7 @@
 
 .property > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .property:not([non-header]) > .details {
@@ -375,10 +382,16 @@
  * Variables and properties editing
  */
 
-#variables .element-input {
+#variables .element-value-input {
   -moz-margin-start: 5px !important;
 }
 
+#variables .element-name-input {
+  -moz-margin-start: -1px !important;
+  color: #048;
+  font-weight: 600;
+}
+
 /**
  * Variables and properties searching
  */
diff --git a/browser/themes/winstripe/devtools/debugger.css b/browser/themes/winstripe/devtools/debugger.css
index fbc236246a1..23abaff6073 100644
--- a/browser/themes/winstripe/devtools/debugger.css
+++ b/browser/themes/winstripe/devtools/debugger.css
@@ -169,6 +169,10 @@
   font-weight: 600;
 }
 
+.dbg-stackframe-details {
+  -moz-padding-start: 4px;
+}
+
 /**
  * Breakpoints view
  */
@@ -217,10 +221,6 @@
   -moz-padding-start: 8px;
 }
 
-.dbg-expression:last-child {
-  margin-bottom: 4px;
-}
-
 .dbg-expression-arrow {
   width: 10px;
   height: auto;
@@ -244,6 +244,11 @@
   min-height: 10px;
 }
 
+.dbg-variables-delete:not(:hover) {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+  opacity: 0.5;
+}
+
 /**
  * Scope element
  */
@@ -286,6 +291,7 @@
 
 .variable > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .variable:not([non-header]) > .details {
@@ -312,6 +318,7 @@
 
 .property > .title > .value {
   -moz-padding-start: 6px;
+  -moz-padding-end: 4px;
 }
 
 .property:not([non-header]) > .details {
@@ -381,10 +388,16 @@
  * Variables and properties editing
  */
 
-#variables .element-input {
+#variables .element-value-input {
   -moz-margin-start: 5px !important;
 }
 
+#variables .element-name-input {
+  -moz-margin-start: -1px !important;
+  color: #048;
+  font-weight: 600;
+}
+
 /**
  * Variables and properties searching
  */

From ca9c710bb87f6ca0b13b6e4038f74a90d9387be3 Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Tue, 27 Nov 2012 18:19:23 +0200
Subject: [PATCH 5/8] Bug 815277 - Source editor's 'Find' and 'Jump to line'
 commands should use the frontend UI, r=past

---
 browser/devtools/debugger/debugger-toolbar.js | 39 ++++-----
 browser/devtools/debugger/debugger-view.js    |  2 +-
 browser/devtools/debugger/debugger.xul        | 80 ++++++++++++-------
 ...rowser_dbg_bug731394_editor-contextmenu.js |  2 -
 browser/devtools/shared/LayoutHelpers.jsm     | 13 ++-
 .../chrome/browser/devtools/debugger.dtd      | 40 ++++++++++
 6 files changed, 122 insertions(+), 54 deletions(-)

diff --git a/browser/devtools/debugger/debugger-toolbar.js b/browser/devtools/debugger/debugger-toolbar.js
index 8f0341a6a4b..855465eef3d 100644
--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -34,10 +34,10 @@ ToolbarView.prototype = {
     this._chromeGlobals = document.getElementById("chrome-globals");
     this._scripts = document.getElementById("sources");
 
-    let resumeKey = LayoutHelpers.prettyKey(document.getElementById("resumeKey"));
-    let stepOverKey = LayoutHelpers.prettyKey(document.getElementById("stepOverKey"));
-    let stepInKey = LayoutHelpers.prettyKey(document.getElementById("stepInKey"));
-    let stepOutKey = LayoutHelpers.prettyKey(document.getElementById("stepOutKey"));
+    let resumeKey = LayoutHelpers.prettyKey(document.getElementById("resumeKey"), true);
+    let stepOverKey = LayoutHelpers.prettyKey(document.getElementById("stepOverKey"), true);
+    let stepInKey = LayoutHelpers.prettyKey(document.getElementById("stepInKey"), true);
+    let stepOutKey = LayoutHelpers.prettyKey(document.getElementById("stepOutKey"), true);
     this._resumeTooltip = L10N.getFormatStr("resumeButtonTooltip", [resumeKey]);
     this._pauseTooltip = L10N.getFormatStr("pauseButtonTooltip", [resumeKey]);
     this._stepOverTooltip = L10N.getFormatStr("stepOverTooltip", [stepOverKey]);
@@ -577,11 +577,11 @@ FilterView.prototype = {
     this._variableOperatorButton = document.getElementById("variable-operator-button");
     this._variableOperatorLabel = document.getElementById("variable-operator-label");
 
-    this._globalSearchKey = LayoutHelpers.prettyKey(document.getElementById("globalSearchKey"));
-    this._fileSearchKey = LayoutHelpers.prettyKey(document.getElementById("fileSearchKey"));
-    this._lineSearchKey = LayoutHelpers.prettyKey(document.getElementById("lineSearchKey"));
-    this._tokenSearchKey = LayoutHelpers.prettyKey(document.getElementById("tokenSearchKey"));
-    this._variableSearchKey = LayoutHelpers.prettyKey(document.getElementById("variableSearchKey"));
+    this._fileSearchKey = LayoutHelpers.prettyKey(document.getElementById("fileSearchKey"), true);
+    this._globalSearchKey = LayoutHelpers.prettyKey(document.getElementById("globalSearchKey"), true);
+    this._tokenSearchKey = LayoutHelpers.prettyKey(document.getElementById("tokenSearchKey"), true);
+    this._lineSearchKey = LayoutHelpers.prettyKey(document.getElementById("lineSearchKey"), true);
+    this._variableSearchKey = LayoutHelpers.prettyKey(document.getElementById("variableSearchKey"), true);
 
     this._searchbox.addEventListener("click", this._onClick, false);
     this._searchbox.addEventListener("select", this._onSearch, false);
@@ -879,7 +879,7 @@ FilterView.prototype = {
 
     // Perform a global search based on the specified operator.
     if (isGlobal) {
-      if (isReturnKey && isDifferentToken) {
+      if (isReturnKey && (isDifferentToken || DebuggerView.GlobalSearch.hidden)) {
         DebuggerView.GlobalSearch.performSearch(token);
       } else {
         DebuggerView.GlobalSearch[["focusNextMatch", "focusPrevMatch"][action]]();
@@ -934,10 +934,10 @@ FilterView.prototype = {
   },
 
   /**
-   * Called when the source line filter key sequence was pressed.
+   * Called when the global search filter key sequence was pressed.
    */
-  _doLineSearch: function DVF__doLineSearch() {
-    this._doSearch(SEARCH_LINE_FLAG);
+  _doGlobalSearch: function DVF__doGlobalSearch() {
+    this._doSearch(SEARCH_GLOBAL_FLAG);
     this._searchboxPanel.hidePopup();
   },
 
@@ -950,10 +950,10 @@ FilterView.prototype = {
   },
 
   /**
-   * Called when the global search filter key sequence was pressed.
+   * Called when the source line filter key sequence was pressed.
    */
-  _doGlobalSearch: function DVF__doGlobalSearch() {
-    this._doSearch(SEARCH_GLOBAL_FLAG);
+  _doLineSearch: function DVF__doLineSearch() {
+    this._doSearch(SEARCH_LINE_FLAG);
     this._searchboxPanel.hidePopup();
   },
 
@@ -974,10 +974,13 @@ FilterView.prototype = {
   _tokenOperatorLabel: null,
   _lineOperatorButton: null,
   _lineOperatorLabel: null,
-  _globalSearchKey: "",
+  _variableOperatorButton: null,
+  _variableOperatorLabel: null,
   _fileSearchKey: "",
-  _lineSearchKey: "",
+  _globalSearchKey: "",
   _tokenSearchKey: "",
+  _lineSearchKey: "",
+  _variableSearchKey: "",
   _target: null,
   _prevSearchedFile: "",
   _prevSearchedLine: -1,
diff --git a/browser/devtools/debugger/debugger-view.js b/browser/devtools/debugger/debugger-view.js
index bce66d49633..0928901a098 100644
--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -15,8 +15,8 @@ const GLOBAL_SEARCH_LINE_MAX_LENGTH = 300; // chars
 const GLOBAL_SEARCH_EXPAND_MAX_RESULTS = 50;
 const GLOBAL_SEARCH_ACTION_MAX_DELAY = 1500; // ms
 const SEARCH_GLOBAL_FLAG = "!";
-const SEARCH_LINE_FLAG = ":";
 const SEARCH_TOKEN_FLAG = "#";
+const SEARCH_LINE_FLAG = ":";
 const SEARCH_VARIABLE_FLAG = "*";
 
 /**
diff --git a/browser/devtools/debugger/debugger.xul b/browser/devtools/debugger/debugger.xul
index c63b714650d..9ed58abc248 100644
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -35,12 +35,12 @@
              oncommand="DebuggerView.Toolbar._onStepOutPressed()"/>
     <command id="fileSearchCommand"
              oncommand="DebuggerView.Filtering._doFileSearch()"/>
-    <command id="lineSearchCommand"
-             oncommand="DebuggerView.Filtering._doLineSearch()"/>
-    <command id="tokenSearchCommand"
-             oncommand="DebuggerView.Filtering._doTokenSearch()"/>
     <command id="globalSearchCommand"
              oncommand="DebuggerView.Filtering._doGlobalSearch()"/>
+    <command id="tokenSearchCommand"
+             oncommand="DebuggerView.Filtering._doTokenSearch()"/>
+    <command id="lineSearchCommand"
+             oncommand="DebuggerView.Filtering._doLineSearch()"/>
     <command id="variableSearchCommand"
              oncommand="DebuggerView.Filtering._doVariableSearch()"/>
     <command id="addBreakpointCommand"
@@ -73,10 +73,33 @@
       <menuseparator/>
       <menuitem id="se-cMenu-selectAll"/>
       <menuseparator/>
-      <menuitem id="se-cMenu-find"/>
-      <menuitem id="se-cMenu-findAgain"/>
+      <menuitem id="se-dbg-cMenu-findFile"
+                label="&debuggerUI.searchFile;"
+                accesskey="&debuggerUI.searchFile.key;"
+                key="fileSearchKey"
+                command="fileSearchCommand"/>
+      <menuitem id="se-dbg-cMenu-findGlobal"
+                label="&debuggerUI.searchGlobal;"
+                accesskey="&debuggerUI.searchGlobal.key;"
+                key="globalSearchKey"
+                command="globalSearchCommand"/>
       <menuseparator/>
-      <menuitem id="se-cMenu-gotoLine"/>
+      <menuitem id="se-dbg-cMenu-findToken"
+                label="&debuggerUI.searchToken;"
+                accesskey="&debuggerUI.searchToken.key;"
+                key="tokenSearchKey"
+                command="tokenSearchCommand"/>
+      <menuitem id="se-dbg-cMenu-findLine"
+                label="&debuggerUI.searchLine;"
+                accesskey="&debuggerUI.searchLine.key;"
+                key="lineSearchKey"
+                command="lineSearchCommand"/>
+      <menuseparator/>
+      <menuitem id="se-dbg-cMenu-findVariable"
+                label="&debuggerUI.searchVariable;"
+                accesskey="&debuggerUI.searchVariable.key;"
+                key="variableSearchKey"
+                command="variableSearchCommand"/>
     </menupopup>
     <menupopup id="debuggerPrefsContextMenu"
                position="before_end"
@@ -105,48 +128,46 @@
     </menupopup>
   </popupset>
 
-  <keyset id="sourceEditorKeys"/>
-
   <keyset id="debuggerKeys">
     <key id="resumeKey"
-         keycode="VK_F6"
+         keycode="&debuggerUI.stepping.resume;"
          command="resumeCommand"/>
     <key id="stepOverKey"
-         keycode="VK_F7"
+         keycode="&debuggerUI.stepping.stepOver;"
          command="stepOverCommand"/>
     <key id="stepInKey"
-         keycode="VK_F8"
+         keycode="&debuggerUI.stepping.stepIn;"
          command="stepInCommand"/>
     <key id="stepOutKey"
-         keycode="VK_F8"
+         keycode="&debuggerUI.stepping.stepOut;"
          modifiers="shift"
          command="stepOutCommand"/>
     <key id="fileSearchKey"
-         key="P"
-         modifiers="control shift"
+         key="&debuggerUI.searchFile.key;"
+         modifiers="accel"
          command="fileSearchCommand"/>
-    <key id="lineSearchKey"
-         key="G"
-         modifiers="control shift"
-         command="lineSearchCommand"/>
-    <key id="tokenSearchKey"
-         key="T"
-         modifiers="control shift"
-         command="tokenSearchCommand"/>
     <key id="globalSearchKey"
-         key="F"
-         modifiers="control shift"
+         key="&debuggerUI.searchGlobal.key;"
+         modifiers="accel alt"
          command="globalSearchCommand"/>
+    <key id="tokenSearchKey"
+         key="&debuggerUI.searchToken.key;"
+         modifiers="accel"
+         command="tokenSearchCommand"/>
+    <key id="lineSearchKey"
+         key="&debuggerUI.searchLine.key;"
+         modifiers="accel"
+         command="lineSearchCommand"/>
     <key id="variableSearchKey"
-         key="V"
-         modifiers="control shift"
+         key="&debuggerUI.searchVariable.key;"
+         modifiers="accel alt"
          command="variableSearchCommand"/>
     <key id="addBreakpointKey"
-         key="B"
+         key="&debuggerUI.seMenuBreak.key;"
          modifiers="accel"
          command="addBreakpointCommand"/>
     <key id="addConditionalBreakpointKey"
-         key="B"
+         key="&debuggerUI.seMenuCondBreak.key;"
          modifiers="accel shift"
          command="addConditionalBreakpointCommand"/>
   </keyset>
@@ -181,6 +202,7 @@
       <spacer flex="1"/>
       <toolbarbutton id="toggle-panes"
                      class="devtools-toolbarbutton"
+                     tooltiptext="&debuggerUI.panesButton.tooltip;"
                      tabindex="0"/>
       <toolbarbutton id="debugger-options"
                      class="devtools-option-toolbarbutton"
diff --git a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
index 9ac7911df42..8af191ae1d8 100644
--- a/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug731394_editor-contextmenu.js
@@ -97,8 +97,6 @@ function test()
        "#editMenuKeys not found");
     ok(document.getElementById("sourceEditorCommands"),
        "#sourceEditorCommands found");
-    ok(document.getElementById("sourceEditorKeys"),
-       "#sourceEditorKeys found");
 
     // Map command ids to their expected disabled state.
     let commands = {"se-cmd-undo": true, "se-cmd-redo": true,
diff --git a/browser/devtools/shared/LayoutHelpers.jsm b/browser/devtools/shared/LayoutHelpers.jsm
index 64dd465478e..0c174b92ee2 100644
--- a/browser/devtools/shared/LayoutHelpers.jsm
+++ b/browser/devtools/shared/LayoutHelpers.jsm
@@ -326,10 +326,12 @@ this.LayoutHelpers = LayoutHelpers = {
    *
    * @param Node aElemKey
    *        The key element to get the modifiers from.
+   * @param boolean aAllowCloverleaf
+   *        Pass true to use the cloverleaf symbol instead of a descriptive string.
    * @return string
    *         A prettified and properly separated modifier keys string.
    */
-  prettyKey: function LH_prettyKey(aElemKey)
+  prettyKey: function LH_prettyKey(aElemKey, aAllowCloverleaf)
   {
     let elemString = "";
     let elemMod = aElemKey.getAttribute("modifiers");
@@ -338,9 +340,12 @@ this.LayoutHelpers = LayoutHelpers = {
       if (Services.appinfo.OS == "Darwin") {
         // XXX bug 779642 Use "Cmd-" literal vs. cloverleaf meta-key until
         // Orion adds variable height lines.
-        // elemString += PlatformKeys.GetStringFromName("VK_META") +
-        //               PlatformKeys.GetStringFromName("MODIFIER_SEPARATOR");
-        elemString += "Cmd-";
+        if (!aAllowCloverleaf) {
+          elemString += "Cmd-";
+        } else {
+          elemString += PlatformKeys.GetStringFromName("VK_META") +
+                        PlatformKeys.GetStringFromName("MODIFIER_SEPARATOR");
+        }
       } else {
         elemString += PlatformKeys.GetStringFromName("VK_CONTROL") +
                       PlatformKeys.GetStringFromName("MODIFIER_SEPARATOR");
diff --git a/browser/locales/en-US/chrome/browser/devtools/debugger.dtd b/browser/locales/en-US/chrome/browser/devtools/debugger.dtd
index d12191ec9c4..e2f24830323 100644
--- a/browser/locales/en-US/chrome/browser/devtools/debugger.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/debugger.dtd
@@ -35,6 +35,10 @@
   -  the button that closes the debugger UI. -->
 <!ENTITY debuggerUI.closeButton.tooltip "Close">
 
+<!-- LOCALIZATION NOTE (debuggerUI.panesButton.tooltip): This is the tooltip for
+  -  the button that toggles the panes visible or hidden in the debugger UI. -->
+<!ENTITY debuggerUI.panesButton.tooltip "Toggle panes">
+
 <!-- LOCALIZATION NOTE (debuggerUI.optsButton.tooltip): This is the tooltip for
   -  the button that opens up an options context menu for the debugger UI. -->
 <!ENTITY debuggerUI.optsButton.tooltip  "Debugger Options">
@@ -64,6 +68,31 @@
   -  appears in the filter panel popup as a description. -->
 <!ENTITY debuggerUI.searchPanelTitle    "Operators">
 
+<!-- LOCALIZATION NOTE (debuggerUI.searchFile): This is the text that appears
+  -  in the source editor's context menu for the scripts search operation. -->
+<!ENTITY debuggerUI.searchFile          "Filter scripts">
+<!ENTITY debuggerUI.searchFile.key      "P">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchGlobal): This is the text that appears
+  -  in the source editor's context menu for the global search operation. -->
+<!ENTITY debuggerUI.searchGlobal        "Search in all files">
+<!ENTITY debuggerUI.searchGlobal.key    "F">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchToken): This is the text that appears
+  -  in the source editor's context menu for the token search operation. -->
+<!ENTITY debuggerUI.searchToken         "Find">
+<!ENTITY debuggerUI.searchToken.key     "F">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchLine): This is the text that appears
+  -  in the source editor's context menu for the line search operation. -->
+<!ENTITY debuggerUI.searchLine          "Jump to line...">
+<!ENTITY debuggerUI.searchLine.key      "J">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchVariable): This is the text that appears
+  -  in the source editor's context menu for the variables search operation. -->
+<!ENTITY debuggerUI.searchVariable      "Filter variables">
+<!ENTITY debuggerUI.searchVariable.key  "V">
+
 <!-- LOCALIZATION NOTE (debuggerUI.condBreakPanelTitle): This is the text that
   -  appears in the conditional breakpoint panel popup as a description. -->
 <!ENTITY debuggerUI.condBreakPanelTitle "This breakpoint will stop execution only if the following expression is true">
@@ -71,8 +100,19 @@
 <!-- LOCALIZATION NOTE (debuggerUI.seMenuBreak): This is the text that
   -  appears in the source editor context menu for adding a breakpoint. -->
 <!ENTITY debuggerUI.seMenuBreak         "Add breakpoint">
+<!ENTITY debuggerUI.seMenuBreak.key     "B">
 
 <!-- LOCALIZATION NOTE (debuggerUI.seMenuCondBreak): This is the text that
   -  appears in the source editor context menu for adding a conditional
   -  breakpoint. -->
 <!ENTITY debuggerUI.seMenuCondBreak     "Add conditional breakpoint">
+<!ENTITY debuggerUI.seMenuCondBreak.key "B">
+
+<!-- LOCALIZATION NOTE (debuggerUI.stepping): These are the keycodes that
+  -  control the stepping commands in the debugger (continue, step over,
+  -  step in and step out). -->
+<!ENTITY debuggerUI.stepping.resume     "VK_F6">
+<!ENTITY debuggerUI.stepping.stepOver   "VK_F7">
+<!ENTITY debuggerUI.stepping.stepIn     "VK_F8">
+<!ENTITY debuggerUI.stepping.stepOut    "VK_F8">
+

From 226b110cfdd8ed760dad36352dc306fecfd8f312 Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Tue, 27 Nov 2012 18:19:24 +0200
Subject: [PATCH 6/8] Bug 791323 - Need a mechanism to select a script
 programmatically in the debugger, r=rcampbell

---
 browser/devtools/debugger/debugger-toolbar.js | 14 ++++
 browser/devtools/debugger/test/Makefile.in    |  1 +
 .../browser_dbg_reload-preferred-script.js    | 79 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js

diff --git a/browser/devtools/debugger/debugger-toolbar.js b/browser/devtools/debugger/debugger-toolbar.js
index 855465eef3d..8efea073b59 100644
--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -370,6 +370,20 @@ create({ constructor: SourcesView, proto: MenuContainer.prototype }, {
     this._container.removeEventListener("click", this._onClick, false);
   },
 
+  /**
+   * Sets the preferred source url to be displayed in this container.
+   * @param string aValue
+   */
+  set preferredSource(aValue) {
+    this._preferredValue = aValue;
+
+    // Selects the element with the specified value in this container,
+    // if already inserted.
+    if (this.containsValue(aValue)) {
+      this.selectedValue = aValue;
+    }
+  },
+
   /**
    * The select listener for the sources container.
    */
diff --git a/browser/devtools/debugger/test/Makefile.in b/browser/devtools/debugger/test/Makefile.in
index 97acb87efd6..dca2b7e2f52 100644
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -45,6 +45,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_propertyview-filter-08.js \
 	browser_dbg_propertyview-reexpand.js \
 	browser_dbg_reload-same-script.js \
+	browser_dbg_reload-preferred-script.js \
 	browser_dbg_pane-collapse.js \
 	browser_dbg_panesize.js \
 	browser_dbg_panesize-inner.js \
diff --git a/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js b/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js
new file mode 100644
index 00000000000..4920fc50a76
--- /dev/null
+++ b/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the preferred script is shown when a page is loaded.
+ */
+
+const TAB_URL = EXAMPLE_URL + "browser_dbg_script-switching.html";
+
+let gPane = null;
+let gTab = null;
+let gDebuggee = null;
+let gDebugger = null;
+let gView = null;
+
+requestLongerTimeout(2);
+
+function test()
+{
+  let expectedScript = "test-script-switching-02.js";
+  let expectedScriptShown = false;
+  let scriptShownUrl = null;
+  let resumed = false;
+  let testStarted = false;
+
+  debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPane = aPane;
+    gDebugger = gPane.contentWindow;
+    gView = gDebugger.DebuggerView;
+    resumed = true;
+
+    gView.Sources.preferredSource = EXAMPLE_URL + expectedScript;
+    startTest();
+  });
+
+  function onScriptShown(aEvent)
+  {
+    expectedScriptShown = aEvent.detail.url.indexOf(expectedScript) != -1;
+    scriptShownUrl = aEvent.detail.url;
+    startTest();
+  }
+
+  window.addEventListener("Debugger:SourceShown", onScriptShown);
+
+  function startTest()
+  {
+    if (expectedScriptShown && resumed && !testStarted) {
+      window.removeEventListener("Debugger:SourceShown", onScriptShown);
+      testStarted = true;
+      Services.tm.currentThread.dispatch({ run: performTest }, 0);
+    }
+  }
+
+  function performTest()
+  {
+    info("Currently preferred script: " + gView.Sources.preferredValue);
+    info("Currently selected script: " + gView.Sources.selectedValue);
+
+    isnot(gView.Sources.preferredValue.indexOf(expectedScript), -1,
+      "The preferred script url wasn't set correctly.");
+    isnot(gView.Sources.selectedValue.indexOf(expectedScript), -1,
+      "The selected script isn't the correct one.");
+    is(gView.Sources.selectedValue, scriptShownUrl,
+      "The shown script is not the the correct one.");
+
+    closeDebuggerAndFinish();
+  }
+
+  registerCleanupFunction(function() {
+    removeTab(gTab);
+    gPane = null;
+    gTab = null;
+    gDebuggee = null;
+    gDebugger = null;
+    gView = null;
+  });
+}

From 831c752537b16890e27c90b306e56fe4c87d51e7 Mon Sep 17 00:00:00 2001
From: Panos Astithas <past@mozilla.com>
Date: Tue, 27 Nov 2012 14:29:46 +0200
Subject: [PATCH 7/8] Bug 812869 - Breakpoint clients sometimes don't know how
 to remove themselves, r=vporof

---
 .../devtools/debugger/debugger-controller.js  |   5 +-
 .../debugger/server/dbg-script-actors.js      |  10 +-
 .../debugger/tests/unit/test_breakpoint-12.js | 101 ++++++++++++++++++
 .../devtools/debugger/tests/unit/xpcshell.ini |   1 +
 4 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 toolkit/devtools/debugger/tests/unit/test_breakpoint-12.js

diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js
index 3609121173d..98e5c1e6e08 100644
--- a/browser/devtools/debugger/debugger-controller.js
+++ b/browser/devtools/debugger/debugger-controller.js
@@ -1326,11 +1326,10 @@ Breakpoints.prototype = {
     this.activeThread.setBreakpoint(aLocation, function(aResponse, aBreakpointClient) {
       let { url, line } = aResponse.actualLocation || aLocation;
 
-      // Prevent this new breakpoint from being repositioned on top of an
-      // already existing one.
+      // If the response contains a breakpoint that exists in the cache, prevent
+      // it from being shown in the source editor at an incorrect position.
       if (this.getBreakpoint(url, line)) {
         this._hideBreakpoint(aBreakpointClient);
-        aBreakpointClient.remove();
         return;
       }
 
diff --git a/toolkit/devtools/debugger/server/dbg-script-actors.js b/toolkit/devtools/debugger/server/dbg-script-actors.js
index 8620f251f0e..a912557451b 100644
--- a/toolkit/devtools/debugger/server/dbg-script-actors.js
+++ b/toolkit/devtools/debugger/server/dbg-script-actors.js
@@ -578,13 +578,21 @@ ThreadActor.prototype = {
             inner.setBreakpoint(lines[line][i], bpActor);
             codeFound = true;
           }
+          bpActor.addScript(inner, this);
           actualLocation = {
             url: aLocation.url,
             line: line,
             column: aLocation.column
           };
+          // If there wasn't already a breakpoint at that line, update the cache
+          // as well.
+          if (scriptBreakpoints[line] && scriptBreakpoints[line].actor) {
+            let existing = scriptBreakpoints[line].actor;
+            bpActor.onDelete();
+            delete scriptBreakpoints[oldLine];
+            return { actor: existing.actorID, actualLocation: actualLocation };
+          }
           bpActor.location = actualLocation;
-          // Update the cache as well.
           scriptBreakpoints[line] = scriptBreakpoints[oldLine];
           scriptBreakpoints[line].line = line;
           delete scriptBreakpoints[oldLine];
diff --git a/toolkit/devtools/debugger/tests/unit/test_breakpoint-12.js b/toolkit/devtools/debugger/tests/unit/test_breakpoint-12.js
new file mode 100644
index 00000000000..7a70f877ccb
--- /dev/null
+++ b/toolkit/devtools/debugger/tests/unit/test_breakpoint-12.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Make sure that setting a breakpoint twice in a line without bytecodes works
+ * as expected.
+ */
+
+const NUM_BREAKPOINTS = 10;
+var gDebuggee;
+var gClient;
+var gThreadClient;
+var gPath = getFilePath('test_breakpoint-12.js');
+var gBpActor;
+var gCount = 1;
+
+function run_test()
+{
+  initTestDebuggerServer();
+  gDebuggee = addTestGlobal("test-stack");
+  gClient = new DebuggerClient(DebuggerServer.connectPipe());
+  gClient.connect(function () {
+    attachTestGlobalClientAndResume(gClient,
+                                    "test-stack",
+                                    function (aResponse, aThreadClient) {
+      gThreadClient = aThreadClient;
+      test_child_skip_breakpoint();
+    });
+  });
+  do_test_pending();
+}
+
+function test_child_skip_breakpoint()
+{
+  gThreadClient.addOneTimeListener("paused", function (aEvent, aPacket) {
+    let location = { url: gPath, line: gDebuggee.line0 + 3};
+    gThreadClient.setBreakpoint(location, function (aResponse, bpClient) {
+      // Check that the breakpoint has properly skipped forward one line.
+      do_check_eq(aResponse.actualLocation.url, location.url);
+      do_check_eq(aResponse.actualLocation.line, location.line + 1);
+      gBpActor = aResponse.actor;
+
+      // Set more breakpoints at the same location.
+      set_breakpoints(location);
+    });
+
+  });
+
+  gDebuggee.eval("var line0 = Error().lineNumber;\n" +
+                 "function foo() {\n" + // line0 + 1
+                 "  this.a = 1;\n" +    // line0 + 2
+                 "  // A comment.\n" +  // line0 + 3
+                 "  this.b = 2;\n" +    // line0 + 4
+                 "}\n" +                // line0 + 5
+                 "debugger;\n" +        // line0 + 6
+                 "foo();\n");           // line0 + 7
+}
+
+// Set many breakpoints at the same location.
+function set_breakpoints(location) {
+  do_check_neq(gCount, NUM_BREAKPOINTS);
+  gThreadClient.setBreakpoint(location, function (aResponse, bpClient) {
+    // Check that the breakpoint has properly skipped forward one line.
+    do_check_eq(aResponse.actualLocation.url, location.url);
+    do_check_eq(aResponse.actualLocation.line, location.line + 1);
+    // Check that the same breakpoint actor was returned.
+    do_check_eq(aResponse.actor, gBpActor);
+
+    if (++gCount < NUM_BREAKPOINTS) {
+      set_breakpoints(location);
+      return;
+    }
+
+    // After setting all the breakpoints, check that only one has effectively
+    // remained.
+    gThreadClient.addOneTimeListener("paused", function (aEvent, aPacket) {
+      // Check the return value.
+      do_check_eq(aPacket.type, "paused");
+      do_check_eq(aPacket.frame.where.url, gPath);
+      do_check_eq(aPacket.frame.where.line, location.line + 1);
+      do_check_eq(aPacket.why.type, "breakpoint");
+      do_check_eq(aPacket.why.actors[0], bpClient.actor);
+      // Check that the breakpoint worked.
+      do_check_eq(gDebuggee.a, 1);
+      do_check_eq(gDebuggee.b, undefined);
+
+      gThreadClient.addOneTimeListener("paused", function (aEvent, aPacket) {
+        // We don't expect any more pauses after the breakpoint was hit once.
+        do_check_true(false);
+      });
+      gThreadClient.resume(function () {
+        // Give any remaining breakpoints a chance to trigger.
+        do_timeout(1000, finishClient.bind(null, gClient));
+      });
+
+    });
+    // Continue until the breakpoint is hit.
+    gThreadClient.resume();
+  });
+
+}
diff --git a/toolkit/devtools/debugger/tests/unit/xpcshell.ini b/toolkit/devtools/debugger/tests/unit/xpcshell.ini
index 7883991062c..d64b7957120 100644
--- a/toolkit/devtools/debugger/tests/unit/xpcshell.ini
+++ b/toolkit/devtools/debugger/tests/unit/xpcshell.ini
@@ -45,6 +45,7 @@ tail =
 [test_breakpoint-09.js]
 [test_breakpoint-10.js]
 [test_breakpoint-11.js]
+[test_breakpoint-12.js]
 [test_listscripts-01.js]
 [test_objectgrips-01.js]
 [test_objectgrips-02.js]

From 295ac340de1409ebc6dfe9c672d544d538f9b71d Mon Sep 17 00:00:00 2001
From: Chris AtLee <catlee@mozilla.com>
Date: Tue, 27 Nov 2012 06:21:07 -0800
Subject: [PATCH 8/8] Bug 813826: gecko configs for otoro builds. r=nthomas
 DONTBUILD

--HG--
extra : rebase_source : 2af6efb4c7851f338f4594ca3757dc4a2ac1762d
---
 b2g/config/otoro/config.json     |  20 ++++++
 b2g/config/otoro/releng-otoro.tt |   8 +++
 b2g/config/otoro/sources.xml     | 108 +++++++++++++++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 b2g/config/otoro/config.json
 create mode 100644 b2g/config/otoro/releng-otoro.tt
 create mode 100644 b2g/config/otoro/sources.xml

diff --git a/b2g/config/otoro/config.json b/b2g/config/otoro/config.json
new file mode 100644
index 00000000000..0e2887f231a
--- /dev/null
+++ b/b2g/config/otoro/config.json
@@ -0,0 +1,20 @@
+{
+    "config_version": 1,
+    "tooltool_manifest": "releng-otoro.tt",
+    "mock_target": "mozilla-centos6-i386",
+    "mock_packages": ["ccache", "make", "bison", "flex", "gcc", "g++", "mpfr", "zlib-devel", "ncurses-devel", "zip", "autoconf213", "glibc-static", "perl-Digest-SHA", "wget", "alsa-lib", "atk", "cairo", "dbus-glib", "fontconfig", "freetype", "glib2", "gtk2", "libXRender", "libXt", "pango", "mozilla-python27-mercurial", "openssh-clients", "nss-devel"],
+    "mock_files": [["/home/cltbld/.ssh", "/home/mock_mozilla/.ssh"]],
+    "build_targets": [],
+    "upload_files": [
+        "{workdir}/out/target/product/otoro/*.img",
+        "{objdir}/dist/b2g-update/*.mar",
+        "{objdir}/dist/b2g-*.tar.gz",
+        "{objdir}/dist/b2g-*.crashreporter-symbols.zip",
+        "{workdir}/sources.xml"
+    ],
+    "env": {
+        "VARIANT": "user",
+        "B2GUPDATER": "1"
+    },
+    "gaia": {"vcs": "hgtool", "repo": "http://hg.mozilla.org/projects/gaia"}
+}
diff --git a/b2g/config/otoro/releng-otoro.tt b/b2g/config/otoro/releng-otoro.tt
new file mode 100644
index 00000000000..dd9993522b8
--- /dev/null
+++ b/b2g/config/otoro/releng-otoro.tt
@@ -0,0 +1,8 @@
+[
+{
+"size": 868355892,
+"digest": "0ccae39ee8910947fe3cf51fa3a45e820d2ff11571f6ccec29d9b3e5ae7f7709c1ad657210fbfea98baadd032c3d6a58e00ddbb2e93acafd751089869a72fed6",
+"algorithm": "sha512",
+"filename": "gonk.tar.xz"
+}
+]
diff --git a/b2g/config/otoro/sources.xml b/b2g/config/otoro/sources.xml
new file mode 100644
index 00000000000..87209fe131f
--- /dev/null
+++ b/b2g/config/otoro/sources.xml
@@ -0,0 +1,108 @@
+<?xml version="1.0" ?><manifest>
+  <!-- This is only a record of which revisions were pulled to generate the
+       gonk.tar.xz snapshot referred to by releng-otoro.tt -->
+
+  <remote fetch="https://android.googlesource.com/" name="aosp"/>
+  <remote fetch="git://github.com/mozilla-b2g/" name="b2g"/>
+  <remote fetch="git://github.com/mozilla/" name="mozilla"/>
+  <remote fetch="git://codeaurora.org/" name="caf"/>
+  <remote fetch="git://android.git.linaro.org/" name="linaro"/>
+  <default remote="caf" revision="ics_chocolate_rb4.2" sync-j="4"/>
+
+  <!-- Gonk specific things and forks -->
+  <project name="platform_build" path="build" remote="b2g" revision="273ba23d5c6c9f6a34995a3cc429804d1449ca9f">
+    <copyfile dest="Makefile" src="core/root.mk"/>
+  </project>
+  <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
+  <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="2f4377622f4c40275546c7816c0d4b21e800b4c6"/>
+  <project name="rilproxy" path="rilproxy" remote="b2g" revision="32106d4ea635ebe17a1610b643b398db639b8b97"/>
+  <project name="librecovery" path="librecovery" remote="b2g" revision="b7911c064a71a5c18e2c92f869f6364a798b46cd"/>
+  <project name="moztt" path="external/moztt" remote="b2g" revision="6ee1f8987ef36d688f97064c003ad57849dfadf2"/>
+
+  <!-- Stock Android things -->
+  <!-- Information: platform/abi/cpp is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/abi/cpp" path="abi/cpp" revision="6426040f1be4a844082c9769171ce7f5341a5528"/>
+  <!-- Information: platform/bionic is tagged with M8960AAAAANLYA100715A --><project name="platform/bionic" path="bionic" revision="cd5dfce80bc3f0139a56b58aca633202ccaee7f8"/>
+  <!-- Information: platform/bootable/recovery is tagged with M8960AAAAANLYA100715A --><project name="platform/bootable/recovery" path="bootable/recovery" revision="e0a9ac010df3afaa47ba107192c05ac8b5516435"/>
+  <!-- Information: platform/development is tagged with M8960AAAAANLYA100715A --><project name="platform/development" path="development" revision="a384622f5fcb1d2bebb9102591ff7ae91fe8ed2d"/>
+  <!-- Information: device/common is tagged with M8960AAAAANLYA1005304 --><project name="device/common" path="device/common" revision="7c65ea240157763b8ded6154a17d3c033167afb7"/>
+  <!-- Information: device/sample is tagged with M8960AAAAANLYA100715A --><project name="device/sample" path="device/sample" revision="c328f3d4409db801628861baa8d279fb8855892f"/>
+  <!-- Information: platform/external/apache-http is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/apache-http" path="external/apache-http" revision="6c9d8c58d3ed710f87c26820d903bb8aad81754f"/>
+  <!-- Information: platform/external/bluetooth/bluez is tagged with M76XXUSNEKNLYA2040 --><project name="platform/external/bluetooth/bluez" path="external/bluetooth/bluez" revision="1023c91c66e9c3bd1132480051993bf7827770f6"/>
+  <!-- Information: platform/external/bluetooth/glib is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/bluetooth/glib" path="external/bluetooth/glib" revision="c6b49241cc1a8950723a5f74f8f4b4f4c3fa970e"/>
+  <!-- Information: platform/external/bluetooth/hcidump is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/bluetooth/hcidump" path="external/bluetooth/hcidump" revision="02b1eb24fbb3d0135a81edb4a2175b1397308d7d"/>
+  <!-- Information: platform/external/bsdiff is tagged with A8064AAAAANLYA1334 --><project name="platform/external/bsdiff" path="external/bsdiff" revision="81872540236d9bb15cccf963d05b9de48baa5375"/>
+  <!-- Information: platform/external/bzip2 is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/bzip2" path="external/bzip2" revision="048dacdca43eed1534689ececcf2781c63e1e4ba"/>
+  <!-- Information: platform/external/dbus is tagged with M8960AAAAANLYA100715A --><project name="platform/external/dbus" path="external/dbus" revision="c7517b6195dc6926728352113e6cc335da3f9c9e"/>
+  <!-- Information: platform/external/dhcpcd is tagged with M8960AAAAANLYA100715A --><project name="platform/external/dhcpcd" path="external/dhcpcd" revision="1e00fb67022d0921af0fead263f81762781b9ffa"/>
+  <!-- Information: platform/external/dnsmasq is tagged with A8064AAAAANLYA1334 --><project name="platform/external/dnsmasq" path="external/dnsmasq" revision="f621afad94df46204c25fc2593a19d704d2637f5"/>
+  <!-- Information: platform/external/e2fsprogs is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/e2fsprogs" path="external/e2fsprogs" revision="d5f550bb2f556c5d287f7c8d2b77223654bcec37"/>
+  <!-- Information: platform/external/expat is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/expat" path="external/expat" revision="6df134250feab71edb5915ecaa6268210bca76c5"/>
+  <!-- Information: platform/external/fdlibm is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/fdlibm" path="external/fdlibm" revision="988ffeb12a6e044ae3504838ef1fee3fe0716934"/>
+  <!-- Information: platform/external/flac is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/flac" path="external/flac" revision="5893fbe890f5dab8e4146d2baa4bd2691c0739e0"/>
+  <!-- Information: platform/external/freetype is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/freetype" path="external/freetype" revision="aeb407daf3711a10a27f3bc2223c5eb05158076e"/>
+  <!-- Information: platform/external/giflib is tagged with A8064AAAAANLYA1334 --><project name="platform/external/giflib" path="external/giflib" revision="b2597268aef084202a8c349d1cc072c03c6e22eb"/>
+  <!-- Information: platform/external/gtest is tagged with android-4.2_r1 --><project name="platform/external/gtest" path="external/gtest" remote="linaro" revision="344e5f3db17615cc853073a02968a603efd39109"/>
+  <!-- Information: platform/external/harfbuzz is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/harfbuzz" path="external/harfbuzz" revision="116610d63a859521dacf00fb6818ee9ab2e666f6"/>
+  <!-- Information: platform/external/icu4c is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/icu4c" path="external/icu4c" revision="0fa67b93b831c6636ca18b152a1b1b14cc99b034"/>
+  <!-- Information: platform/external/iptables is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/iptables" path="external/iptables" revision="3b2deb17f065c5664bb25e1a28489e5792eb63ff"/>
+  <!-- Information: platform/external/jhead is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/jhead" path="external/jhead" revision="754078052c687f6721536009c816644c73e4f145"/>
+  <!-- Information: platform/external/jpeg is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/jpeg" path="external/jpeg" revision="a62e464d672a4623233180e4023034bf825f066e"/>
+  <!-- Information: platform/external/libgsm is tagged with A8064AAAAANLYA1334 --><project name="platform/external/libgsm" path="external/libgsm" revision="5e4516958690b9a1b2c98f88eeecba3edd2dbda4"/>
+  <!-- Information: platform/external/liblzf is tagged with A8064AAAAANLYA1334 --><project name="platform/external/liblzf" path="external/liblzf" revision="6946aa575b0949d045722794850896099d937cbb"/>
+  <!-- Information: platform/external/libnfc-nxp is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/libnfc-nxp" path="external/libnfc-nxp" revision="3a912b065a31a72c63ad56ac224cfeaa933423b6"/>
+  <!-- Information: platform/external/libnl-headers is tagged with A8064AAAAANLYA1334 --><project name="platform/external/libnl-headers" path="external/libnl-headers" revision="6ccf7349d61f73ac26a0675d735d903ab919c658"/>
+  <!-- Information: platform/external/libphonenumber is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/libphonenumber" path="external/libphonenumber" revision="8d22c9a05eda1935c6dc27d188158e6ee38dc016"/>
+  <!-- Information: platform/external/libpng is tagged with M8960AAAAANLYA100715A --><project name="platform/external/libpng" path="external/libpng" revision="9c3730f0efa69f580f03463c237cd928f3196404"/>
+  <!-- Information: platform/external/libvpx is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/libvpx" path="external/libvpx" revision="3a40da0d96da5c520e7707aa14f48a80956e20d7"/>
+  <!-- Information: platform/external/llvm is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/llvm" path="external/llvm" revision="bff5923831940309f7d8ddbff5826ca6ed2dc050"/>
+  <!-- Information: platform/external/mksh is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/mksh" path="external/mksh" revision="ec646e8f5e7dac9a77d1de549c6ed92c04d0cd4b"/>
+  <project name="platform_external_opensans" path="external/opensans" remote="b2g" revision="b5b4c226ca1d71e936153cf679dda6d3d60e2354"/>
+  <!-- Information: platform/external/openssl is tagged with AU_LINUX_ANDROID_ICS.04.00.04.00.110 --><project name="platform/external/openssl" path="external/openssl" revision="27d333cce9a31c806b4bfa042925f045c727aecd"/>
+  <!-- Information: platform/external/protobuf is tagged with A8064AAAAANLYA1334 --><project name="platform/external/protobuf" path="external/protobuf" revision="e217977611c52bccde7f7c78e1d3c790c6357431"/>
+  <!-- Information: platform/external/safe-iop is tagged with A8064AAAAANLYA1334 --><project name="platform/external/safe-iop" path="external/safe-iop" revision="07073634e2e3aa4f518e36ed5dec3aabc549d5fb"/>
+  <project name="screencap-gonk" path="external/screencap-gonk" remote="b2g" revision="e6403c71e9eca8cb943739d5a0a192deac60fc51"/>
+  <!-- Information: platform/external/skia is tagged with M8960AAAAANLYA100715A --><project name="platform/external/skia" path="external/skia" revision="7d90c85f2c0e3b747f7c7eff8bc9253b0063b439"/>
+  <!-- Information: platform/external/sonivox is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/sonivox" path="external/sonivox" revision="7c967779dfc61ac1f346e972de91d4bfce7dccbb"/>
+  <!-- Information: platform/external/speex is tagged with A8064AAAAANLYA1334 --><project name="platform/external/speex" path="external/speex" revision="ebe6230a7f7c69f5a4389f2b09b7b19ef9e94f32"/>
+  <project name="platform/external/sqlite" path="external/sqlite" revision="fb30e613139b8836fdc8e81e166cf3a76e5fa17f"/>
+  <!-- Information: platform/external/stlport is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/stlport" path="external/stlport" revision="a6734e0645fce81c9610de0488b729207bfa576e"/>
+  <!-- Information: platform/external/strace is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/strace" path="external/strace" revision="c9fd2e5ef7d002e12e7cf2512506c84a9414b0fd"/>
+  <!-- Information: platform/external/tagsoup is tagged with A8064AAAAANLYA1334 --><project name="platform/external/tagsoup" path="external/tagsoup" revision="68c2ec9e0acdb3214b7fb91dbab8c9fab8736817"/>
+  <!-- Information: platform/external/tinyalsa is tagged with M8960AAAAANLYA1005304 --><project name="platform/external/tinyalsa" path="external/tinyalsa" revision="06cc244ee512c1352215e543615738bc8ac82814"/>
+  <!-- Information: platform/external/tremolo is tagged with A8064AAAAANLYA1334 --><project name="platform/external/tremolo" path="external/tremolo" revision="25bd78d2392dbdc879ae53382cde9d019f79cf6f"/>
+  <project name="unbootimg" path="external/unbootimg" remote="b2g" revision="9464623d92eb8668544916dc5a8f4f6337d0bc08"/>
+  <!-- Information: platform/external/webp is tagged with A8064AAAAANLYA1334 --><project name="platform/external/webp" path="external/webp" revision="88fe2b83c4b9232cd08729556fd0485d6a6a92cd"/>
+  <!-- Information: platform/external/webrtc is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/webrtc" path="external/webrtc" revision="137024dc8a2e9251a471e20518a9c3ae06f81f23"/>
+  <!-- Information: platform/external/wpa_supplicant is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/wpa_supplicant" path="external/wpa_supplicant" revision="a01d37870bbf9892d43e792e5de0683ca41c5497"/>
+  <!-- Information: platform/external/hostap is tagged with M8960AAAAANLYA1047 --><project name="platform/external/hostap" path="external/hostap" revision="bf04b0faadbdeb4b7943f2e2c4c5aa59df872bb1"/>
+  <!-- Information: platform/external/zlib is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/zlib" path="external/zlib" revision="f96a1d1ebfdf1cd582210fd09c23d8f59e0ae094"/>
+  <!-- Information: platform/external/yaffs2 is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/external/yaffs2" path="external/yaffs2" revision="0afa916204c664b3114429637b63af1321a0aeca"/>
+  <!-- Information: platform/frameworks/base is tagged with M76XXUSNEKNLYA2040 --><project name="platform/frameworks/base" path="frameworks/base" revision="eb2bc75803ca179353c24c364a9c8a8ce23e8b78"/>
+  <!-- Information: platform/frameworks/opt/emoji is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/frameworks/opt/emoji" path="frameworks/opt/emoji" revision="a95d8db002770469d72dfaf59ff37ac96db29a87"/>
+  <!-- Information: platform/frameworks/support is tagged with M8960AAAAANLYA1005304 --><project name="platform/frameworks/support" path="frameworks/support" revision="27208692b001981f1806f4f396434f4eac78b909"/>
+  <!-- Information: platform/hardware/libhardware is tagged with M8960AAAAANLYA1049B --><project name="platform/hardware/libhardware" path="hardware/libhardware" revision="4a619901847621f8a7305edf42dd07347a140484"/>
+  <!-- Information: platform/hardware/libhardware_legacy is tagged with M8960AAAAANLYA153611 --><project name="platform/hardware/libhardware_legacy" path="hardware/libhardware_legacy" revision="87b4d7afa8f854b445e2d0d95091f6f6069f2b30"/>
+  <!-- Information: platform/libcore is tagged with M8960AAAAANLYA100715A --><project name="platform/libcore" path="libcore" revision="30841f9fba9ccd5c54f4f079f495994db97f283e"/>
+  <!-- Information: platform/ndk is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/ndk" path="ndk" revision="9f555971e1481854d5b4dc11b3e6af9fff4f241f"/>
+  <!-- Information: platform/prebuilt is tagged with M8960AAAAANLYA1005304 --><project name="platform/prebuilt" path="prebuilt" revision="447ea790fcc957dde59730ecc2a65ca263bdc733"/>
+  <!-- Information: platform/system/bluetooth is tagged with M8960AAAAANLYA100703 --><project name="platform/system/bluetooth" path="system/bluetooth" revision="7772cad4823f1f427ce1d4df84a55982386d6d18"/>
+  <!-- Information: platform/system/core is tagged with M76XXUSNEKNLYA2040 --><project name="platform/system/core" path="system/core" revision="bf1970408676ce570b8f4dc3efa038e47552137f"/>
+  <!-- Information: platform/system/extras is tagged with M8960AAAAANLYA1005304 --><project name="platform/system/extras" path="system/extras" revision="01db6c1254e1407740a543f24317fc540fc4c049"/>
+  <!-- Information: platform/system/media is tagged with M8960AAAAANLYA1005304 --><project name="platform/system/media" path="system/media" revision="7f71c7fd362bbd992ff2e0e80f7af5859ad116ad"/>
+  <!-- Information: platform/system/netd is tagged with M8960AAAAANLYA1049 --><project name="platform/system/netd" path="system/netd" revision="306e765248e3900041bf2737e9f57b1b5694a4ce"/>
+  <!-- Information: platform/system/vold is tagged with M8960AAAAANLYA100715A --><project name="platform/system/vold" path="system/vold" revision="99fff257d53cc045d1460841edca5d901dacfcf5"/>
+
+  <!-- Otoro/Unagi specific things -->
+  <!-- Information: device/qcom/common is tagged with M8960AAAAANLYA100715A --><project name="device/qcom/common" path="device/qcom/common" revision="b9cdab8e1e1a215a8c65b8d5816f666bec7be205"/>
+  <!-- Information: platform/vendor/qcom/msm7627a is tagged with M8960AAAAANLYA100715A --><project name="platform/vendor/qcom/msm7627a" path="device/qcom/msm7627a" revision="d920a502ba17cf4d716f8b1a615f07e796b0501a"/>
+  <project name="android-device-otoro" path="device/qcom/otoro" remote="b2g" revision="e3e99b264dd0230108aa78f2b653db4ce0e494fb"/>
+  <project name="android-device-unagi" path="device/qcom/unagi" remote="b2g" revision="f8ca54267ed2ceabefadf96b6953814ac89c5056"/>
+  <project name="codeaurora_kernel_msm" path="kernel" remote="b2g" revision="0a01247e4b0880f93424b27251cd3a1f6b19dbb2"/>
+  <!-- Information: platform/hardware/qcom/camera is tagged with M76XXUSNEKNLYA2040 --><project name="platform/hardware/qcom/camera" path="hardware/qcom/camera" revision="1acf77a75e30f3fc8b1eed2057c97adf1cb1633f"/>
+  <project name="hardware_qcom_display" path="hardware/qcom/display" remote="b2g" revision="6405d30f2fac7d8a1f2cb17b99fb7dd0a8bcfdac"/>
+  <!-- Information: platform/hardware/qcom/media is tagged with M8960AAAAANLYA100715A --><project name="platform/hardware/qcom/media" path="hardware/qcom/media" revision="552c3ddb7174a01f3508782d40c4d8c845ab441a"/>
+  <!-- Information: platform/hardware/qcom/gps is tagged with M8960AAAAANLYA100705 --><project name="platform/hardware/qcom/gps" path="hardware/qcom/gps" revision="23d5707b320d7fc69f8ba3b7d84d78a1c5681708"/>
+  <!-- Information: platform/hardware/msm7k is tagged with AU_LINUX_GECKO_ICS_STRAWBERRY.01.00.00.19.117 --><project name="platform/hardware/msm7k" path="hardware/msm7k" revision="8892d46805c5639b55dd07547745c5180da861e7"/>
+  <!-- Information: platform/vendor/qcom-opensource/omx/mm-core is tagged with M8960AAAAANLYA100715A --><project name="platform/vendor/qcom-opensource/omx/mm-core" path="vendor/qcom/opensource/omx/mm-core" revision="ab17ac9a074b4bb69986a8436336bdfbbaf9cd39"/>
+  <!-- Information: platform/hardware/ril is tagged with M76XXUSNEKNLYA1610 --><project name="platform/hardware/ril" path="hardware/ril" remote="caf" revision="fe9a3f63922143b57e79ed570bab2328df8c83a5"/>
+</manifest>