Bug 770135 - New PanelUI and toolbar customization - Milestone 1. r=mconley,jaws,Unfocused.

browser/base/content/browser-customization.js

@@ -0,0 +1,108 @@
+# -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*-
+# 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/.
+
+/**
+ * Customization handler prepares this browser window for entering and exiting
+ * customization mode by handling CustomizationStart and CustomizationEnd
+ * events.
+ */
+let CustomizationHandler = {
+  handleEvent: function(aEvent) {
+    switch(aEvent.type) {
+      case "CustomizationStart":
+        this._customizationStart();
+        break;
+      case "CustomizationEnd":
+        this._customizationEnd(aEvent.detail);
+        break;
+    }
+  },
+
+  _customizationStart: function() {
+    // Disable the toolbar context menu items
+    let menubar = document.getElementById("main-menubar");
+    for (let childNode of menubar.childNodes)
+      childNode.setAttribute("disabled", true);
+
+    let cmd = document.getElementById("cmd_CustomizeToolbars");
+    cmd.setAttribute("disabled", "true");
+
+    let splitter = document.getElementById("urlbar-search-splitter");
+    if (splitter) {
+      splitter.parentNode.removeChild(splitter);
+    }
+
+    CombinedStopReload.uninit();
+    PlacesToolbarHelper.customizeStart();
+    BookmarksMenuButton.customizeStart();
+    DownloadsButton.customizeStart();
+    TabsInTitlebar.allowedBy("customizing-toolbars", false);
+
+    gBrowser.selectedTab = window.gBrowser.addTab("about:customizing");
+  },
+
+  _customizationEnd: function(aDetails) {
+    // Update global UI elements that may have been added or removed
+    if (aDetails.changed) {
+      gURLBar = document.getElementById("urlbar");
+
+      gProxyFavIcon = document.getElementById("page-proxy-favicon");
+      gHomeButton.updateTooltip();
+      gIdentityHandler._cacheElements();
+      XULBrowserWindow.init();
+
+#ifndef XP_MACOSX
+      updateEditUIVisibility();
+#endif
+
+      // Hacky: update the PopupNotifications' object's reference to the iconBox,
+      // if it already exists, since it may have changed if the URL bar was
+      // added/removed.
+      if (!window.__lookupGetter__("PopupNotifications")) {
+        PopupNotifications.iconBox =
+          document.getElementById("notification-popup-box");
+      }
+
+    }
+
+    PlacesToolbarHelper.customizeDone();
+    BookmarksMenuButton.customizeDone();
+    DownloadsButton.customizeDone();
+
+    if (gBrowser.selectedBrowser.currentURI.spec == "about:customizing") {
+      gBrowser.removeCurrentTab();
+    }
+
+    // The url bar splitter state is dependent on whether stop/reload
+    // and the location bar are combined, so we need this ordering
+    CombinedStopReload.init();
+    UpdateUrlbarSearchSplitterState();
+    setUrlAndSearchBarWidthForConditionalForwardButton();
+
+    // Update the urlbar
+    if (gURLBar) {
+      URLBarSetURI();
+      XULBrowserWindow.asyncUpdateUI();
+      PlacesStarButton.updateState();
+      SocialShareButton.updateShareState();
+    }
+
+    TabsInTitlebar.allowedBy("customizing-toolbars", true);
+
+    // Re-enable parts of the UI we disabled during the dialog
+    let menubar = document.getElementById("main-menubar");
+    for (let childNode of menubar.childNodes)
+      childNode.setAttribute("disabled", false);
+    let cmd = document.getElementById("cmd_CustomizeToolbars");
+    cmd.removeAttribute("disabled");
+
+    // make sure to re-enable click-and-hold
+    if (!getBoolPref("ui.click_hold_context_menus", false)) {
+      SetClickAndHoldHandlers();
+    }
+
+    gBrowser.selectedBrowser.focus();
+  }
+}

browser/base/content/browser.css

@@ -9,6 +9,10 @@ searchbar {
   -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
 }
 
+#nav-bar {
+  -moz-binding: url("chrome://browser/content/toolbar.xml#toolbar");
+}
+
 tabbrowser {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
 }

browser/base/content/browser.js

