Bug 870901: Re-add edit controls and make them customizable. r=mconley

browser/components/customizableui/content/panelUI.inc.xul

@@ -10,26 +10,6 @@
        noautofocus="true">
   <panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">
     <panelview id="PanelUI-mainView" flex="1">
-      <vbox id="PanelUI-pageControls" pack="center">
-        <hbox class="PanelUI-editControls">
-          <toolbarbutton id="PanelUI-cut-btn" flex="1"
-                         label="&cutCmd.label;"
-                         tooltiptext="&cutButton.tooltip;"
-                         class="panel-combined-button"
-                         command="cmd_cut"/>
-          <toolbarbutton id="PanelUI-copy-btn" flex="1"
-                         label="&copyCmd.label;"
-                         tooltiptext="&copyButton.tooltip;"
-                         class="panel-combined-button"
-                         command="cmd_copy"/>
-          <toolbarbutton id="PanelUI-paste-btn" flex="1"
-                         label="&pasteCmd.label;"
-                         tooltiptext="&pasteButton.tooltip;"
-                         class="panel-combined-button"
-                         command="cmd_paste"/>
-        </hbox>
-      </vbox>
-
       <vbox id="PanelUI-contents" type="grid"/>
 
       <vbox id="PanelUI-mainView-spring" flex="1"/>

browser/components/customizableui/src/CustomizableUI.jsm

@@ -108,6 +108,7 @@ let CustomizableUIInternal = {
       anchor: "PanelUI-menu-button",
       type: CustomizableUI.TYPE_MENU_PANEL,
       defaultPlacements: [
+        "edit-controls",
         "zoom-controls",
         "new-window-button",
         "privatebrowsing-button",

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -371,6 +371,104 @@ const CustomizableWidgets = [{
       };
       CustomizableUI.addListener(listener);
 
+      return node;
+    }
+  }, {
+    id: "edit-controls",
+    name: "Edit Controls",
+    type: "custom",
+    removable: true,
+    defaultArea: CustomizableUI.AREA_PANEL,
+    allowedAreas: [CustomizableUI.AREA_PANEL, CustomizableUI.AREA_NAVBAR],
+    onBuild: function(aDocument) {
+      let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
+      let flex = inPanel ? "1" : null;
+      let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
+      let buttons = [{
+        id: "cut-button",
+        command: "cmd_cut",
+        flex: flex,
+        class: cls,
+        label: "Cut",
+        tooltiptext: "Cut"
+      }, {
+        id: "copy-button",
+        command: "cmd_copy",
+        flex: flex,
+        class: cls,
+        label: "Copy",
+        tooltiptext: "Copy"
+      }, {
+        id: "paste-button",
+        command: "cmd_paste",
+        flex: flex,
+        class: cls,
+        label: "Paste",
+        tooltiptext: "Paste"
+      }];
+
+      let node = aDocument.createElementNS(kNSXUL, "toolbaritem");
+      node.setAttribute("id", "edit-controls");
+      node.setAttribute("title", "Edit Controls");
+      if (inPanel)
+        node.setAttribute("flex", "1");
+      node.classList.add("chromeclass-toolbar-additional");
+
+      buttons.forEach(function(aButton) {
+        let btnNode = aDocument.createElementNS(kNSXUL, "toolbarbutton");
+        setAttributes(btnNode, aButton);
+        node.appendChild(btnNode);
+      });
+
+      function updateWidgetStyle(aInPanel) {
+        let attrs = {
+          flex: aInPanel ? "1" : null,
+          class: aInPanel ? "panel-combined-button" : "toolbarbutton-1"
+        };
+        for (let i = 0, l = node.childNodes.length; i < l; ++i) {
+          setAttributes(node.childNodes[i], attrs);
+        }
+        if (aInPanel)
+          node.setAttribute("flex", "1");
+        else if (node.hasAttribute("flex"))
+          node.removeAttribute("flex");
+      }
+
+      let listener = {
+        onWidgetAdded: function(aWidgetId, aArea, aPosition) {
+          if (aWidgetId != this.id)
+            return;
+          updateWidgetStyle(aArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetRemoved: function(aWidgetId, aPrevArea) {
+          if (aWidgetId != this.id)
+            return;
+          // When a widget is demoted to the palette ('removed'), it's visual
+          // style should change.
+          updateWidgetStyle(false);
+        }.bind(this),
+
+        onWidgetReset: function(aWidgetId) {
+          if (aWidgetId != this.id)
+            return;
+          updateWidgetStyle(this.currentArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetMoved: function(aWidgetId, aArea) {
+          if (aWidgetId != this.id)
+            return;
+          updateWidgetStyle(aArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetInstanceRemoved: function(aWidgetId, aDoc) {
+          if (aWidgetId != this.id || aDoc != aDocument)
+            return;
+          CustomizableUI.removeListener(listener);
+        }.bind(this)
+      };
+      CustomizableUI.addListener(listener);
+
       return node;
     }
   }];

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

@@ -526,10 +526,6 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY newWindowButton.tooltip        "Open a new window">
 <!ENTITY sidebarCloseButton.tooltip     "Close sidebar">
 
-<!ENTITY cutButton.tooltip              "Cut">
-<!ENTITY copyButton.tooltip             "Copy">
-<!ENTITY pasteButton.tooltip            "Paste">
-
 <!ENTITY fullScreenButton.tooltip       "Display the window in full screen">
 
 <!ENTITY quitApplicationCmdWin.label       "Exit"> 

browser/themes/linux/browser.css

@@ -683,6 +683,27 @@ toolbar > .customization-target > toolbarpaletteitem > #history-panelmenu {
   -moz-image-region: rect(0px 120px 24px 96px);
 }
 
+#cut-button {
+  list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar") !important;
+}
+#cut-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar&state=disabled") !important;
+}
+
+#copy-button {
+  list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar") !important;
+}
+#copy-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar&state=disabled") !important;
+}
+
+#paste-button {
+  list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar") !important;
+}
+#paste-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar&state=disabled") !important;
+}
+
 #zoom-out-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-out?size=toolbar") !important;
 }
