Bug 1459885 - Implement new header style and lay out labels above input fields in the new bookmarks dialog. r?mak draft
authorDão Gottwald <dao@mozilla.com>
Tue, 22 May 2018 12:21:52 +0200
changeset 798069 e64d7bb9208ca3a0b07bd1d399810989c6fe4731
parent 798068 f85be0c4f0562ea59a91000883e0e7848491837c
push id110660
push userdgottwald@mozilla.com
push dateTue, 22 May 2018 10:22:26 +0000
reviewersmak
bugs1459885
milestone62.0a1
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;