Bug 880735 part S - Basic styling so that this can land - add classes to the binding for styling hooks and fix space handling. Make the buttons fill the space, limit the doorhanger size, and add whitespace/separators for the multi-plugin UI, r=jaws

This commit is contained in:
Benjamin Smedberg 2013-06-24 08:51:08 -04:00
parent 82eede8f1b
commit 5bd3e02512
4 changed files with 174 additions and 14 deletions

View File

@ -1381,7 +1381,7 @@
<binding id="plugin-popupnotification-center-item">
<content align="center">
<xul:vbox pack="center" anonid="itemBox" class="itemBox">
<xul:description anonid="center-item-label" />
<xul:description anonid="center-item-label" class="center-item-label" />
<xul:hbox flex="1" pack="start" align="center" anonid="center-item-warning">
<xul:image anonid="center-item-warning-icon" class="center-item-warning-icon"/>
<xul:label anonid="center-item-warning-label"/>
@ -1493,17 +1493,17 @@
<xul:vbox flex="1" align="stretch" class="popup-notification-main-box"
xbl:inherits="popupid">
<xul:hbox class="click-to-play-plugins-notification-description-box" flex="1" align="start">
<xul:description flex="1">
<xul:description class="click-to-play-plugins-outer-description" flex="1">
<html:span anonid="click-to-play-plugins-notification-description" />
&#32;
<xul:label class="text-link" anonid="click-to-play-plugins-notification-link" />
<xul:label class="text-link click-to-play-plugins-notification-link" anonid="click-to-play-plugins-notification-link" />
</xul:description>
<xul:toolbarbutton anonid="closebutton"
class="messageCloseButton popup-notification-closebutton tabbable"
xbl:inherits="oncommand=closebuttoncommand"
tooltiptext="&closeNotification.tooltip;"/>
</xul:hbox>
<xul:grid anonid="click-to-play-plugins-notification-center-box">
<xul:grid anonid="click-to-play-plugins-notification-center-box"
class="click-to-play-plugins-notification-center-box">
<xul:columns>
<xul:column flex="1"/>
<xul:column/>
@ -1522,11 +1522,13 @@
class="click-to-play-plugins-notification-button-container"
pack="center" align="center">
<xul:button anonid="primarybutton"
class="popup-notification-menubutton"
oncommand="document.getBindingParent(this)._onButton(this)"/>
class="click-to-play-popup-button primary-button"
oncommand="document.getBindingParent(this)._onButton(this)"
flex="1"/>
<xul:button anonid="secondarybutton"
class="popup-notification-menubutton"
oncommand="document.getBindingParent(this)._onButton(this);"/>
class="click-to-play-popup-button"
oncommand="document.getBindingParent(this)._onButton(this);"
flex="1"/>
</xul:hbox>
<xul:box hidden="true">
<children/>
@ -1664,19 +1666,19 @@
let linkElement =
document.getAnonymousElementByAttribute(
this, "anonid", "click-to-play-plugins-notification-link");
linkElement.value = gNavigatorBundle.getString("pluginActivateDisabled.manage");
linkElement.textContent = gNavigatorBundle.getString("pluginActivateDisabled.manage");
linkElement.setAttribute("onclick", "gPluginHandler.managePlugins()");
let descElement = document.getAnonymousElementByAttribute(this, "anonid", "click-to-play-plugins-notification-description");
descElement.textContent = gNavigatorBundle.getFormattedString(
"pluginActivateDisabled.message", [action.pluginName, this._brandShortName]);
"pluginActivateDisabled.message", [action.pluginName, this._brandShortName]) + " ";
this._buttonContainer.hidden = true;
return;
}
else if (action.blocklistState == Ci.nsIBlocklistService.STATE_BLOCKED) {
let descElement = document.getAnonymousElementByAttribute(this, "anonid", "click-to-play-plugins-notification-description");
descElement.textContent = gNavigatorBundle.getFormattedString(
"pluginActivateBlocked.message", [action.pluginName, this._brandShortName]);
"pluginActivateBlocked.message", [action.pluginName, this._brandShortName]) + " ";
this._setupLink("pluginActivate.learnMore", action.detailsLink);
this._buttonContainer.hidden = true;
return;
@ -1758,7 +1760,7 @@
var hostSpan = document.createElementNS("http://www.w3.org/1999/xhtml", "em");
hostSpan.appendChild(document.createTextNode(host));
span.appendChild(hostSpan);
span.appendChild(document.createTextNode(bases[1]));
span.appendChild(document.createTextNode(bases[1] + " "));
]]></body>
</method>
<method name="_setupLink">
@ -1772,7 +1774,7 @@
}
link.hidden = false;
link.value = gNavigatorBundle.getString(linkString);
link.textContent = gNavigatorBundle.getString(linkString);
link.href = linkUrl;
]]></body>
</method>

