From a3224c8b35a69f57dce8c7902d8dbbd0be1d6f64 Mon Sep 17 00:00:00 2001
From: Joe Walker <jwalker@mozilla.com>
Date: Fri, 30 Nov 2012 08:07:59 +0000
Subject: [PATCH] =?UTF-8?q?Bug=20788977=20-=20[toolbox]=20Land=20the=20dev?=
 =?UTF-8?q?eloper=20tools=20window;=20r=3Dharth,jwalker,mikeratcliffe,paul?=
 =?UTF-8?q?,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-menubar.inc      |   40 +-
 browser/base/content/browser-sets.inc         |   88 +-
 browser/base/content/browser.css              |   14 +-
 browser/base/content/browser.js               |   90 +-
 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   |   89 +
 .../devtools/debugger/debugger-controller.js  |   47 +-
 browser/devtools/debugger/debugger-toolbar.js |   15 -
 browser/devtools/debugger/debugger.xul        |   10 -
 browser/devtools/debugger/test/Makefile.in    |    6 +-
 .../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 +-
 .../browser_dbg_propertyview-edit-watch.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 +-
 .../browser_dbg_reload-preferred-script.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    |  154 ++
 browser/devtools/framework/Toolbox.jsm        |  525 ++++
 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      |  546 ++++
 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 ++-
 browser/devtools/inspector/InspectorPanel.jsm |  538 ++++
 browser/devtools/inspector/Makefile.in        |   18 +
 browser/devtools/inspector/Selection.jsm      |  230 ++
 browser/devtools/inspector/inspector.css      |    7 +
 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 +-
 .../devtools/styleeditor/StyleEditorPanel.jsm |  110 +
 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   |   73 +
 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    |   63 +
 .../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   |   94 +
 .../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  |   58 +
 .../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 |   94 +
 .../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  |   63 +
 .../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 |   98 +
 .../winstripe/devtools/treepanel-button.png   |  Bin 805 -> 0 bytes
 browser/themes/winstripe/jar.mn               |   26 +-
 .../devtools/webconsole/WebConsoleUtils.jsm   |   13 +-
 324 files changed, 10249 insertions(+), 10088 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/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/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 531d0d64cb87..067d2645088b 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1003,11 +1003,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);
 
@@ -1039,17 +1044,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);
 
@@ -1074,17 +1073,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 a195f1808381..215c19ce29d6 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_chromeDebugger"
+                    observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+          <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-menubar.inc b/browser/base/content/browser-menubar.inc
index 2f76de87cd50..7dc3f912ab0e 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -564,20 +564,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_chromeDebugger"
+                            observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+                  <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 641b5a344774..97c119b4897e 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"
@@ -128,27 +124,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"
@@ -197,33 +172,15 @@
     <broadcaster id="socialActiveBroadcaster" 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"/>
@@ -231,11 +188,6 @@
                  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"
@@ -252,6 +204,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"
@@ -273,7 +228,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)
@@ -305,27 +260,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"
@@ -335,8 +269,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 1e59706185bc..665216674817 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 a032c47698ba..52151cb861fd 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -115,28 +115,15 @@ 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");
 
