Backout bug abf5f7d05488 for more than 10000 browser-chrome failures

2012-09-28 15:41:08 -04:00 · 2012-09-28 15:41:08 -04:00 · d0c353d399
--- 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);
  }
 }

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -660,32 +660,41 @@
                     onclick="BrowserGoHome(event);"
                     aboutHomeOverrideTooltip="&abouthome.pageTitle;"/>

-      <toolbaritem id="social-toolbar-item"
-                   class="chromeclass-toolbar-additional"
+      <toolbaritem id="social-toolbar-button"
+                   class="toolbarbutton-1 chromeclass-toolbar-additional"
                   removable="false"
+                   pack="center"
                   title="&socialToolbar.title;"
                   hidden="true">
-        <toolbarbutton id="social-provider-button"
-                       class="toolbarbutton-1"
-                       type="menu">
-          <menupopup id="social-statusarea-popup">
-            <hbox id="social-statusarea-user" pack="left" align="center">
-              <image id="social-statusarea-user-portrait"/>
-              <vbox>
-                <label id="social-statusarea-notloggedin"
-                       value="&social.notLoggedIn.label;"/>
-                <button id="social-statusarea-username"
-                        oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
-              </vbox>
-            </hbox>
-            <menuitem id="social-toggle-sidebar-menuitem"
-                      type="checkbox"
-                      autocheck="false"
-                      command="Social:ToggleSidebar"
-                      label="&social.toggleSidebar.label;"
-                      accesskey="&social.toggleSidebar.accesskey;"/>
-          </menupopup>
-        </toolbarbutton>
+        <hbox id="social-toolbar-button-box" class="social-statusarea-container">
+          <button id="social-provider-image" type="menu">
+            <menupopup id="social-statusarea-popup">
+              <hbox id="social-statusarea-user" pack="left" align="center">
+                <image id="social-statusarea-user-portrait"/>
+                <vbox>
+                  <label id="social-statusarea-notloggedin"
+                         value="&social.notLoggedIn.label;"/>
+                  <button id="social-statusarea-username"
+                          oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
+                </vbox>
+              </hbox>
+              <menuitem id="social-toggle-sidebar-menuitem"
+                        type="checkbox"
+                        autocheck="false"
+                        command="Social:ToggleSidebar"
+                        label="&social.toggleSidebar.label;"
+                        accesskey="&social.toggleSidebar.accesskey;"/>
+              <menuitem id="social-toggle-notifications-menuitem"
+                        type="checkbox"
+                        autocheck="false"
+                        command="Social:ToggleNotifications"
+                        label="&social.toggleNotifications.label;"
+                        accesskey="&social.toggleNotifications.accesskey;"/>
+            </menupopup>
+          </button>
+          <hbox id="social-status-iconbox" flex="1">
+          </hbox>
+        </hbox>
      </toolbaritem>

      <toolbaritem id="bookmarks-menu-button-container"
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@ -2609,46 +2609,53 @@ html|*#gcli-output-frame {
  -moz-margin-end: 2px;
 }

-#social-toolbar-item {
-  -moz-box-orient: horizontal;
-}
-
-#social-toolbar-item > .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 */
--- 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 === */
--- 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 */