mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1087934 Share panel UI updates, r=markh
This commit is contained in:
Shane Caraveo
parent
38c93676ea
commit
0d7c811d24
@ -479,11 +479,9 @@ SocialShare = {
|
||||
},
|
||||
|
||||
get iframe() {
|
||||
// first element is our menu vbox.
|
||||
if (this.panel.childElementCount == 1)
|
||||
return null;
|
||||
else
|
||||
return this.panel.lastChild;
|
||||
// panel.firstChild is our toolbar hbox, panel.lastChild is the iframe
|
||||
// container hbox used for an interstitial "loading" graphic
|
||||
return this.panel.lastChild.firstChild;
|
||||
},
|
||||
|
||||
uninit: function () {
|
||||
@ -505,7 +503,7 @@ SocialShare = {
|
||||
iframe.setAttribute("tooltip", "aHTMLTooltip");
|
||||
iframe.setAttribute("disableglobalhistory", "true");
|
||||
iframe.setAttribute("flex", "1");
|
||||
panel.appendChild(iframe);
|
||||
panel.lastChild.appendChild(iframe);
|
||||
iframe.addEventListener("load", function _firstload() {
|
||||
iframe.removeEventListener("load", _firstload, true);
|
||||
iframe.messageManager.loadFrameScript("chrome://browser/content/content.js", true);
|
||||
@ -537,13 +535,13 @@ SocialShare = {
|
||||
// remove everything before the add-share-provider button (which should also
|
||||
// be lastChild if any share providers were added)
|
||||
let addButton = document.getElementById("add-share-provider");
|
||||
while (hbox.firstChild != addButton) {
|
||||
hbox.removeChild(hbox.firstChild);
|
||||
while (hbox.lastChild != addButton) {
|
||||
hbox.removeChild(hbox.lastChild);
|
||||
}
|
||||
let selectedProvider = this.getSelectedProvider();
|
||||
for (let provider of providers) {
|
||||
let button = document.createElement("toolbarbutton");
|
||||
button.setAttribute("class", "toolbarbutton share-provider-button");
|
||||
button.setAttribute("class", "toolbarbutton-1 share-provider-button");
|
||||
button.setAttribute("type", "radio");
|
||||
button.setAttribute("group", "share-providers");
|
||||
button.setAttribute("image", provider.iconURL);
|
||||
@ -554,7 +552,7 @@ SocialShare = {
|
||||
if (provider == selectedProvider) {
|
||||
this.defaultButton = button;
|
||||
}
|
||||
hbox.insertBefore(button, addButton);
|
||||
hbox.appendChild(button);
|
||||
}
|
||||
if (!this.defaultButton) {
|
||||
this.defaultButton = addButton;
|
||||
@ -577,7 +575,7 @@ SocialShare = {
|
||||
_onclick: function() {
|
||||
Services.telemetry.getHistogramById("SOCIAL_PANEL_CLICKS").add(0);
|
||||
},
|
||||
|
||||
|
||||
onShowing: function() {
|
||||
this.anchor.setAttribute("open", "true");
|
||||
this.iframe.addEventListener("click", this._onclick, true);
|
||||
@ -682,48 +680,40 @@ SocialShare = {
|
||||
|
||||
let shareEndpoint = OpenGraphBuilder.generateEndpointURL(provider.shareURL, pageData);
|
||||
|
||||
this._dynamicResizer.stop();
|
||||
let size = provider.getPageSize("share");
|
||||
if (size) {
|
||||
this._dynamicResizer.stop();
|
||||
// let the css on the share panel define width, but height
|
||||
// calculations dont work on all sites, so we allow that to be
|
||||
// defined.
|
||||
delete size.width;
|
||||
}
|
||||
|
||||
// if we've already loaded this provider/page share endpoint, we don't want
|
||||
// to add another load event listener.
|
||||
let reload = true;
|
||||
let endpointMatch = shareEndpoint == iframe.getAttribute("src");
|
||||
let docLoaded = iframe.contentDocument && iframe.contentDocument.readyState == "complete";
|
||||
if (endpointMatch && docLoaded) {
|
||||
reload = shareEndpoint != iframe.contentDocument.location.spec;
|
||||
}
|
||||
if (!reload) {
|
||||
if (!size)
|
||||
this._dynamicResizer.start(this.panel, iframe);
|
||||
if (endpointMatch) {
|
||||
this._dynamicResizer.start(iframe.parentNode, iframe, size);
|
||||
iframe.docShell.isActive = true;
|
||||
iframe.docShell.isAppTab = true;
|
||||
let evt = iframe.contentDocument.createEvent("CustomEvent");
|
||||
evt.initCustomEvent("OpenGraphData", true, true, JSON.stringify(pageData));
|
||||
iframe.contentDocument.documentElement.dispatchEvent(evt);
|
||||
} else {
|
||||
iframe.parentNode.setAttribute("loading", "true");
|
||||
// first time load, wait for load and dispatch after load
|
||||
iframe.addEventListener("load", function panelBrowserOnload(e) {
|
||||
iframe.removeEventListener("load", panelBrowserOnload, true);
|
||||
iframe.docShell.isActive = true;
|
||||
iframe.docShell.isAppTab = true;
|
||||
iframe.parentNode.removeAttribute("loading");
|
||||
// to support standard share endpoints mimick window.open by setting
|
||||
// window.opener, some share endpoints rely on w.opener to know they
|
||||
// should close the window when done.
|
||||
iframe.contentWindow.opener = iframe.contentWindow;
|
||||
setTimeout(function() {
|
||||
if (size) {
|
||||
let panel = SocialShare.panel;
|
||||
let {width, height} = size;
|
||||
width += panel.boxObject.width - iframe.boxObject.width;
|
||||
height += panel.boxObject.height - iframe.boxObject.height;
|
||||
panel.sizeTo(width, height);
|
||||
} else {
|
||||
SocialShare._dynamicResizer.start(iframe.parentNode, iframe);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
SocialShare._dynamicResizer.start(iframe.parentNode, iframe, size);
|
||||
|
||||
let evt = iframe.contentDocument.createEvent("CustomEvent");
|
||||
evt.initCustomEvent("OpenGraphData", true, true, JSON.stringify(pageData));
|
||||
iframe.contentDocument.documentElement.dispatchEvent(evt);
|
||||
@ -747,9 +737,18 @@ SocialShare = {
|
||||
showDirectory: function() {
|
||||
this._createFrame();
|
||||
let iframe = this.iframe;
|
||||
if (iframe.getAttribute("src") == "about:providerdirectory")
|
||||
return;
|
||||
iframe.removeAttribute("origin");
|
||||
iframe.parentNode.setAttribute("loading", "true");
|
||||
iframe.addEventListener("DOMContentLoaded", function _dcl(e) {
|
||||
iframe.removeEventListener("DOMContentLoaded", _dcl, true);
|
||||
iframe.parentNode.removeAttribute("loading");
|
||||
}, true);
|
||||
|
||||
iframe.addEventListener("load", function panelBrowserOnload(e) {
|
||||
iframe.removeEventListener("load", panelBrowserOnload, true);
|
||||
|
||||
hookWindowCloseForPanelClose(iframe.contentWindow);
|
||||
SocialShare._dynamicResizer.start(iframe.parentNode, iframe);
|
||||
|
||||
|
||||
@ -287,17 +287,22 @@
|
||||
<panel id="social-share-panel"
|
||||
class="social-panel"
|
||||
type="arrow"
|
||||
orient="horizontal"
|
||||
orient="vertical"
|
||||
onpopupshowing="SocialShare.onShowing()"
|
||||
onpopuphidden="SocialShare.onHidden()"
|
||||
hidden="true">
|
||||
<vbox class="social-share-toolbar">
|
||||
<arrowscrollbox id="social-share-provider-buttons" orient="vertical" flex="1">
|
||||
<hbox class="social-share-toolbar">
|
||||
<toolbarbutton id="manage-share-providers" class="toolbarbutton share-provider-button"
|
||||
tooltiptext="&social.addons.label;"
|
||||
oncommand="BrowserOpenAddonsMgr('addons://list/service');
|
||||
this.parentNode.parentNode.hidePopup();"/>
|
||||
<arrowscrollbox id="social-share-provider-buttons" orient="horizontal" flex="1" pack="end">
|
||||
<toolbarbutton id="add-share-provider" class="toolbarbutton share-provider-button" type="radio"
|
||||
group="share-providers" tooltiptext="&findShareServices.label;"
|
||||
oncommand="SocialShare.showDirectory()"/>
|
||||
</arrowscrollbox>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<hbox id="share-container" flex="1"/>
|
||||
</panel>
|
||||
|
||||
<panel id="social-notification-panel"
|
||||
|
||||
@ -14,6 +14,12 @@ function test() {
|
||||
};
|
||||
runSocialTestWithProvider(manifest, function (finishcb) {
|
||||
SocialSidebar.show();
|
||||
// disable transitions for the test
|
||||
let panel = document.getElementById("social-flyout-panel");
|
||||
registerCleanupFunction(function () {
|
||||
panel.removeAttribute("animate");
|
||||
});
|
||||
panel.setAttribute("animate", "false");
|
||||
runSocialTests(tests, undefined, undefined, finishcb);
|
||||
});
|
||||
}
|
||||
@ -21,8 +27,7 @@ function test() {
|
||||
var tests = {
|
||||
testOpenCloseFlyout: function(next) {
|
||||
let panel = document.getElementById("social-flyout-panel");
|
||||
panel.addEventListener("popupshowing", function onShowing() {
|
||||
panel.removeEventListener("popupshowing", onShowing);
|
||||
ensureEventFired(panel, "popupshown").then(() => {
|
||||
is(panel.firstChild.contentDocument.readyState, "complete", "panel is loaded prior to showing");
|
||||
});
|
||||
let port = SocialSidebar.provider.getWorkerPort();
|
||||
@ -75,8 +80,7 @@ var tests = {
|
||||
is(cs.height, "400px", "should be 400px high");
|
||||
is(iframe.boxObject.height, 400, "iframe should now be 400px high");
|
||||
|
||||
iframe.contentWindow.addEventListener("resize", function _doneHandler() {
|
||||
iframe.contentWindow.removeEventListener("resize", _doneHandler, false);
|
||||
ensureEventFired(iframe.contentWindow, "resize").then(() => {
|
||||
cs = iframe.contentWindow.getComputedStyle(body);
|
||||
|
||||
is(cs.width, "500px", "should now be 500px wide");
|
||||
@ -86,7 +90,7 @@ var tests = {
|
||||
panel.hidePopup();
|
||||
port.close();
|
||||
next();
|
||||
}, false);
|
||||
});
|
||||
SocialFlyout.dispatchPanelEvent("socialTest-MakeWider");
|
||||
break;
|
||||
}
|
||||
@ -117,13 +121,12 @@ var tests = {
|
||||
if (e.data.result != "shown")
|
||||
return;
|
||||
let iframe = panel.firstChild;
|
||||
iframe.contentDocument.addEventListener("SocialTest-DoneCloseSelf", function _doneHandler() {
|
||||
iframe.contentDocument.removeEventListener("SocialTest-DoneCloseSelf", _doneHandler, false);
|
||||
ensureEventFired(iframe.contentDocument, "SocialTest-DoneCloseSelf").then(() => {
|
||||
port.close();
|
||||
is(panel.state, "closed", "flyout should have closed itself");
|
||||
Services.prefs.setBoolPref(ALLOW_SCRIPTS_TO_CLOSE_PREF, oldAllowScriptsToClose);
|
||||
next();
|
||||
}, false);
|
||||
});
|
||||
is(panel.state, "open", "flyout should be open");
|
||||
SocialFlyout.dispatchPanelEvent("socialTest-CloseSelf");
|
||||
break;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</head>
|
||||
<body style="width: 400px; height: 400px; margin: 0; overflow: hidden;" onload="pingWorker();">
|
||||
<p>This is a test social flyout panel.</p>
|
||||
<a id="traversal" href="http://mochi.test">test link</a>
|
||||
<a id="traversal" href="https://test.example.com">test link</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -400,7 +400,7 @@ SocialErrorListener.prototype = {
|
||||
};
|
||||
|
||||
|
||||
function sizeSocialPanelToContent(panel, iframe) {
|
||||
function sizeSocialPanelToContent(panel, iframe, requestedSize) {
|
||||
let doc = iframe.contentDocument;
|
||||
if (!doc || !doc.body) {
|
||||
return;
|
||||
@ -408,14 +408,15 @@ function sizeSocialPanelToContent(panel, iframe) {
|
||||
// We need an element to use for sizing our panel. See if the body defines
|
||||
// an id for that element, otherwise use the body itself.
|
||||
let body = doc.body;
|
||||
let docEl = doc.documentElement;
|
||||
let bodyId = body.getAttribute("contentid");
|
||||
if (bodyId) {
|
||||
body = doc.getElementById(bodyId) || doc.body;
|
||||
}
|
||||
// offsetHeight/Width don't include margins, so account for that.
|
||||
let cs = doc.defaultView.getComputedStyle(body);
|
||||
let width = PANEL_MIN_WIDTH;
|
||||
let height = PANEL_MIN_HEIGHT;
|
||||
let width = Math.max(PANEL_MIN_WIDTH, docEl.offsetWidth);
|
||||
let height = Math.max(PANEL_MIN_HEIGHT, docEl.offsetHeight);
|
||||
// if the panel is preloaded prior to being shown, cs will be null. in that
|
||||
// case use the minimum size for the panel until it is shown.
|
||||
if (cs) {
|
||||
@ -425,19 +426,33 @@ function sizeSocialPanelToContent(panel, iframe) {
|
||||
width = Math.max(computedWidth, width);
|
||||
}
|
||||
|
||||
// only add the extra space if the iframe has been loaded
|
||||
// if our scrollHeight is still larger than the iframe, the css calculations
|
||||
// above did not work for this site, increase the height. This can happen if
|
||||
// the site increases its height for additional UI.
|
||||
if (docEl.scrollHeight > iframe.boxObject.height)
|
||||
height = docEl.scrollHeight;
|
||||
|
||||
// if a size was defined in the manifest use it as a minimum
|
||||
if (requestedSize) {
|
||||
if (requestedSize.height)
|
||||
height = Math.max(height, requestedSize.height);
|
||||
if (requestedSize.width)
|
||||
width = Math.max(width, requestedSize.width);
|
||||
}
|
||||
|
||||
// add the extra space used by the panel (toolbar, borders, etc) if the iframe
|
||||
// has been loaded
|
||||
if (iframe.boxObject.width && iframe.boxObject.height) {
|
||||
// add extra space the panel needs if any
|
||||
width += panel.boxObject.width - iframe.boxObject.width;
|
||||
height += panel.boxObject.height - iframe.boxObject.height;
|
||||
}
|
||||
|
||||
// when size is computed, we want to be sure changes are "significant" since
|
||||
// some sites will resize when the iframe is resized by a small amount, making
|
||||
// the panel slowly shrink to some minimum.
|
||||
if (Math.abs(panel.boxObject.width - width) > 2 || Math.abs(panel.boxObject.height - height) > 2) {
|
||||
panel.sizeTo(width, height);
|
||||
}
|
||||
// using panel.sizeTo will ignore css transitions, set size via style
|
||||
if (Math.abs(panel.boxObject.width - width) >= 2)
|
||||
panel.style.width = width + "px";
|
||||
if (Math.abs(panel.boxObject.height - height) >= 2)
|
||||
panel.style.height = height + "px";
|
||||
}
|
||||
|
||||
function DynamicResizeWatcher() {
|
||||
@ -445,18 +460,18 @@ function DynamicResizeWatcher() {
|
||||
}
|
||||
|
||||
DynamicResizeWatcher.prototype = {
|
||||
start: function DynamicResizeWatcher_start(panel, iframe) {
|
||||
start: function DynamicResizeWatcher_start(panel, iframe, requestedSize) {
|
||||
this.stop(); // just in case...
|
||||
let doc = iframe.contentDocument;
|
||||
this._mutationObserver = new iframe.contentWindow.MutationObserver(function(mutations) {
|
||||
sizeSocialPanelToContent(panel, iframe);
|
||||
this._mutationObserver = new iframe.contentWindow.MutationObserver((mutations) => {
|
||||
sizeSocialPanelToContent(panel, iframe, requestedSize);
|
||||
});
|
||||
// Observe anything that causes the size to change.
|
||||
let config = {attributes: true, characterData: true, childList: true, subtree: true};
|
||||
this._mutationObserver.observe(doc, config);
|
||||
// and since this may be setup after the load event has fired we do an
|
||||
// initial resize now.
|
||||
sizeSocialPanelToContent(panel, iframe);
|
||||
sizeSocialPanelToContent(panel, iframe, requestedSize);
|
||||
},
|
||||
stop: function DynamicResizeWatcher_stop() {
|
||||
if (this._mutationObserver) {
|
||||
|
||||
@ -1609,46 +1609,47 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
||||
/* social share panel */
|
||||
|
||||
.social-share-frame {
|
||||
background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95));
|
||||
border-left: 1px solid #f8f8f8;
|
||||
width: 330px;
|
||||
border-top: 1px solid #f8f8f8;
|
||||
width: 756px;
|
||||
height: 150px;
|
||||
/* we resize our panels dynamically, make it look nice */
|
||||
transition: height 100ms ease-out, width 100ms ease-out;
|
||||
}
|
||||
|
||||
#share-container {
|
||||
min-width: 756px;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
#share-container[loading] {
|
||||
background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
|
||||
}
|
||||
#share-container > browser {
|
||||
transition: opacity 150ms ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
#share-container[loading] > browser {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.social-share-toolbar {
|
||||
border-right: 1px solid #dedede;
|
||||
background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95));
|
||||
border-bottom: 1px solid #dedede;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons {
|
||||
border-right: 1px solid #fbfbfb;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button {
|
||||
padding: 6px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked],
|
||||
#social-share-provider-buttons > .share-provider-button:active {
|
||||
.share-provider-button {
|
||||
padding: 5px;
|
||||
border: 1px solid #b5b5b8;
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked] {
|
||||
background: linear-gradient(to bottom, #d9d9d9, #e3e3e3);
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
|
||||
.share-provider-button > .toolbarbutton-text {
|
||||
display: none;
|
||||
}
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
|
||||
.share-provider-button > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
min-height: 16px;
|
||||
max-height: 16px;
|
||||
|
||||
@ -2514,46 +2514,55 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
|
||||
|
||||
/* social share panel */
|
||||
.social-share-frame {
|
||||
background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95));
|
||||
border-left: 1px solid #f8f8f8;
|
||||
width: 330px;
|
||||
border-top: 1px solid #f8f8f8;
|
||||
min-width: 756px;
|
||||
height: 150px;
|
||||
/* we resize our panels dynamically, make it look nice */
|
||||
transition: height 100ms ease-out, width 100ms ease-out;
|
||||
}
|
||||
|
||||
#share-container {
|
||||
min-width: 756px;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
#share-container[loading] {
|
||||
background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
|
||||
}
|
||||
#share-container > browser {
|
||||
transition: opacity 150ms ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
#share-container[loading] > browser {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#manage-share-providers,
|
||||
#social-sidebar-button:hover,
|
||||
#social-sidebar-button:hover:active {
|
||||
-moz-image-region: rect(18px, 468px, 36px, 450px);
|
||||
}
|
||||
|
||||
.social-share-toolbar {
|
||||
border-right: 1px solid #dedede;
|
||||
background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95));
|
||||
border-bottom: 1px solid #dedede;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons {
|
||||
border-right: 1px solid #fbfbfb;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button {
|
||||
padding: 6px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked],
|
||||
#social-share-provider-buttons > .share-provider-button:active {
|
||||
.share-provider-button {
|
||||
padding: 5px;
|
||||
border: 1px solid #b5b5b8;
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked] {
|
||||
background: linear-gradient(to bottom, #d9d9d9, #e3e3e3);
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
|
||||
.share-provider-button > .toolbarbutton-text {
|
||||
display: none;
|
||||
}
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
|
||||
|
||||
.share-provider-button > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
min-height: 16px;
|
||||
max-height: 16px;
|
||||
@ -4500,44 +4509,27 @@ menulist.translate-infobar-element > .menulist-dropmarker {
|
||||
}
|
||||
|
||||
#social-share-panel {
|
||||
max-height: 600px;
|
||||
min-height: 100px;
|
||||
max-width: 800px;
|
||||
min-width: 300px;
|
||||
transition: height .3s ease-in-out, width .3s ease-in-out;
|
||||
}
|
||||
|
||||
.social-share-frame:-moz-locale-dir(ltr) {
|
||||
#share-container,
|
||||
.social-share-frame {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
.social-share-frame:-moz-locale-dir(rtl) {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons:-moz-locale-dir(ltr) {
|
||||
#social-share-panel > .social-share-toolbar {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons:-moz-locale-dir(rtl) {
|
||||
#social-share-provider-buttons {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
/* === end of social toolbar provider menu === */
|
||||
|
||||
@ -702,6 +702,7 @@ panelview .toolbarbutton-1,
|
||||
.subviewbutton,
|
||||
.widget-overflow-list .toolbarbutton-1,
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
.share-provider-button,
|
||||
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
|
||||
-moz-appearance: none;
|
||||
padding: 0 6px;
|
||||
@ -714,6 +715,7 @@ panelview .toolbarbutton-1,
|
||||
panelview .toolbarbutton-1,
|
||||
.subviewbutton,
|
||||
.widget-overflow-list .toolbarbutton-1,
|
||||
.share-provider-button,
|
||||
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
|
||||
border-width: 1px;
|
||||
}
|
||||
@ -786,6 +788,7 @@ panelview .toolbarbutton-1@buttonStateHover@,
|
||||
toolbarbutton.subviewbutton@buttonStateHover@,
|
||||
menu.subviewbutton@menuStateHover@,
|
||||
menuitem.subviewbutton@menuStateHover@,
|
||||
.share-provider-button@buttonStateHover@,
|
||||
.widget-overflow-list .toolbarbutton-1@buttonStateHover@,
|
||||
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
|
||||
background-color: hsla(210,4%,10%,.08);
|
||||
@ -800,6 +803,7 @@ panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
|
||||
toolbarbutton.subviewbutton@buttonStateActive@,
|
||||
menu.subviewbutton@menuStateActive@,
|
||||
menuitem.subviewbutton@menuStateActive@,
|
||||
.share-provider-button:-moz-any(@buttonStateActive@,[checked=true]),
|
||||
.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
|
||||
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
|
||||
background-color: hsla(210,4%,10%,.12);
|
||||
|
||||
@ -8,21 +8,24 @@
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#manage-share-providers,
|
||||
#social-sidebar-button {
|
||||
list-style-image: url("chrome://browser/skin/Toolbar.png");
|
||||
-moz-image-region: rect(0, 468px, 18px, 450px);
|
||||
}
|
||||
|
||||
#social-sidebar-button {
|
||||
-moz-appearance: none;
|
||||
list-style-image: url(chrome://browser/skin/social/gear_default.png);
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
#manage-share-providers > .toolbarbutton-icon,
|
||||
#social-sidebar-button > .toolbarbutton-icon {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
#social-sidebar-button:hover,
|
||||
#social-sidebar-button:hover:active {
|
||||
list-style-image: url(chrome://browser/skin/social/gear_clicked.png);
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
#social-sidebar-button > .toolbarbutton-menu-dropmarker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1573,46 +1573,46 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
||||
|
||||
/* social share panel */
|
||||
|
||||
#social-share-panel > iframe {
|
||||
background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
|
||||
width: 300px;
|
||||
.social-share-frame {
|
||||
min-width: 756px;
|
||||
height: 150px;
|
||||
}
|
||||
#share-container {
|
||||
min-width: 756px;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
#share-container[loading] {
|
||||
background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
|
||||
}
|
||||
#share-container > browser {
|
||||
transition: opacity 150ms ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
#share-container[loading] > browser {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.social-share-toolbar {
|
||||
border-right: 1px solid #e2e5e8;
|
||||
background: linear-gradient(to bottom, #ffffff, #f5f7fa);
|
||||
border-bottom: 1px solid #e2e5e8;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons {
|
||||
padding: 6px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button {
|
||||
-moz-appearance: none;
|
||||
.share-provider-button {
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
|
||||
#social-share-provider-buttons > .share-provider-button:hover,
|
||||
#social-share-provider-buttons > .share-provider-button:active {
|
||||
padding: 4px;
|
||||
border: 1px solid #aeb8c1;
|
||||
box-shadow: inset 1px 1px 1px rgba(10, 31, 51, 0.1);
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
|
||||
background: linear-gradient(to bottom, rgba(230,232,234,.65), #d2d5d9);
|
||||
}
|
||||
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
|
||||
.share-provider-button > .toolbarbutton-text {
|
||||
display: none;
|
||||
}
|
||||
#social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
|
||||
.share-provider-button > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
min-height: 16px;
|
||||
max-height: 16px;
|
||||
@ -1632,52 +1632,26 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
|
||||
}
|
||||
|
||||
#social-share-panel {
|
||||
max-height: 600px;
|
||||
min-height: 100px;
|
||||
max-width: 800px;
|
||||
min-width: 300px;
|
||||
min-width: 766px;
|
||||
}
|
||||
|
||||
#share-container,
|
||||
.social-share-frame {
|
||||
background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
|
||||
width: 330px;
|
||||
height: 150px;
|
||||
/* we resize our panels dynamically, make it look nice */
|
||||
transition: height 100ms ease-out, width 100ms ease-out;
|
||||
}
|
||||
|
||||
.social-share-frame:-moz-locale-dir(ltr) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
.social-share-frame:-moz-locale-dir(rtl) {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons:-moz-locale-dir(ltr) {
|
||||
#social-share-panel > .social-share-toolbar {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
#social-share-provider-buttons:-moz-locale-dir(rtl) {
|
||||
#social-share-provider-buttons {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
/* social recommending panel */
|
||||
|
||||
@ -686,6 +686,8 @@ browser.jar:
|
||||
skin/classic/aero/browser/tabbrowser/tab-background-end@2x.png (tabbrowser/tab-background-end@2x.png)
|
||||
skin/classic/aero/browser/tabbrowser/tab-overflow-indicator.png (../shared/tabbrowser/tab-overflow-indicator.png)
|
||||
|
||||
skin/classic/aero/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png)
|
||||
|
||||
# NOTE: The following two files (tab-selected-end.svg, tab-selected-start.svg) get pre-processed in
|
||||
# Makefile.in with a non-default marker of "%" and the result of that gets packaged.
|
||||
skin/classic/aero/browser/tabbrowser/tab-selected-end.svg (tab-selected-end-aero.svg)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user