@@ -819,6 +840,27 @@ toolbar[iconsize="small"] #new-window-button {
   -moz-image-region: rect(0px 80px 16px 64px);
 }
 
+toolbar[iconsize="small"] #cut-button {
+  list-style-image: url("moz-icon://stock/gtk-cut?size=menu");
+}
+toolbar[iconsize="small"] #cut-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled");
+}
+
+toolbar[iconsize="small"] #copy-button {
+  list-style-image: url("moz-icon://stock/gtk-copy?size=menu");
+}
+toolbar[iconsize="small"] #copy-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled");
+}
+
+toolbar[iconsize="small"] #paste-button {
+  list-style-image: url("moz-icon://stock/gtk-paste?size=menu");
+}
+toolbar[iconsize="small"] #paste-button[disabled="true"] {
+  list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled");
+}
+
 toolbar[iconsize="small"] #fullscreen-button {
   list-style-image: url("moz-icon://stock/gtk-fullscreen?size=menu");
 }

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -7,24 +7,24 @@
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
-#PanelUI-cut-btn {
+#PanelUI-contents #cut-button {
   list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar");
 }
-#PanelUI-cut-btn[disabled="true"] {
+#PanelUI-contents #cut-button[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar&state=disabled");
 }
 
-#PanelUI-copy-btn {
+#PanelUI-contents #copy-button {
   list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar");
 }
-#PanelUI-copy-btn[disabled="true"] {
+#PanelUI-contents #copy-button[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar&state=disabled");
 }
 
-#PanelUI-paste-btn {
+#PanelUI-contents #paste-button {
   list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar");
 }
-#PanelUI-paste-btn[disabled="true"] {
+#PanelUI-contents #paste-button[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar&state=disabled");
 }
 

browser/themes/osx/browser.css

@@ -947,6 +947,73 @@ toolbar > .customization-target > toolbarpaletteitem > #history-panelmenu {
   }
 }
 
+/* cut button */
+
+#cut-button {
+  -moz-image-region: rect(0, 260px, 20px, 240px);
+}
+
+@media (min-resolution: 2dppx) {
+  #cut-button {
+    -moz-image-region: rect(0, 520px, 40px, 480px);
+  }
+}
+
+#edit-controls {
+  -moz-box-align: center;
+}
+
+/* copy button */
+
+#copy-button {
+  -moz-image-region: rect(0, 280px, 20px, 260px);
+}
+
+@media (min-resolution: 2dppx) {
+  #copy-button {
+    -moz-image-region: rect(0, 560px, 40px, 520px);
+  }
+}
+
+/* paste button */
+
+#paste-button {
+  -moz-image-region: rect(0, 300px, 20px, 280px);
+}
+
+@media (min-resolution: 2dppx) {
+  #paste-button {
+    -moz-image-region: rect(0, 600px, 40px, 560px);
+  }
+}
+
+#cut-button {
+  -moz-margin-end: 0;
+}
+
+#paste-button {
+  -moz-border-start: none;
+  -moz-margin-start: 0;
+}
+
+#cut-button:-moz-locale-dir(ltr),
+#paste-button:-moz-locale-dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#cut-button:-moz-locale-dir(rtl),
+#paste-button:-moz-locale-dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+#copy-button {
+  border-radius: 0;
+  margin-right: 0;
+  margin-left: 0;
+}
+
 /* alltabs button */
 
 #alltabs-button {

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -18,6 +18,7 @@
     width: 20px;
   }
 
