Bug 419231 - Floating scrollbar in the toolbar customization palette is funky. r=dao

This commit is contained in:
Jared Wein 2011-12-21 15:16:05 -08:00
parent 82231be752
commit 4415b05bdf
10 changed files with 70 additions and 165 deletions

View File

@ -107,10 +107,15 @@ toolbar[printpreview="true"] {
}
%endif
toolbarpaletteitem[place="palette"] > toolbaritem > hbox[type="places"] {
.bookmarks-toolbar-customize,
#wrapper-personal-bookmarks > #personal-bookmarks > #PlacesToolbar > hbox > #PlacesToolbarItems {
display: none;
}
#wrapper-personal-bookmarks[place="toolbar"] > #personal-bookmarks > #PlacesToolbar > .bookmarks-toolbar-customize {
display: -moz-box;
}
#main-window[disablechrome] #navigator-toolbox[tabsontop="true"] > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
visibility: collapse;
}

View File

@ -2,15 +2,6 @@ tree[type="places"] {
-moz-binding: url("chrome://browser/content/places/tree.xml#places-tree");
}
.bookmarks-toolbar-customize,
toolbarpaletteitem #PlacesToolbarItems {
display: none;
}
toolbarpaletteitem .bookmarks-toolbar-customize {
display: -moz-box;
}
.toolbar-drop-indicator {
position: relative;
z-index: 1;

View File

@ -148,9 +148,7 @@ toolbarbutton.bookmark-item[open="true"] {
}
#wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
width: 16px;
height: 16px;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat center;
}
.bookmarks-toolbar-customize {

View File

@ -267,9 +267,7 @@ toolbarbutton.bookmark-item > menupopup {
}
#wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
width: 16px;
height: 16px;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat center;
}
.bookmarks-toolbar-customize {

View File

@ -563,9 +563,7 @@ toolbarbutton.bookmark-item[open="true"] {
}
#wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
width: 16px;
height: 16px;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat;
background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat center;
}
.bookmarks-toolbar-customize {

View File

@ -20,8 +20,9 @@
the Initial Developer. All Rights Reserved.
Contributor(s):
David Hyatt (hyatt@apple.com)
Blake Ross (blaker@netscape.com)
David Hyatt <hyatt@apple.com>
Blake Ross <blaker@netscape.com>
Jared Wein <jwein@mozilla.com>
Alternatively, the contents of this file may be used under the terms of
either the GNU General Public License Version 2 or later (the "GPL"), or
@ -41,17 +42,27 @@
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
#palette-box {
overflow: auto;
margin: 0px 15px 10px 15px;
overflow: auto;
display: block;
min-height: 3em;
}
#palette-box > hbox > toolbarpaletteitem {
padding-top: 8px;
padding-bottom: 8px;
#palette-box > toolbarpaletteitem {
width: 110px;
height: 94px;
overflow: hidden;
display: inline-block;
}
#palette-box > hbox {
min-height: 8em;
.toolbarpaletteitem-box {
-moz-box-pack: center;
-moz-box-flex: 1;
width: 110px;
max-width: 110px;
}
toolbarpaletteitem > label {
text-align: center;
}
#main-box > box {

View File

