From ef09580b8267a4917c9c742f5f9d54a99467a17f Mon Sep 17 00:00:00 2001 From: Ehsan Akhgari Date: Fri, 28 Sep 2012 15:41:08 -0400 Subject: [PATCH] Backout bug abf5f7d05488 for more than 10000 browser-chrome failures --- browser/base/content/browser-social.js | 111 ++++++++++++------------ browser/base/content/browser.xul | 55 +++++++----- browser/themes/gnomestripe/browser.css | 67 +++++++++------ browser/themes/pinstripe/browser.css | 85 ++++++++----------- browser/themes/winstripe/browser.css | 113 +++++++++++++++++-------- 5 files changed, 241 insertions(+), 190 deletions(-) diff --git a/browser/base/content/browser-social.js b/browser/base/content/browser-social.js index ec31cb28abf..fb12fbef125 100644 --- a/browser/base/content/browser-social.js +++ b/browser/base/content/browser-social.js @@ -531,21 +531,33 @@ let SocialShareButton = { var SocialToolbar = { // Called once, after window load, when the Social.provider object is initialized init: function SocialToolbar_init() { - document.getElementById("social-provider-button").setAttribute("image", Social.provider.iconURL); + document.getElementById("social-provider-image").setAttribute("image", Social.provider.iconURL); + + let statusAreaPopup = document.getElementById("social-statusarea-popup"); + statusAreaPopup.addEventListener("popupshown", function(e) { + this.button.setAttribute("open", "true"); + }.bind(this)); + statusAreaPopup.addEventListener("popuphidden", function(e) { + this.button.removeAttribute("open"); + }.bind(this)); + this.updateButton(); this.updateProfile(); }, - updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() { - let tbi = document.getElementById("social-toolbar-item"); - tbi.hidden = !Social.uiVisible; - if (!SocialUI.haveLoggedInUser()) { - let parent = document.getElementById("social-notification-box"); - while (parent.hasChildNodes()) - parent.removeChild(parent.firstChild); + get button() { + return document.getElementById("social-toolbar-button"); + }, - while (tbi.lastChild != tbi.firstChild) - tbi.removeChild(tbi.lastChild); + updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() { + this.button.hidden = !Social.uiVisible; + if (!SocialUI.haveLoggedInUser()) { + ["social-notification-box", + "social-status-iconbox"].forEach(function removeChildren(parentId) { + let parent = document.getElementById(parentId); + while(parent.hasChildNodes()) + parent.removeChild(parent.firstChild); + }); } }, @@ -573,7 +585,7 @@ var SocialToolbar = { this.updateButtonHiddenState(); let provider = Social.provider; let iconNames = Object.keys(provider.ambientNotificationIcons); - let iconBox = document.getElementById("social-toolbar-item"); + let iconBox = document.getElementById("social-status-iconbox"); let notifBox = document.getElementById("social-notification-box"); let panel = document.getElementById("social-notification-panel"); panel.hidden = false; @@ -601,57 +613,44 @@ var SocialToolbar = { notificationFrame.setAttribute("src", 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); + let iconContainer = document.getElementById(iconId); + let iconImage, iconCounter; + if (iconContainer) { + iconImage = iconContainer.getElementsByClassName("social-notification-icon-image")[0]; + iconCounter = iconContainer.getElementsByClassName("social-notification-icon-counter")[0]; } else { - let box = document.createElement("box"); - box.classList.add("toolbarbutton-1"); - box.setAttribute("id", iconId); - box.addEventListener("mousedown", function (e) { 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 = 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); + iconContainer = document.createElement("box"); + iconContainer.setAttribute("id", iconId); + iconContainer.classList.add("social-notification-icon-container"); + iconContainer.addEventListener("click", function (e) { SocialToolbar.showAmbientPopup(iconContainer); }, false); + + iconImage = document.createElement("image"); + iconImage.classList.add("social-notification-icon-image"); + iconImage = iconContainer.appendChild(iconImage); + + iconCounter = document.createElement("box"); + iconCounter.classList.add("social-notification-icon-counter"); + iconCounter.appendChild(document.createTextNode("")); + iconCounter = iconContainer.appendChild(iconCounter); + + iconContainers.appendChild(iconContainer); } + if (iconImage.getAttribute("src") != icon.iconURL) + iconImage.setAttribute("src", icon.iconURL); + iconImage.setAttribute("notificationFrameId", notificationFrameId); - 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); - - if (image.getAttribute("src") != icon.iconURL) - image.setAttribute("src", icon.iconURL); + iconCounter.collapsed = !icon.counter; + iconCounter.firstChild.textContent = icon.counter || ""; } notifBox.appendChild(notificationFrames); iconBox.appendChild(iconContainers); }, - showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButtonBox) { + showAmbientPopup: function SocialToolbar_showAmbientPopup(iconContainer) { + let iconImage = iconContainer.firstChild; let panel = document.getElementById("social-notification-panel"); let notifBox = document.getElementById("social-notification-box"); - let notificationFrameId = aToolbarButtonBox.getAttribute("notificationFrameId"); - let notificationFrame = document.getElementById(notificationFrameId); + let notificationFrame = document.getElementById(iconImage.getAttribute("notificationFrameId")); // Clear dimensions on all browsers so the panel size will // only use the selected browser. @@ -669,14 +668,14 @@ var SocialToolbar = { panel.addEventListener("popuphidden", function onpopuphiding() { panel.removeEventListener("popuphidden", onpopuphiding); - aToolbarButtonBox.removeAttribute("open"); + SocialToolbar.button.removeAttribute("open"); notificationFrame.docShell.isActive = false; dispatchPanelEvent("socialFrameHide"); }); panel.addEventListener("popupshown", function onpopupshown() { panel.removeEventListener("popupshown", onpopupshown); - aToolbarButtonBox.setAttribute("open", "true"); + SocialToolbar.button.setAttribute("open", "true"); notificationFrame.docShell.isActive = true; notificationFrame.docShell.isAppTab = true; if (notificationFrame.contentDocument.readyState == "complete") { @@ -694,9 +693,7 @@ var SocialToolbar = { } }); - let imageId = aToolbarButtonBox.getAttribute("id") + "-image"; - let toolbarButtonImage = document.getElementById(imageId); - panel.openPopup(toolbarButtonImage, "bottomcenter topleft", 0, 0, false, false); + panel.openPopup(iconImage, "bottomcenter topleft", 0, 0, false, false); } } diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 6feffc85ecb..5ddf9b50d5a 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -660,32 +660,41 @@ onclick="BrowserGoHome(event);" aboutHomeOverrideTooltip="&abouthome.pageTitle;"/> - .toolbarbutton-1 { - margin: 0; - padding: 0; +#social-toolbar-button { -moz-appearance: toolbarbutton; } -.social-notification-icon-hbox { - pointer-events: none; +/* favicon for the service */ +#social-provider-image { + -moz-appearance: none; + border: none; + min-width: 20px; + min-height: 20px; + padding: 2px 5px; + margin: 0; + background: transparent; + list-style-image: url("chrome://browser/skin/social/social.png"); } -.social-status-button { - list-style-image: none; +#social-provider-image > .button-box > .box-inherit > .button-icon { + max-height: 16px; + max-width: 16px; } -#social-provider-button > image { - margin: 5px 3px; +#social-provider-image > .button-box { + padding: 0; + margin: 0; + background: transparent; + border: none; } -#social-provider-button > .toolbarbutton-menu-dropmarker { +#social-provider-image > .button-box > .button-menu-dropmarker { display: none; } -.social-notification-icon-stack { +/* hbox that hold notification icons */ +#social-status-iconbox { + margin: 0; padding: 0; } -.social-notification-icon-stack > image { - margin: 5px 3px; - max-height: 16px; -} - -.social-notification-icon-hbox { +/* hbox that surrounds an image and its counter */ +.social-notification-icon-container { padding: 0; + margin: 0; + position: relative; } -.social-notification-icon-label { +/* notification counter box */ +.social-notification-icon-counter { background-color: rgb(240,61,37); border: 1px solid rgb(216,55,34); box-shadow: 0px 1px 0px rgba(0,39,121,0.77); @@ -2657,11 +2664,21 @@ html|*#gcli-output-frame { color: white; font-size: 9px; font-weight: bold; - margin: 0; + position: absolute; + right: -3px; + top: -4px; + z-index: 1; + text-align: center; } -.social-notification-icon-label[value=""] { - display: none; +/* notification image */ +.social-notification-icon-image { + padding: 2px; + margin: 0; + min-width: 20px; + max-width: 32px; + max-height: 20px; + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } /* social toolbar provider menu */ diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css index e0ed0a01a55..27bcca30d1b 100644 --- a/browser/themes/pinstripe/browser.css +++ b/browser/themes/pinstripe/browser.css @@ -3324,59 +3324,48 @@ html|*#gcli-output-frame { /* === social toolbar button === */ /* button icon for the service */ -#social-toolbar-item { - -moz-box-orient: horizontal; -} - -#social-toolbar-item > .toolbarbutton-1 { - margin: 0px; -} - -.social-notification-icon-hbox { - pointer-events: none; -} - -.social-status-button { - list-style-image: none; -} - -#social-provider-button > .toolbarbutton-menu-dropmarker { - display: none; -} - -.social-notification-icon-stack { - padding: 0; -} - -.social-notification-icon-stack > image { - max-height: 16px; -} - -.social-notification-icon-hbox { - padding: 0; -} -.social-notification-icon-label { - text-align: end; - font-size: 9px; - font-weight: bold; - padding: 0 1px; - color: white; +#social-provider-image { + -moz-appearance: none; margin: 0; + padding: 2px; + min-width: 0; + max-height: 20px; + list-style-image: url("chrome://browser/skin/social/social.png"); +} + +/* hbox that surrounds an image and its counter */ +.social-notification-icon-container { + cursor: pointer; + padding: 0px; + margin: 0px; + position: relative; +} + +/* notification counter box */ +.social-notification-icon-counter { background-color: rgb(240,61,37); border: 1px solid rgb(216,55,34); - box-shadow: 0 1px 0 rgba(0,39,121,0.77); - -moz-margin-end: -4px; - margin-top: -4px; + box-shadow: 0px 1px 0px rgba(0,39,121,0.77); + padding-right: 1px; + padding-left: 1px; + color: white; + font-size: 9px; + font-weight: bold; + position: absolute; + right: -3px; + top: -4px; + z-index: 1; + text-align: center; } -.social-notification-icon-label[value=""] { - display: none; -} - -@media (-moz-mac-lion-theme) { - .social-notification-icon-stack > image:-moz-window-inactive { - opacity: .5; - } +/* notification image */ +.social-notification-icon-image { + padding: 2px; + margin: 0px; + min-width: 20px; + max-width: 32px; + max-height: 20px; + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } /* === end of social toolbar button === */ diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css index f461b5ee5d6..f409bb23f20 100644 --- a/browser/themes/winstripe/browser.css +++ b/browser/themes/winstripe/browser.css @@ -670,7 +670,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) { padding-left: 5px; padding-right: 5px; } @@ -708,7 +708,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) > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ { -moz-padding-end: 17px; } @@ -725,18 +725,13 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { padding: 8px 3px 7px; } -@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before, -@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:not(:first-child)::before { +@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { content: ""; display: -moz-box; width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); - background-clip: padding-box; - background-position: center; - background-repeat: no-repeat; - background-size: 1px 18px; + background: hsla(210,54%,20%,.2) padding-box; box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); } @@ -3291,44 +3286,88 @@ html|*#gcli-output-frame { -moz-margin-end: 5px; } -/* Social toolbar item */ -#social-provider-button > .toolbarbutton-menu-dropmarker { +/* social toolbar button */ +.social-statusarea-container { + -moz-appearance: none; + margin: 2px; /* make sure we have the correct platform spacing*/ + padding: 0 1px; + border: 1px solid transparent; + border-radius: 2px; +} + +.social-statusarea-container:hover { + background-image: 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); +} + +#social-toolbar-button[open="true"] > .social-statusarea-container { + background-image: 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; +} + +/* favicon for the service */ +#social-provider-image { + -moz-appearance: none; + border: none; + min-width: 20px; + min-height: 16px; + padding: 2px 5px; + margin: 0; + background: transparent; + list-style-image: url("chrome://browser/skin/social/social.png"); +} + +#social-provider-image > .button-box > .box-inherit > .button-icon { + max-height: 16px; + max-width: 16px; +} + +#social-provider-image > .button-box { + padding: 0; + margin: 0; + background: transparent; + border: none; +} + +#social-provider-image > .button-box > .button-menu-dropmarker { display: none; } -@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1 { - padding: 5px 0; +/* hbox that hold notification icons */ +#social-status-iconbox { + margin: 0; + padding: 0; } -@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:first-child { - -moz-padding-start: 5px; +/* hbox that surrounds an image and its counter */ +.social-notification-icon-container { + padding: 0; + margin: 0; + 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; - font-size: 9px; - font-weight: bold; - padding: 0 1px; - color: white; +/* notification counter box */ +.social-notification-icon-counter { 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); -} - -.social-notification-icon-label[value=""] { - display: none; + box-shadow: 0px 1px 0px rgba(0,39,121,0.77); + padding-right: 1px; + padding-left: 1px; + color: white; + font-size: 9px; + font-weight: bold; + position: absolute; + right: -3px; + top: -4px; + z-index: 1; + text-align: center; } /* notification image */