+  #PanelUI-contents #edit-controls toolbarbutton,
   #PanelUI-contents #zoom-controls toolbarbutton,
   .panel-combined-button {
     list-style-image: url(chrome://browser/skin/customizableui/menuPanel-small-icons@2x.png);
@@ -118,15 +119,15 @@
     -moz-image-region: rect(384px 128px 448px 64px);
   }
 
-  #PanelUI-cut-btn {
+  #PanelUI-contents #cut-button {
     -moz-image-region: rect(0 32px 32px 0);
   }
 
-  #PanelUI-copy-btn {
+  #PanelUI-contents #copy-button {
     -moz-image-region: rect(0 64px 32px 32px);
   }
 
-  #PanelUI-paste-btn {
+  #PanelUI-contents #paste-button {
     -moz-image-region: rect(0 96px 32px 64px);
   }
 
@@ -139,15 +140,15 @@
   }
 }
 
-#PanelUI-pageControls toolbarbutton:not(:first-child),
+#PanelUI-contents #edit-controls toolbarbutton:not(:first-child),
 #PanelUI-contents #zoom-controls toolbarbutton:not(:first-child) {
   -moz-margin-start: 0;
 }
-#PanelUI-pageControls toolbarbutton:not(:last-child),
+#PanelUI-contents #edit-controls toolbarbutton:not(:last-child),
 #PanelUI-contents #zoom-controls toolbarbutton:not(:last-child) {
   -moz-margin-end: 0;
 }
-#PanelUI-pageControls toolbarbutton:not(:first-child):not(:last-child),
+#PanelUI-contents #edit-controls toolbarbutton:not(:first-child):not(:last-child),
 #PanelUI-contents #zoom-controls toolbarbutton:not(:first-child):not(:last-child) {
   margin-left: 0;
   margin-right: 0;

browser/themes/shared/browser.inc

@@ -1,3 +1,3 @@
 %filter substitution
 
-%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button, #social-share-button
+%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button, #social-share-button

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -52,29 +52,32 @@
   font-size: 10px;
 }
 
+#PanelUI-contents #wrapper-edit-controls,
 #PanelUI-contents #wrapper-zoom-controls {
   margin-left: -1em;
   margin-right: -1em;
   width: calc(100% + 2em);
 }
 
-#PanelUI-contents #zoom-controls,
-#PanelUI-pageControls {
+#PanelUI-contents #edit-controls,
+#PanelUI-contents #zoom-controls {
   padding: 1em 0 0;
 }
 
+#PanelUI-contents #edit-controls,
 #PanelUI-contents #zoom-controls {
   -moz-margin-start: -1em;
   -moz-box-align: stretch;
   width: calc(100% + 2em);
 }
 
+#PanelUI-contents #wrapper-edit-controls #edit-controls,
 #PanelUI-contents #wrapper-zoom-controls #zoom-controls {
   -moz-margin-start: 0;
 }
 
 .PanelUI-footer,
-.PanelUI-editControls,
+#PanelUI-contents #edit-controls,
 #PanelUI-contents #zoom-controls,
 #PanelUI-contents,
 .PanelUI-footer,
@@ -109,7 +112,7 @@ panelview:not([mainview]) .toolbarbutton-text,
   display: block;
 }
 
-#PanelUI-pageControls toolbarbutton > .toolbarbutton-icon,
+#PanelUI-contents #edit-controls toolbarbutton > .toolbarbutton-icon,
 #PanelUI-contents #zoom-controls toolbarbutton > .toolbarbutton-icon {
   -moz-margin-end: 0;
 }
@@ -126,12 +129,14 @@ panelview:not([mainview]) .toolbarbutton-text,
   list-style-image: url(chrome://browser/skin/customizableui/menuPanel-icons.png);
 }
 
-#PanelUI-contents #zoom-controls toolbarbutton,
-#PanelUI-pageControls toolbarbutton {
+#PanelUI-contents #edit-controls toolbarbutton,
+#PanelUI-contents #zoom-controls toolbarbutton {
   -moz-box-orient: horizontal;
   min-width: 7em;
 }
 
+#customization-palette #edit-controls toolbarbutton,
+#PanelUI-contents #edit-controls toolbarbutton,
 #customization-palette #zoom-controls toolbarbutton,
 #PanelUI-contents #zoom-controls toolbarbutton {
   max-width: none;