@@ -90,6 +90,12 @@ XPCOMUtils.defineLazyModuleGetter(this, "TelemetryStopwatch",
 XPCOMUtils.defineLazyModuleGetter(this, "AboutHomeUtils",
   "resource:///modules/AboutHomeUtils.jsm");
 
+XPCOMUtils.defineLazyGetter(this, "gCustomizeMode", function() {
+  let scope = {};
+  Cu.import("resource:///modules/CustomizeMode.jsm", scope);
+  return new scope.CustomizeMode(window);
+});
+
 #ifdef MOZ_SERVICES_SYNC
 XPCOMUtils.defineLazyModuleGetter(this, "Weave",
   "resource://services-sync/main.js");
@@ -146,6 +152,7 @@ let gInitialPages = [
 ];
 
 #include browser-addons.js
+#include browser-customization.js
 #include browser-feeds.js
 #include browser-fullScreen.js
 #include browser-fullZoom.js
@@ -1031,6 +1038,7 @@ var gBrowserInit = {
     OfflineApps.init();
     IndexedDBPromptHelper.init();
     gFormSubmitObserver.init();
+    PanelUI.init();
     SocialUI.init();
     AddonManager.addAddonListener(AddonsMgrListener);
     WebrtcIndicator.init();
@@ -1280,6 +1288,9 @@ var gBrowserInit = {
     Services.obs.notifyObservers(window, "browser-delayed-startup-finished", "");
     setTimeout(function () { BrowserChromeTest.markAsReady(); }, 0);
     TelemetryTimestamps.add("delayedStartupFinished");
+
+    window.addEventListener("CustomizationStart", CustomizationHandler, false);
+    window.addEventListener("CustomizationEnd", CustomizationHandler, false);
   },
 
   onUnload: function() {
@@ -1363,6 +1374,7 @@ var gBrowserInit = {
       IndexedDBPromptHelper.uninit();
       AddonManager.removeAddonListener(AddonsMgrListener);
       SocialUI.uninit();
+      PanelUI.uninit();
     }
 
     // Final window teardown, do this last.
@@ -3309,118 +3321,13 @@ function OpenBrowserWindow(options)
   return win;
 }
 
-var gCustomizeSheet = false;
+//XXXunf Are these still useful to keep around?
 function BrowserCustomizeToolbar() {
-  // Disable the toolbar context menu items
-  var menubar = document.getElementById("main-menubar");
-  for (let childNode of menubar.childNodes)
-    childNode.setAttribute("disabled", true);
-
-  var cmd = document.getElementById("cmd_CustomizeToolbars");
-  cmd.setAttribute("disabled", "true");
-
-  var splitter = document.getElementById("urlbar-search-splitter");
-  if (splitter)
-    splitter.parentNode.removeChild(splitter);
-
-  CombinedStopReload.uninit();
-
-  PlacesToolbarHelper.customizeStart();
-  BookmarksMenuButton.customizeStart();
-  DownloadsButton.customizeStart();
-
-  TabsInTitlebar.allowedBy("customizing-toolbars", false);
-
-  var customizeURL = "chrome://global/content/customizeToolbar.xul";
-  gCustomizeSheet = getBoolPref("toolbar.customization.usesheet", false);
-
-  if (gCustomizeSheet) {
-    let sheetFrame = document.createElement("iframe");
-    let panel = document.getElementById("customizeToolbarSheetPopup");
-    sheetFrame.id = "customizeToolbarSheetIFrame";
-    sheetFrame.toolbox = gNavToolbox;
-    sheetFrame.panel = panel;
-    sheetFrame.setAttribute("style", panel.getAttribute("sheetstyle"));
-    panel.appendChild(sheetFrame);
-
-    // Open the panel, but make it invisible until the iframe has loaded so
-    // that the user doesn't see a white flash.
-    panel.style.visibility = "hidden";
-    gNavToolbox.addEventListener("beforecustomization", function onBeforeCustomization() {
-      gNavToolbox.removeEventListener("beforecustomization", onBeforeCustomization, false);
-      panel.style.removeProperty("visibility");
-    }, false);
-
-    sheetFrame.setAttribute("src", customizeURL);
-
-    panel.openPopup(gNavToolbox, "after_start", 0, 0);
-  } else {
-    window.openDialog(customizeURL,
-                      "CustomizeToolbar",
-                      "chrome,titlebar,toolbar,location,resizable,dependent",
-                      gNavToolbox);
-  }
+  gCustomizeMode.enter();
 }
 
 function BrowserToolboxCustomizeDone(aToolboxChanged) {
-  if (gCustomizeSheet) {
-    document.getElementById("customizeToolbarSheetPopup").hidePopup();
-    let iframe = document.getElementById("customizeToolbarSheetIFrame");
-    iframe.parentNode.removeChild(iframe);
-  }
-
-  // Update global UI elements that may have been added or removed
-  if (aToolboxChanged) {
-    gURLBar = document.getElementById("urlbar");
-
-    gProxyFavIcon = document.getElementById("page-proxy-favicon");
-    gHomeButton.updateTooltip();
-    gIdentityHandler._cacheElements();
-    window.XULBrowserWindow.init();
-
-#ifndef XP_MACOSX
-    updateEditUIVisibility();
-#endif
-
-    // Hacky: update the PopupNotifications' object's reference to the iconBox,
-    // if it already exists, since it may have changed if the URL bar was
-    // added/removed.
-    if (!window.__lookupGetter__("PopupNotifications"))
-      PopupNotifications.iconBox = document.getElementById("notification-popup-box");
-  }
-
-  PlacesToolbarHelper.customizeDone();
-  BookmarksMenuButton.customizeDone();
-  DownloadsButton.customizeDone();
-
-  // The url bar splitter state is dependent on whether stop/reload
-  // and the location bar are combined, so we need this ordering
-  CombinedStopReload.init();
-  UpdateUrlbarSearchSplitterState();
-  setUrlAndSearchBarWidthForConditionalForwardButton();
-
-  // Update the urlbar
-  if (gURLBar) {
-    URLBarSetURI();
-    XULBrowserWindow.asyncUpdateUI();
-    PlacesStarButton.updateState();
-    SocialShareButton.updateShareState();
-  }
-
-  TabsInTitlebar.allowedBy("customizing-toolbars", true);
-
-  // Re-enable parts of the UI we disabled during the dialog
-  var menubar = document.getElementById("main-menubar");
-  for (let childNode of menubar.childNodes)
-    childNode.setAttribute("disabled", false);
-  var cmd = document.getElementById("cmd_CustomizeToolbars");
-  cmd.removeAttribute("disabled");
-
-  // make sure to re-enable click-and-hold
-  if (!getBoolPref("ui.click_hold_context_menus", false))
-    SetClickAndHoldHandlers();
-
-  gBrowser.selectedBrowser.focus();
+  gCustomizeMode.exit(aToolboxChanged);
 }
 
 function BrowserToolboxCustomizeChange(aType) {
@@ -3591,6 +3498,8 @@ var XULBrowserWindow = {
   startTime: 0,
   statusText: "",
   isBusy: false,
+  // The pages in this array should be kept in sync with what pages that
+  // panelUIOverlay.xul is set to overlay in /browser/base/jar.mn
   inContentWhitelist: ["about:addons", "about:downloads", "about:permissions",
                        "about:sync-progress", "about:preferences"],
 

browser/base/content/browser.xul

@@ -9,6 +9,7 @@
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/panelUIOverlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
@@ -465,6 +466,7 @@
       </popupnotificationcontent>
     </popupnotification>
 
+#include panelUI.inc
   </popupset>
 
 #ifdef CAN_DRAW_IN_TITLEBAR
@@ -525,6 +527,7 @@
              fullscreentoolbar="true" mode="icons" customizable="true"
              iconsize="large"
              defaultset="unified-back-forward-button,urlbar-container,reload-button,stop-button,search-container,webrtc-status-button,downloads-button,home-button,bookmarks-menu-button-container,window-controls"
+             customizationtarget="nav-bar-customizationtarget"
              context="toolbar-context-menu">
 
       <toolbaritem id="unified-back-forward-button" class="chromeclass-toolbar-additional"
@@ -656,6 +659,173 @@
                      command="Browser:Stop"
                      tooltiptext="&stopButton.tooltip;"/>
 
+      <hbox id="nav-bar-customizationtarget" class="customization-target" flex="100"/>
+
+      <toolbaritem id="PanelUI-button"
+                   class="chromeclass-toolbar-additional"
+                   removable="false"
+                   title="&appmenu.title;">
+        <toolbarbutton id="PanelUI-menu-button"
+                       class="toolbarbutton-1"
+                       label="&brandShortName;"
+                       tooltiptext="&appmenu.title;"
+                       oncommand="PanelUI.toggle(event);"/>
+      </toolbaritem>
+
+      <hbox id="window-controls" hidden="true" pack="end">
+        <toolbarbutton id="minimize-button"
+                       tooltiptext="&fullScreenMinimize.tooltip;"
+                       oncommand="window.minimize();"/>
+
+        <toolbarbutton id="restore-button"
+                       tooltiptext="&fullScreenRestore.tooltip;"
+                       oncommand="BrowserFullScreen();"/>
+
+        <toolbarbutton id="close-button"
+                       tooltiptext="&fullScreenClose.tooltip;"
+                       oncommand="BrowserTryToCloseWindow();"/>
+      </hbox>
+    </toolbar>
+
+    <toolbarset id="customToolbars" context="toolbar-context-menu"/>
+
+    <toolbar id="PersonalToolbar"
+             mode="icons" iconsize="small" defaulticonsize="small"
+             lockiconsize="true"
+             class="chromeclass-directories"
+             context="toolbar-context-menu"
+             defaultset="personal-bookmarks"
+             toolbarname="&personalbarCmd.label;" accesskey="&personalbarCmd.accesskey;"
+             collapsed="true"
+             customizable="true">
+      <toolbaritem flex="1" id="personal-bookmarks" title="&bookmarksItem.title;"
+                   removable="true">
+        <hbox flex="1"
+              id="PlacesToolbar"
+              context="placesContext"
+              onclick="BookmarksEventHandler.onClick(event, this._placesView);"
+              oncommand="BookmarksEventHandler.onCommand(event, this._placesView);"
+              tooltip="bhTooltip"
+              popupsinherittooltip="true">
+          <toolbarbutton class="bookmark-item bookmarks-toolbar-customize"
+                         mousethrough="never"
+                         label="&bookmarksToolbarItem.label;"/>
+          <hbox flex="1">
+            <hbox align="center">
+              <image id="PlacesToolbarDropIndicator"
+                     mousethrough="always"
+                     collapsed="true"/>
+            </hbox>
+            <scrollbox orient="horizontal"
+                       id="PlacesToolbarItems"
+                       flex="1"/>
+            <toolbarbutton type="menu"
+                           id="PlacesChevron"
+                           class="chevron"
+                           mousethrough="never"
+                           collapsed="true"
+                           tooltiptext="&bookmarksToolbarChevron.tooltip;"
+                           onpopupshowing="document.getElementById('PlacesToolbar')
+                                                   ._placesView._onChevronPopupShowing(event);">
+              <menupopup id="PlacesChevronPopup"
+                         placespopup="true"
+                         tooltip="bhTooltip" popupsinherittooltip="true"
+                         context="placesContext"/>
+            </toolbarbutton>
+          </hbox>
+        </hbox>
+      </toolbaritem>
+    </toolbar>
+
+#ifdef MENUBAR_CAN_AUTOHIDE
+#ifndef CAN_DRAW_IN_TITLEBAR
+#define APPMENU_ON_TABBAR
+#endif
+#endif
+
+
+    <toolbar id="TabsToolbar"
+             class="toolbar-primary"
+             fullscreentoolbar="true"
+             customizable="true"
+             mode="icons" lockmode="true"
+             iconsize="small" defaulticonsize="small" lockiconsize="true"
+             aria-label="&tabsToolbar.label;"
+             context="toolbar-context-menu"
+#ifdef APPMENU_ON_TABBAR
+             defaultset="appmenu-toolbar-button,tabbrowser-tabs,new-tab-button,alltabs-button,tabs-closebutton"
+#else
+             defaultset="tabbrowser-tabs,new-tab-button,alltabs-button,tabs-closebutton"
+#endif
+             collapsed="true">
+
+#ifdef APPMENU_ON_TABBAR
+      <toolbarbutton id="appmenu-toolbar-button"
+                     class="chromeclass-toolbar-additional"
+                     type="menu"
+                     label="&brandShortName;"
+                     tooltiptext="&appMenuButton.tooltip;">
+#include browser-appmenu.inc
+      </toolbarbutton>
+#endif
+
+      <tabs id="tabbrowser-tabs"
+            class="tabbrowser-tabs"
+            tabbrowser="content"
+            flex="1"
+            setfocus="false"
+            tooltip="tabbrowser-tab-tooltip"
+            stopwatchid="FX_TAB_CLICK_MS">
+        <tab class="tabbrowser-tab" selected="true" fadein="true"/>
+      </tabs>
+
+      <toolbarbutton id="new-tab-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     label="&tabCmd.label;"
+                     command="cmd_newNavigatorTab"
+                     onclick="checkForMiddleClick(this, event);"
+                     tooltiptext="&newTabButton.tooltip;"
+                     ondrop="newTabButtonObserver.onDrop(event)"
+                     ondragover="newTabButtonObserver.onDragOver(event)"
+                     ondragenter="newTabButtonObserver.onDragOver(event)"
+                     ondragexit="newTabButtonObserver.onDragExit(event)"
+                     removable="true"/>
+
+      <toolbarbutton id="alltabs-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button"
+                     type="menu"
+                     label="&listAllTabs.label;"
+                     tooltiptext="&listAllTabs.label;"
+                     removable="true">
+        <menupopup id="alltabs-popup"
+                   position="after_end">
+          <menuitem id="menu_tabview"
+                    class="menuitem-iconic"
+                    key="key_tabview"
+                    label="&viewTabGroups.label;"
+                    command="Browser:ToggleTabView"
+                    observes="tabviewGroupsNumber"/>
+          <menuseparator id="alltabs-popup-separator"/>
+        </menupopup>
+      </toolbarbutton>
+
+      <toolbarbutton id="tabs-closebutton"
+                     class="close-button tabs-closebutton"
+                     command="cmd_close"
+                     label="&closeTab.label;"
+                     tooltiptext="&closeTab.label;"/>
+
+#ifdef CAN_DRAW_IN_TITLEBAR
+      <hbox class="titlebar-placeholder" type="appmenu-button" ordinal="0"/>
+      <hbox class="titlebar-placeholder" type="caption-buttons" ordinal="1000"/>
+#endif
+    </toolbar>
+
+    <toolbarpalette id="BrowserToolbarPalette">
+
+# Update primaryToolbarButtons in browser/themes/shared/browser.inc when adding
+# or removing default items with the toolbarbutton-1 class.
+
       <toolbaritem id="search-container" title="&searchItem.title;"
                    align="center" class="chromeclass-toolbar-additional"
                    flex="100" persist="width" removable="true">
@@ -817,160 +987,6 @@
         </toolbarbutton>
       </toolbaritem>
 
-      <hbox id="window-controls" hidden="true" pack="end">
-        <toolbarbutton id="minimize-button"
-                       tooltiptext="&fullScreenMinimize.tooltip;"
-                       oncommand="window.minimize();"/>
-
-        <toolbarbutton id="restore-button"
-                       tooltiptext="&fullScreenRestore.tooltip;"
-                       oncommand="BrowserFullScreen();"/>
-
-        <toolbarbutton id="close-button"
-                       tooltiptext="&fullScreenClose.tooltip;"
-                       oncommand="BrowserTryToCloseWindow();"/>
-      </hbox>
-    </toolbar>
-
-    <toolbarset id="customToolbars" context="toolbar-context-menu"/>
-
-    <toolbar id="PersonalToolbar"
-             mode="icons" iconsize="small" defaulticonsize="small"
-             lockiconsize="true"
-             class="chromeclass-directories"
-             context="toolbar-context-menu"
-             defaultset="personal-bookmarks"
-             toolbarname="&personalbarCmd.label;" accesskey="&personalbarCmd.accesskey;"
-             collapsed="true"
-             customizable="true">
-      <toolbaritem flex="1" id="personal-bookmarks" title="&bookmarksItem.title;"
-                   removable="true">
-        <hbox flex="1"
-              id="PlacesToolbar"
-              context="placesContext"
-              onclick="BookmarksEventHandler.onClick(event, this._placesView);"
-              oncommand="BookmarksEventHandler.onCommand(event, this._placesView);"
-              tooltip="bhTooltip"
-              popupsinherittooltip="true">
-          <toolbarbutton class="bookmark-item bookmarks-toolbar-customize"
-                         mousethrough="never"
-                         label="&bookmarksToolbarItem.label;"/>
-          <hbox flex="1">
-            <hbox align="center">
-              <image id="PlacesToolbarDropIndicator"
-                     mousethrough="always"
-                     collapsed="true"/>
-            </hbox>
-            <scrollbox orient="horizontal"
-                       id="PlacesToolbarItems"
-                       flex="1"/>
-            <toolbarbutton type="menu"
-                           id="PlacesChevron"
-                           class="chevron"
-                           mousethrough="never"
-                           collapsed="true"
-                           tooltiptext="&bookmarksToolbarChevron.tooltip;"
-                           onpopupshowing="document.getElementById('PlacesToolbar')
-                                                   ._placesView._onChevronPopupShowing(event);">
-              <menupopup id="PlacesChevronPopup"
-                         placespopup="true"
-                         tooltip="bhTooltip" popupsinherittooltip="true"
-                         context="placesContext"/>
-            </toolbarbutton>
-          </hbox>
-        </hbox>
-      </toolbaritem>
-    </toolbar>
-
-#ifdef MENUBAR_CAN_AUTOHIDE
-#ifndef CAN_DRAW_IN_TITLEBAR
-#define APPMENU_ON_TABBAR
-#endif
-#endif
-
-
-    <toolbar id="TabsToolbar"
-             class="toolbar-primary"
-             fullscreentoolbar="true"
-             customizable="true"
-             mode="icons" lockmode="true"
-             iconsize="small" defaulticonsize="small" lockiconsize="true"
-             aria-label="&tabsToolbar.label;"
-             context="toolbar-context-menu"
-#ifdef APPMENU_ON_TABBAR
-             defaultset="appmenu-toolbar-button,tabbrowser-tabs,new-tab-button,alltabs-button,tabs-closebutton"
-#else
-             defaultset="tabbrowser-tabs,new-tab-button,alltabs-button,tabs-closebutton"
-#endif
-             collapsed="true">
-
-#ifdef APPMENU_ON_TABBAR
-      <toolbarbutton id="appmenu-toolbar-button"
-                     class="chromeclass-toolbar-additional"
-                     type="menu"
-                     label="&brandShortName;"
-                     tooltiptext="&appMenuButton.tooltip;">
-#include browser-appmenu.inc
-      </toolbarbutton>
-#endif
-
-      <tabs id="tabbrowser-tabs"
-            class="tabbrowser-tabs"
-            tabbrowser="content"
-            flex="1"
-            setfocus="false"
-            tooltip="tabbrowser-tab-tooltip"
-            stopwatchid="FX_TAB_CLICK_MS">
-        <tab class="tabbrowser-tab" selected="true" fadein="true"/>
-      </tabs>
-
-      <toolbarbutton id="new-tab-button"
-                     class="toolbarbutton-1 chromeclass-toolbar-additional"
-                     label="&tabCmd.label;"
-                     command="cmd_newNavigatorTab"
-                     onclick="checkForMiddleClick(this, event);"
-                     tooltiptext="&newTabButton.tooltip;"
-                     ondrop="newTabButtonObserver.onDrop(event)"
-                     ondragover="newTabButtonObserver.onDragOver(event)"
-                     ondragenter="newTabButtonObserver.onDragOver(event)"
-                     ondragexit="newTabButtonObserver.onDragExit(event)"
-                     removable="true"/>
-
-      <toolbarbutton id="alltabs-button"
-                     class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button"
-                     type="menu"
-                     label="&listAllTabs.label;"
-                     tooltiptext="&listAllTabs.label;"
-                     removable="true">
-        <menupopup id="alltabs-popup"
-                   position="after_end">
-          <menuitem id="menu_tabview"
-                    class="menuitem-iconic"
-                    key="key_tabview"
-                    label="&viewTabGroups.label;"
-                    command="Browser:ToggleTabView"
-                    observes="tabviewGroupsNumber"/>
-          <menuseparator id="alltabs-popup-separator"/>
-        </menupopup>
-      </toolbarbutton>
-
-      <toolbarbutton id="tabs-closebutton"
-                     class="close-button tabs-closebutton"
-                     command="cmd_close"
-                     label="&closeTab.label;"
-                     tooltiptext="&closeTab.label;"/>
-
-#ifdef CAN_DRAW_IN_TITLEBAR
-      <hbox class="titlebar-placeholder" type="appmenu-button" ordinal="0"/>
-      <hbox class="titlebar-placeholder" type="caption-buttons" ordinal="1000"/>
-#endif
-    </toolbar>
-
-    <toolbarpalette id="BrowserToolbarPalette">
-
-# Update primaryToolbarButtons in browser/themes/shared/browser.inc when adding
-# or removing default items with the toolbarbutton-1 class.
-
       <toolbarbutton id="print-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                      label="&printButton.label;" command="cmd_print"
                      tooltiptext="&printButton.tooltip;"/>
@@ -1077,45 +1093,49 @@
 
   <hbox id="fullscr-toggler" collapsed="true"/>
 
-  <hbox flex="1" id="browser">
-    <vbox id="browser-border-start" hidden="true" layer="true"/>
-    <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
-      <sidebarheader id="sidebar-header" align="center">
-        <label id="sidebar-title" persist="value" flex="1" crop="end" control="sidebar"/>
-        <image id="sidebar-throbber"/>
-        <toolbarbutton class="tabs-closebutton" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="toggleSidebar();"/>
-      </sidebarheader>
-      <browser id="sidebar" flex="1" autoscroll="false" disablehistory="true"
-                style="min-width: 14em; width: 18em; max-width: 36em;"/>
-    </vbox>
+  <deck id="content-deck" flex="1">
+    <hbox flex="1" id="browser">
+      <vbox id="browser-border-start" hidden="true" layer="true"/>
+      <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
+        <sidebarheader id="sidebar-header" align="center">
+          <label id="sidebar-title" persist="value" flex="1" crop="end" control="sidebar"/>
+          <image id="sidebar-throbber"/>
+          <toolbarbutton class="tabs-closebutton" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="toggleSidebar();"/>
+        </sidebarheader>
+        <browser id="sidebar" flex="1" autoscroll="false" disablehistory="true"
+                  style="min-width: 14em; width: 18em; max-width: 36em;"/>
+      </vbox>
 
-    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
-    <vbox id="appcontent" flex="1">
-      <tabbrowser id="content" disablehistory="true"
-                  flex="1" contenttooltip="aHTMLTooltip"
-                  tabcontainer="tabbrowser-tabs"
-                  contentcontextmenu="contentAreaContextMenu"
-                  autocompletepopup="PopupAutoComplete"/>
-      <chatbar id="pinnedchats" layer="true" mousethrough="always" hidden="true"/>
-      <statuspanel id="statusbar-display" inactive="true"/>
-    </vbox>
-    <splitter id="social-sidebar-splitter"
-              class="chromeclass-extrachrome sidebar-splitter"
-              observes="socialSidebarBroadcaster"/>
-    <vbox id="social-sidebar-box"
-          class="chromeclass-extrachrome"
-          observes="socialSidebarBroadcaster"
-          persist="width">
-      <browser id="social-sidebar-browser"
-               type="content"
-               context="contentAreaContextMenu"
-               disableglobalhistory="true"
-               tooltip="aHTMLTooltip"
-               flex="1"
-               style="min-width: 14em; width: 18em; max-width: 36em;"/>
-    </vbox>
-    <vbox id="browser-border-end" hidden="true" layer="true"/>
-  </hbox>
+      <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
+      <vbox id="appcontent" flex="1">
+        <tabbrowser id="content" disablehistory="true"
+                    flex="1" contenttooltip="aHTMLTooltip"
+                    tabcontainer="tabbrowser-tabs"
+                    contentcontextmenu="contentAreaContextMenu"
+                    autocompletepopup="PopupAutoComplete"
+                    onclick="contentAreaClick(event, false);"/>
+        <chatbar id="pinnedchats" layer="true" mousethrough="always" hidden="true"/>
+        <statuspanel id="statusbar-display" inactive="true"/>
+      </vbox>
+      <splitter id="social-sidebar-splitter"
+                class="chromeclass-extrachrome sidebar-splitter"
+                observes="socialSidebarBroadcaster"/>
+      <vbox id="social-sidebar-box"
+            class="chromeclass-extrachrome"
+            observes="socialSidebarBroadcaster"
+            persist="width">
+        <browser id="social-sidebar-browser"
+                 type="content"
+                 context="contentAreaContextMenu"
+                 disableglobalhistory="true"
+                 tooltip="aHTMLTooltip"
+                 flex="1"
+                 style="min-width: 14em; width: 18em; max-width: 36em;"/>
+      </vbox>
+      <vbox id="browser-border-end" hidden="true" layer="true"/>
+    </hbox>
+#include customize.inc
+  </deck>
 
   <hbox id="full-screen-warning-container" hidden="true" fadeout="true">
     <hbox style="width: 100%;" pack="center"> <!-- Inner hbox needed due to bug 579776. -->

browser/base/content/customize.inc

@@ -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/. -->
+
+<vbox id="customization-container" flex="1" style="background: #DBEAF9;">
+  <hbox flex="1">
+    <richlistbox id="customization-categories"
+                 onselect="document.getElementById('customization-content').selectedIndex = this.selectedIndex;">
+      <richlistitem>
+        <label value="&customizeMode.menuAndToolbars.label;"/>
+        </richlistitem>
+        <richlistitem>
+        <label value="&customizeMode.appearance.label;"/>
+      </richlistitem>
+    </richlistbox>
+    <deck id="customization-content" flex="1">
+      <hbox id="customization-widgets">
+        <vbox flex="1">
+          <label value="&customizeMode.menuAndToolbars.header;"/>
+          <vbox id="customization-palette" flex="1" style="display: block;"/>
+        </vbox>
+        <vbox>
+          <hbox id="customization-panelHolder"/>
+          <spacer flex="1"/>
+        </vbox>
+      </hbox>
+      <vbox id="customization-appearance">
+        <label value="&customizeMode.appearance.header;"/>
+      </vbox>
+    </deck>
+  </hbox>
+  <hbox pack="end">
+    <button oncommand="gCustomizeMode.reset();" label="&customizeMode.restoreDefaults;"/>
+    <button oncommand="BrowserToolboxCustomizeDone();" label="&customizeMode.done;"/>
+  </hbox>
+</vbox>

browser/base/content/customizing.xhtml

@@ -0,0 +1,22 @@
+<?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 % htmlDTD
+    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "DTD/xhtml1-strict.dtd">
+  %htmlDTD;
+  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
+  %brandDTD;
+  <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
+  %browserDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>&customizeMode.tabTitle;</title>
+	</head>
+	<body></body>
+</html>

browser/base/content/global-scripts.inc

@@ -9,5 +9,6 @@
 <script type="application/javascript" src="chrome://browser/content/browser.js"/>
 <script type="application/javascript" src="chrome://browser/content/downloads/downloads.js"/>
 <script type="application/javascript" src="chrome://browser/content/downloads/indicator.js"/>
+<script type="application/javascript" src="chrome://browser/content/panelUI.js"/>
 <script type="application/javascript" src="chrome://global/content/inlineSpellCheckUI.js"/>
 <script type="application/javascript" src="chrome://global/content/viewSourceUtils.js"/>

browser/base/content/panelUI.inc

@@ -0,0 +1,78 @@
+<!-- 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/. -->
+
+<panel id="PanelUI-popup"
+       role="group"
+       type="arrow"
+       level="top"
+       consumeoutsideclicks="true">
+  <box id="PanelUI-container">
+    <stack id="PanelUI-viewStack" view="main">
+      <vbox id="PanelUI-mainView">
+        <vbox class="PanelUI-pageControls" pack="center">
+          <hbox class="PanelUI-editControls">
+            <toolbarbutton id="PanelUI-cut-btn" flex="1"
+                           label="&cutCmd.label;"
+                           tooltiptext="&cutButton.tooltip;"
+                           command="cmd_cut"/>
+            <toolbarbutton id="PanelUI-copy-btn" flex="1"
+                           label="&copyCmd.label;"
+                           tooltiptext="&copyButton.tooltip;"
+                           command="cmd_copy"/>
+            <toolbarbutton id="PanelUI-paste-btn" flex="1"
+                           label="&pasteCmd.label;"
+                           tooltiptext="&pasteButton.tooltip;"
+                           command="cmd_paste"/>
+          </hbox>
+          <hbox class="PanelUI-zoomControls">
+            <toolbarbutton id="PanelUI-zoomOut-btn" flex="1"
+                           noautoclose="true" label="&fullZoomReduceCmd.label;"
+                           command="cmd_fullZoomReduce"
+                           tooltiptext="&zoomOutButton.tooltip;"/>
+            <toolbarbutton id="PanelUI-zoomReset-btn" flex="1"
+                           noautoclose="true" label="&zoomReset.label;"
+                           tooltiptext="&zoomReset.tooltip;"
+                           command="cmd_fullZoomReset"/>
+            <toolbarbutton id="PanelUI-zoomIn-btn" flex="1"
+                           noautoclose="true" label="&fullZoomEnlargeCmd.label;"
+                           command="cmd_fullZoomEnlarge"
+                           tooltiptext="&zoomInButton.tooltip;"/>
+          </hbox>
+        </vbox>
+
+        <vbox id="PanelUI-contents" type="grid"/>
+
+        <vbox id="PanelUI-mainView-spring"/>
+
+        <hbox class="PanelUI-footer" align="center">
+          <toolbarbutton id="PanelUI-help-btn" label="&helpMenu.label;"
+                         command="openHelpLink('firefox-help');"/>
+          <spacer flex="1"/>
+          <toolbarbutton id="PanelUI-customize-btn" label="&appMenuCustomize.label;"
+                         command="cmd_CustomizeToolbars"/>
+        </hbox>
+      </vbox>
+
+      <!-- Used to capture click events over the PanelUI-mainView if we're in
+           subview mode. That way, any click on the PanelUI-mainView causes us
+           to revert to the mainView mode, whereupon PanelUI-click-capture then
+           allows click events to go through it. -->
+      <box id="PanelUI-clickCapturer">
+      </box>
+
+      <deck id="PanelUI-subViews" flex="1">
+        <vbox id="PanelUI-bookmarks" flex="1">
+          <label value="&appMenuBookmarks.label;"/>
+          <vbox flex="1">
+            <toolbarbutton label="&bookmarkThisPageCmd.label;"/>
+            <toolbarbutton label="&viewBookmarksToolbar.label;"/>
+            <toolbarbutton label="&showAllBookmarks2.label;"/>
+            <spacer flex="1"/>
+          </vbox>
+          <vbox id="PanelUI-bookmarks-tall-maker" />
+        </vbox>
+      </deck>
+    </stack>
+  </box>
+</panel>

browser/base/content/panelUI.js

@@ -0,0 +1,243 @@
+/* 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/. */
+
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
+                                  "resource:///modules/CustomizableUI.jsm");
+/**
+ * Maintains the state and dispatches events for the main menu panel.
+ */
+
+const PanelUI = {
+  /** Panel events that we listen for. **/
+  get kEvents() ["popupshowing", "popupshown", "popuphiding", "popuphidden"],
+  /**
+   * Used for lazily getting and memoizing elements from the document. Lazy
+   * getters are set in init, and memoizing happens after the first retrieval.
+   */
+  get kElements() {
+    return {
+      clickCapturer: "PanelUI-clickCapturer",
+      container: "PanelUI-container",
+      contents: "PanelUI-contents",
+      mainView: "PanelUI-mainView",
+      mainViewSpring: "PanelUI-mainView-spring",
+      menuButton: "PanelUI-menu-button",
+      panel: "PanelUI-popup",
+      subViews: "PanelUI-subViews",
+      viewStack: "PanelUI-viewStack"
+    };
+  },
+
+  /**
+   * Returns whether we're in subview mode. This can return true even if
+   * the transition to subview mode is not yet complete.
+   **/
+  get _showingSubView() {
+    return (this.viewStack.hasAttribute("view") &&
+            this.viewStack.getAttribute("view") == "subview");
+  },
+
+  /**
+   * If true, puts us into subview mode, which slides the subview deck over
+   * and adjusts the height of the panel accordingly.
+   *
+   * @param aVal
+   *        True if we should be in subview mode.
+   */
+  set _showingSubView(aVal) {
+    if (aVal) {
+      let oldHeight = this.mainView.clientHeight;
+      this.viewStack.setAttribute("view", "subview");
+      this.mainViewSpring.style.height = this.subViews.scrollHeight - oldHeight + "px";
+      this.container.style.height = this.subViews.scrollHeight + "px";
+    } else {
+      this.viewStack.setAttribute("view", "main");
+      let springHeight = this.mainViewSpring.getBoundingClientRect().height;
+      this.container.style.height = (this.mainView.scrollHeight - springHeight) + "px";
+      this.mainViewSpring.style.height = "";
+    }
+
+    return aVal;
+  },
+
+  init: function() {
+    for (let [k, v] of Iterator(this.kElements)) {
+      // Need to do fresh let-bindings per iteration
+      let getKey = k;
+      let id = v;
+      this.__defineGetter__(getKey, function() {
+        delete this[getKey];
+        return this[getKey] = document.getElementById(id);
+      });
+    }
+
+    for (let event of this.kEvents) {
+      this.panel.addEventListener(event, this);
+    }
+
+    this.clickCapturer.addEventListener("click", this._onCapturerClick,
+                                        true);
+  },
+
+  uninit: function() {
+    for (let event of this.kEvents) {
+      this.panel.removeEventListener(event, this);
+    }
+
+    this.clickCapturer.removeEventListener("click", this._onCapturerClick,
+                                           true);
+  },
+
+  /**
+   * Customize mode extracts the mainView and puts it somewhere else while the
+   * user customizes. Upon completion, this function can be called to put the
+   * panel back to where it belongs in normal browsing mode.
+   *
+   * @param aMainView
+   *        The mainView node to put back into place.
+   */
+  replaceMainView: function(aMainView) {
+    this.viewStack.insertBefore(aMainView, this.viewStack.firstChild);
+  },
+
+  /**
+   * Opens the menu panel if it's closed, or closes it if it's
+   * open. If the event target has a child with the toolbarbutton-icon
+   * attribute, the panel will be anchored on that child. Otherwise, the panel
+   * is anchored on the event target itself.
+   *
+   * @param aEvent the event that triggers the toggle.
+   */
+  toggle: function(aEvent) {
+    if (this.panel.state == "open") {
+      this.hide();
+    } else if (this.panel.state == "closed") {
+      let anchor = aEvent.target;
+      let iconAnchor =
+        document.getAnonymousElementByAttribute(anchor, "class",
+                                                "toolbarbutton-icon");
+      this.panel.openPopup(iconAnchor || anchor, "bottomcenter topright");
+    }
+  },
+
+  /**
+   * If the menu panel is being shown, hide it.
+   */
+  hide: function() {
+    this.panel.hidePopup();
+    this.showMainView();
+  },
+
+  handleEvent: function(aEvent) {
+    switch (aEvent.type) {
+      case "popupshowing":
+        CustomizableUI.registerMenuPanel(this.contents);
+        let cstyle = window.getComputedStyle(this.viewStack, null);
+        this.container.style.height = cstyle.getPropertyValue("height");
+        this.container.style.width = cstyle.getPropertyValue("width");
+        // Fall through
+      case "popupshown":
+        // Fall through
+      case "popuphiding":
+        // Fall through
+      case "popuphidden": {
+        this._updatePanelButton(aEvent.target);
+        break;
+      }
+    }
+  },
+
+  /**
+   * Switch the panel to the main view if it's not already
+   * in that view.
+   */
+  showMainView: function() {
+    // Are we showing a subview? If so, fire the ViewHiding event on it.
+    if (this._showingSubView) {
+      let viewNode = this.subViews.selectedPanel;
+      let evt = document.createEvent("CustomEvent");
+      evt.initCustomEvent("ViewHiding", true, true, viewNode);
+      viewNode.dispatchEvent(evt);
+    }
+
+    this._shiftMainView();
+    this._showingSubView = false;
+  },
+
+  /**
+   * Shows a subview in the panel with a given ID.
+   *
+   * @param aViewId the ID of the subview to show.
+   */
+  showSubView: function(aViewId, aAnchor) {
+    let viewNode = document.getElementById(aViewId);
+    if (!viewNode) {
+      Cu.reportError("Could not show panel subview with id: " + aViewId);
+      return;
+    }
+
+    if (!aAnchor) {
+      Cu.reportError("Expected an anchor when opening subview with id: " + aViewId);
+      return;
+    }
+
+    // Emit the ViewShowing event so that the widget definition has a chance
+    // to lazily populate the subview with things.
+    let evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent("ViewShowing", true, true, viewNode);
+    viewNode.dispatchEvent(evt);
+
+    this.subViews.selectedPanel = viewNode;
+
+    // Now we have to transition to transition the panel. There are a few parts
+    // to this:
+    //
+    // 1) The main view content gets shifted so that the center of the anchor
+    //    node is at the left-most edge of the panel.
+    // 2) The subview deck slides in so that it takes up almost all of the
+    //    panel.
+    // 3) If the subview is taller then the main panel contents, then the panel
+    //    must grow to meet that new height. Otherwise, it must shrink.
+    //
+    // All three of these actions make use of CSS transformations, so they
+    // should all occur simultaneously.
+    this._shiftMainView(aAnchor);
+    this._showingSubView = true;
+  },
+
+  /**
+   * Sets the anchor node into the open or closed state, depending
+   * on the state of the panel.
+   */
+  _updatePanelButton: function() {
+    this.menuButton.open = this.panel.state == "open" ||
+                           this.panel.state == "showing";
+  },
+
+  /**
+   * If aAnchor is not null, this shifts the main view content so that it is
+   * partially clipped by the panel boundaries, placing the center of aAnchor
+   * at the clipping edge. If aAnchor is undefined or null, the main view
+   * content is shifted back to its original position.
+   */
+  _shiftMainView: function(aAnchor) {
+    if (aAnchor) {
+      // We need to find the left edge of the anchor, relative to the main
+      // panel. Then we need to add half the width of the anchor. This is the
+      // target that we need to transition to.
+      let anchorRect = aAnchor.getBoundingClientRect();
+      let mainViewRect = this.mainView.getBoundingClientRect();
+      let leftEdge = anchorRect.left - mainViewRect.left;
+      let center = (anchorRect.width / 2);
+      let target = leftEdge + center;
+      this.mainView.style.transform = "translateX(-" + target + "px)";
+    } else {
+      this.mainView.style.transform = "";
+    }
+  },
+
+  _onCapturerClick: function(aEvent) {
+    PanelUI.showMainView();
+  },
+};

browser/base/content/panelUI.xml

@@ -0,0 +1,40 @@
+<?xml version="1.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/. -->
+
+<bindings id="browserPanelUIBindings"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+          xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="toolbarbutton" display="xul:button"
+           extends="chrome://global/content/bindings/button.xml#button-base">
+    <resources>
+      <stylesheet src="chrome://global/skin/toolbarbutton.css"/>
+    </resources>
+    
+    <content>
+      <children includes="observes|template|menupopup|panel|tooltip"/>
+      <xul:hbox align="center" flex="1">
+	      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
+	      <xul:vbox flex="1">
+	  	    <xul:label class="toolbarbutton-text" crop="right" flex="1"
+  	  	             xbl:inherits="value=label,accesskey,crop"/>
+  	  	  <xul:hbox pack="end">
+	  	  	  <xul:label class="toolbarbutton-acceltext" crop="middle"
+  		  	  	         xbl:inherits="value=acceltext"/>
+  		  	</xul:hbox>
+  		  </xul:vbox>
+  		</xul:hbox>
+    </content>
+    
+    <implementation implements="nsIAccessibleProvider">
+      <property name="accessibleType" readonly="true">
+        <getter>
+          return Components.interfaces.nsIAccessibleProvider.XULToolbarButton;
+        </getter>
+      </property>
+    </implementation>
+  </binding>
+</bindings>

browser/base/content/panelUIOverlay.js

@@ -0,0 +1,9 @@
+/* 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/. */
+
+if (typeof XPCOMUtils == "undefined")
+  Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
+                                  "resource:///modules/CustomizableUI.jsm");

browser/base/content/panelUIOverlay.xul

@@ -0,0 +1,26 @@
+<?xml version="1.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/. -->
+
+<!DOCTYPE overlay [
+  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
+  %brandDTD;
+  <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd" >
+  %browserDTD;
+]>
+
+<?xml-stylesheet href="chrome://browser/skin/panelUIOverlay.css" type="text/css"?>
+
+<overlay id="panelUIOverlay"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/javascript" src="chrome://browser/content/panelUIOverlay.js"/>
+
+  <hbox id="app-extension-point-end">
+    <toolbarbutton id="PanelUI-menu-button"
+                   class="toolbarbutton-1"
+                   label="&brandShortName;"
+                   tooltiptext="&appmenu.title;"
+                   oncommand="CustomizableUI.showPanel(this);"/>
+  </hbox>
+</overlay>

browser/base/content/toolbar.xml

@@ -0,0 +1,104 @@
+<?xml version="1.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/. -->
+
+<bindings id="browserToolbarBindings"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+          xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="toolbar">
+    <implementation implements="nsIAccessibleProvider">
+      <property name="accessibleType" readonly="true">
+        <getter>
+          return Components.interfaces.nsIAccessibleProvider.XULToolbar;
+        </getter>
+      </property>
+
+      <constructor><![CDATA[
+          if (document.readyState == "complete") {
+            this._init();
+          } else {
+            // Need to wait until XUL overlays are loaded. See bug 554279.
+            let self = this;
+            document.addEventListener("readystatechange", function onReadyStateChange() {
+              if (document.readyState != "complete")
+                return;
+              document.removeEventListener("readystatechange", onReadyStateChange, false);
+              self._init();
+            }, false);
+          }
+      ]]></constructor>
+
+      <method name="_init">
+        <body><![CDATA[
+          let scope = {};
+          Cu.import("resource:///modules/CustomizableUI.jsm", scope);
+          let CustomizableUI = scope.CustomizableUI;
+
+          // Searching for the toolbox palette in the toolbar binding because
+          // toolbars are constructed first.
+          let toolbox = this.toolbox;
+          if (toolbox && !toolbox.palette) {
+            for (let node of toolbox.children) {
+              if (node.localName == "toolbarpalette") {
+                // Hold on to the palette but remove it from the document.
+                toolbox.palette = node;
+                toolbox.removeChild(node);
+              }
+            }
+          }
+
+          CustomizableUI.registerToolbar(this);
+        ]]></body>
+      </method>
+
+      <property name="toolbarName"
+                onget="return this.getAttribute('toolbarname');"
+                onset="this.setAttribute('toolbarname', val); return val;"/>
+
+      <property name="customizationTarget" readonly="true">
+        <getter><![CDATA[
+          if (this._customizationTarget)
+            return this._customizationTarget;
+
+          let id = this.getAttribute("customizationtarget");
+          if (id)
+            this._customizationTarget = document.getElementById(id);
+          
+          if (!this._customizationTarget)
+            this._customizationTarget = this;
+
+          return this._customizationTarget;
+        ]]></getter>
+      </property>
+
+      <property name="toolbox" readonly="true">
+        <getter><![CDATA[
+          if (this._toolbox)
+            return this._toolbox;
+
+          let toolboxId = this.getAttribute("toolboxid");
+          if (toolboxId) {
+            let toolbox = document.getElementById(toolboxId);
+            if (toolbox) {
+              if (toolbox.externalToolbars.indexOf(this) == -1)
+                toolbox.externalToolbars.push(this);
+
+              this._toolbox = toolbox;
+            }
+          }
+
+          if (!this._toolbox && this.parentNode &&
+              this.parentNode.localName == "toolbox") {
+            this._toolbox = this.parentNode;
+          }
+
+          return this._toolbox;
+        ]]></getter>
+      </property>
+    </implementation>
+  </binding>
+
+</bindings>

browser/base/jar.mn

@@ -13,8 +13,14 @@ browser.jar:
 #endif
 %  overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
 %  overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
-%  style chrome://global/content/customizeToolbar.xul chrome://browser/content/browser.css
-%  style chrome://global/content/customizeToolbar.xul chrome://browser/skin/
+
+# These overlays should be kept in sync with what pages are in 
+# XULBrowserWindow.inContentWhitelist in browser.js
+% overlay about:addons                                chrome://browser/content/panelUIOverlay.xul
+% overlay about:preferences                           chrome://browser/content/panelUIOverlay.xul
+% overlay about:permissions                           chrome://browser/content/panelUIOverlay.xul
+% overlay about:sync-progress                         chrome://browser/content/panelUIOverlay.xul
+
 *       content/browser/aboutDialog.xul               (content/aboutDialog.xul)
 *       content/browser/aboutDialog.js                (content/aboutDialog.js)
         content/browser/aboutDialog.css               (content/aboutDialog.css)
@@ -60,6 +66,7 @@ browser.jar:
 *       content/browser/browser.xul                   (content/browser.xul)
 *       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
         content/browser/content.js                    (content/content.js)
+        content/browser/customizing.xhtml             (content/customizing.xhtml)
         content/browser/newtab/newTab.xul             (content/newtab/newTab.xul)
 *       content/browser/newtab/newTab.js              (content/newtab/newTab.js)
         content/browser/newtab/newTab.css             (content/newtab/newTab.css)
@@ -72,6 +79,9 @@ browser.jar:
         content/browser/pageinfo/feeds.xml            (content/pageinfo/feeds.xml)
         content/browser/pageinfo/permissions.js       (content/pageinfo/permissions.js)
         content/browser/pageinfo/security.js          (content/pageinfo/security.js)
+        content/browser/panelUI.js                    (content/panelUI.js)
+        content/browser/panelUIOverlay.xul            (content/panelUIOverlay.xul)
+        content/browser/panelUIOverlay.js             (content/panelUIOverlay.js)
 #ifdef MOZ_SERVICES_SYNC
         content/browser/sync/aboutSyncTabs.xul        (content/sync/aboutSyncTabs.xul)
         content/browser/sync/aboutSyncTabs.js         (content/sync/aboutSyncTabs.js)
@@ -91,6 +101,8 @@ browser.jar:
         content/browser/sync/progress.js              (content/sync/progress.js)
         content/browser/sync/progress.xhtml           (content/sync/progress.xhtml)
 #endif
+        content/browser/panelUI.xml                   (content/panelUI.xml)
+        content/browser/toolbar.xml                   (content/toolbar.xml)
         content/browser/openLocation.js               (content/openLocation.js)
         content/browser/openLocation.xul              (content/openLocation.xul)
         content/browser/safeMode.css                  (content/safeMode.css)

browser/components/about/AboutRedirector.cpp

@@ -84,6 +84,8 @@ static RedirEntry kRedirMap[] = {
   { "healthreport", "chrome://browser/content/abouthealthreport/abouthealth.xhtml",
     nsIAboutModule::ALLOW_SCRIPT },
 #endif
+  { "customizing", "chrome://browser/content/customizing.xhtml",
+    nsIAboutModule::ALLOW_SCRIPT },
 };
 static const int kRedirTotal = NS_ARRAY_LENGTH(kRedirMap);
 

browser/components/build/nsModule.cpp

@@ -107,6 +107,7 @@ static const mozilla::Module::ContractIDEntry kBrowserContracts[] = {
 #ifdef MOZ_SERVICES_HEALTHREPORT
     { NS_ABOUT_MODULE_CONTRACTID_PREFIX "healthreport", &kNS_BROWSER_ABOUT_REDIRECTOR_CID },
 #endif
+    { NS_ABOUT_MODULE_CONTRACTID_PREFIX "customizing", &kNS_BROWSER_ABOUT_REDIRECTOR_CID },
 #if defined(XP_WIN)
     { NS_IEHISTORYENUMERATOR_CONTRACTID, &kNS_WINIEHISTORYENUMERATOR_CID },
 #elif defined(XP_MACOSX)

browser/locales/en-US/chrome/browser/browser.dtd

@@ -15,6 +15,8 @@
                                                                 inside the private browsing mode -->
 <!ENTITY mainWindow.titlePrivateBrowsingSuffix "(Private Browsing)">
 
+<!ENTITY appmenu.title                       "Customize and Control &brandFullName;">
+
 <!-- Tab context menu -->
 <!ENTITY  reloadTab.label                    "Reload Tab">
 <!ENTITY  reloadTab.accesskey                "R">
@@ -319,6 +321,8 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY appMenuGettingStarted.label "Getting Started">
 <!ENTITY appMenuSafeMode.label "Restart with Add-ons Disabled…">
 <!ENTITY appMenuSafeMode.accesskey "R">
+<!ENTITY appMenuBack.label "Back">
+<!ENTITY appMenuBookmarks.label "Bookmarks">
 
 <!ENTITY openCmd.commandkey           "l">
 <!ENTITY urlbar.placeholder2          "Search or enter address">
@@ -530,6 +534,9 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY zoomOutButton.tooltip          "Zoom out">
 <!ENTITY zoomInButton.tooltip           "Zoom in">
 <!ENTITY zoomControls.label             "Zoom Controls">
+<!ENTITY zoomReset.tooltip              "Reset Zoom">
+<!-- LOCALIZATION NOTE(zoomReset.label): the &#37; is the percent symbol. -->
+<!ENTITY zoomReset.label                "100&#37;">
 
 <!ENTITY quitApplicationCmdWin.label       "Exit"> 
 <!ENTITY quitApplicationCmdWin.accesskey   "x">
@@ -639,6 +646,16 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY social.learnMore.accesskey "l">
 <!ENTITY social.closeNotificationItem.label "Not Now">
 
+
+
+<!ENTITY customizeMode.tabTitle "Customize &brandShortName;">
+<!ENTITY customizeMode.menuAndToolbars.label "Menu and toolbars">
+<!ENTITY customizeMode.menuAndToolbars.header "More tools to add to the menu and toolbar">
+<!ENTITY customizeMode.appearance.label "Appearance">
+<!ENTITY customizeMode.appearance.header "Bling!">
+<!ENTITY customizeMode.restoreDefaults "Restore Defaults">
+<!ENTITY customizeMode.done "Done">
+
 <!ENTITY social.chatBar.commandkey "c">
 <!ENTITY social.chatBar.label "Focus chats">
 <!ENTITY social.chatBar.accesskey "c">

browser/modules/CustomizeMode.jsm

@@ -0,0 +1,484 @@
+/* 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 = ["CustomizeMode"];
+
+const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
+
+const kPrefCustomizationDebug = "browser.uiCustomization.debug";
+const kPaletteId = "customization-palette";
+
+let gDebug = false;
+try {
+  gDebug = Services.prefs.getBoolPref(kPrefCustomizationDebug);
+} catch (e) {}
+
+function LOG(str) {
+  if (gDebug) {
+    Services.console.logStringMessage(str);
+  }
+}
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/CustomizableUI.jsm");
+
+function CustomizeMode(aWindow) {
+  this.window = aWindow;
+  // We register this window to have its customization data cleaned up when
+  // unloading.
+  CustomizableUI.registerWindow(this.window);
+
+  this.document = aWindow.document;
+  // There are two palettes - there's the palette that can be overlayed with
+  // toolbar items in browser.xul. This is invisible, and never seen by the
+  // user. Then there's the visible palette, which gets populated and displayed
+  // to the user when in customizing mode.
+  this.visiblePalette = this.document.getElementById(kPaletteId);
+};
+
+CustomizeMode.prototype = {
+  _changed: false,
+  window: null,
+  document: null,
+  // areas is used to cache the customizable areas when in customization mode.
+  areas: null,
+  // When in customizing mode, we swap out the reference to the invisible
+  // palette in gNavToolbox.palette for our visiblePalette. This way, for the
+  // customizing browser window, when widgets are removed from customizable
+  // areas and added to the palette, they're added to the visible palette.
+  // _stowedPalette is a reference to the old invisible palette so we can
+  // restore gNavToolbox.palette to its original state after exiting
+  // customization mode.
+  _stowedPalette: null,
+
+  enter: function() {
+    CustomizableUI.addListener(this);
+
+    let window = this.window;
+    let document = this.document;
+
+    // Let everybody in this window know that we're about to customize.
+    let evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent("CustomizationStart", true, true, window);
+    window.dispatchEvent(evt);
+
+    let customizer = document.getElementById("customization-container");
+    customizer.parentNode.selectedPanel = customizer;
+
+    window.PanelUI.hide();
+
+    let self = this;
+    let deck = document.getElementById("tab-view-deck");
+    deck.addEventListener("transitionend", function customizeTransitionEnd() {
+      deck.removeEventListener("transitionend", customizeTransitionEnd);
+
+      // Move the mainView in the panel to the holder so that we can see it
+      // while customizing.
+      let panelHolder = document.getElementById("customization-panelHolder");
+      panelHolder.appendChild(window.PanelUI.mainView);
+
+      // Add drag-and-drop event handlers to all of the customizable areas.
+      self.areas = [];
+      for (let area of CustomizableUI.areas) {
+        let target = CustomizableUI.getCustomizeTargetForArea(area, window);
+        target.addEventListener("dragstart", self);
+        target.addEventListener("dragover", self);
+        target.addEventListener("drop", self);
+        for (let toolbarItem of target.children) {
+          self.wrapToolbarItem(toolbarItem, "");
+        }
+        self.areas.push(target);
+      }
+
+      self.populatePalette();
+    });
+
+    this.visiblePalette.addEventListener("dragstart", this);
+    this.visiblePalette.addEventListener("dragover", this);
+    this.visiblePalette.addEventListener("drop", this);
+
+    document.documentElement.setAttribute("customizing", true);
+  },
+
+  exit: function(aToolboxChanged) {
+    CustomizableUI.removeListener(this);
+
+    this.depopulatePalette();
+
+    this.visiblePalette.removeEventListener("dragstart", this);
+    this.visiblePalette.removeEventListener("dragover", this);
+    this.visiblePalette.removeEventListener("drop", this);
+
+    let window = this.window;
+    let document = this.document;
+
+    // Let everybody in this window know that we're finished customizing.
+    let evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent("CustomizationEnd", true, true, {changed: this._changed});
+    window.dispatchEvent(evt);
+
+    if (this._changed) {
+      // XXXmconley: At first, it seems strange to also persist the old way with
+      //             currentset - but this might actually be useful for switching
+      //             to old builds. We might want to keep this around for a little
+      //             bit.
+      this.persistCurrentSets();
+    }
+
+    document.documentElement.removeAttribute("customizing");
+
+    for (let target of this.areas) {
+      for (let toolbarItem of target.children) {
+        this.unwrapToolbarItem(toolbarItem);
+      }
+      target.removeEventListener("dragstart", this);
+      target.removeEventListener("dragover", this);
+      target.removeEventListener("drop", this);
+    }
+
+    // And drop all area references.
+    this.areas = [];
+
+    window.PanelUI.replaceMainView(window.PanelUI.mainView);
+
+    let browser = document.getElementById("browser");
+    browser.parentNode.selectedPanel = browser;
+    this._changed = false;
+  },
+
+  populatePalette: function() {
+    let toolboxPalette = this.window.gNavToolbox.palette;
+
+    let unusedWidgets = CustomizableUI.getUnusedWidgets(toolboxPalette);
+    for (let widget of unusedWidgets) {
+      let paletteItem = this.makePaletteItem(widget, "palette");
+      this.visiblePalette.appendChild(paletteItem);
+    }
+
+    this._stowedPalette = this.window.gNavToolbox.palette;
+    this.window.gNavToolbox.palette = this.visiblePalette;
+  },
+
+  //XXXunf Maybe this should use -moz-element instead of wrapping the node?
+  //       Would ensure no weird interactions/event handling from original node,
+  //       and makes it possible to put this in a lazy-loaded iframe/real tab
+  //       while still getting rid of the need for overlays.
+  makePaletteItem: function(aWidget, aPlace) {
+    let widgetNode = aWidget.forWindow(this.window).node;
+    let wrapper = this.createWrapper(widgetNode, aPlace);
+    wrapper.appendChild(widgetNode);
+    return wrapper;
+  },
+
+  depopulatePalette: function() {
+    let wrapper = this.visiblePalette.firstChild;
+
+    while (wrapper) {
+      let widgetNode = wrapper.firstChild;
+
+      let provider = CustomizableUI.getWidget(widgetNode.id);
+      // If provider is PROVIDER_SPECIAL, then it just gets thrown away.
+      if (provider = CustomizableUI.PROVIDER_XUL) {
+        if (wrapper.hasAttribute("itemdisabled")) {
+          widgetNode.disabled = true;
+        }
+
+        if (wrapper.hasAttribute("itemchecked")) {
+          widgetNode.checked = true;
+        }
+
+        if (wrapper.hasAttribute("itemcommand")) {
+          let commandID = wrapper.getAttribute("itemcommand");
+          widgetNode.setAttribute("command", commandID);
+
+          // Ensure node is in sync with its command after customizing.
+          let command = this.document.getElementById(commandID);
+          if (command && command.hasAttribute("disabled")) {
+            widgetNode.setAttribute("disabled",
+                                    command.getAttribute("disabled"));
+          }
+        }
+
+        this._stowedPalette.appendChild(widgetNode);
+      } else if (provider = CustomizableUI.PROVIDER_API) {
+        //XXXunf Currently this doesn't destroy the (now unused) node. It would
+        //       be good to do so, but we need to keep strong refs to it in
+        //       CustomizableUI (can't iterate of WeakMaps), and there's the
+        //       question of what behavior wrappers should have if consumers
+        //       keep hold of them.
+        //widget.destroyInstance(widgetNode);
+      }
+
+      this.visiblePalette.removeChild(wrapper);
+      wrapper = this.visiblePalette.firstChild;
+    }
+    this.window.gNavToolbox.palette = this._stowedPalette;
+  },
+
+  wrapToolbarItem: function(aNode, aPlace) {
+    let wrapper = this.createWrapper(aNode, aPlace);
+    aNode = aNode.parentNode.replaceChild(wrapper, aNode);
+    wrapper.appendChild(aNode);
+    return wrapper;
+  },
+
+  createWrapper: function(aNode, aPlace) {
+    let wrapper = this.document.createElement("toolbarpaletteitem");
+
+    // "place" is used by toolkit to add the toolbarpaletteitem-palette
+    // binding to a toolbarpaletteitem, which gives it a label node for when
+    // it's sitting in the palette.
+    wrapper.setAttribute("place", aPlace);
+
+    // Ensure the wrapped item doesn't look like it's in any special state, and
+    // can't be interactved with when in the customization palette.
+    if (aNode.hasAttribute("command")) {
+      wrapper.setAttribute("itemcommand", aNode.getAttribute("command"));
+      aNode.removeAttribute("command");
+    }
+
+    if (aNode.checked) {
+      wrapper.setAttribute("itemchecked", "true");
+      aNode.checked = false;
+    }
+
+    if (aNode.disabled) {
+      wrapper.setAttribute("itemdisabled", "true");
+      aNode.disabled = false;
+    }
+
+    if (aNode.hasAttribute("id")) {
+      wrapper.setAttribute("id", "wrapper-" + aNode.getAttribute("id"));
+    }
+
+    if (aNode.hasAttribute("title")) {
+      wrapper.setAttribute("title", aNode.getAttribute("title"));
+    } else if (aNode.hasAttribute("label")) {
+      wrapper.setAttribute("title", aNode.getAttribute("label"));
+    }
+
+    if (aNode.hasAttribute("flex")) {
+      wrapper.setAttribute("flex", aNode.getAttribute("flex"));
+    }
+
+    return wrapper;
+  },
+
+  unwrapToolbarItem: function(aWrapper) {
+    let toolbarItem = aWrapper.firstChild;
+
+    if (aWrapper.hasAttribute("itemdisabled")) {
+      toolbarItem.disabled = true;
+    }
+
+    if (aWrapper.hasAttribute("itemchecked")) {
+      toolbarItem.checked = true;
+    }
+
+    if (aWrapper.hasAttribute("itemcommand")) {
+      let commandID = aWrapper.getAttribute("itemcommand");
+      toolbarItem.setAttribute("command", commandID);
+
+      //XXX Bug 309953 - toolbarbuttons aren't in sync with their commands after customizing
+      let command = this.document.getElementById(commandID);
+      if (command && command.hasAttribute("disabled")) {
+        toolbarItem.setAttribute("disabled", command.getAttribute("disabled"));
+      }
+    }
+
+    aWrapper.parentNode.replaceChild(toolbarItem, aWrapper);
+    return toolbarItem;
+  },
+
+  //XXXjaws This doesn't handle custom toolbars.
+  //XXXmconley While CustomizableUI.jsm uses prefs to preserve state, we might
+  //           also want to (try) persisting with currentset as well to make it
+  //           less painful to switch to older builds.
+  persistCurrentSets: function()  {
+    //XXXjaws The toolbar bindings that are included in this changeset (/browser/base/content/toolbar.xml)
+    //        don't implement currentSet. They probably need to inherit the toolkit bindings.
+    return;
+
+    let document = this.document;
+    let toolbar = document.getElementById("nav-bar");
+
+    // Calculate currentset and store it in the attribute.
+    let currentSet = toolbar.currentSet;
+    toolbar.setAttribute("currentset", currentSet);
+
+    // Persist the currentset attribute directly on hardcoded toolbars.
+    document.persist(toolbar.id, "currentset");
+  },
+
+  reset: function() {
+    CustomizableUI.reset();
+  },
+
+  onWidgetMoved: function(aWidgetId, aArea, aOldPosition, aNewPosition) {
+    this._changed = true;
+  },
+
+  onWidgetAdded: function(aWidgetId, aArea, aPosition) {
+    this._changed = true;
+  },
+
+  onWidgetRemoved: function(aWidgetId, aArea) {
+    this._changed = true;
+  },
+
+  onWidgetCreated: function(aWidgetId) {
+  },
+
+  onWidgetDestroyed: function(aWidgetId) {
+  },
+
+  handleEvent: function(aEvent) {
+    switch(aEvent.type) {
+      case "dragstart":
+        this._onDragStart(aEvent);
+        break;
+      case "dragover":
+        this._onDragOver(aEvent);
+        break;
+      case "drop":
+        this._onDragDrop(aEvent);
+        break;
+    }
+  },
+
+  _onDragStart: function(aEvent) {
+    __dumpDragData(aEvent);
+    let item = aEvent.target;
+    while (item && item.localName != "toolbarpaletteitem") {
+      if (item.localName == "toolbar") {
+        return;
+      }
+      item = item.parentNode;
+    }
+
+    let dt = aEvent.dataTransfer;
+    let documentId = aEvent.target.ownerDocument.documentElement.id;
+    dt.setData("text/toolbarwrapper-id/" + documentId, item.firstChild.id);
+    dt.effectAllowed = "move";
+  },
+
+  _onDragOver: function(aEvent) {
+    __dumpDragData(aEvent);
+
+    let documentId = aEvent.target.ownerDocument.documentElement.id;
+    if (!aEvent.dataTransfer.types.contains("text/toolbarwrapper-id/"
+                                            + documentId.toLowerCase())) {
+      return;
+    }
+
+    aEvent.preventDefault();
+    aEvent.stopPropagation();
+  },
+
+  _onDragDrop: function(aEvent) {
+    __dumpDragData(aEvent);
+
+    let document = aEvent.target.ownerDocument;
+    let documentId = document.documentElement.id;
+    let draggedItemId = aEvent.dataTransfer.getData("text/toolbarwrapper-id/" + documentId);
+    let draggedWrapper = document.getElementById("wrapper-" + draggedItemId);
+
+    let targetNode = aEvent.target;
+    let targetParent = targetNode.parentNode;
+    let targetArea = this._getCustomizableParent(targetNode);
+    let originArea = this._getCustomizableParent(draggedWrapper);
+
+    // Do nothing if the target area or origin area are not customizable.
+    if (!targetArea || !originArea) {
+      return;
+    }
+
+    // We need to determine the place that the widget is being dropped in
+    // the target.
+    let position = Array.indexOf(targetParent.children, targetNode);
+
+    // Is the target area the customization palette? If so, we have two cases -
+    // either the originArea was the palette, or a customizable area.
+    if (targetArea.id === kPaletteId) {
+      if (originArea.id !== kPaletteId) {
+        this._removeParentFlex(draggedWrapper);
+        let widget = this.unwrapToolbarItem(draggedWrapper);
+        CustomizableUI.removeWidgetFromArea(draggedItemId);
+        draggedWrapper = this.wrapToolbarItem(widget, "palette");
+      }
+      this.visiblePalette.appendChild(draggedWrapper);
+      return;
+    }
+
+    // Is the target area the same as the origin? Since we've already handled
+    // the possibility that the target is the customization palette, we know
+    // that the widget is moving within a customizable area.
+    if (targetArea === originArea) {
+      let widget = this.unwrapToolbarItem(draggedWrapper);
+      CustomizableUI.moveWidgetWithinArea(draggedItemId, position);
+      this.wrapToolbarItem(widget);
+      return;
+    }
+
+    // We're moving from one customization area to another. Remove any flexing
+    // that we might have added.
+    this._removeParentFlex(draggedWrapper);
+
+    // A little hackery - we quickly unwrap the item and use CustomizableUI's
+    // addWidgetToArea to move the widget to the right place for every window,
+    // then we re-wrap the widget.
+    let widget = this.unwrapToolbarItem(draggedWrapper);
+    CustomizableUI.addWidgetToArea(draggedItemId, targetArea.id, position);
+    LOG("Re-wrapping " + draggedItemId);
+    draggedWrapper = this.wrapToolbarItem(widget, "");
+
+    // If necessary, add flex to accomodate new child.
+    if (draggedWrapper.hasAttribute("flex")) {
+      let parent = draggedWrapper.parentNode;
+      let parentFlex = parent.hasAttribute("flex") ? parseInt(parent.getAttribute("flex"), 10) : 0;
+      let itemFlex = parseInt(draggedWrapper.getAttribute("flex"), 10);
+      parent.setAttribute("flex", parentFlex + itemFlex);
+    }
+  },
+
+  _removeParentFlex: function(aElement) {
+    if (aElement.parentNode.hasAttribute("flex") && aElement.hasAttribute("flex")) {
+      let parent = aElement.parentNode;
+      let parentFlex = parseInt(parent.getAttribute("flex"), 10);
+      let elementFlex = parseInt(aElement.getAttribute("flex"), 10);
+      parent.setAttribute("flex", Math.max(0, parentFlex - elementFlex));
+    }
+  },
+
+  _getCustomizableParent: function(aElement) {
+    let areas = CustomizableUI.areas;
+    areas.push(kPaletteId);
+    while (aElement) {
+      if (areas.indexOf(aElement.id) != -1) {
+        return aElement;
+      }
+      aElement = aElement.parentNode;
+    }
+    return null;
+  }
+};
+
+function __dumpDragData(aEvent, caller) {
+  let str = "Dumping drag data (CustomizeMode.jsm) {\n";
+  str += "  type: " + aEvent["type"] + "\n";
+  for (let el of ["target", "currentTarget", "relatedTarget"]) {
+    if (aEvent[el]) {
+      str += "  " + el + ": " + aEvent[el] + "(localName=" + aEvent[el].localName + "; id=" + aEvent[el].id + ")\n";
+    }
+  }
+  for (let prop in aEvent.dataTransfer) {
+    if (typeof aEvent.dataTransfer[prop] != "function") {
+      str += "  dataTransfer[" + prop + "]: " + aEvent.dataTransfer[prop] + "\n";
+    }
+  }
+  str += "}";
+  LOG(str);
+}

browser/modules/Makefile.in

@@ -13,6 +13,7 @@ include $(topsrcdir)/config/config.mk
 
 EXTRA_JS_MODULES = \
 	BrowserNewTabPreloader.jsm \
+	CustomizableUI.jsm \
 	openLocationLastURL.jsm \
 	NetworkPrioritizer.jsm \
 	offlineAppCache.jsm \
@@ -25,6 +26,7 @@ EXTRA_JS_MODULES = \
 
 EXTRA_PP_JS_MODULES = \
 	AboutHomeUtils.jsm \
+	CustomizeMode.jsm \
 	RecentWindow.jsm \
 	$(NULL)
 

browser/themes/linux/jar.mn

@@ -18,6 +18,7 @@ browser.jar:
   skin/classic/browser/aboutSyncTabs.css
 #endif
   skin/classic/browser/actionicon-tab.png
+  skin/classic/browser/appmenu.png
 * skin/classic/browser/browser.css
   skin/classic/browser/click-to-play-warning-stripes.png
 * skin/classic/browser/engineManager.css
@@ -39,6 +40,7 @@ browser.jar:
 * skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
   skin/classic/browser/page-livemarks.png
+* skin/classic/browser/panelUIOverlay.css
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-64.png
   skin/classic/browser/Privacy-16.png

browser/themes/linux/panelUIOverlay.css

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%filter substitution
+%define menuPanelWidth 23em
+
+%include ../shared/panelUIOverlay.inc.css

browser/themes/osx/jar.mn

@@ -18,6 +18,7 @@ browser.jar:
 #endif
   skin/classic/browser/actionicon-tab.png
   skin/classic/browser/actionicon-tab@2x.png
+  skin/classic/browser/appmenu.png
 * skin/classic/browser/browser.css                          (browser.css)
   skin/classic/browser/click-to-play-warning-stripes.png
 * skin/classic/browser/engineManager.css                    (engineManager.css)
@@ -58,6 +59,7 @@ browser.jar:
   skin/classic/browser/page-livemarks.png
   skin/classic/browser/page-livemarks@2x.png
   skin/classic/browser/pageInfo.css
+* skin/classic/browser/panelUIOverlay.css
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-16@2x.png
   skin/classic/browser/pointerLock-64.png

browser/themes/osx/panelUIOverlay.css

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%filter substitution
+%define menuPanelWidth 23em
+
+%include ../shared/panelUIOverlay.inc.css

browser/themes/shared/panelUIOverlay.inc.css

@@ -0,0 +1,249 @@
+/* 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/. */
+
+
+#PanelUI-contents[type="list"] > toolbarbutton {
+  -moz-binding: url("chrome://browser/content/panelUI.xml#toolbarbutton");
+}
+
+#app-extension-point-end > #PanelUI-menu-button {
+  padding: 2px 5px;
+}
+#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
+  display: none;
+}
+#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
+  margin: 0;
+}
+
+#PanelUI-popup > arrowscrollbox > autorepeatbutton {
+  display: none;
+}
+#PanelUI-popup > arrowscrollbox > scrollbox {
+  overflow: visible;
+}
+
+#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 0;
+}
+
+#PanelUI-menu-button > .toolbarbutton-icon {
+  list-style-image: url("chrome://browser/skin/appmenu.png");
+}
+
+#PanelUI-menu-button {
+  list-style-image: none;
+}
+
+#PanelUI-mainView .toolbarbutton-text {
+  display: -moz-box;
+  font-size: 10px;
+}
+
+#PanelUI-contents {
+  max-width: @menuPanelWidth@;
+  padding: 0 1em;
+}
+
+#PanelUI-container {
+  overflow: hidden;
+}
+
+#PanelUI-popup[panelopen="true"] > #PanelUI-container {
+  transition: height 150ms;
+}
+
+#PanelUI-popup[panelopen="true"] > #PanelUI-container > #PanelUI-viewStack > #PanelUI-mainView {
+  transition: transform 150ms;
+}
+
+#PanelUI-viewStack[view="main"] > #PanelUI-clickCapturer {
+  pointer-events: none;
+}
+
+#PanelUI-viewStack {
+  position: relative;
+}
+
+#PanelUI-viewStack,
+#PanelUI-container {
+  min-width: @menuPanelWidth@;
+}
+
+#PanelUI-mainView-springy {
+  height: 0;
+  transition: height 150ms;
+}
+
+#PanelUI-subViews {
+  -moz-stack-sizing: ignore;
+  background-image: linear-gradient(to bottom, white 1px, rgba(255, 255, 255, 0) 15px);
+  background-color: -moz-dialog;
+  box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2), -1px 0px 2px rgba(0, 0, 0, 0.1), 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+  margin-left: 38px;
+  position: absolute;
+  transform: translateX(@menuPanelWidth@);
+  transition: transform 150ms;
+}
+
+#PanelUI-viewStack[view="subview"] > #PanelUI-subViews {
+  transform: translateX(0);
+}
+
+#PanelUI-contents[type="list"] > toolbarbutton {
+  -moz-box-orient: horizontal;
+}
+
+#PanelUI-contents[type="list"] toolbarbutton .toolbarbutton-text,
+#PanelUI-subViews toolbarbutton .toolbarbutton-text {
+  text-align: start;
+  -moz-padding-start: 8px;
+  font-size: 12px;
+}
+
+#PanelUI-contents[type="list"] toolbarbutton .toolbarbutton-acceltext {
+  font-size: 10px;
+  color: GrayText;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#PanelUI-contents[type="list"] toolbarbutton .toolbarbutton-icon {
+  min-width: 24px;
+  max-width: 24px;
+  min-height: 24px;
+  max-height: 24px;
+}
+
+#PanelUI-contents[type="grid"] {
+  display: block;
+}
+
+#PanelUI-contents[type="grid"] toolbarbutton {
+  -moz-box-orient: vertical;
+  min-width: 72px;
+  max-width: 72px;
+  min-height: 72px;
+  max-height: 72px;
+}
+
+#PanelUI-contents[type="grid"] toolbarbutton .toolbarbutton-icon {
+  min-width: 32px;
+  max-width: 32px;
+  min-height: 32px;
+  max-height: 32px;
+  margin: 5px;
+}
+
+.PanelUI-pageControls {
+  padding: 12px 20px;
+}
+
+.PanelUI-editControls,
+.PanelUI-zoomControls {
+  padding: 6px 0;
+}
+
+
+.PanelUI-pageControls toolbarbutton {
+  list-style-image: url("chrome://browser/skin/Toolbar.png");
+}
+
+#PanelUI-cut-btn {
+  -moz-image-region: rect(0, 216px, 18px, 198px);
+}
+#PanelUI-copy-btn {
+  -moz-image-region: rect(0, 234px, 18px, 216px);
+}
+#PanelUI-paste-btn {
+  -moz-image-region: rect(0, 252px, 18px, 234px);
+}
+
+#PanelUI-zoomOut-btn {
+  -moz-image-region: rect(0, 288px, 18px, 270px);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+#PanelUI-zoomIn-btn {
+  -moz-image-region: rect(0, 306px, 18px, 288px);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.PanelUI-editControls #PanelUI-copy-btn,
+.PanelUI-zoomControls #PanelUI-zoomReset-btn {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+}
+
+#PanelUI-zoomIn-btn .toolbarbutton-text,
+#PanelUI-zoomOut-btn .toolbarbutton-text,
+#PanelUI-zoomReset-btn .toolbarbutton-icon {
+  display: none;
+}
+
+.PanelUI-footer {
+  padding: 9px 12px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.PanelUI-footer toolbarbutton > .toolbarbutton-icon {
+  display: none;
+}
+
+#PanelUI-help-btn {
+  -moz-appearance: none;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#customization-palette .toolbarbutton-text {
+  display: none;
+}
+
+#PanelUI-subViews toolbarbutton, 
+#PanelUI-mainView toolbarbutton {
+  -moz-appearance: none;
+  padding: 2px 6px;
+  background: hsla(210,32%,93%,0) padding-box;
+  border-radius: 2px;
+  border: 1px solid;
+  border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0);
+  box-shadow: 0 1px hsla(0,0%,100%,0) inset,
+              0 1px hsla(210,54%,20%,0),
+              0 0 2px hsla(210,54%,20%,0);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+}
+
+#PanelUI-subViews toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
+#PanelUI-mainView toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
+#PanelUI-mainView .PanelUI-pageControls toolbarbutton,
+#PanelUI-mainView #PanelUI-customize-btn {
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
+  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
+  box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
+              0 1px hsla(210,54%,20%,.03),
+              0 0 2px hsla(210,54%,20%,.1);
+}
+
+#PanelUI-subViews toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active),
+#PanelUI-mainView toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active) {
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
+  background-color: hsla(210,54%,20%,.15);
+  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
+  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
+              0 0 1px hsla(210,54%,20%,.2) inset,
+              0 1px 0 hsla(210,54%,20%,0),
+              0 0 2px hsla(210,54%,20%,0);
+  text-shadow: none;
+  transition: none;
+}
+
+

