mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-14 18:51:28 +00:00
Bug 811835 - Social API toolbar buttons are stretched or blank in 'Text' and 'Text & Icons' mode. r=markh
This commit is contained in:
Jared Wein
parent
cb8af644df
commit
bf71adf3d2
@ -132,7 +132,7 @@ let SocialUI = {
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
Components.utils.reportError(e + e.stack);
|
||||
Components.utils.reportError(e + "\n" + e.stack);
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
@ -719,6 +719,8 @@ var SocialToolbar = {
|
||||
if (!Social.provider)
|
||||
return;
|
||||
this.button.style.listStyleImage = "url(" + Social.provider.iconURL + ")";
|
||||
this.button.setAttribute("label", Social.provider.name);
|
||||
this.button.setAttribute("tooltiptext", Social.provider.name);
|
||||
this.updateButton();
|
||||
this.updateProfile();
|
||||
this.populateProviderMenus();
|
||||
@ -779,7 +781,6 @@ var SocialToolbar = {
|
||||
let provider = Social.provider;
|
||||
let icons = provider.ambientNotificationIcons;
|
||||
let iconNames = Object.keys(icons);
|
||||
let iconBox = document.getElementById("social-toolbar-item");
|
||||
let panel = document.getElementById("social-notification-panel");
|
||||
panel.hidden = false;
|
||||
|
||||
@ -824,7 +825,7 @@ var SocialToolbar = {
|
||||
str);
|
||||
}
|
||||
|
||||
let iconContainers = document.createDocumentFragment();
|
||||
let toolbarButtons = document.createDocumentFragment();
|
||||
|
||||
let createdFrames = [];
|
||||
|
||||
@ -835,7 +836,6 @@ var SocialToolbar = {
|
||||
let notificationFrame = document.getElementById(notificationFrameId);
|
||||
|
||||
if (!notificationFrame) {
|
||||
|
||||
notificationFrame = SharedFrame.createFrame(
|
||||
notificationFrameId, /* frame name */
|
||||
panel, /* parent */
|
||||
@ -860,56 +860,41 @@ var SocialToolbar = {
|
||||
SharedFrame.updateURL(notificationFrameId, icon.contentPanel);
|
||||
}
|
||||
|
||||
let iconId = "social-notification-icon-" + icon.name;
|
||||
let imageId = iconId + "-image";
|
||||
let labelId = iconId + "-label";
|
||||
let stackId = iconId + "-stack";
|
||||
let stack = document.getElementById(stackId);
|
||||
let image, label;
|
||||
if (stack) {
|
||||
image = document.getElementById(imageId);
|
||||
label = document.getElementById(labelId);
|
||||
} else {
|
||||
let box = document.createElement("box");
|
||||
box.classList.add("toolbarbutton-1");
|
||||
box.setAttribute("id", iconId);
|
||||
// Use the accessibility menuitem label as tooltiptext.
|
||||
if (icon.label)
|
||||
box.setAttribute("tooltiptext", icon.label);
|
||||
box.addEventListener("mousedown", function (e) {
|
||||
if (e.button == 0)
|
||||
SocialToolbar.showAmbientPopup(box);
|
||||
}, false);
|
||||
box.setAttribute("notificationFrameId", notificationFrameId);
|
||||
stack = document.createElement("stack");
|
||||
stack.setAttribute("id", stackId);
|
||||
stack.classList.add("social-notification-icon-stack");
|
||||
stack.classList.add("toolbarbutton-icon");
|
||||
image = document.createElement("image");
|
||||
image.setAttribute("id", imageId);
|
||||
image.classList.add("social-notification-icon-image");
|
||||
image = stack.appendChild(image);
|
||||
label = document.createElement("label");
|
||||
label.setAttribute("id", labelId);
|
||||
label.classList.add("social-notification-icon-label");
|
||||
let hbox = document.createElement("hbox");
|
||||
hbox.classList.add("social-notification-icon-hbox");
|
||||
hbox.setAttribute("align", "start");
|
||||
hbox.setAttribute("pack", "end");
|
||||
label = hbox.appendChild(label);
|
||||
stack.appendChild(hbox);
|
||||
box.appendChild(stack);
|
||||
iconContainers.appendChild(box);
|
||||
let toolbarButtonContainerId = "social-notification-container-" + icon.name;
|
||||
let toolbarButtonId = "social-notification-icon-" + icon.name;
|
||||
let toolbarButtonContainer = document.getElementById(toolbarButtonContainerId);
|
||||
let toolbarButton = document.getElementById(toolbarButtonId);
|
||||
if (!toolbarButtonContainer) {
|
||||
// The container is used to fix an issue with position:absolute on
|
||||
// generated content not being constrained to the bounding box of a
|
||||
// parent toolbarbutton that has position:relative.
|
||||
toolbarButtonContainer = document.createElement("toolbaritem");
|
||||
toolbarButtonContainer.classList.add("social-notification-container");
|
||||
toolbarButtonContainer.setAttribute("id", toolbarButtonContainerId);
|
||||
|
||||
toolbarButton = document.createElement("toolbarbutton");
|
||||
toolbarButton.classList.add("toolbarbutton-1");
|
||||
toolbarButton.setAttribute("id", toolbarButtonId);
|
||||
toolbarButton.setAttribute("notificationFrameId", notificationFrameId);
|
||||
toolbarButton.addEventListener("mousedown", function (event) {
|
||||
if (event.button == 0)
|
||||
SocialToolbar.showAmbientPopup(toolbarButton);
|
||||
});
|
||||
|
||||
toolbarButtonContainer.appendChild(toolbarButton);
|
||||
toolbarButtons.appendChild(toolbarButtonContainer);
|
||||
}
|
||||
|
||||
let labelValue = icon.counter || "";
|
||||
// Only update the value attribute if it has changed to reduce layout changes.
|
||||
if (!label.hasAttribute("value") || label.getAttribute("value") != labelValue)
|
||||
label.setAttribute("value", labelValue);
|
||||
toolbarButton.style.listStyleImage = "url(" + icon.iconURL + ")";
|
||||
toolbarButton.setAttribute("label", icon.label);
|
||||
toolbarButton.setAttribute("tooltiptext", icon.label);
|
||||
|
||||
image.style.listStyleImage = "url(" + icon.iconURL + ")";
|
||||
let badge = icon.counter || "";
|
||||
if (toolbarButton.getAttribute("badge") != badge)
|
||||
toolbarButton.setAttribute("badge", badge);
|
||||
}
|
||||
iconBox.appendChild(iconContainers);
|
||||
let socialToolbarItem = document.getElementById("social-toolbar-item");
|
||||
socialToolbarItem.appendChild(toolbarButtons);
|
||||
|
||||
for (let frame of createdFrames) {
|
||||
if (frame.docShell) {
|
||||
@ -923,12 +908,12 @@ var SocialToolbar = {
|
||||
}
|
||||
},
|
||||
|
||||
showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButtonBox) {
|
||||
showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButton) {
|
||||
// Hide any other social panels that may be open.
|
||||
SocialFlyout.panel.hidePopup();
|
||||
|
||||
let panel = document.getElementById("social-notification-panel");
|
||||
let notificationFrameId = aToolbarButtonBox.getAttribute("notificationFrameId");
|
||||
let notificationFrameId = aToolbarButton.getAttribute("notificationFrameId");
|
||||
let notificationFrame = document.getElementById(notificationFrameId);
|
||||
|
||||
let wasAlive = SharedFrame.isGroupAlive(notificationFrameId);
|
||||
@ -951,7 +936,8 @@ var SocialToolbar = {
|
||||
let dynamicResizer = this._dynamicResizer;
|
||||
panel.addEventListener("popuphidden", function onpopuphiding() {
|
||||
panel.removeEventListener("popuphidden", onpopuphiding);
|
||||
aToolbarButtonBox.removeAttribute("open");
|
||||
aToolbarButton.removeAttribute("open");
|
||||
aToolbarButton.parentNode.removeAttribute("open");
|
||||
dynamicResizer.stop();
|
||||
notificationFrame.docShell.isActive = false;
|
||||
dispatchPanelEvent("socialFrameHide");
|
||||
@ -959,7 +945,13 @@ var SocialToolbar = {
|
||||
|
||||
panel.addEventListener("popupshown", function onpopupshown() {
|
||||
panel.removeEventListener("popupshown", onpopupshown);
|
||||
aToolbarButtonBox.setAttribute("open", "true");
|
||||
// This attribute is needed on both the button and the
|
||||
// containing toolbaritem since the buttons on OS X have
|
||||
// moz-appearance:none, while their container gets
|
||||
// moz-appearance:toolbarbutton due to the way that toolbar buttons
|
||||
// get combined on OS X.
|
||||
aToolbarButton.setAttribute("open", "true");
|
||||
aToolbarButton.parentNode.setAttribute("open", "true");
|
||||
notificationFrame.docShell.isActive = true;
|
||||
notificationFrame.docShell.isAppTab = true;
|
||||
if (notificationFrame.contentDocument.readyState == "complete" && wasAlive) {
|
||||
@ -977,9 +969,8 @@ var SocialToolbar = {
|
||||
}
|
||||
});
|
||||
|
||||
let imageId = aToolbarButtonBox.getAttribute("id") + "-image";
|
||||
let toolbarButtonImage = document.getElementById(imageId);
|
||||
panel.openPopup(toolbarButtonImage, "bottomcenter topright", 0, 0, false, false);
|
||||
let toolbarButtonIcon = document.getAnonymousElementByAttribute(aToolbarButton, "class", "toolbarbutton-icon");
|
||||
panel.openPopup(toolbarButtonIcon, "bottomcenter topright", 0, 0, false, false);
|
||||
},
|
||||
|
||||
setPanelErrorMessage: function SocialToolbar_setPanelErrorMessage(aNotificationFrame) {
|
||||
|
||||
@ -618,6 +618,10 @@ html|*#gcli-output-frame,
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
content: attr(badge);
|
||||
}
|
||||
|
||||
chatbox {
|
||||
-moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
|
||||
}
|
||||
|
||||
@ -28,10 +28,10 @@ var tests = {
|
||||
}
|
||||
|
||||
function triggerIconPanel() {
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > .social-notification-container > .toolbarbutton-1");
|
||||
info("status icon is " + statusIcon);
|
||||
waitForCondition(function() {
|
||||
statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
statusIcon = document.querySelector("#social-toolbar-item > .social-notification-container > .toolbarbutton-1");
|
||||
info("status icon is " + statusIcon);
|
||||
return !!statusIcon;
|
||||
}, function() {
|
||||
|
||||
@ -103,17 +103,18 @@ var tests = {
|
||||
Social.provider.setAmbientNotification(ambience2);
|
||||
Social.provider.setAmbientNotification(ambience3);
|
||||
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > .social-notification-container > .toolbarbutton-1");
|
||||
waitForCondition(function() {
|
||||
statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
statusIcon = document.querySelector("#social-toolbar-item > .social-notification-container > .toolbarbutton-1");
|
||||
return !!statusIcon;
|
||||
}, function () {
|
||||
let statusIconLabel = statusIcon.querySelector("label");
|
||||
is(statusIconLabel.value, "42", "status value is correct");
|
||||
let badge = statusIcon.getAttribute("badge");
|
||||
is(badge, "42", "status value is correct");
|
||||
|
||||
ambience.counter = 0;
|
||||
Social.provider.setAmbientNotification(ambience);
|
||||
is(statusIconLabel.value, "", "status value is correct");
|
||||
badge = statusIcon.getAttribute("badge");
|
||||
is(badge, "", "status value is correct");
|
||||
|
||||
// The menu bar isn't as easy to instrument on Mac.
|
||||
if (navigator.platform.contains("Mac"))
|
||||
|
||||
@ -2344,29 +2344,8 @@ html|*#gcli-output-frame {
|
||||
-moz-margin-end: 2px;
|
||||
}
|
||||
|
||||
#social-toolbar-item {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-appearance: toolbarbutton;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.social-status-button {
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
#social-provider-button {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
|
||||
#social-provider-button > image {
|
||||
#social-toolbar-item > .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
.social-notification-container > .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
margin: 5px 3px;
|
||||
}
|
||||
|
||||
@ -2374,33 +2353,32 @@ html|*#gcli-output-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-notification-icon-stack {
|
||||
padding: 0;
|
||||
.social-notification-container {
|
||||
/* position:relative on .toolbarbutton-1 does not get position:absolute
|
||||
to work as expected on .toolbarbutton-1 generated content. Placing a
|
||||
simple container outside of .toolbarbutton-1 and setting position:relative
|
||||
on the simple container however will work. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-notification-icon-image {
|
||||
margin: 5px 3px;
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.social-notification-icon-label {
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
|
||||
padding-right: 1px;
|
||||
padding-left: 1px;
|
||||
color: white;
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0 1px;
|
||||
color: #fff;
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
|
||||
left: 2px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* social toolbar provider menu */
|
||||
|
||||
@ -3803,30 +3803,16 @@ html|*#gcli-output-frame {
|
||||
|
||||
/* === social toolbar button === */
|
||||
|
||||
/* button icon for the service */
|
||||
toolbar[mode="icons"] > *|* > .social-notification-container {
|
||||
-moz-appearance: toolbarbutton;
|
||||
}
|
||||
|
||||
.social-notification-container > .toolbarbutton-1 {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
#social-toolbar-item {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1:not(:first-child):not(:last-child) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1:first-child {
|
||||
-moz-margin-end: 0;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1:last-child {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.social-status-button {
|
||||
list-style-image: none;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
#social-provider-button {
|
||||
@ -3837,39 +3823,40 @@ html|*#gcli-output-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-notification-icon-stack {
|
||||
padding: 0;
|
||||
.social-notification-container {
|
||||
/* position:relative on .toolbarbutton-1 does not get position:absolute
|
||||
to work as expected on .toolbarbutton-1 generated content. Placing a
|
||||
simple container outside of .toolbarbutton-1 and setting position:relative
|
||||
on the simple container however will work. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
padding: 0;
|
||||
}
|
||||
.social-notification-icon-label {
|
||||
text-align: end;
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
padding: 0 1px;
|
||||
color: white;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
|
||||
-moz-margin-end: -4px;
|
||||
margin-top: -4px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@media (-moz-mac-lion-theme) {
|
||||
.social-notification-icon-stack > image:-moz-window-inactive {
|
||||
opacity: .5;
|
||||
}
|
||||
toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
.social-notification-icon-image {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
/* === end of social toolbar button === */
|
||||
|
||||
@ -727,7 +727,8 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:not(:hover) + .toolbarbutton-1:not(:hover)::before {
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:not(:hover) + .social-notification-container:not(:hover) > .toolbarbutton-1::before,
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .social-notification-container:not(:hover) + .social-notification-container:not(:hover) > .toolbarbutton-1::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
width: 1px;
|
||||
@ -3028,6 +3029,7 @@ html|*#gcli-output-frame {
|
||||
}
|
||||
|
||||
/* Social toolbar item */
|
||||
|
||||
#social-provider-button {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
@ -3036,47 +3038,47 @@ html|*#gcli-output-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1 {
|
||||
padding: 5px;
|
||||
-moz-appearance: toolbarbutton;
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1,
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .social-notification-container > .toolbarbutton-1 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1 {
|
||||
padding: 6px 0;
|
||||
@navbarLargeIcons@ > #social-toolbar-item {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:first-child {
|
||||
-moz-padding-start: 5px;
|
||||
.social-notification-container {
|
||||
/* position:relative on .toolbarbutton-1 does not get position:absolute
|
||||
to work as expected on .toolbarbutton-1 generated content. Placing a
|
||||
simple container outside of .toolbarbutton-1 and setting position:relative
|
||||
on the simple container however will work. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:last-child {
|
||||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
margin-top: -5px;
|
||||
-moz-margin-end: -12px;
|
||||
}
|
||||
|
||||
.social-notification-icon-label {
|
||||
text-align: end;
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
padding: 0 1px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
@navbarLargeIcons@ > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.social-notification-icon-image {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
|
||||
left: 2px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* social toolbar provider menu */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user