Commit 9a548686 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 790112: fix social toolbar button styling so that separate "sub-buttons"... 

Bug 790112: fix social toolbar button styling so that separate "sub-buttons" are visually distinct, patch by :mixedpuppy, :jaws and :markh, r=felipe
parent 0808c5de

browser/base/content/browser-social.js

+56 −53
Original line number Diff line number Diff line
@@ -531,33 +531,21 @@ let SocialShareButton = { 
var SocialToolbar = {

  // Called once, after window load, when the Social.provider object is initialized

  init: function SocialToolbar_init() {

    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));



    document.getElementById("social-provider-button").setAttribute("image", Social.provider.iconURL);

    this.updateButton();

    this.updateProfile();

  },



  get button() {

    return document.getElementById("social-toolbar-button");

  },



  updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() {

    this.button.hidden = !Social.uiVisible;

    let tbi = document.getElementById("social-toolbar-item");

    tbi.hidden = !Social.uiVisible;

    if (!SocialUI.haveLoggedInUser()) {

      ["social-notification-box",

       "social-status-iconbox"].forEach(function removeChildren(parentId) {

        let parent = document.getElementById(parentId);

      let parent = document.getElementById("social-notification-box");

      while (parent.hasChildNodes())

        parent.removeChild(parent.firstChild);

      });



      while (tbi.lastChild != tbi.firstChild)

        tbi.removeChild(tbi.lastChild);

    }

  },
