diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index bac52ea0b..ee9a7839d 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -80,14 +80,13 @@ border-left: 1px solid transparent; } -@media (min-resolution: 1.5dppx) { - /* Necessary in Fx36 to keep 2x icon from being rendered at full size */ - #zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, - #zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - width: 16px; - } +/* Necessary in Fx36 to keep 32px icons from being rendered at full size */ +#zotero-toolbar-main-button[cui-areatype="toolbar"] > .toolbarbutton-icon, +#zotero-toolbar-main-button-single[cui-areatype="toolbar"] > .toolbarbutton-icon, +#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + width: 16px; } - /* End toolbar icons */ #zotero-splitter diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css index c3281aeeb..e309c6baf 100644 --- a/chrome/content/zotero-platform/win/overlay.css +++ b/chrome/content/zotero-platform/win/overlay.css @@ -6,6 +6,7 @@ } #zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { + width: 28px; margin-left: 2px; margin-right: -1px; padding-left: 5px !important; diff --git a/chrome/content/zotero/browser.js b/chrome/content/zotero/browser.js index 91910f94f..80c0248be 100644 --- a/chrome/content/zotero/browser.js +++ b/chrome/content/zotero/browser.js @@ -426,23 +426,23 @@ var Zotero_Browser = new function() { * thereof of the current page */ function updateStatus() { + if (!Zotero_Browser.tabbrowser) return; var tab = _getTabObject(Zotero_Browser.tabbrowser.selectedBrowser); Components.utils.import("resource:///modules/CustomizableUI.jsm"); var buttons = getSaveButtons(); if (buttons.length) { let state = tab.getCaptureState(); - let icon = tab.getCaptureIcon(); let tooltiptext = tab.getCaptureTooltip(); for (let { button, placement } of buttons) { - button.image = icon; + let inToolbar = placement.area == CustomizableUI.AREA_NAVBAR; + button.image = tab.getCaptureIcon(Zotero.hiDPI || !inToolbar); button.tooltipText = tooltiptext; if (state == tab.CAPTURE_STATE_TRANSLATABLE) { button.classList.add('translate'); // Show guidance panel if necessary - - if (placement.area == 'nav-bar') { + if (inToolbar) { button.addEventListener("load", function() { document.getElementById("zotero-status-image-guidance").show(); }); @@ -545,7 +545,7 @@ var Zotero_Browser = new function() { }), true); } else { - let webPageIcon = tab.getCaptureIcon(); + let webPageIcon = tab.getCaptureIcon(Zotero.hiDPI); let automaticSnapshots = Zotero.Prefs.get('automaticSnapshots'); let snapshotEvent = { shiftKey: !automaticSnapshots @@ -896,8 +896,8 @@ Zotero_Browser.Tab.prototype.getCaptureState = function () { * returns the URL of the image representing the translator to be called on the * current page, or false if the page cannot be scraped */ -Zotero_Browser.Tab.prototype.getCaptureIcon = function() { - var suffix = Zotero.hiRes ? "@2x" : ""; +Zotero_Browser.Tab.prototype.getCaptureIcon = function (hiDPI) { + var suffix = hiDPI ? "@2x" : ""; switch (this.getCaptureState()) { case this.CAPTURE_STATE_TRANSLATABLE: diff --git a/chrome/content/zotero/icon.js b/chrome/content/zotero/icon.js index 8e1f4fa00..1d8ee090a 100644 --- a/chrome/content/zotero/icon.js +++ b/chrome/content/zotero/icon.js @@ -50,6 +50,21 @@ CustomizableUI.addListener({ null, Zotero.getString(property, shortcut) ); } + else if (id == getSingleID('save')) { + Zotero_Browser.updateStatus(); + } + }, + + onWidgetRemoved: function (id, area) { + if (id == comboButtonsID) { + var item = document.getElementById(id); + updateItemForArea(item, null); + } + // Clear dynamic image from save icon and revert to CSS + else if (id == getSingleID('save')) { + let button = document.getElementById(id); + button.image = ""; + } }, // Save icon in panel isn't in DOM until menu is shown once and therefore isn't updated @@ -57,13 +72,13 @@ CustomizableUI.addListener({ // doesn't remain disabled onAreaNodeRegistered: function (area, node) { if (area == CustomizableUI.AREA_PANEL) { - var placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-buttons") + var placement = CustomizableUI.getPlacementOfWidget(comboButtonsID) var update = false; if (placement && placement.area == CustomizableUI.AREA_PANEL) { update = true; } else { - placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-save-button-single"); + placement = CustomizableUI.getPlacementOfWidget(getSingleID('save')); if (placement && placement.area == CustomizableUI.AREA_PANEL) { update = true; } @@ -75,12 +90,11 @@ CustomizableUI.addListener({ } }) - // Create the combo buttons, which go in the toolbar by default CustomizableUI.createWidget({ id: comboButtonsID, type: 'custom', - label: 'zotero', + label: 'Zotero', tooltiptext: "Zotero", defaultArea: CustomizableUI.AREA_NAVBAR, onBuild: function (document) { @@ -88,11 +102,10 @@ CustomizableUI.createWidget({ var item = document.createElementNS(kNSXUL, "toolbaritem"); item.setAttribute("id", comboButtonsID); + item.setAttribute("label", "Zotero (Combo)"); // TODO: localize // Set this as an attribute in addition to the property to make sure we can style correctly. item.setAttribute("removable", "true"); item.classList.add("chromeclass-toolbar-additional"); - item.classList.add("toolbaritem-combined-buttons"); - item.classList.add("panel-wide-item"); ['main', 'save'].map(button => { return { @@ -124,10 +137,20 @@ CustomizableUI.createWidget({ } }); +// Create the independent Z button, which isn't shown by default +CustomizableUI.createWidget({ + id: getSingleID('main'), + label: Zotero.clientName, + tooltiptext: getTooltipText('main'), + defaultArea: false, + onCommand: function (event) { + ZoteroOverlay.toggleDisplay(); + } +}); // Create the independent save button, which isn't shown by default CustomizableUI.createWidget({ - id: getID('save') + '-single', + id: getSingleID('save'), label: Zotero.getString('ingester.saveToZotero'), tooltiptext: getTooltipText('save'), defaultArea: false, @@ -155,6 +178,10 @@ function getID(button) { } } +function getSingleID(button) { + return getID(button) + '-single'; +} + function getCommand(button) { switch (button) { case 'main': @@ -170,7 +197,7 @@ function getTooltipText(button) { switch (button) { case 'main': if (Zotero && Zotero.initialized) { - text = Zotero.getString('general.open', Zotero.clientName); + text = Zotero.clientName; let key = Zotero.Keys.getKeyForCommand('openZotero'); if (key) { // Add RLE mark in RTL mode to make shortcut render the right way @@ -210,17 +237,35 @@ function getTooltipText(button) { /** * Set various attributes that allow treeitem and subelements to be styled properly + * in the different areas */ function updateItemForArea(item, area) { - var areaType = CustomizableUI.getAreaType(area); - var inPanel = area == CustomizableUI.AREA_PANEL; - var classes = inPanel ? "panel-combined-button" : "toolbarbutton-1 toolbarbutton-combined"; - item.setAttribute("cui-areatype", areaType); - var buttons = item.getElementsByTagName('toolbarbutton'); - for (let i = 0; i < buttons.length; i++) { - let button = buttons[i]; - button.setAttribute("class", classes); - button.setAttribute("cui-areatype", areaType); + if (area) { + var areaType = CustomizableUI.getAreaType(area); + var inPanel = area == CustomizableUI.AREA_PANEL; + var classes = inPanel ? "panel-combined-button" : "toolbarbutton-1 toolbarbutton-combined"; + item.setAttribute("cui-areatype", areaType); + item.classList.add("toolbaritem-combined-buttons"); + if (inPanel) { + item.classList.add("panel-wide-item"); + } + var buttons = item.getElementsByTagName('toolbarbutton'); + for (let i = 0; i < buttons.length; i++) { + let button = buttons[i]; + button.setAttribute("class", classes); + button.setAttribute("cui-areatype", areaType); + } + } + // In customization palette pretend it's a single icon + else { + item.classList.remove("toolbaritem-combined-buttons"); + item.classList.remove("panel-wide-item"); + var buttons = item.getElementsByTagName('toolbarbutton'); + for (let i = 0; i < buttons.length; i++) { + let button = buttons[i]; + button.setAttribute("class", "toolbarbutton-1"); + button.removeAttribute("cui-areatype"); + } } } diff --git a/chrome/content/zotero/overlay.js b/chrome/content/zotero/overlay.js index 95c168cef..43241c667 100644 --- a/chrome/content/zotero/overlay.js +++ b/chrome/content/zotero/overlay.js @@ -71,7 +71,7 @@ var ZoteroOverlay = new function() observerService.addObserver(zoteroObserver, "browser-delayed-startup-finished", false); // Set a flag for hi-res displays - Zotero.hiRes = window.devicePixelRatio > 1; + Zotero.hiDPI = window.devicePixelRatio > 1; // Clear old Zotero icon pref var prefBranch = Components.classes["@mozilla.org/preferences-service;1"] diff --git a/chrome/skin/default/zotero/zotero-z-16px-australis.svg b/chrome/skin/default/zotero/zotero-z-16px-australis.svg deleted file mode 100644 index ecda7b839..000000000 --- a/chrome/skin/default/zotero/zotero-z-16px-australis.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css index aca635093..39aef879a 100644 --- a/chrome/skin/default/zotero/zotero.css +++ b/chrome/skin/default/zotero/zotero.css @@ -26,12 +26,8 @@ * Toolbar icons * */ -#zotero-toolbar-main-button { - list-style-image: url("chrome://zotero/skin/zotero-z-16px-australis.svg"); -} - -#zotero-toolbar-main-button[cui-areatype="menu-panel"], -toolbarpaletteitem[place="palette"] #zotero-toolbar-main-button { +#zotero-toolbar-main-button, +#zotero-toolbar-main-button-single { list-style-image: url("chrome://zotero/skin/zotero-z-32px-australis.svg"); } @@ -54,6 +50,19 @@ toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single { } } +/* Show single icon for combo buttons in palette */ +toolbarpaletteitem[place="palette"] #zotero-toolbar-main-button { + list-style-image: url("chrome://zotero/skin/zotero-z-32px-australis.svg"); +} +toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons separator, +toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons #zotero-toolbar-save-button { + display:none; +} + +toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single { + padding: 3px 1px; +} + /* Show webpage icon in gray when no translators */ #zotero-toolbar-save-button:not(.translate), #zotero-toolbar-save-button-single:not(.translate),