@@ -143,12 +148,14 @@ panelview:not([mainview]) .toolbarbutton-text,
   display: none;
 }
 
+#customization-palette #edit-controls toolbarbutton,
 #customization-palette #zoom-controls toolbarbutton {
   min-width: 1em;
 }
 
 /* These smaller icons have different styling between the panel and the toolbar,
    hence not referencing toolbar.png for these icons. */
+#PanelUI-contents #edit-controls toolbarbutton,
 #PanelUI-contents #zoom-controls toolbarbutton,
 .panel-combined-button {
   list-style-image: url(chrome://browser/skin/customizableui/menuPanel-small-icons.png);
@@ -160,14 +167,15 @@ panelview:not([mainview]) .toolbarbutton-text,
   min-height: calc(8em / 3);
   margin: calc(5em / 12);
 }
- 
+
+#PanelUI-contents #edit-controls toolbarbutton > .toolbarbutton-icon,
 #PanelUI-contents #zoom-controls toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
 }
 
-.PanelUI-editControls #PanelUI-copy-btn,
+#PanelUI-contents #edit-controls #copy-button,
 #PanelUI-contents #zoom-controls #zoom-reset-button {
   border-left: none;
   border-right: none;
@@ -221,7 +229,7 @@ panelview toolbarbutton,
 
 panelview toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
 #widget-overflow-list > toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
-#PanelUI-pageControls toolbarbutton,
+#PanelUI-contents #edit-controls toolbarbutton,
 #PanelUI-contents #zoom-controls toolbarbutton,
 .customizationmode-button,
 #PanelUI-mainView #PanelUI-customize-btn {
@@ -373,15 +381,15 @@ toolbarbutton.panel-multiview-anchor {
   -moz-image-region: rect(192px 64px 224px 32px);
 }
 
-#PanelUI-cut-btn {
+#PanelUI-contents #cut-button {
   -moz-image-region: rect(0 16px 16px 0);
 }
 
-#PanelUI-copy-btn {
+#PanelUI-contents #copy-button {
   -moz-image-region: rect(0 32px 16px 16px);
 }
 
-#PanelUI-paste-btn {
+#PanelUI-contents #paste-button {
   -moz-image-region: rect(0 48px 16px 32px);
 }
 
@@ -401,17 +409,22 @@ toolbarbutton.panel-multiview-anchor {
   -moz-margin-end: none;
 }
 
+#PanelUI-contents #paste-button,
 #PanelUI-contents #zoom-in-button {
   -moz-border-start: 1px solid;
   -moz-margin-start: none;
 }
 
+#PanelUI-contents #cut-button:-moz-locale-dir(ltr),
+#PanelUI-contents #paste-button:-moz-locale-dir(rtl),
 #PanelUI-contents #zoom-out-button:-moz-locale-dir(ltr),
 #PanelUI-contents #zoom-in-button:-moz-locale-dir(rtl) {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
+#PanelUI-contents #cut-button:-moz-locale-dir(rtl),
+#PanelUI-contents #paste-button:-moz-locale-dir(ltr),
 #PanelUI-contents #zoom-out-button:-moz-locale-dir(rtl),
 #PanelUI-contents #zoom-in-button:-moz-locale-dir(ltr) {
   border-top-left-radius: 2px;

browser/themes/windows/browser.css

@@ -717,6 +717,18 @@ toolbar > .customization-target > toolbarpaletteitem > #history-panelmenu {
   -moz-image-region: rect(0, 198px, 18px, 180px);
 }
 
+#cut-button {
+  -moz-image-region: rect(0, 216px, 18px, 198px);
+}
+
+#copy-button {
+  -moz-image-region: rect(0, 234px, 18px, 216px);
+}
+
+#paste-button {
+  -moz-image-region: rect(0, 252px, 18px, 234px);
+}
+
 #fullscreen-button {
   -moz-image-region: rect(0, 270px, 18px, 252px);
 }

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -7,17 +7,17 @@
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
-#PanelUI-pageControls toolbarbutton {
+#PanelUI-contents #edit-controls toolbarbutton {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
 
-#PanelUI-cut-btn {
+#PanelUI-contents #cut-button {
   -moz-image-region: rect(0, 216px, 18px, 198px);
 }
-#PanelUI-copy-btn {
+#PanelUI-contents #copy-button {
   -moz-image-region: rect(0, 234px, 18px, 216px);
 }
-#PanelUI-paste-btn {
+#PanelUI-contents #paste-button {
   -moz-image-region: rect(0, 252px, 18px, 234px);
 }