Bug 1702293 - Copy bookmarks panel styles for the bookmarks dialog. r=mconley

Differential Revision: https://phabricator.services.mozilla.com/D111175

browser/components/places/content/places.css

@@ -3,22 +3,69 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @media (-moz-proton-modals) {
-.expander-up,
-.expander-down {
-  border-radius: 4px;
-  align-self: center;
+:root {
+  /* we eventually want to share this value with the bookmark panel, which is
+     currently using --arrowpanel-padding */
+  --editbookmarkdialog-padding: 1.25em;
 }
 
-#editBMPanel_tagsField {
-  margin-inline-end: 16px;
+#bookmarkpropertiesdialog #editBookmarkPanelRows > vbox {
+  padding-block: var(--editbookmarkdialog-padding) 0;
 }
 
-#editBMPanel_tagsRow > hbox {
-  display: grid;
-  grid-template-columns: 1fr auto;
+#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] {
+  margin-inline-start: 0;
+  margin-block-start: 0;
 }
+
+#bookmarkpropertiesdialog #editBookmarkPanelRows {
+  padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding);
 }
 
+#bookmarkpropertiesdialog .expander-up,
+#bookmarkpropertiesdialog .expander-down {
+  appearance: none;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin: 0;
+  margin-inline-start: 4px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+}
+
+#bookmarkpropertiesdialog .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  transform: scaleY(-1);
+}
+
+#bookmarkpropertiesdialog .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelRows > vbox > input,
+#bookmarkpropertiesdialog #editBookmarkPanelRows > vbox > hbox > input,
+#bookmarkpropertiesdialog #editBMPanel_folderMenuList {
+  margin: 0;
+}
+
+/* dialog-specific #editBookmarkPanel styles */
+
+#bookmarkpropertiesdialog #editBookmarkPanelRows {
+  padding-inline: 0;
+  margin-inline: 4px;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelRows,
+#bookmarkpropertiesdialog vbox#editBMPanel_nameRow {
+  padding-top: 0;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelRows #editBMPanel_tagsField {
+  margin-inline-end: var(--editbookmarkdialog-padding);
+}
+} /** END Proton **/
+
 tree[is="places-tree"] > treechildren::-moz-tree-cell {
   /* ensure we use the direction of the website title / url instead of the
    * browser locale */
@@ -50,10 +97,8 @@ tree[is="places-tree"] > treechildren::-moz-tree-cell {
 }
 
 .caption-label {
-  font-size: 10px;
+  font-size: 0.9em;
   line-height: 12px;
   margin: 2px 4px;
-  color: #5B5B66;
-  /* Text should span all columns */
-  grid-column: 1/-1;
+  color: currentColor;
 }

browser/themes/osx/places/editBookmark.css

@@ -27,6 +27,7 @@
 
 /**** expanders ****/
 
+@media not (-moz-proton-modals) {
 .expander-up,
 .expander-down {
   margin-block: 0 1px;
@@ -43,6 +44,7 @@
   appearance: auto;
   -moz-default-appearance: -moz-mac-disclosure-button-closed;
 }
+} /** END not Proton **/
 
 #editBMPanel_folderTree {
   margin: 6px 4px 0;

browser/themes/osx/places/organizer.css

@@ -182,3 +182,22 @@
 #clearDownloadsButton > .toolbarbutton-icon {
   display: none;
 }
+
+/**** expanders ****/
+
+.expander-up,
+.expander-down {
+  margin-block: 0 1px;
+  margin-inline: 8px 4px;
+  padding: 0;
+}
+
+.expander-up {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-open;
+}
+
+.expander-down {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-closed;
+}

browser/themes/windows/places/editBookmark.css

@@ -27,6 +27,7 @@
 
 /* Expanders */
 
+@media not (-moz-proton-modals) {
 .expander-up,
 .expander-down {
   min-width: 0;
@@ -46,6 +47,7 @@
 .expander-down > .button-box {
   padding: 0;
 }
+} /** END not Proton **/
 
 #editBMPanel_folderTree {
   margin-block: 2px;

browser/themes/windows/places/organizer.css

@@ -300,3 +300,25 @@
     color: var(--organizer-text-primary-color);
   }
 }
+
+/* expanders */
+
+.expander-up,
+.expander-down {
+  min-width: 0;
+  padding: 1px;
+  margin: 0;
+  margin-inline-end: 4px;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.expander-up {
+  transform: scaleY(-1);
+}
+
+.expander-up > .button-box,
+.expander-down > .button-box {
+  padding: 0;
+}

toolkit/themes/shared/in-content/common.inc.css

@@ -578,11 +578,16 @@ html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [t
 html|textarea {
   font-family: inherit;
   font-size: inherit;
-  padding: 5px 8px;
+  padding: 8px;
   margin: 2px 4px;
 }
 
 @media not (-moz-proton) {
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+html|textarea {
+  padding: 5px 8px;
+}
+
 html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):enabled:not(:focus):hover,
 html|textarea:enabled:not(:focus):hover,
 xul|search-textbox:not([disabled="true"], [focused]):hover {