Bug 1459885 - Implement new header style and lay out labels above input fields in the new bookmarks dialog. r=mak
authorDão Gottwald <dao@mozilla.com>
Tue, 22 May 2018 12:21:52 +0200
changeset 419349 11f29bd57a65909d20fdf96677ba95596c953f89
parent 419348 ef4f9baee078151c09dc59dd2b38be8fef40498c
child 419472 36f53876b1394117627154d711973da14a1d0163
push id64330
push userdgottwald@mozilla.com
push dateWed, 23 May 2018 09:11:27 +0000
treeherderautoland@11f29bd57a65 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1459885
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1459885 - Implement new header style and lay out labels above input fields in the new bookmarks dialog. r=mak MozReview-Commit-ID: 9FmGhfP9aDo
browser/base/content/browser-places.js
browser/base/content/browser.xul
browser/components/places/content/editBookmarkPanel.inc.xul
browser/themes/linux/browser.css
browser/themes/linux/jar.mn
browser/themes/linux/places/editBookmark.css
browser/themes/osx/browser.css
browser/themes/osx/places/editBookmark.css
browser/themes/osx/places/organizer.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/places/editBookmarkPanel.inc.css
browser/themes/windows/browser.css
browser/themes/windows/places/editBookmark.css
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -213,39 +213,32 @@ var StarUI = {
     this._isNewBookmark = aIsNewBookmark;
     this._itemGuids = null;
 
     if (this._bookmarkPopupInitialized) {
       await this._doShowEditBookmarkPanel(aNode, aAnchorElement, aPosition, aUrl);
       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);
   },
 
   async _doShowEditBookmarkPanel(aNode, aAnchorElement, aPosition, aUrl) {
     if (this.panel.state != "closed")
       return;
 
     this._blockCommands(); // un-done in the popuphidden handler
 
     this._element("editBookmarkPanelTitle").value =
       this._isNewBookmark ?
         gNavigatorBundle.getString("editBookmarkPanel.pageBookmarkedTitle") :
         gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle");
 
     // No description; show the Done, Remove;
-    this._element("editBookmarkPanelDescription").textContent = "";
     this._element("editBookmarkPanelBottomButtons").hidden = false;
     this._element("editBookmarkPanelContent").hidden = false;
 
     // The label of the remove button differs if the URI is bookmarked
     // multiple times.
     this._itemGuids = [];
 
     await PlacesUtils.bookmarks.fetch({url: aUrl},
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -214,25 +214,19 @@
     <panel id="editBookmarkPanel"
            type="arrow"
            orient="vertical"
            ignorekeys="true"
            hidden="true"
            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
         <button id="editBookmarkPanelDoneButton"
                 class="editBookmarkPanelBottomButton"
                 label="&editBookmark.done.label;"
                 default="true"
                 oncommand="StarUI.panel.hidePopup();"/>
--- a/browser/components/places/content/editBookmarkPanel.inc.xul
+++ b/browser/components/places/content/editBookmarkPanel.inc.xul
@@ -1,172 +1,149 @@
 <vbox id="editBookmarkPanelContent" flex="1">
   <hbox id="editBMPanel_selectionCount" pack="center">
     <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"
             label="&editBookmarkOverlay.loadInSidebar.label;"
             accesskey="&editBookmarkOverlay.loadInSidebar.accesskey;"
             oncommand="gEditItemOverlay.onLoadInSidebarCheckboxCommand();">
     <observes element="additionalInfoBroadcaster" attribute="hidden"/>
   </checkbox>
 
   <!-- If the ids are changing or additional fields are being added, be sure
        to sync the values in places.js -->
   <broadcaster id="additionalInfoBroadcaster"/>
-</vbox>
\ No newline at end of file
+</vbox>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -395,38 +395,18 @@ notification[value="translation"] menuli
 .ac-separator,
 .ac-url,
 .ac-action,
 .ac-tags {
   font-size: 0.9em;
 }
 
 /* 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 */
 
 %include ../shared/sidebar.inc.css
 
 #sidebar-box {
   background-color: -moz-Field;
   color: -moz-FieldText;
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -27,17 +27,17 @@ browser.jar:
   skin/classic/browser/feeds/feedIcon16.png           (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css            (feeds/subscribe.css)
   skin/classic/browser/notification-icons/geo-blocked.svg  (notification-icons/geo-blocked.svg)
   skin/classic/browser/notification-icons/geo-detailed.svg (notification-icons/geo-detailed.svg)
   skin/classic/browser/notification-icons/geo.svg          (notification-icons/geo.svg)
   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)
   skin/classic/browser/places/organizer.xml           (places/organizer.xml)
   skin/classic/browser/places/tag.png                 (places/tag.png)
   skin/classic/browser/places/toolbarDropMarker.png   (places/toolbarDropMarker.png)
   skin/classic/browser/places/unsortedBookmarks.png   (places/unsortedBookmarks.png)
   skin/classic/browser/places/downloads.png           (places/downloads.png)
--- a/browser/themes/linux/places/editBookmark.css
+++ b/browser/themes/linux/places/editBookmark.css
@@ -1,13 +1,16 @@
-%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;
   height: 16px;
 }
 
 .folder-icon > .menu-iconic-left {
   display: -moz-box;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -383,88 +383,58 @@ html|input.urlbar-input {
 }
 
 #BMB_bookmarksPopup[side="left"],
 #BMB_bookmarksPopup[side="right"] {
   margin-top: -26px;
   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;
-}
-
-#editBMPanel_rows > row {
-  margin-bottom: 8px;
-}
+%include ../shared/places/editBookmarkPanel.inc.css
 
