Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 19:35:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1459885 - Implement new header style and lay out labels above input fields in the new bookmarks dialog. r=mak

Browse Source 
MozReview-Commit-ID: 9FmGhfP9aDo

--HG--
extra : rebase_source : eaf2854b569ecb2e7c8012b65b3f0f9b94a47139
This commit is contained in:
Dão Gottwald 2018-05-22 12:21:52 +02:00
parent 58db006fe8
commit 2ae6b628dc
13 changed files with 172 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
browser/base/content/browser-places.js
View File

@ -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;

12
browser/base/content/browser.xul
View File

@ -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>
<label id="editBookmarkPanelTitle"/>
<description id="editBookmarkPanelDescription"/>
</vbox>
</row>
<box class="panel-header">
<label id="editBookmarkPanelTitle"/>
</box>
#include ../../components/places/content/editBookmarkPanel.inc.xul
<hbox id="editBookmarkPanelBottomButtons" pack="end">
#ifndef XP_UNIX

271
browser/components/places/content/editBookmarkPanel.inc.xul
View File

@ -3,160 +3,137 @@
<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"
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 id="editBookmarkPanelRows">
<vbox id="editBMPanel_nameRow"
collapsed="true">
<label value="&editBookmarkOverlay.name.label;"
accesskey="&editBookmarkOverlay.name.accesskey;"
control="editBMPanel_namePicker"/>
<textbox id="editBMPanel_namePicker"
onchange="gEditItemOverlay.onNamePickerChange().catch(Components.utils.reportError);"/>
</vbox>
<row id="editBMPanel_locationRow"
align="center"
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 id="editBMPanel_locationRow"
collapsed="true">
<label value="&editBookmarkOverlay.location.label;"
accesskey="&editBookmarkOverlay.location.accesskey;"
control="editBMPanel_locationField"/>
<textbox id="editBMPanel_locationField"
class="uri-element"
onchange="gEditItemOverlay.onLocationFieldChange();"/>
</vbox>
<row id="editBMPanel_folderRow"
align="center"
collapsed="true">
<label value="&editBookmarkOverlay.folder.label;"
class="editBMPanel_rowLabel"
control="editBMPanel_folderMenuList"/>
<hbox flex="1" align="center">
<menulist id="editBMPanel_folderMenuList"
class="folder-icon"
flex="1"
oncommand="gEditItemOverlay.onFolderMenuListCommand(event).catch(Components.utils.reportError);">
<menupopup>
<!-- Static item for special folders -->
<menuitem id="editBMPanel_toolbarFolderItem"
class="menuitem-iconic folder-icon"/>
<menuitem id="editBMPanel_bmRootItem"
class="menuitem-iconic folder-icon"/>
<menuitem id="editBMPanel_unfiledRootItem"
class="menuitem-iconic folder-icon"/>
<menuseparator id="editBMPanel_chooseFolderSeparator"/>
<menuitem id="editBMPanel_chooseFolderMenuItem"
label="&editBookmarkOverlay.choose.label;"
class="menuitem-iconic folder-icon"/>
<menuseparator id="editBMPanel_foldersSeparator" hidden="true"/>
</menupopup>
</menulist>
<button id="editBMPanel_foldersExpander"
class="expander-down"
tooltiptext="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
tooltiptextdown="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
</hbox>
</row>
<vbox id="editBMPanel_folderRow"
collapsed="true">
<label value="&editBookmarkOverlay.folder.label;"
control="editBMPanel_folderMenuList"/>
<hbox flex="1" align="center">
<menulist id="editBMPanel_folderMenuList"
class="folder-icon"
flex="1"
oncommand="gEditItemOverlay.onFolderMenuListCommand(event).catch(Components.utils.reportError);">
<menupopup>
<!-- Static item for special folders -->
<menuitem id="editBMPanel_toolbarFolderItem"
class="menuitem-iconic folder-icon"/>
<menuitem id="editBMPanel_bmRootItem"
class="menuitem-iconic folder-icon"/>
<menuitem id="editBMPanel_unfiledRootItem"
class="menuitem-iconic folder-icon"/>
<menuseparator id="editBMPanel_chooseFolderSeparator"/>
<menuitem id="editBMPanel_chooseFolderMenuItem"
label="&editBookmarkOverlay.choose.label;"
class="menuitem-iconic folder-icon"/>
<menuseparator id="editBMPanel_foldersSeparator" hidden="true"/>
</menupopup>
</menulist>
<button id="editBMPanel_foldersExpander"
class="expander-down"
tooltiptext="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
tooltiptextdown="&editBookmarkOverlay.foldersExpanderDown.tooltip;"
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
</hbox>
</vbox>
<row id="editBMPanel_folderTreeRow"
collapsed="true"
flex="1">
<spacer/>
<vbox flex="1">
<tree id="editBMPanel_folderTree"
flex="1"
class="placesTree"
type="places"
height="150"
minheight="150"
editable="true"
onselect="gEditItemOverlay.onFolderTreeSelect();"
disableUserActions="true"
hidecolumnpicker="true">
<treecols>
<treecol anonid="title" flex="1" primary="true" hideheader="true"/>
</treecols>
<treechildren flex="1"/>
</tree>
<vbox id="editBMPanel_folderTreeRow"
collapsed="true">
<tree id="editBMPanel_folderTree"
flex="1"
class="placesTree"
type="places"
height="150"
minheight="150"
editable="true"
onselect="gEditItemOverlay.onFolderTreeSelect();"
disableUserActions="true"
hidecolumnpicker="true">
<treecols>
<treecol anonid="title" flex="1" primary="true" hideheader="true"/>
</treecols>
<treechildren flex="1"/>
</tree>
<hbox id="editBMPanel_newFolderBox">
<button label="&editBookmarkOverlay.newFolderButton.label;"
id="editBMPanel_newFolderButton"
accesskey="&editBookmarkOverlay.newFolderButton.accesskey;"
oncommand="gEditItemOverlay.newFolder().catch(Components.utils.reportError);"/>
</hbox>
</vbox>
</row>
<hbox id="editBMPanel_newFolderBox">
<button label="&editBookmarkOverlay.newFolderButton.label;"
id="editBMPanel_newFolderButton"
accesskey="&editBookmarkOverlay.newFolderButton.accesskey;"
oncommand="gEditItemOverlay.newFolder().catch(Components.utils.reportError);"/>
</hbox>
</vbox>
<row id="editBMPanel_tagsRow"
align="center"
collapsed="true">
<label value="&editBookmarkOverlay.tags.label;"
class="editBMPanel_rowLabel"
accesskey="&editBookmarkOverlay.tags.accesskey;"
control="editBMPanel_tagsField"/>
<hbox flex="1" align="center">
<textbox id="editBMPanel_tagsField"
type="autocomplete"
flex="1"
autocompletesearch="places-tag-autocomplete"
autocompletepopup="PopupAutoComplete"
completedefaultindex="true"
tabscrolling="true"
placeholder="&editBookmarkOverlay.tagsEmptyDesc.label;"
onchange="gEditItemOverlay.onTagsFieldChange();"/>
<button id="editBMPanel_tagsSelectorExpander"
class="expander-down"
tooltiptext="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
tooltiptextdown="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
oncommand="gEditItemOverlay.toggleTagsSelector();"/>
</hbox>
</row>
<vbox id="editBMPanel_tagsRow"
collapsed="true">
<label value="&editBookmarkOverlay.tags.label;"
accesskey="&editBookmarkOverlay.tags.accesskey;"
control="editBMPanel_tagsField"/>
<hbox flex="1" align="center">
<textbox id="editBMPanel_tagsField"
type="autocomplete"
flex="1"
autocompletesearch="places-tag-autocomplete"
autocompletepopup="PopupAutoComplete"
completedefaultindex="true"
tabscrolling="true"
placeholder="&editBookmarkOverlay.tagsEmptyDesc.label;"
onchange="gEditItemOverlay.onTagsFieldChange();"/>
<button id="editBMPanel_tagsSelectorExpander"
class="expander-down"
tooltiptext="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
tooltiptextdown="&editBookmarkOverlay.tagsExpanderDown.tooltip;"
tooltiptextup="&editBookmarkOverlay.expanderUp.tooltip;"
oncommand="gEditItemOverlay.toggleTagsSelector();"/>
</hbox>
</vbox>
<row id="editBMPanel_tagsSelectorRow"
align="center"
collapsed="true">
<spacer/>
<listbox id="editBMPanel_tagsSelector"
height="150"/>
</row>
<vbox id="editBMPanel_tagsSelectorRow"
collapsed="true">
<listbox id="editBMPanel_tagsSelector"
height="150"/>
</vbox>
<row id="editBMPanel_keywordRow"
align="center"
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 id="editBMPanel_keywordRow"
collapsed="true">
<observes element="additionalInfoBroadcaster" attribute="hidden"/>
<label value="&editBookmarkOverlay.keyword.label;"
accesskey="&editBookmarkOverlay.keyword.accesskey;"
control="editBMPanel_keywordField"/>
<textbox id="editBMPanel_keywordField"
onchange="gEditItemOverlay.onKeywordFieldChange();"/>
</vbox>
<row 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 id="editBMPanel_descriptionRow"
collapsed="true">
<observes element="additionalInfoBroadcaster" attribute="hidden"/>
<label value="&editBookmarkOverlay.description.label;"
accesskey="&editBookmarkOverlay.description.accesskey;"
control="editBMPanel_descriptionField"/>
<textbox id="editBMPanel_descriptionField"
multiline="true"
rows="4"
onchange="gEditItemOverlay.onDescriptionFieldChange();"/>
</vbox>
</vbox>
<checkbox id="editBMPanel_loadInSidebarCheckbox"
collapsed="true"
@ -169,4 +146,4 @@
<!-- If the ids are changing or additional fields are being added, be sure
to sync the values in places.js -->
<broadcaster id="additionalInfoBroadcaster"/>
</vbox>
</vbox>

22
browser/themes/linux/browser.css
View File

@ -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 */

2
browser/themes/linux/jar.mn
View File

@ -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)

7
browser/themes/linux/places/editBookmark.css
View File

@ -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;

46
browser/themes/osx/browser.css
View File

@ -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

5
browser/themes/osx/places/editBookmark.css
View File

@ -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,

4
browser/themes/osx/places/organizer.css
View File

@ -304,10 +304,6 @@
color: GrayText;
}
.editBMPanel_rowLabel {
text-align: end;
}
/**
* Downloads pane
*/

5
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -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
View 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;
}

23
browser/themes/windows/browser.css
View File

@ -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 ::::: */

4
browser/themes/windows/places/editBookmark.css
View File

@ -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;