diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul index 671e57ac639c..becd8cc90b16 100644 --- a/browser/components/customizableui/content/panelUI.inc.xul +++ b/browser/components/customizableui/content/panelUI.inc.xul @@ -10,26 +10,6 @@ noautofocus="true"> - - - - - - - - diff --git a/browser/components/customizableui/src/CustomizableUI.jsm b/browser/components/customizableui/src/CustomizableUI.jsm index 3cb0a2deb8a4..5e58c7d7ee39 100644 --- a/browser/components/customizableui/src/CustomizableUI.jsm +++ b/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", diff --git a/browser/components/customizableui/src/CustomizableWidgets.jsm b/browser/components/customizableui/src/CustomizableWidgets.jsm index 8042c2ba525a..5f74c5ccb2de 100644 --- a/browser/components/customizableui/src/CustomizableWidgets.jsm +++ b/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; } }]; diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd index 50e1690bb8cb..445488b6ed21 100644 --- a/browser/locales/en-US/chrome/browser/browser.dtd +++ b/browser/locales/en-US/chrome/browser/browser.dtd @@ -526,10 +526,6 @@ you can use these alternative items. Otherwise, their values should be empty. - - - - - diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 0db9e4e68a02..1bba6096e4db 100644 --- a/browser/themes/linux/browser.css +++ b/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"); } diff --git a/browser/themes/linux/customizableui/panelUIOverlay.css b/browser/themes/linux/customizableui/panelUIOverlay.css index 60acde9fd093..96f93789e914 100644 --- a/browser/themes/linux/customizableui/panelUIOverlay.css +++ b/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"); } diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 88e4e3494568..270fa233236c 100644 --- a/browser/themes/osx/browser.css +++ b/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 { diff --git a/browser/themes/osx/customizableui/panelUIOverlay.css b/browser/themes/osx/customizableui/panelUIOverlay.css index 0e501186d690..f06e09709aea 100644 --- a/browser/themes/osx/customizableui/panelUIOverlay.css +++ b/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; diff --git a/browser/themes/shared/browser.inc b/browser/themes/shared/browser.inc index 93b04a280a30..84cf27d5cb6c 100644 --- a/browser/themes/shared/browser.inc +++ b/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 diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css index 593fb631e787..edef46ac4837 100644 --- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css +++ b/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; diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 89e07776eb81..ccff49f023b3 100644 --- a/browser/themes/windows/browser.css +++ b/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); } diff --git a/browser/themes/windows/customizableui/panelUIOverlay.css b/browser/themes/windows/customizableui/panelUIOverlay.css index d8d27762e530..01560ef80a36 100644 --- a/browser/themes/windows/customizableui/panelUIOverlay.css +++ b/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); }