@ -20,9 +20,10 @@
# the Initial Developer. All Rights Reserved.
#
# Contributor(s):
# David Hyatt (hyatt@apple.com)
# Blake Ross (blaker@netscape.com)
# Joe Hewitt (hewitt@netscape.com)
# David Hyatt <hyatt@apple.com>
# Blake Ross <blaker@netscape.com>
# Joe Hewitt <hewitt@netscape.com>
# Jared Wein <jwein@mozilla.com>
#
# Alternatively, the contents of this file may be used under the terms of
# either the GNU General Public License Version 2 or later (the "GPL"), or
@ -38,13 +39,12 @@
#
# ***** END LICENSE BLOCK *****
const kRowMax = 4;
var gToolboxDocument = null;
var gToolbox = null;
var gCurrentDragOverItem = null;
var gToolboxChanged = false;
var gToolboxSheet = false;
var gPaletteBox = null;
function onLoad()
{
@ -69,6 +69,7 @@ function InitWithToolbox(aToolbox)
forEachCustomizableToolbar(function (toolbar) {
toolbar.setAttribute("customizing", "true");
});
gPaletteBox = document.getElementById("palette-box");
var elts = getRootElements();
for (let i=0; i < elts.length; i++) {
@ -278,18 +279,12 @@ function createWrapper(aId, aDocument)
/**
* Wraps an item that has been cloned from a template and adds
* it to the end of a row in the palette.
* it to the end of the palette.
*/
function wrapPaletteItem(aPaletteItem, aCurrentRow, aSpacer)
function wrapPaletteItem(aPaletteItem)
{
var wrapper = createWrapper(aPaletteItem.id, document);
wrapper.setAttribute("flex", 1);
wrapper.setAttribute("align", "center");
wrapper.setAttribute("pack", "center");
wrapper.setAttribute("minheight", "0");
wrapper.setAttribute("minwidth", "0");
wrapper.appendChild(aPaletteItem);
// XXX We need to call this AFTER the palette item has been appended
@ -297,11 +292,7 @@ function wrapPaletteItem(aPaletteItem, aCurrentRow, aSpacer)
// palette due to removal of the command and disabled attributes - JRH
cleanUpItemForPalette(aPaletteItem, wrapper);
if (aSpacer)
aCurrentRow.insertBefore(wrapper, aSpacer);
else
aCurrentRow.appendChild(wrapper);
gPaletteBox.appendChild(wrapper);
}
/**
@ -345,35 +336,28 @@ function getCurrentItemIds()
function buildPalette()
{
// Empty the palette first.
var paletteBox = document.getElementById("palette-box");
while (paletteBox.lastChild)
paletteBox.removeChild(paletteBox.lastChild);
var currentRow = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"hbox");
currentRow.setAttribute("class", "paletteRow");
while (gPaletteBox.lastChild)
gPaletteBox.removeChild(gPaletteBox.lastChild);
// Add the toolbar separator item.
var templateNode = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"toolbarseparator");
templateNode.id = "separator";
wrapPaletteItem(templateNode, currentRow, null);
wrapPaletteItem(templateNode);
// Add the toolbar spring item.
templateNode = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"toolbarspring");
templateNode.id = "spring";
templateNode.flex = 1;
wrapPaletteItem(templateNode, currentRow, null);
wrapPaletteItem(templateNode);
// Add the toolbar spacer item.
templateNode = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"toolbarspacer");
templateNode.id = "spacer";
templateNode.flex = 1;
wrapPaletteItem(templateNode, currentRow, null);
var rowSlot = 3;
wrapPaletteItem(templateNode);
var currentItems = getCurrentItemIds();
templateNode = gToolbox.palette.firstChild;
@ -381,74 +365,11 @@ function buildPalette()
// Check if the item is already in a toolbar before adding it to the palette.
if (!(templateNode.id in currentItems)) {
var paletteItem = document.importNode(templateNode, true);
if (rowSlot == kRowMax) {
// Append the old row.
paletteBox.appendChild(currentRow);
// Make a new row.
currentRow = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"hbox");
currentRow.setAttribute("class", "paletteRow");
rowSlot = 0;
}
++rowSlot;
wrapPaletteItem(paletteItem, currentRow, null);
wrapPaletteItem(paletteItem);
}
templateNode = templateNode.nextSibling;
}
if (currentRow) {
fillRowWithFlex(currentRow);
paletteBox.appendChild(currentRow);
}
}
/**
* Creates a new palette item for a cloned template node and
* adds it to the last slot in the palette.
*/
function appendPaletteItem(aItem)
{
var paletteBox = document.getElementById("palette-box");
var lastRow = paletteBox.lastChild;
var lastSpacer = lastRow.lastChild;
if (lastSpacer.localName != "spacer") {
// The current row is full, so we have to create a new row.
lastRow = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"hbox");
lastRow.setAttribute("class", "paletteRow");
paletteBox.appendChild(lastRow);
wrapPaletteItem(aItem, lastRow, null);
fillRowWithFlex(lastRow);
} else {
// Decrement the flex of the last spacer or remove it entirely.
var flex = lastSpacer.getAttribute("flex");
if (flex == 1) {
lastRow.removeChild(lastSpacer);
lastSpacer = null;
} else
lastSpacer.setAttribute("flex", --flex);
// Insert the wrapper where the last spacer was.
wrapPaletteItem(aItem, lastRow, lastSpacer);
}
}
function fillRowWithFlex(aRow)
{
var remainingFlex = kRowMax - aRow.childNodes.length;
if (remainingFlex > 0) {
var spacer = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"spacer");
spacer.setAttribute("flex", remainingFlex);
aRow.appendChild(spacer);
}
}
/**
@ -471,6 +392,7 @@ function cleanUpItemForPalette(aItem, aWrapper)
var title = stringBundle.getString(aItem.localName.slice(7) + "Title");
aWrapper.setAttribute("title", title);
}
aWrapper.setAttribute("tooltiptext", aWrapper.getAttribute("title"));
// Remove attributes that screw up our appearance.
aItem.removeAttribute("command");
@ -865,48 +787,10 @@ function onToolbarDrop(aEvent)
wrapper.flex = newItem.flex;
// Remove the wrapper from the palette.
var currentRow = draggedPaletteWrapper.parentNode;
if (draggedItemId != "separator" &&
draggedItemId != "spring" &&
draggedItemId != "spacer")
{
currentRow.removeChild(draggedPaletteWrapper);
while (currentRow) {
// Pull the first child of the next row up
// into this row.
var nextRow = currentRow.nextSibling;
if (!nextRow) {
var last = currentRow.lastChild;
var first = currentRow.firstChild;
if (first == last) {
// Kill the row.
currentRow.parentNode.removeChild(currentRow);
break;
}
if (last.localName == "spacer") {
var flex = last.getAttribute("flex");
last.setAttribute("flex", ++flex);
// Reflow doesn't happen for some reason. Trigger it with a hide/show. ICK! -dwh
last.hidden = true;
last.hidden = false;
break;
} else {
// Make a spacer and give it a flex of 1.
var spacer = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"spacer");
spacer.setAttribute("flex", "1");
currentRow.appendChild(spacer);
}
break;
}
currentRow.appendChild(nextRow.firstChild);
currentRow = currentRow.nextSibling;
}
}
gPaletteBox.removeChild(draggedPaletteWrapper);
}
gCurrentDragOverItem = null;
@ -937,7 +821,7 @@ function onPaletteDrop(aEvent)
wrapperType != "spacer" &&
wrapperType != "spring") {
restoreItemForToolbar(wrapper.firstChild, wrapper);
appendPaletteItem(document.importNode(wrapper.firstChild, true));
wrapPaletteItem(document.importNode(wrapper.firstChild, true));
gToolbox.palette.appendChild(wrapper.firstChild);
}

View File

@ -38,10 +38,13 @@
#palette-box {
margin-top: 2px;
-moz-appearance: listbox;
margin: 0 0 10px;
}
#palette-box > hbox > toolbarpaletteitem {
padding: 2px;
margin: 0px;
#palette-box > toolbarpaletteitem {
padding: 8px 2px;
margin: 0 8px;
}
#main-box {

View File

@ -117,10 +117,17 @@ toolbarpaletteitem[type="spacer"] {
.toolbarpaletteitem-box[type="spacer"][place="palette"],
.toolbarpaletteitem-box[type="spring"][place="palette"] {
margin-top: 0;
margin-bottom: 2px;
height: 32px;
}
.toolbarpaletteitem-box[type="spring"][place="palette"] {
background-position: center;
margin-left: 8px;
margin-right: 8px;
}
/* ..... drag and drop feedback ..... */
toolbarpaletteitem[dragover="left"] {

View File

@ -46,3 +46,13 @@ dialog {
font-weight: bold;
font-size: larger;
}
#palette-box {
-moz-appearance: listbox;
margin: 0 0 10px;
}
#palette-box > toolbarpaletteitem {
padding: 8px 2px;
margin: 0 8px;
}