mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-03-09 04:25:38 +00:00
Bug 552526 - fennec UI - style for site menu [r=mark.finkle]
This commit is contained in:
Vivien Nicolas
parent
161530566b
commit
ea31a19961
@ -382,9 +382,6 @@ var BrowserUI = {
|
||||
// tabs
|
||||
document.getElementById("tabs").resize();
|
||||
|
||||
// Site menu
|
||||
PageActions.resize();
|
||||
|
||||
// awesomebar
|
||||
let popup = document.getElementById("popup_autocomplete");
|
||||
popup.top = this.toolbarH;
|
||||
@ -884,6 +881,8 @@ var PageActions = {
|
||||
},
|
||||
|
||||
updatePagePermissions: function updatePagePermissions() {
|
||||
this.removeItems("preferences");
|
||||
|
||||
let host = Browser.selectedBrowser.currentURI;
|
||||
let permissions = [];
|
||||
|
||||
@ -903,7 +902,7 @@ var PageActions = {
|
||||
for each(permission in permissions)
|
||||
description.push(Elements.browserBundle.getString("pageactions." + permission));
|
||||
|
||||
let node = this.appendItem(title, description.join(", "));
|
||||
let node = this.appendItem("preferences", title, description.join(", "));
|
||||
node.onclick = function(event) {
|
||||
PageActions.clearPagePermissions();
|
||||
PageActions.removeItem(node);
|
||||
@ -917,7 +916,7 @@ var PageActions = {
|
||||
continue;
|
||||
|
||||
let title = Elements.browserBundle.getString("pageactions.password.forget");
|
||||
let node = this.appendItem(title, "");
|
||||
let node = this.appendItem("preferences", title, "");
|
||||
node.onclick = function(event) {
|
||||
lm.removeLogin(login);
|
||||
PageActions.removeItem(node);
|
||||
@ -976,28 +975,27 @@ var PageActions = {
|
||||
},
|
||||
|
||||
updatePageSaveAs: function updatePageSaveAs() {
|
||||
this.removeItems("saveas");
|
||||
if (Browser.selectedBrowser.contentDocument instanceof XULDocument)
|
||||
return;
|
||||
|
||||
let strings = Elements.browserBundle;
|
||||
let node = this.appendItem(strings.getString("pageactions.saveas.pdf"), "");
|
||||
let node = this.appendItem("saveas", strings.getString("pageactions.saveas.pdf"), "");
|
||||
node.onclick = function(event) {
|
||||
PageActions._savePageAsPDF();
|
||||
}
|
||||
},
|
||||
|
||||
appendItem: function appendItem(aTitle, aDesc, aImage) {
|
||||
appendItem: function appendItem(aType, aTitle, aDesc) {
|
||||
let container = document.getElementById("pageactions-container");
|
||||
let item = document.createElement("pageaction");
|
||||
item.setAttribute("title", aTitle);
|
||||
item.setAttribute("description", aDesc);
|
||||
if (aImage)
|
||||
item.setAttribute("image", aImage);
|
||||
item.setAttribute("type", aType);
|
||||
container.appendChild(item);
|
||||
|
||||
this.resize();
|
||||
container.hidden = !container.hasChildNodes();
|
||||
|
||||
let identityContainer = document.getElementById("identity-container");
|
||||
identityContainer.setAttribute("hasmenu", "true");
|
||||
return item;
|
||||
},
|
||||
|
||||
@ -1005,34 +1003,17 @@ var PageActions = {
|
||||
let container = document.getElementById("pageactions-container");
|
||||
container.removeChild(aItem);
|
||||
|
||||
if (container.hasChildNodes())
|
||||
this.resize();
|
||||
container.hidden = !container.hasChildNodes();
|
||||
let identityContainer = document.getElementById("identity-container");
|
||||
identityContainer.setAttribute("hasmenu", container.hasChildNodes() ? "true" : "false");
|
||||
},
|
||||
|
||||
removeAllItems: function removeAllItems() {
|
||||
removeItems: function removeItems(aType) {
|
||||
let container = document.getElementById("pageactions-container");
|
||||
while(container.hasChildNodes())
|
||||
this.removeItem(container.lastChild);
|
||||
},
|
||||
|
||||
resize: function resize() {
|
||||
let container = document.getElementById("pageactions-container");
|
||||
if (container.hidden)
|
||||
return;
|
||||
|
||||
// We manually size the arrowscrollbox
|
||||
let childHeight = container.firstChild.getBoundingClientRect().height;
|
||||
let linesCount = (window.innerHeight < window.innerWidth) ? Math.round(container.childNodes.length / 2)
|
||||
: container.childNodes.length;
|
||||
|
||||
const kMargin = 64;
|
||||
let toolbarHeight = BrowserUI.toolbarH;
|
||||
let identityHeight = document.getElementById("identity-popup-container").getBoundingClientRect().height;
|
||||
let maxHeight = window.innerHeight - (toolbarHeight + identityHeight) - kMargin;
|
||||
|
||||
let additional = 50; // size of the scroll arrows + margins
|
||||
container.style.height = Math.min(maxHeight, linesCount * childHeight + additional) + "px";
|
||||
let count = container.childNodes.length;
|
||||
for (let i = count - 1; i >= 0; i--) {
|
||||
if (aType == "" || container.childNodes[i].getAttribute("type") == aType)
|
||||
this.removeItem(container.childNodes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1705,6 +1705,8 @@ const BrowserSearch = {
|
||||
},
|
||||
|
||||
updatePageSearchEngines: function() {
|
||||
PageActions.removeItems("search");
|
||||
|
||||
// Check to see whether we've already added an engine with this title in
|
||||
// the search list
|
||||
let newEngines = this._currentEngines.filter(function(element) {
|
||||
@ -1715,11 +1717,12 @@ const BrowserSearch = {
|
||||
return;
|
||||
|
||||
// XXX limit to the first search engine for now
|
||||
for (let i = 0; i<1; i++) {
|
||||
let kMaxSearchEngine = 1;
|
||||
for (let i = 0; i < kMaxSearchEngine; i++) {
|
||||
let engine = newEngines[i].engine;
|
||||
let item = PageActions.appendItem(engine.title,
|
||||
let item = PageActions.appendItem("search",
|
||||
Elements.browserBundle.getString("pageactions.search.addNew"),
|
||||
BrowserUI._favicon.src);
|
||||
engine.title);
|
||||
|
||||
item.engine = engine;
|
||||
item.onclick = function() {
|
||||
@ -2137,9 +2140,6 @@ IdentityHandler.prototype = {
|
||||
this._identityPopupContentSupp.textContent = supplemental;
|
||||
this._identityPopupContentVerif.textContent = verifier;
|
||||
|
||||
// clean all the previous result
|
||||
PageActions.removeAllItems();
|
||||
|
||||
PageActions.updatePageSaveAs();
|
||||
|
||||
// Update the search engines results
|
||||
|
||||
@ -309,7 +309,7 @@
|
||||
</vbox>
|
||||
</hbox>
|
||||
|
||||
<arrowscrollbox id="pageactions-container" orient="vertical" class="window-width" hidden="true"/>
|
||||
<hbox id="pageactions-container" class="window-width" hidden="true"/>
|
||||
</vbox>
|
||||
|
||||
<vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">
|
||||
|
||||
@ -54,7 +54,6 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
/* main toolbar buttons */
|
||||
toolbarbutton.urlbar-button {
|
||||
/* space out the buttons a bit horizontally */
|
||||
@ -265,7 +264,7 @@ toolbarbutton.page-button {
|
||||
margin-right: -40px; /* big number just to make sure the image overflows the edge */
|
||||
}
|
||||
|
||||
#tool-panel-open:not([disabled="true"]):active:hover {
|
||||
#tool-panel-open:not([disabled="true"]):hover:active {
|
||||
list-style-image: url("chrome://browser/skin/images/settings-active-64.png");
|
||||
}
|
||||
|
||||
@ -780,10 +779,20 @@ box[type="documenttab"]:only-child .documenttab-close {
|
||||
-moz-box-shadow: black 0 2px 2px;
|
||||
}
|
||||
|
||||
#identity-container[hasmenu="true"] {
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
-moz-border-radius-bottomright: 8px;
|
||||
}
|
||||
|
||||
#identity-popup-container {
|
||||
padding: 8px; /* core spacing */
|
||||
}
|
||||
|
||||
#identity-container[hasmenu="true"] > #identity-popup-container {
|
||||
background-image: -moz-linear-gradient(bottom, rgb(94,95,99) 0%, rgb(54,55,59) 25%, transparent);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Popup Icons */
|
||||
#identity-popup-icon {
|
||||
padding: 0;
|
||||
@ -843,46 +852,74 @@ box[type="documenttab"]:only-child .documenttab-close {
|
||||
}
|
||||
|
||||
/* Page Actions popup ---------------------------------------------------- */
|
||||
#identity-container[hasmenu="false"] > #pageactions-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pageactions-container {
|
||||
border: 2px solid transparent;
|
||||
-moz-border-top-colors: #212429 #52555a;
|
||||
padding: 0 8px;
|
||||
background: rgb(210, 210, 210) -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(235,235,235,0.4) 90%, rgba(185,185,185,0.4) 100%);
|
||||
border: none;
|
||||
padding: 0;
|
||||
-moz-user-focus: ignore;
|
||||
}
|
||||
|
||||
#pageactions-container .scrollbox-innerbox {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#pageactions-container .autorepeatbutton-down {
|
||||
list-style-image: url(images/arrowdowndark-16.png);
|
||||
}
|
||||
|
||||
#pageactions-container .autorepeatbutton-up {
|
||||
list-style-image: url(images/arrowupdark-16.png);
|
||||
}
|
||||
|
||||
/* force the autorepeat buttons to create a 'padding' when collapsed */
|
||||
#pageactions-container autorepeatbutton[collapsed="true"],
|
||||
#pageactions-container autorepeatbutton[disabled="true"] {
|
||||
visibility: hidden;
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
-moz-border-radius-bottomright: 8px;
|
||||
}
|
||||
|
||||
pageaction {
|
||||
width: 50%;
|
||||
border-color: rgb(255,255,255) rgb(215,215,215) rgb(215,215,215) rgb(255,255,255);
|
||||
background-color: rgb(235,235,235);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: 64px;
|
||||
border-width: 10px;
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
|
||||
width :100%;
|
||||
}
|
||||
|
||||
@media all and (orientation: portrait) {
|
||||
@media all and (orientation: landscape) {
|
||||
pageaction {
|
||||
width :100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
pageaction:nth-last-child(2):not(:nth-child(even)) {
|
||||
background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
}
|
||||
|
||||
pageaction:first-child,
|
||||
pageaction:nth-child(2) {
|
||||
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
|
||||
}
|
||||
|
||||
pageaction:last-child:not(:nth-child(even)) {
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
}
|
||||
|
||||
pageaction:last-child:not(:nth-child(odd)) {
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomright: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
pageaction:active:hover {
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
|
||||
@media all and (orientation: portrait) {
|
||||
pageaction:last-child {
|
||||
-moz-border-radius-bottomleft: 8px;
|
||||
-moz-border-radius-bottomright: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
pageaction:last-child {
|
||||
background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
|
||||
}
|
||||
|
||||
pageaction:first-child {
|
||||
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
|
||||
}
|
||||
|
||||
pageaction:hover:active {
|
||||
background-image: none !important;
|
||||
background-color: #8db8d8;
|
||||
}
|
||||
|
||||
pageaction .pageaction-image {
|
||||
@ -892,16 +929,21 @@ pageaction .pageaction-image {
|
||||
}
|
||||
|
||||
pageaction:not([image]) .pageaction-image {
|
||||
width: 0px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
pageaction .pageaction-title {
|
||||
font-size: 18px !important;
|
||||
font-size: 24px !important;
|
||||
color: #414141;
|
||||
}
|
||||
|
||||
pageaction .pageaction-desc {
|
||||
font-size: 14px !important;
|
||||
color: grey;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
pageaction:hover:active .pageaction-desc {
|
||||
color: white;
|
||||
}
|
||||
|
||||
pageaction .pageaction-desc[value=""] {
|
||||
|
||||
@ -105,22 +105,6 @@
|
||||
background: url("images/leftcapSSL-active-64.png");
|
||||
}
|
||||
|
||||
pageaction {
|
||||
height: 64px;
|
||||
border-width: 10px;
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
|
||||
}
|
||||
|
||||
pageaction:active:hover {
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
|
||||
}
|
||||
|
||||
pageaction .pageaction-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
-moz-margin-end: 8px;
|
||||
}
|
||||
|
||||
#urlbar-throbber[loading] {
|
||||
list-style-image: url("chrome://browser/skin/images/throbber.png");
|
||||
}
|
||||
|
||||
@ -104,22 +104,6 @@
|
||||
background: url("images/leftcapSSL-active-36.png");
|
||||
}
|
||||
|
||||
pageaction {
|
||||
height: 36px;
|
||||
border-width: 6px;
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-36.png") 6 repeat repeat;
|
||||
}
|
||||
|
||||
pageaction:active:hover {
|
||||
-moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-36.png") 6 repeat repeat;
|
||||
}
|
||||
|
||||
pageaction .pageaction-image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
-moz-margin-end: 4px;
|
||||
}
|
||||
|
||||
#urlbar-throbber[loading] {
|
||||
list-style-image: url("chrome://browser/skin/images/throbber.png");
|
||||
}
|
||||
|
||||
@ -482,10 +482,20 @@ box[type="documenttab"]:only-child .documenttab-close {
|
||||
-moz-box-shadow: black 0 0.25mm 0.25mm;
|
||||
}
|
||||
|
||||
#identity-container[hasmenu="true"] {
|
||||
-moz-border-radius-bottomleft: 1.1mm;
|
||||
-moz-border-radius-bottomright: 1.1mm;
|
||||
}
|
||||
|
||||
#identity-popup-container {
|
||||
padding: 1.1mm; /* core spacing */
|
||||
}
|
||||
|
||||
#identity-container[hasmenu="true"] > #identity-popup-container {
|
||||
background-image: -moz-linear-gradient(bottom, rgb(94,95,99) 0%, rgb(54,55,59) 25%, transparent);
|
||||
padding-bottom: 2.2mm;
|
||||
}
|
||||
|
||||
/* Popup Body Text */
|
||||
#identity-popup-content-box {
|
||||
-moz-padding-start: 1.1mm; /* core spacing */
|
||||
@ -522,56 +532,102 @@ box[type="documenttab"]:only-child .documenttab-close {
|
||||
}
|
||||
|
||||
/* Page Actions popup ----------------------------------------------------- */
|
||||
#identity-container[hasmenu="false"] > #pageactions-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pageactions-container {
|
||||
border: 0.2mm solid transparent;
|
||||
-moz-border-top-colors: #212429 #52555a;
|
||||
padding: 0 1.1mm; /* core spacing */
|
||||
background: rgb(210, 210, 210) -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(235,235,235,0.4) 90%, rgba(185,185,185,0.4) 100%);
|
||||
border: none;
|
||||
padding: 0;
|
||||
-moz-user-focus: ignore;
|
||||
}
|
||||
|
||||
#pageactions-container .scrollbox-innerbox {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#pageactions-container .autorepeatbutton-down {
|
||||
list-style-image: url(images/arrowdowndark-16.png);
|
||||
}
|
||||
|
||||
#pageactions-container .autorepeatbutton-up {
|
||||
list-style-image: url(images/arrowupdark-16.png);
|
||||
}
|
||||
|
||||
/* force the autorepeat buttons to create a 'padding' when collapsed */
|
||||
#pageactions-container autorepeatbutton[collapsed="true"],
|
||||
#pageactions-container autorepeatbutton[disabled="true"] {
|
||||
visibility: hidden;
|
||||
-moz-border-radius-bottomleft: 1.1mm;
|
||||
-moz-border-radius-bottomright: 1.1mm;
|
||||
}
|
||||
|
||||
pageaction {
|
||||
width: 50%;
|
||||
border-color: rgb(255,255,255) rgb(215,215,215) rgb(215,215,215) rgb(255,255,255);
|
||||
background-color: rgb(235,235,235);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media all and (orientation: landscape) {
|
||||
pageaction {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
pageaction:nth-last-child(2):not(:nth-child(even)) {
|
||||
background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomleft: 1.1mm;
|
||||
}
|
||||
|
||||
pageaction:first-child,
|
||||
pageaction:nth-child(2) {
|
||||
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
|
||||
}
|
||||
|
||||
pageaction:last-child:not(:nth-child(even)) {
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomleft: 1.1mm;
|
||||
}
|
||||
|
||||
pageaction:last-child:not(:nth-child(odd)) {
|
||||
border-bottom: 1px solid #fff;
|
||||
-moz-border-radius-bottomright: 1.1mm;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (orientation: portrait) {
|
||||
pageaction {
|
||||
width :100%;
|
||||
pageaction:last-child {
|
||||
-moz-border-radius-bottomleft: 1.1mm;
|
||||
-moz-border-radius-bottomright: 1.1mm;
|
||||
}
|
||||
}
|
||||
|
||||
pageaction:last-child {
|
||||
background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
|
||||
}
|
||||
|
||||
pageaction:first-child {
|
||||
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgba(235,235,235) 90%);
|
||||
}
|
||||
|
||||
pageaction:hover:active {
|
||||
background-image: none !important;
|
||||
background-color: #8db8d8;
|
||||
}
|
||||
|
||||
pageaction .pageaction-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
-moz-margin-end: 8px;
|
||||
}
|
||||
|
||||
pageaction:not([image]) .pageaction-image {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
pageaction .pageaction-title {
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
pageaction .pageaction-desc[value=""] {
|
||||
display: none;
|
||||
color: #414141;
|
||||
}
|
||||
|
||||
pageaction .pageaction-desc {
|
||||
font-size: 8pt !important;
|
||||
color: grey;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
pageaction:hover:active .pageaction-desc {
|
||||
color: white;
|
||||
}
|
||||
|
||||
pageaction .pageaction-desc[value=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Preferences window ---------------------------------------------------- */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user