View File

@ -2214,11 +2214,61 @@ chatbox {
border-top-right-radius: 2.5px;
}
/**
* Plugin Doorhanger Styles
*/
#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0px;
}
.click-to-play-plugins-notification-content {
width: 28em;
}
.click-to-play-plugins-notification-center-box {
background-color: rgba(255,255,255,0.3);
}
.plugin-popupnotification-centeritem {
border-top: 1px solid ThreeDShadow;
}
.center-item-label {
margin-bottom: 0;
text-overflow: ellipsis;
}
.center-item-warning-icon {
background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
background-repeat: no-repeat;
width: 16px;
height: 15px;
-moz-margin-start: 6px;
}
.click-to-play-plugins-notification-button-container {
border-top: 1px solid ThreeDShadow;
}
.click-to-play-popup-button {
width: 50%;
}
.click-to-play-plugins-notification-description-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
padding-bottom: 2px;
}
.click-to-play-plugins-outer-description {
margin-top: 8px;
}
.click-to-play-plugins-notification-link,
.center-item-link {
margin: 0;
}
#main-window[privatebrowsingmode=temporary] #TabsToolbar::before {

View File

@ -3867,11 +3867,65 @@ panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .
}
}
/**
* Plugin Doorhanger Styles
*/
#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0px;
}
.click-to-play-plugins-notification-content {
width: 28em;
}
.click-to-play-plugins-notification-center-box {
background-color: rgba(255,255,255,0.3);
}
.plugin-popupnotification-centeritem {
border-top: 1px solid ThreeDShadow;
}
.center-item-label {
margin-bottom: 0;
text-overflow: ellipsis;
}
.center-item-warning-icon {
background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
background-repeat: no-repeat;
width: 16px;
height: 15px;
-moz-margin-start: 6px;
}
.click-to-play-plugins-notification-button-container {
border-top: 1px solid ThreeDShadow;
}
.click-to-play-popup-button {
width: 50%;
}
.click-to-play-plugins-notification-description-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
padding-bottom: 2px;
}
.click-to-play-plugins-outer-description {
margin-top: 8px;
}
.click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
margin: 0;
}
.click-to-play-plugins-notification-link,
.center-item-link {
margin: 0;
}
#main-window[privatebrowsingmode=temporary] {

View File

@ -2990,11 +2990,65 @@ chatbox {
border-top-right-radius: 2.5px;
}
/**
* Plugin Doorhanger Styles
*/
#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0px;
}
.click-to-play-plugins-notification-content {
width: 28em;
}
.click-to-play-plugins-notification-center-box {
background-color: rgba(255,255,255,0.3);
}
.plugin-popupnotification-centeritem {
border-top: 1px solid ThreeDShadow;
}
.center-item-label {
margin-bottom: 0;
text-overflow: ellipsis;
}
.center-item-warning-icon {
background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
background-repeat: no-repeat;
width: 16px;
height: 15px;
-moz-margin-start: 6px;
}
.click-to-play-plugins-notification-button-container {
border-top: 1px solid ThreeDShadow;
}
.click-to-play-popup-button {
width: 50%;
}
.click-to-play-plugins-notification-description-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
padding-bottom: 2px;
}
.click-to-play-plugins-outer-description {
margin-top: 8px;
}
.click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
margin: 0;
}
.click-to-play-plugins-notification-link,
.center-item-link {
margin: 0;
}
#main-window[privatebrowsingmode=temporary] #toolbar-menubar {