mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 19:35:51 +00:00
Bug 1459885 - Implement new header style and lay out labels above input fields in the new bookmarks dialog. r=mak
MozReview-Commit-ID: 9FmGhfP9aDo --HG-- extra : rebase_source : eaf2854b569ecb2e7c8012b65b3f0f9b94a47139
This commit is contained in:
parent
58db006fe8
commit
2ae6b628dc
@ -218,12 +218,6 @@ var StarUI = {
|
||||
return;
|
||||
}
|
||||
this._bookmarkPopupInitialized = true;
|
||||
// Move the header (star, title, button) into the grid,
|
||||
// so that it aligns nicely with the other items (bug 484022).
|
||||
let header = this._element("editBookmarkPanelHeader");
|
||||
let rows = this._element("editBookmarkPanelGrid").lastChild;
|
||||
rows.insertBefore(header, rows.firstChild);
|
||||
header.hidden = false;
|
||||
|
||||
await this._doShowEditBookmarkPanel(aNode, aAnchorElement, aPosition, aUrl);
|
||||
},
|
||||
@ -240,7 +234,6 @@ var StarUI = {
|
||||
gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle");
|
||||
|
||||
// No description; show the Done, Remove;
|
||||
this._element("editBookmarkPanelDescription").textContent = "";
|
||||
this._element("editBookmarkPanelBottomButtons").hidden = false;
|
||||
this._element("editBookmarkPanelContent").hidden = false;
|
||||
|
||||
|
@ -219,15 +219,9 @@
|
||||
tabspecific="true"
|
||||
onpopupshown="StarUI.panelShown(event);"
|
||||
aria-labelledby="editBookmarkPanelTitle">
|
||||
<row id="editBookmarkPanelHeader" align="center" hidden="true">
|
||||
<vbox align="center">
|
||||
<image id="editBookmarkPanelStarIcon"/>
|
||||
</vbox>
|
||||
<vbox>
|
||||
<box class="panel-header">
|
||||
<label id="editBookmarkPanelTitle"/>
|
||||
<description id="editBookmarkPanelDescription"/>
|
||||
</vbox>
|
||||
</row>
|
||||
</box>
|
||||
#include ../../components/places/content/editBookmarkPanel.inc.xul
|
||||
<hbox id="editBookmarkPanelBottomButtons" pack="end">
|
||||
#ifndef XP_UNIX
|
||||
|
@ -3,40 +3,29 @@
|
||||
<label id="editBMPanel_itemsCountText"/>
|
||||
</hbox>
|
||||
|
||||
<grid id="editBookmarkPanelGrid" flex="1">
|
||||
<columns id="editBMPanel_columns">
|
||||
<column id="editBMPanel_labelColumn" />
|
||||
<column flex="1" id="editBMPanel_editColumn" />
|
||||
</columns>
|
||||
<rows id="editBMPanel_rows">
|
||||
<row id="editBMPanel_nameRow"
|
||||
align="center"
|
||||
<vbox id="editBookmarkPanelRows">
|
||||
<vbox id="editBMPanel_nameRow"
|
||||
collapsed="true">
|
||||
<label value="&editBookmarkOverlay.name.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
accesskey="&editBookmarkOverlay.name.accesskey;"
|
||||
control="editBMPanel_namePicker"/>
|
||||
<textbox id="editBMPanel_namePicker"
|
||||
onchange="gEditItemOverlay.onNamePickerChange().catch(Components.utils.reportError);"/>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_locationRow"
|
||||
align="center"
|
||||
<vbox id="editBMPanel_locationRow"
|
||||
collapsed="true">
|
||||
<label value="&editBookmarkOverlay.location.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
accesskey="&editBookmarkOverlay.location.accesskey;"
|
||||
control="editBMPanel_locationField"/>
|
||||
<textbox id="editBMPanel_locationField"
|
||||
class="uri-element"
|
||||
onchange="gEditItemOverlay.onLocationFieldChange();"/>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_folderRow"
|
||||
align="center"
|
||||
<vbox id="editBMPanel_folderRow"
|
||||
collapsed="true">
|
||||
<label value="&editBookmarkOverlay.folder.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
control="editBMPanel_folderMenuList"/>
|
||||
<hbox flex="1" align="center">
|
||||
<menulist id="editBMPanel_folderMenuList"
|
||||
@ -65,13 +54,10 @@
|
||||
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
|
||||
oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
|
||||
</hbox>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_folderTreeRow"
|
||||
collapsed="true"
|
||||
flex="1">
|
||||
<spacer/>
|
||||
<vbox flex="1">
|
||||
<vbox id="editBMPanel_folderTreeRow"
|
||||
collapsed="true">
|
||||
<tree id="editBMPanel_folderTree"
|
||||
flex="1"
|
||||
class="placesTree"
|
||||
@ -95,13 +81,10 @@
|
||||
oncommand="gEditItemOverlay.newFolder().catch(Components.utils.reportError);"/>
|
||||
</hbox>
|
||||
</vbox>
|
||||
</row>
|
||||
|
||||
<row id="editBMPanel_tagsRow"
|
||||
align="center"
|
||||
<vbox id="editBMPanel_tagsRow"
|
||||
collapsed="true">
|
||||
<label value="&editBookmarkOverlay.tags.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
accesskey="&editBookmarkOverlay.tags.accesskey;"
|
||||
control="editBMPanel_tagsField"/>
|
||||
<hbox flex="1" align="center">
|
||||
@ -121,42 +104,36 @@
|
||||
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
|
||||
oncommand="gEditItemOverlay.toggleTagsSelector();"/>
|
||||
</hbox>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_tagsSelectorRow"
|
||||
align="center"
|
||||
<vbox id="editBMPanel_tagsSelectorRow"
|
||||
collapsed="true">
|
||||
<spacer/>
|
||||
<listbox id="editBMPanel_tagsSelector"
|
||||
height="150"/>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_keywordRow"
|
||||
align="center"
|
||||
<vbox id="editBMPanel_keywordRow"
|
||||
collapsed="true">
|
||||
<observes element="additionalInfoBroadcaster" attribute="hidden"/>
|
||||
<label value="&editBookmarkOverlay.keyword.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
accesskey="&editBookmarkOverlay.keyword.accesskey;"
|
||||
control="editBMPanel_keywordField"/>
|
||||
<textbox id="editBMPanel_keywordField"
|
||||
onchange="gEditItemOverlay.onKeywordFieldChange();"/>
|
||||
</row>
|
||||
</vbox>
|
||||
|
||||
<row id="editBMPanel_descriptionRow"
|
||||
<vbox id="editBMPanel_descriptionRow"
|
||||
collapsed="true">
|
||||
<observes element="additionalInfoBroadcaster" attribute="hidden"/>
|
||||
<label value="&editBookmarkOverlay.description.label;"
|
||||
class="editBMPanel_rowLabel"
|
||||
accesskey="&editBookmarkOverlay.description.accesskey;"
|
||||
control="editBMPanel_descriptionField"/>
|
||||
<textbox id="editBMPanel_descriptionField"
|
||||
multiline="true"
|
||||
rows="4"
|
||||
onchange="gEditItemOverlay.onDescriptionFieldChange();"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</vbox>
|
||||
</vbox>
|
||||
|
||||
<checkbox id="editBMPanel_loadInSidebarCheckbox"
|
||||
collapsed="true"
|
||||
|
@ -400,28 +400,8 @@ notification[value="translation"] menulist > .menulist-dropmarker {
|
||||
}
|
||||
|
||||
/* Bookmarking panel */
|
||||
#editBookmarkPanelStarIcon {
|
||||
list-style-image: url("chrome://browser/skin/bookmark.svg");
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--toolbarbutton-icon-fill-attention);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
#editBookmarkPanelTitle {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#editBookmarkPanelHeader,
|
||||
#editBookmarkPanelContent {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
|
||||
#editBMPanel_folderTree {
|
||||
min-width: 27em;
|
||||
}
|
||||
%include ../shared/places/editBookmarkPanel.inc.css
|
||||
|
||||
/* Content area */
|
||||
|
||||
|
@ -32,7 +32,7 @@ browser.jar:
|
||||
skin/classic/browser/places/allBookmarks.png (places/allBookmarks.png)
|
||||
skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png)
|
||||
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
|
||||
* skin/classic/browser/places/editBookmark.css (places/editBookmark.css)
|
||||
skin/classic/browser/places/editBookmark.css (places/editBookmark.css)
|
||||
skin/classic/browser/places/livemark-item.png (places/livemark-item.png)
|
||||
* skin/classic/browser/places/places.css (places/places.css)
|
||||
skin/classic/browser/places/organizer.css (places/organizer.css)
|
||||
|
@ -1,8 +1,11 @@
|
||||
%if 0
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
%endif
|
||||
|
||||
#editBookmarkPanelRows > vbox {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/**** folder menulist ****/
|
||||
.folder-icon > .menulist-label-box > .menulist-icon {
|
||||
width: 16px;
|
||||
|
@ -388,33 +388,12 @@ html|input.urlbar-input {
|
||||
margin-bottom: -26px;
|
||||
}
|
||||
|
||||
/* BOOKMARKING PANEL */
|
||||
#editBookmarkPanelStarIcon {
|
||||
list-style-image: url("chrome://browser/skin/bookmark.svg");
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--toolbarbutton-icon-fill-attention);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 4px;
|
||||
}
|
||||
/* Bookmarking panel */
|
||||
|
||||
#editBookmarkPanelTitle {
|
||||
font-size: 130%;
|
||||
font-weight: bold;
|
||||
}
|
||||
%include ../shared/places/editBookmarkPanel.inc.css
|
||||
|
||||
#editBMPanel_rows > row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#editBMPanel_rows > row:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**** Input elements ****/
|
||||
|
||||
#editBMPanel_rows > row > textbox,
|
||||
#editBMPanel_rows > row > hbox > textbox {
|
||||
#editBookmarkPanelRows > vbox > textbox,
|
||||
#editBookmarkPanelRows > vbox > hbox > textbox {
|
||||
-moz-appearance: none;
|
||||
background: linear-gradient(#fafafa, #fff);
|
||||
background-clip: padding-box;
|
||||
@ -426,15 +405,12 @@ html|input.urlbar-input {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
#editBMPanel_rows > row > textbox[focused="true"],
|
||||
#editBMPanel_rows > row > hbox > textbox[focused="true"] {
|
||||
#editBookmarkPanelRows > vbox > textbox[focused="true"],
|
||||
#editBookmarkPanelRows > vbox > hbox > textbox[focused="true"] {
|
||||
border-color: -moz-mac-focusring !important;
|
||||
box-shadow: var(--focus-ring-box-shadow);
|
||||
}
|
||||
|
||||
/**** HUD style buttons ****/
|
||||
|
||||
.editBookmarkPanelHeaderButton,
|
||||
.editBookmarkPanelBottomButton {
|
||||
@hudButton@
|
||||
margin: 0;
|
||||
@ -442,12 +418,10 @@ html|input.urlbar-input {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.editBookmarkPanelHeaderButton:hover:active,
|
||||
.editBookmarkPanelBottomButton:hover:active {
|
||||
@hudButtonPressed@
|
||||
}
|
||||
|
||||
.editBookmarkPanelHeaderButton:-moz-focusring,
|
||||
.editBookmarkPanelBottomButton:-moz-focusring {
|
||||
box-shadow: var(--focus-ring-box-shadow);
|
||||
}
|
||||
@ -456,10 +430,6 @@ html|input.urlbar-input {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
#editBookmarkPanelHeader {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.editBookmarkPanelBottomButton:last-child {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
@ -634,10 +604,6 @@ html|input.urlbar-input {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.editBMPanel_rowLabel {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
/* ----- SIDEBAR ELEMENTS ----- */
|
||||
|
||||
%include ../shared/sidebar.inc.css
|
||||
|
@ -2,8 +2,9 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
#editBookmarkPanelRows > vbox {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/**** folder menulist ****/
|
||||
.folder-icon > .menulist-label-box > .menulist-icon,
|
||||
|
@ -304,10 +304,6 @@
|
||||
color: GrayText;
|
||||
}
|
||||
|
||||
.editBMPanel_rowLabel {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
/**
|
||||
* Downloads pane
|
||||
*/
|
||||
|
@ -1505,9 +1505,12 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-header > .subviewbutton-back + label {
|
||||
/* Add the size of the back button to center properly. */
|
||||
margin-inline-end: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-header > .subviewbutton-back {
|
||||
|
20
browser/themes/shared/places/editBookmarkPanel.inc.css
Normal file
20
browser/themes/shared/places/editBookmarkPanel.inc.css
Normal file
@ -0,0 +1,20 @@
|
||||
%if 0
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
%endif
|
||||
|
||||
#editBookmarkPanel > .panel-arrowcontainer > .panel-arrowcontent {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#editBookmarkPanelBottomButtons,
|
||||
#editBookmarkPanelRows {
|
||||
padding: var(--arrowpanel-padding);
|
||||
}
|
||||
|
||||
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
|
||||
#editBMPanel_folderTree {
|
||||
min-width: 27em;
|
||||
}
|
||||
|
@ -636,28 +636,7 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
|
||||
|
||||
/* bookmarking panel */
|
||||
|
||||
#editBookmarkPanelStarIcon {
|
||||
list-style-image: url("chrome://browser/skin/bookmark.svg");
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--toolbarbutton-icon-fill-attention);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
#editBookmarkPanelTitle {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#editBookmarkPanelHeader,
|
||||
#editBookmarkPanelContent {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
|
||||
#editBMPanel_folderTree {
|
||||
min-width: 27em;
|
||||
}
|
||||
%include ../shared/places/editBookmarkPanel.inc.css
|
||||
|
||||
/* ::::: content area ::::: */
|
||||
|
||||
|
@ -2,6 +2,10 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
#editBookmarkPanelRows > vbox {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
/**** folder menulist ****/
|
||||
.folder-icon > .menulist-label-box > .menulist-icon {
|
||||
width: 16px;
|
||||
|
Loading…
Reference in New Issue
Block a user