browser/themes/windows/browser.css

@@ -811,7 +811,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-box-pack: center;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) {
+@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -851,7 +851,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   padding: 3px 7px;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
   -moz-padding-end: 17px;
 }
@@ -2929,6 +2929,45 @@ chatbox {
   border-top-right-radius: 2.5px;
 }
 
+/* Customization mode */
+#main-window[customizing] {
+  background-image: linear-gradient(to bottom, #3A75AD, #134F94);
+}
+
+#main-window[customizing] #tab-view-deck {
+  transition-property: padding;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  padding: 3em;
+  -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox")
+}
+
+#main-window:not([customizing]) #tab-view-deck {
+  transition-property: padding;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  padding: 0;
+}
+
+#main-window[customizing] .tabbrowser-tab:not([selected]),
+#main-window[customizing] .tabs-newtab-button {
+  opacity: 0.4;
+}
+
+#main-window[customizing] .customization-target,
+#customization-panelHolder > #PanelUI-mainView {
+  box-shadow: inset 0 0 3px blue;
+  border-radius: 2px;
+}
+
+#customization-palette > toolbarpaletteitem {
+  display: inline-block;
+  -moz-orient: vertical;
+  padding: 1em;
+}
+
+/* end Customization mode */
+
 .click-to-play-plugins-notification-content {
   margin: -10px;
   border-radius: 4px;

browser/themes/windows/jar.mn

@@ -20,6 +20,7 @@ browser.jar:
         skin/classic/browser/aboutSyncTabs.css
 #endif
         skin/classic/browser/actionicon-tab.png
+        skin/classic/browser/appmenu.png
         skin/classic/browser/appmenu-icons.png
         skin/classic/browser/appmenu-dropmarker.png
 *       skin/classic/browser/browser.css
@@ -47,6 +48,7 @@ browser.jar:
         skin/classic/browser/pageInfo.css
         skin/classic/browser/pageInfo.png
         skin/classic/browser/page-livemarks.png                      (feeds/feedIcon16.png)
+*       skin/classic/browser/panelUIOverlay.css
         skin/classic/browser/pointerLock-16.png
         skin/classic/browser/pointerLock-64.png
         skin/classic/browser/Privacy-16.png
@@ -270,6 +272,7 @@ browser.jar:
         skin/classic/aero/browser/aboutSyncTabs.css
 #endif
         skin/classic/aero/browser/actionicon-tab.png
+        skin/classic/aero/browser/appmenu.png
         skin/classic/aero/browser/appmenu-dropmarker.png
         skin/classic/aero/browser/appmenu-icons.png
 *       skin/classic/aero/browser/browser.css                        (browser-aero.css)
@@ -297,6 +300,7 @@ browser.jar:
         skin/classic/aero/browser/pageInfo.css
         skin/classic/aero/browser/pageInfo.png                       (pageInfo-aero.png)
         skin/classic/aero/browser/page-livemarks.png                 (feeds/feedIcon16-aero.png)
+*       skin/classic/aero/browser/panelUIOverlay.css
         skin/classic/aero/browser/pointerLock-16.png                 (pointerLock-16.png)
         skin/classic/aero/browser/pointerLock-64.png                 (pointerLock-64.png)
         skin/classic/aero/browser/Privacy-16.png                     (Privacy-16-aero.png)

browser/themes/windows/panelUIOverlay.css

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%filter substitution
+%define menuPanelWidth 23em
+
+%include ../shared/panelUIOverlay.inc.css

toolkit/themes/linux/global/inContentUI.css

@@ -9,7 +9,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
-
 /* Page background */
 *|*:root {
   -moz-appearance: none;