@@ -585,7 +573,7 @@ var SocialToolbar = { 
    this.updateButtonHiddenState();

    let provider = Social.provider;

    let iconNames = Object.keys(provider.ambientNotificationIcons);

    let iconBox = document.getElementById("social-status-iconbox");

    let iconBox = document.getElementById("social-toolbar-item");

    let notifBox = document.getElementById("social-notification-box");

    let panel = document.getElementById("social-notification-panel");

    panel.hidden = false;
@@ -613,44 +601,57 @@ var SocialToolbar = { 
        notificationFrame.setAttribute("src", icon.contentPanel);



      let iconId = "social-notification-icon-" + icon.name;

      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];

      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 {

        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);



      iconCounter.collapsed = !icon.counter;

      iconCounter.firstChild.textContent = icon.counter || "";

        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);

      }



      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);

    }

    notifBox.appendChild(notificationFrames);

    iconBox.appendChild(iconContainers);

  },



  showAmbientPopup: function SocialToolbar_showAmbientPopup(iconContainer) {

    let iconImage = iconContainer.firstChild;

  showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButtonBox) {

    let panel = document.getElementById("social-notification-panel");

    let notifBox = document.getElementById("social-notification-box");

    let notificationFrame = document.getElementById(iconImage.getAttribute("notificationFrameId"));

    let notificationFrameId = aToolbarButtonBox.getAttribute("notificationFrameId");

    let notificationFrame = document.getElementById(notificationFrameId);



    // Clear dimensions on all browsers so the panel size will

    // only use the selected browser.
@@ -668,14 +669,14 @@ var SocialToolbar = { 


    panel.addEventListener("popuphidden", function onpopuphiding() {

      panel.removeEventListener("popuphidden", onpopuphiding);

      SocialToolbar.button.removeAttribute("open");

      aToolbarButtonBox.removeAttribute("open");

      notificationFrame.docShell.isActive = false;

      dispatchPanelEvent("socialFrameHide");

    });



    panel.addEventListener("popupshown", function onpopupshown() {

      panel.removeEventListener("popupshown", onpopupshown);

      SocialToolbar.button.setAttribute("open", "true");

      aToolbarButtonBox.setAttribute("open", "true");

      notificationFrame.docShell.isActive = true;

      notificationFrame.docShell.isAppTab = true;

      if (notificationFrame.contentDocument.readyState == "complete") {
@@ -693,7 +694,9 @@ var SocialToolbar = { 
      }

    });



    panel.openPopup(iconImage, "bottomcenter topleft", 0, 0, false, false);

    let imageId = aToolbarButtonBox.getAttribute("id") + "-image";

    let toolbarButtonImage = document.getElementById(imageId);

    panel.openPopup(toolbarButtonImage, "bottomcenter topleft", 0, 0, false, false);

  }

}

browser/base/content/browser.xul

+23 −32
Original line number Diff line number Diff line
@@ -660,14 +660,14 @@ 
                     onclick="BrowserGoHome(event);"

                     aboutHomeOverrideTooltip="&abouthome.pageTitle;"/>



      <toolbaritem id="social-toolbar-button"

                   class="toolbarbutton-1 chromeclass-toolbar-additional"

      <toolbaritem id="social-toolbar-item"

                   class="chromeclass-toolbar-additional"

                   removable="false"

                   pack="center"

                   title="&socialToolbar.title;"

                   hidden="true">

        <hbox id="social-toolbar-button-box" class="social-statusarea-container">

          <button id="social-provider-image" type="menu">

        <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"/>
@@ -684,17 +684,8 @@ 
                      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>

        </toolbarbutton>

      </toolbaritem>



      <toolbaritem id="bookmarks-menu-button-container"

browser/base/content/test/browser_social_mozSocial_API.js

+8 −4
Original line number Diff line number Diff line
@@ -28,12 +28,16 @@ var tests = { 
    }



    function triggerIconPanel() {

      let statusIcons = document.getElementById("social-status-iconbox");

      waitForCondition(function() statusIcons.firstChild && !statusIcons.firstChild.hidden,

                       function() {

      let statusIcon = document.querySelector("#social-toolbar-item > box");

      info("status icon is " + statusIcon);

      waitForCondition(function() {

        statusIcon = document.querySelector("#social-toolbar-item > box");

        info("status icon is " + statusIcon);

        return !!statusIcon;

      }, function() {

        // Click the button to trigger its contentPanel

        let panel = document.getElementById("social-notification-panel");

        EventUtils.synthesizeMouseAtCenter(statusIcons.firstChild, {});

        EventUtils.synthesizeMouseAtCenter(statusIcon, {});

      }, "Status icon didn't become non-hidden");

    }

browser/base/content/test/browser_social_toolbar.js

+15 −13
Original line number Diff line number Diff line
@@ -42,26 +42,28 @@ var tests = { 
    };

    Social.provider.setAmbientNotification(ambience);



    let statusIcons = document.getElementById("social-status-iconbox");

    ok(!statusIcons.firstChild.collapsed, "status icon is visible");

    ok(!statusIcons.firstChild.lastChild.collapsed, "status value is visible");

    is(statusIcons.firstChild.lastChild.textContent, "42", "status value is correct");

    let statusIcon = document.querySelector("#social-toolbar-item > box");

    waitForCondition(function() {

      statusIcon = document.querySelector("#social-toolbar-item > box");

      return !!statusIcon;

    }, function () {

      let statusIconLabel = statusIcon.querySelector("label");

      is(statusIconLabel.value, "42", "status value is correct");



      ambience.counter = 0;

      Social.provider.setAmbientNotification(ambience);

    ok(statusIcons.firstChild.lastChild.collapsed, "status value is not visible");

    is(statusIcons.firstChild.lastChild.textContent, "", "status value is correct");

      is(statusIconLabel.value, "", "status value is correct");

      next();

    }, "statusIcon was never found");

  },

  testProfileUnset: function(next) {

    Social.provider.updateUserProfile({});

    // check dom values

    let userButton = document.getElementById("social-statusarea-username");

    ok(userButton.hidden, "username is not visible");

    let ambience = document.getElementById("social-status-iconbox").firstChild;

    while (ambience) {

      ok(ambience.collapsed, "ambient icon (" + ambience.id + ") is collapsed");

      ambience = ambience.nextSibling;

    let ambientIcons = document.querySelectorAll("#social-toolbar-item > box");

    for (let ambientIcon of ambientIcons) {

      ok(ambientIcon.collapsed, "ambient icon (" + ambientIcon.id + ") is collapsed");

    }

    

    next();

browser/themes/gnomestripe/browser.css

+25 −42
Original line number Diff line number Diff line
@@ -2609,53 +2609,46 @@ html|*#gcli-output-frame { 
  -moz-margin-end: 2px;

}



#social-toolbar-button {

  -moz-appearance: toolbarbutton;

#social-toolbar-item {

  -moz-box-orient: horizontal;

}



/* favicon for the service */

#social-provider-image {

  -moz-appearance: none;

  border: none;

  min-width: 20px;

  min-height: 20px;

  padding: 2px 5px;

#social-toolbar-item > .toolbarbutton-1 {

  margin: 0;

  background: transparent;

  list-style-image: url("chrome://browser/skin/social/social.png");

  padding: 0;

  -moz-appearance: toolbarbutton;

}



#social-provider-image > .button-box > .box-inherit > .button-icon {

  max-height: 16px;

  max-width: 16px;

.social-notification-icon-hbox {

  pointer-events: none;

}



#social-provider-image > .button-box {

  padding: 0;

  margin: 0;

  background: transparent;

  border: none;

.social-status-button {

  list-style-image: none;

}



#social-provider-button > image {

  margin: 5px 3px;

}



#social-provider-image > .button-box > .button-menu-dropmarker {

#social-provider-button > .toolbarbutton-menu-dropmarker {

  display: none;

}



/* hbox that hold notification icons */

#social-status-iconbox {

  margin: 0;

.social-notification-icon-stack {

  padding: 0;

}



/* hbox that surrounds an image and its counter */

.social-notification-icon-container {

.social-notification-icon-stack > image {

  margin: 5px 3px;

  max-height: 16px;

}



.social-notification-icon-hbox {

  padding: 0;

  margin: 0;

  position: relative;

}



/* notification counter box */

.social-notification-icon-counter {

.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);
@@ -2664,21 +2657,11 @@ html|*#gcli-output-frame { 
  color: white;

  font-size: 9px;

  font-weight: bold;

  position: absolute;

  right: -3px;

  top: -4px;

  z-index: 1;

  text-align: center;

  margin: 0;

}



/* 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-notification-icon-label[value=""] {

  display: none;

}



/* social toolbar provider menu */