@@ -1428,26 +1415,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") &&
@@ -1476,14 +1443,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,
@@ -1501,6 +1460,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) {
@@ -1543,8 +1505,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).
@@ -1642,7 +1603,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) {
@@ -7448,6 +7409,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);
@@ -7544,41 +7511,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 3beab97d813a..70820c63fa21 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/>
@@ -1065,19 +1049,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"/>
@@ -1116,52 +1087,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">
@@ -1178,36 +1103,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 574060d5ca32..0992a877a5b7 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 397aad3bd1f6..29c015ed16d4 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 5a40eafa26a7..9823172f2f6b 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 819e7002b255..e132ec25913d 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 d143a4b2a69a..ef60785a72f7 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 80aa141155ce..60545fe8a1ce 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 391ced0b7be7..4a602b6a4c76 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 257efd2afc2b..c0dc1b30b857 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 c1ca7dd0ffac..452f27789124 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 d6e6f4cffc6d..bb950d877609 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 f3299f4c2e30..9d66767b0349 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 000000000000..c5859c29b989
--- /dev/null
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@@ -0,0 +1,89 @@
+/* -*- 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 Cu = Components.utils;
+
+this.EXPORTED_SYMBOLS = ["DebuggerPanel"];
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
+  "resource://gre/modules/devtools/dbg-server.jsm");
+
+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() {
+  },
+
+  // 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
+  },
+};
diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js
index 98e5c1e6e08f..8740ceda7ae3 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,34 @@ 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 && 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)
+
+    // Content debugging can connect directly to the page.
+    // TODO: convert this to use a TabTarget.
+    let transport = window._isChromeDebugger
       ? debuggerSocketConnect(Prefs.remoteHost, Prefs.remotePort)
       : 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);
 
@@ -160,12 +181,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 +200,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 +235,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 +262,7 @@ let DebuggerController = {
         this.SourceScripts.connect();
         aThreadClient.resume();
 
+        aCallback();
       }.bind(this));
     }.bind(this));
   },
@@ -250,7 +275,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 +295,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 8efea073b594..d9545677064d 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 9ed58abc2487..8d051218ddfd 100644
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -174,11 +174,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"
@@ -208,11 +203,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 dca2b7e2f528..14e689867333 100644
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -13,8 +13,8 @@ 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 \
+	$(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 \
@@ -47,7 +47,6 @@ MOCHITEST_BROWSER_TESTS = \
 	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 \
 	browser_dbg_stack-01.js \
 	browser_dbg_stack-02.js \
@@ -84,7 +83,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 c430ebcb7507..a008a179b745 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 c7e865a4596a..63d180b95a2d 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 ee38ccc3c765..e440239ccf99 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 a923bf3c0b87..b6144947fda6 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 29eab3093d50..a992408c150b 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 53f9a22031b7..5f596654c1c4 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 8af191ae1d85..332c31d6bba2 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 4a32b2428f16..90325b241375 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 d1d3ca2f4ad0..8061fc8c3c3c 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 e7206d1576af..a8d15758e1cc 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 cf68ee5ca7be..d0cb74a16a5d 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 2530328b84e3..fe0a496f2dc4 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 4abcd7561a6d..ff4f5bb6b7a0 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 40afa0837692..785fc0fabe83 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 3411df6adb0a..78f3c28d7a5a 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 8cd601145bfc..3b4e0993c944 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 b631cac16398..3e90fb754a47 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 cfad4119c06b..7df75c656159 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 8ccb8b6451d4..586e754e3dc1 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 96c3a3f23375..39f644816610 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 d7d9c73ee17e..440363d4a830 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 754f489e2e19..000000000000
--- 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 5067c9f06391..aafa987086ba 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 476aaa9b6a26..4922acf217db 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 73e1ed50fac6..76f934df723a 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 ff5dcdc1fcef..46a02e4c3445 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 b24e2a2ea4d3..ac7c1ced3780 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 6fe0d9388a19..06e1b8b5372c 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 2b1bfd0edef3..3a80ef5c6eaf 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 e56bfa67e4b6..ad887d324983 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 06c908fabfe5..194160c9dbc6 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 c7c77f2808d7..23d242115bb0 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 7c43b7e76410..b822d77bed8d 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 d89c0c29080b..b9c6a4aad377 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 811f8f881551..c3cb4c45e04a 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 456a39f22c0c..9c67c7461494 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-watch.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js
index b6c82443faa2..d7eed38324be 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit-watch.js
@@ -24,7 +24,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_propertyview-edit.js b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
index 6f5ca0cb301f..6002679efd70 100644
--- a/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
+++ b/browser/devtools/debugger/test/browser_dbg_propertyview-edit.js
@@ -22,7 +22,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 a56797e0dda1..a846cfb02b77 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 c70af5d07756..dae519960b9c 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 c183b6382c63..596e2b920e5e 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 bfc6808c533e..8fd71d0b8588 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 7f5101cde92d..49f6b0f0613a 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 29d8b18336b1..715edec78a7a 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 b3063230ec72..1d06831c063e 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 5f9c1b0e3971..5086d2158e24 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 4d108ffb5505..945427c0b01f 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-preferred-script.js b/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js
index 4920fc50a766..20df4582ebdd 100644
--- a/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js
+++ b/browser/devtools/debugger/test/browser_dbg_reload-preferred-script.js
@@ -27,7 +27,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_reload-same-script.js b/browser/devtools/debugger/test/browser_dbg_reload-same-script.js
index 7d3bd91a418a..4878978d307e 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 56e1d988e87e..cc794044e92a 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 cb54d0379214..328328e3bfd9 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 39b8ee2a72e9..18c045e7a36c 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 e7f58a302a16..41d5936cab51 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 a938d6ee4ff5..a885e39e86b8 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 eaa7b9287c8c..297b906f5a8c 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 4191b16b0d11..022b7f4b6900 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 33ca5cdbf7c8..89f60d54a6d9 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 44c05d6b66b2..afd1b4107abd 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 3e07f69fe5a2..3fa523e70365 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 1fdcf0071896..cd3d523e8416 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 bc9a9e586553..cbe3116cc64f 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 d6ad154864c1..340f4442939b 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 14067e835a26..7dd6f7379dac 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 dc11eff6800e..028ecf9e7cb4 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 ce5fc209f268..d65708b5b37e 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 515bfcaf6f40..efa211f7559c 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 acb4100b4038..3e163206a7a8 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 f71d21a8e9d2..e643521080e3 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 8187267f5b74..df206dadd999 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 000000000000..ad77f3462172
--- /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 000000000000..2438a16b94ea
--- /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 000000000000..c440d451951e
--- /dev/null
+++ b/browser/devtools/framework/ToolDefinitions.jsm
@@ -0,0 +1,154 @@
+/* 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",
+                          "webConsoleDefinition",
+                          "debuggerDefinition",
+                          "inspectorDefinition",
+                          "styleEditorDefinition"
+                        ];
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+const inspectorProps = "chrome://browser/locale/devtools/inspector.properties";
+const debuggerProps = "chrome://browser/locale/devtools/debugger.properties";
+const styleEditorProps = "chrome://browser/locale/devtools/styleeditor.properties";
+const webConsoleProps = "chrome://browser/locale/devtools/webconsole.properties";
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+XPCOMUtils.defineLazyGetter(this, "osString",
+  function() Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
+
+// Panels
+XPCOMUtils.defineLazyModuleGetter(this, "WebConsolePanel",
+  "resource:///modules/WebConsolePanel.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "DebuggerPanel",
+  "resource:///modules/devtools/DebuggerPanel.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorPanel",
+  "resource:///modules/devtools/StyleEditorPanel.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "InspectorPanel",
+  "resource:///modules/devtools/InspectorPanel.jsm");
+
+// Strings
+XPCOMUtils.defineLazyGetter(this, "webConsoleStrings",
+  function() Services.strings.createBundle(webConsoleProps));
+
+XPCOMUtils.defineLazyGetter(this, "debuggerStrings",
+  function() Services.strings.createBundle(debuggerProps));
+
+XPCOMUtils.defineLazyGetter(this, "styleEditorStrings",
+  function() Services.strings.createBundle(styleEditorProps));
+
+XPCOMUtils.defineLazyGetter(this, "inspectorStrings",
+  function() Services.strings.createBundle(inspectorProps));
+
+// Definitions
+let webConsoleDefinition = {
+  id: "webconsole",
+  key: l10n("cmd.commandkey", webConsoleStrings),
+  accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
+  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("ToolboxWebconsole.label", webConsoleStrings),
+  isTargetSupported: function(target) {
+    return true;
+  },
+  build: function(iframeWindow, toolbox) {
+    return new WebConsolePanel(iframeWindow, toolbox);
+  }
+};
+
+let debuggerDefinition = {
+  id: "jsdebugger",
+  key: l10n("open.commandkey", debuggerStrings),
+  accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
+  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", debuggerStrings),
+
+  isTargetSupported: function(target) {
+    return true;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new DebuggerPanel(iframeWindow, toolbox);
+  }
+};
+
+let inspectorDefinition = {
+  id: "inspector",
+  accesskey: l10n("inspector.accesskey", inspectorStrings),
+  key: l10n("inspector.commandkey", inspectorStrings),
+  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", inspectorStrings),
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new InspectorPanel(iframeWindow, toolbox);
+  }
+};
+
+let styleEditorDefinition = {
+  id: "styleeditor",
+  key: l10n("open.commandkey", styleEditorStrings),
+  ordinal: 3,
+  accesskey: l10n("open.accesskey", styleEditorStrings),
+  modifiers: "shift",
+  label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
+  url: "chrome://browser/content/styleeditor.xul",
+
+  isTargetSupported: function(target) {
+    return !target.isRemote && !target.isChrome;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new StyleEditorPanel(iframeWindow, toolbox);
+  }
+};
+
+this.defaultTools = [
+  styleEditorDefinition,
+  webConsoleDefinition,
+  debuggerDefinition,
+  inspectorDefinition,
+];
+
+/**
+ * Lookup l10n string from a string bundle.
+ *
+ * @param {string} name
+ *        The key to lookup.
+ * @param {StringBundle} bundle
+ *        The key to lookup.
+ * @returns A localized version of the given key.
+ */
+function l10n(name, bundle)
+{
+  try {
+    return bundle.GetStringFromName(name);
+  } catch (ex) {
+    Services.console.logStringMessage("Error reading '" + name + "'");
+    throw new Error("l10n error with " + name);
+  }
+}
diff --git a/browser/devtools/framework/Toolbox.jsm b/browser/devtools/framework/Toolbox.jsm
new file mode 100644
index 000000000000..fba34dfb4c00
--- /dev/null
+++ b/browser/devtools/framework/Toolbox.jsm
@@ -0,0 +1,525 @@
+/* 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/XPCOMUtils.jsm');
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "Hosts",
+                                  "resource:///modules/devtools/ToolboxHosts.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
+                                  "resource:///modules/devtools/DeveloperToolbar.jsm");
+
+// DO NOT put Require.jsm or gcli.jsm into lazy getters as this breaks the
+// requisition import a few lines down.
+Cu.import("resource://gre/modules/devtools/gcli.jsm");
+Cu.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 000000000000..23371c950e95
--- /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 000000000000..a7acc39936e9
--- /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 000000000000..169e57ec0e80
--- /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 000000000000..466170d07de9
--- /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 000000000000..b17794b51887
--- /dev/null
+++ b/browser/devtools/framework/gDevTools.jsm
@@ -0,0 +1,546 @@
+/* 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/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
+  "resource:///modules/devtools/Toolbox.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+  "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 000000000000..618e044c4929
--- /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 000000000000..205a26808ab5
--- /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 000000000000..242b725dcc5b
--- /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 000000000000..56496fea2d64
--- /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 000000000000..848dbef8aac0
--- /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 000000000000..5edbad6a3278
--- /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 000000000000..cbf6d89efe22
--- /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 000000000000..191bd80896f9
--- /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 000000000000..b7c17b04f1c5
--- /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 000000000000..98a537f03ca6
--- /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 000000000000..796a7946c2d0
--- /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 000000000000..774747b531d9
--- /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 000000000000..57f18006c237
--- /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 000000000000..744278c12d3e
--- /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 c352c96cb285..000000000000
--- 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 2ffbaf77cec5..000000000000
--- 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 71349374fcf5..000000000000
--- 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 c60a258acf5e..000000000000
--- 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 50beccc16e29..000000000000
--- 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 ce122a01341c..000000000000
--- 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 5878b4f12f8f..000000000000
--- 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 3c8c84b83288..000000000000
--- 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 dba5cd7862df..000000000000
--- 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 4e8fc459d8f4..000000000000
--- 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 5cbcceb88dea..000000000000
--- 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 c4c8039654db..000000000000
--- 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 4c0756beccdf..000000000000
--- 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 9b01e0ebe3d9..000000000000
--- 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 6e681623377d..000000000000
--- 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 000000000000..b0625140a271
--- /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 000000000000..bde650c86aad
--- /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 e94d41bfa557..587b4978e2e9 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/InspectorPanel.jsm b/browser/devtools/inspector/InspectorPanel.jsm
new file mode 100644
index 000000000000..c426138b18cc
--- /dev/null
+++ b/browser/devtools/inspector/InspectorPanel.jsm
@@ -0,0 +1,538 @@
+/* -*- 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 { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+
+this.EXPORTED_SYMBOLS = ["InspectorPanel"];
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "MarkupView",
+  "resource://gre/modules/devtools/MarkupView.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Selection",
+  "resource:///modules/devtools/Selection.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "HTMLBreadcrumbs",
+  "resource:///modules/devtools/Breadcrumbs.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Highlighter",
+  "resource:///modules/devtools/Highlighter.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "ToolSidebar",
+  "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 000000000000..02dcc9f605ac
--- /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 000000000000..a5cbf9020b2c
--- /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 000000000000..a835201c89fc
--- /dev/null
+++ b/browser/devtools/inspector/inspector.css
@@ -0,0 +1,7 @@
+.inspector-breadcrumbs-button {
+  direction: ltr;
+}
+
+#inspector-sidebar {
+  min-width: 250px;
+}
diff --git a/browser/devtools/inspector/inspector.xul b/browser/devtools/inspector/inspector.xul
new file mode 100644
index 000000000000..0331d35a0ad8
--- /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 14c302b51623..422f66485965 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 0b1f78290347..50ceed087e97 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 000000000000..c209f9f6e935
--- /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 b5e23af2bb2a..b80de1cc211c 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 1e11ec60e944..f44ad7ba9838 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 6b6e3d167423..ed448d8f161b 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 000000000000..3f9355dd7335
--- /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 000000000000..a3088e51d221
--- /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 3879ffbebedf..545e60799c74 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 73fe34d71a26..bf24c5e34d07 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 b2b0c133f188..d7ad02c8486d 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 000000000000..8dfca604b74b
--- /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 f146046ef743..8d23b0493f41 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 1ca3ed741c9d..1e20539cd1f0 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 000000000000..4083dd29b178
--- /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 000000000000..3fc9a20434e0
--- /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 61c95ed1a7c3..88f0c57e6de1 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 000000000000..f8e2baf1ccf1
--- /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 6dcfee24d91c..6f8fc29a7c48 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 2116188fbd73..85db0080e7ec 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 000000000000..ba51db9a584e
--- /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 7c34572aee6e..45332a27bf0c 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 d3435d620598..ea3f4638947f 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 b07d411acff0..000000000000
--- 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 df206dadd999..a8d0b209397e 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 291b8d267b00..3767c54424f6 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 a8e9d2861b0f..4042929f0d00 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 000000000000..130b6d790bcd
--- /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 d6f6db6ee2c6..c4a20c0e7bfa 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 55967b0d3cae..a0ab2eeb6ccb 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 280f025dce5a..dfe1ed6d734b 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 a34d86fd65a0..463fc8e48804 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 fe5561181b14..9633052e17f9 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 4540c1e5c606..3cc3a18c5050 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 3907fad4fbd0..61cc04274100 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 1303136c296f..062059c9b775 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 devtools-toolbarbutton",
   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 a74df04f9da1..8f45f9eecf57 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 bfdcb11d6008..540e918f5966 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 8161e8dc0d2d..9aeb3147a303 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 d4dc324c4383..cc6b0832a7e5 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 000000000000..753191ad2ade
--- /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 devtools-toolbarbutton",
+  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 f69743bab46e..a8dde0114dc2 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 8dfcfa7c372a..dd6edd351c4d 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 8a921e65c85d..ecf9095cb583 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 d70324fc5700..fdeda4074597 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 c54ce5420eef..e15adbe72e2d 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 31d3ae19a0d6..10734464cf84 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 9dfbdc12c00b..ee5e36c5747e 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 abb1dc76f147..6c2999659802 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 c5b956981313..66d067a3c851 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 685d039d2a05..c7464162268c 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 ca9dccd9e2fe..7c2aeb6099e5 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/StyleEditorPanel.jsm b/browser/devtools/styleeditor/StyleEditorPanel.jsm
new file mode 100644
index 000000000000..3d048eba3aa6
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditorPanel.jsm
@@ -0,0 +1,110 @@
+/* -*- 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;
+
+this.EXPORTED_SYMBOLS = ["StyleEditorPanel"];
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorChrome",
+  "resource:///modules/devtools/StyleEditorChrome.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 93887d1e125d..6a3cff7c5f63 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 4ca04ee26bae..95ef1121f73d 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 51f8663aee93..7835c7c15ba2 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 9b5e86e4d838..07331c6e092c 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 05b37019e49f..d095d1a48c6e 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 4172caf5e4ca..e3677e7c5d5b 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 bf3045a83225..d27431617227 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 f2e646a47063..d08249dca059 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 0e1ddb30da13..7b232867a02c 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/ToolDefinitions.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 0496c381de48..a5a7b69c3c33 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/ToolDefinitions.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 216ffa30b7a2..dfac610dd95d 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 6ba8220ad0a7..058f478257f9 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 ee9180408e4a..b923418b636f 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 0e8bacbfbd0f..ecbd05aaa402 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 fc0388cce2d1..bd9064df0deb 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 c2f94a24c69d..9fe1b464a514 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 56175d968d14..8a5653989a4e 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 3e6c40fbb6ec..0fcdfdf99336 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 4f7bad0a2410..4b1046446c3a 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 0d933c700e0f..86e36378bc38 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 0183314d1db2..62060b704a0a 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 10f38c31bf43..d9f49f57c2cc 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 c397b2f20978..ea8e01203ee4 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 b73769233378..a7c48a0befa6 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 c9a9913f3943..059134f19f07 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 b16871fa4f76..047bebf8f8e9 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 cf2827811be8..7c2ee991d621 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 ff6d84de1453..7cfc3fcf2a9e 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  devtools-toolbarbutton",
+  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 a32e80a39f38..debbe626a91c 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 05d678ad8545..e577b8dfb0c0 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 0083aa512956..83794742fb46 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 62b599328b93..0ea5c886f4ec 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 0acd791dfd31..000000000000
--- 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 b4f34869c3da..314fb22e6645 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 c3e1fbfb563a..503f7925451a 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 0f78eb3aaa0e..a083fa1bcbc1 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 f70223be9395..366bfa323180 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 4d64d9be8de6..72e11236e679 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 ba7a0b968e7a..c79056a3b4cf 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 95e6b7c69339..c45d44b03446 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 4c3624d90a1d..abfd4f586ffd 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 b498d2ac07c6..82871270ef33 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 9d873d1ea181..fc8d0fc51577 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 0412b76b586e..721189f65c37 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 ebac1272174d..64b911a0020a 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 fbbcb737317e..0f25a04fd84e 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 104bd113a05a..af6ac2c91414 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 83fe62c1a6c1..349cf6f6dc1f 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 5f901d74a713..e19212512444 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 ed66e5a9fb71..4e820ee84038 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 000000000000..a28f5c8cc59f
--- /dev/null
+++ b/browser/devtools/webconsole/WebConsolePanel.jsm
@@ -0,0 +1,73 @@
+/* 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 = [ "WebConsolePanel" ];
+
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
+  "resource:///modules/HUDService.jsm");
+
+/**
+ * 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 28e16c392af6..859962aa4c68 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 afe62c8a21f1..000000000000
--- 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 f1e40dfaa3cc..c5fe4505af0d 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 de8649179159..000000000000
--- 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 5623f52b2cb2..d22a50c9b3ec 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 9e451d0ca175..1fd615fb9556 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 4eeaec88a687..22eba17a0454 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 0f685f88e672..ade0c09363ae 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 b485165d7069..000000000000
--- 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 48614c9cc024..e3d214aa5282 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 794122beefce..000000000000
--- 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 3639b9a86ae3..000000000000
--- 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 d4ce62aa41fd..000000000000
--- 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 4e285568d715..c556de529a68 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 4116fa3f2e07..973c06a27d5b 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 ff602c90dd42..9669d1a46ce7 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 d1741b89d3ca..cc79e1c41c3e 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 000000000000..c00aa6a5ce46
--- /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 a31821535a97..3547726e5d61 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 (variablesEditableNameTooltip): The text that is displayed
 # in the variables list on an item with an editable name.
 variablesEditableNameTooltip=Double click to edit
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 000000000000..897552ca002a
--- /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 13cb5e1b9e84..c4989cab16c2 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 e88902ff4a49..53aaf605c553 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 6ac78727fa23..7210060e0c1d 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 2e08c8d07c3b..dca0bc6d81c9 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 f9f86b819139..e28e4e07b416 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 5eab4a7b9913..5f7f1861025d 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 000000000000..29b63269353b
--- /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 b72bd488a518..e442518b66ce 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 68b02d014377..75784473847f 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 1cde24633f19..eb46acb04180 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 762153c4b980..2931b979c177 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 4c9964a0f79f..4bf94b8d4b96 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 c2a1feb63781..b186ecf3665e 100644
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -42,6 +42,10 @@
   min-width: 32px;
 }
 
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   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));
@@ -188,6 +192,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 000000000000..054658534278
--- /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 4d653c5c5e0c..552c9841e848 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 000000000000..b3f7c6ad93f7
--- /dev/null
+++ b/browser/themes/gnomestripe/devtools/toolbox.css
@@ -0,0 +1,94 @@
+/* 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-responsive {
+  list-style-image: url(chrome://browser/skin/devtools/command-responsivemode.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-responsive:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+#command-button-responsive:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+#command-button-responsive[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-tilt {
+  list-style-image: url(chrome://browser/skin/devtools/command-tilt.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-tilt:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-tilt:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#command-button-tilt[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-scratchpad {
+  list-style-image: url(chrome://browser/skin/devtools/command-scratchpad.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#command-button-scratchpad:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-scratchpad:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+
+/* 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 4fb4850ef75f..f10067a6a654 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 a4c6ed912e6a..614317940f3c 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 c8cfa326c108..f5ad77409159 100644
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -51,6 +51,10 @@
   min-width: 32px;
 }
 
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   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));
@@ -203,6 +207,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 000000000000..0c105cfe4b35
--- /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 4d653c5c5e0c..552c9841e848 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 000000000000..17faa15b3e18
--- /dev/null
+++ b/browser/themes/pinstripe/devtools/toolbox.css
@@ -0,0 +1,94 @@
+/* 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-responsive {
+  list-style-image: url(chrome://browser/skin/devtools/command-responsivemode.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-responsive:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+#command-button-responsive:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+#command-button-responsive[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-tilt {
+  list-style-image: url(chrome://browser/skin/devtools/command-tilt.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-tilt:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-tilt:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#command-button-tilt[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-scratchpad {
+  list-style-image: url(chrome://browser/skin/devtools/command-scratchpad.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#command-button-scratchpad:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-scratchpad:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+
+/* 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 600584c99e53..e69772656f95 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 b45ccb6932d4..96d3b972ad3a 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 50bb5c020667..7c0e590c5fe0 100644
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -47,6 +47,10 @@
   min-width: 32px;
 }
 
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   background-color: hsla(210,18%,9%,.1);
   background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
@@ -209,6 +213,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 000000000000..1b47e9f610f4
--- /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 4d653c5c5e0c..552c9841e848 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 000000000000..6bba0e7549ed
--- /dev/null
+++ b/browser/themes/winstripe/devtools/toolbox.css
@@ -0,0 +1,98 @@
+/* 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-responsive {
+  list-style-image: url(chrome://browser/skin/devtools/command-responsivemode.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-responsive:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+#command-button-responsive:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+#command-button-responsive[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-tilt {
+  list-style-image: url(chrome://browser/skin/devtools/command-tilt.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-tilt:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-tilt:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#command-button-tilt[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-scratchpad {
+  list-style-image: url(chrome://browser/skin/devtools/command-scratchpad.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#command-button-scratchpad:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-scratchpad:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+
+/* 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 efa829dced60..7cfbef7ca4f4 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 a3422a8827a8..af5763e6e3f9 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);