-#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;
   border-radius: 3px;
   border: 1px solid rgba(0,0,0,.3) !important;
   box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
               0 1px rgba(255,255,255,.3);
   margin: 0;
   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;
   min-width: 82px;
   min-height: 22px;
 }
 
-.editBookmarkPanelHeaderButton:hover:active,
 .editBookmarkPanelBottomButton:hover:active {
   @hudButtonPressed@
 }
 
-.editBookmarkPanelHeaderButton:-moz-focusring,
 .editBookmarkPanelBottomButton:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 .editBookmarkPanelBottomButton[default="true"] {
   background-color: #666;
 }
 
-#editBookmarkPanelHeader {
-  margin-bottom: 6px;
-}
-
 .editBookmarkPanelBottomButton:last-child {
   margin-inline-start: 8px;
 }
 
 /* The following elements come from editBookmarkPanel.inc.xul. Styling that's
    specific to the editBookmarkPanel should be in browser.css. Styling that
    should be shared by all editBookmarkPanel.inc.xul consumers should be in
    editBookmark.css. */
@@ -629,20 +599,16 @@ html|input.urlbar-input {
   }
 }
 
 #editBMPanel_tagsField > .textbox-input-box > html|*.textbox-input::placeholder {
   opacity: 1.0;
   color: #bbb;
 }
 
-.editBMPanel_rowLabel {
-  text-align: end;
-}
-
 /* ----- SIDEBAR ELEMENTS ----- */
 
 %include ../shared/sidebar.inc.css
 
 #sidebar-box {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
   /* Default font size is 11px on mac, so this is 12px */
--- a/browser/themes/osx/places/editBookmark.css
+++ b/browser/themes/osx/places/editBookmark.css
@@ -1,14 +1,15 @@
 /* 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/. */
 
-@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,
 .folder-icon > .menu-iconic-left > .menu-iconic-icon {
   width: 16px;
   height: 16px;
 }
 
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -299,20 +299,16 @@
   display: none;
 }
 
 #itemsCountText,
 #selectItemDescription {
   color: GrayText;
 }
 
-.editBMPanel_rowLabel {
-  text-align: end;
-}
-
 /**
  * Downloads pane
  */
 
 #clearDownloadsButton {
   list-style-image: none !important;
 }
 
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1500,19 +1500,22 @@ toolbarpaletteitem[place="menu-panel"] >
   padding: 4px;
 }
 
 .panel-header > label {
   flex: auto;
   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 {
   -moz-context-properties: fill;
   fill: var(--arrowpanel-color);
   list-style-image: url(chrome://browser/skin/arrow-left.svg);
   padding: 8px;
 }
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -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;
+}
+
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -631,38 +631,17 @@ html|*.urlbar-input:-moz-lwtheme::placeh
   :root {
     --urlbar-popup-url-color: -moz-nativehyperlinktext;
     --urlbar-popup-action-color: -moz-nativehyperlinktext;
   }
 }
 
 /* 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 ::::: */
 
 %include ../shared/sidebar.inc.css
 
 #sidebar-box {
   background-color: -moz-Field;
   color: -moz-FieldText;
--- a/browser/themes/windows/places/editBookmark.css
+++ b/browser/themes/windows/places/editBookmark.css
@@ -1,12 +1,16 @@
 /* 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/. */
 
+#editBookmarkPanelRows > vbox {
+  margin-bottom: .5em;
+}
+
 /**** folder menulist ****/
 .folder-icon > .menulist-label-box > .menulist-icon {
   width: 16px;
   height: 16px;
 }
 
 .folder-icon > .menu-iconic-left {
   display: -moz-box;