Bug 1466055 - Style the EditContactPanel buttons like the FX panel footer buttons. r=aceman
authorRichard Marti <richard.marti@gmail.com>
Sat, 19 May 2018 19:27:51 +0200
changeset 33776 e43bbffbc0c32c80a84432467c161fb83eeae244
parent 33775 57b3ea524f1df2ba4ed65b55a17413fbec194d07
child 33777 6066121e0a2a10be4450569f2461f1c6dfc66b46
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersaceman
bugs1466055
Bug 1466055 - Style the EditContactPanel buttons like the FX panel footer buttons. r=aceman
mail/base/content/editContactPanel.inc
mail/base/content/editContactPanel.js
mail/locales/en-US/chrome/messenger/editContactOverlay.dtd
mail/themes/linux/mail/editContactPanel.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/editContactPanel.css
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/compacttheme.css
mail/themes/windows/mail/editContactPanel.css
mail/themes/windows/mail/messenger.css
--- a/mail/base/content/editContactPanel.inc
+++ b/mail/base/content/editContactPanel.inc
@@ -17,24 +17,20 @@
         # quirky old past where setConsumeRollupEvent(PopupBoxObject.ROLLUP_CONSUME)
         # was used.
         consumeoutsideclicks="true"
 #endif
         aria-labelledby="editContactPanelTitle"
         onpopuphidden="editContactInlineUI.onPopupHidden(event);"
         onpopupshown="editContactInlineUI.onPopupShown(event);"
         onkeypress="editContactInlineUI.onKeyPress(event, true);">
-  <hbox flex="1" align="center">
+  <hbox id="editContactHeader"
+        flex="1" align="center">
     <image id="editContactPanelIcon"/>
     <label id="editContactPanelTitle" flex="1"/>
-    <button id="editContactPanelDeleteContactButton"
-            label="&editContactPanelDeleteContact.label;"
-            accesskey="&editContactPanelDeleteContact.accesskey;"
-            oncommand="editContactInlineUI.deleteContact();"
-            onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
   </hbox>
 
   <vbox id="editContactContent">
     <grid id="editContactGrid" flex="1">
       <columns>
         <column/>
         <column flex="1"/>
       </columns>
@@ -71,40 +67,42 @@
           <hbox/>
           <description id="contactMoveDisabledText"
                         collapsed="true">&contactMoveDisabledWarning.description;</description>
         </row>
       </rows>
     </grid>
   </vbox>
 
-  <vbox>
-    <hbox flex="1" id="editContactPanelBottomButtons">
-      <button id="editContactPanelEditDetailsButton"
-              oncommand="editContactInlineUI.editDetails();"
-              onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
-      <spacer flex="1"/>
-#ifndef XP_UNIX
-      <button id="editContactPanelDoneButton"
-              label="&editContactPanelDone.label;"
-              accesskey="&editContactPanelDone.accesskey;" default="true"
-              oncommand="editContactInlineUI.saveChanges();"
-              onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
-      <button id="editContactPanelCancelButton"
-              label="&editContactPanelCancel.label;"
-              accesskey="&editContactPanelCancel.accesskey;"
-              oncommand="editContactInlineUI.panel.hidePopup();"
-              onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
-#else
-      <button id="editContactPanelCancelButton"
-              label="&editContactPanelCancel.label;"
-              accesskey="&editContactPanelCancel.accesskey;"
-              oncommand="editContactInlineUI.panel.hidePopup();"
-              onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
-      <button id="editContactPanelDoneButton"
-              label="&editContactPanelDone.label;"
-              accesskey="&editContactPanelDone.accesskey;" default="true"
-              oncommand="editContactInlineUI.saveChanges();"
-              onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
+  <hbox flex="1"
+        id="editContactPanelBottomButtons">
+    <button id="editContactPanelEditDetailsButton"
+            class="editContactPanelButton"
+            flex="1"
+            oncommand="editContactInlineUI.editDetails();"
+            onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
+#ifdef XP_WIN
+    <button id="editContactPanelDoneButton"
+            class="editContactPanelButton"
+            flex="1"
+            label="&editContactPanelDone.label;"
+            accesskey="&editContactPanelDone.accesskey;" default="true"
+            oncommand="editContactInlineUI.saveChanges();"
+            onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
 #endif
-    </hbox>
-  </vbox>
+    <button id="editContactPanelDeleteContactButton"
+            class="editContactPanelButton"
+            flex="1"
+            label="&editContactPanelDeleteContact.label;"
+            accesskey="&editContactPanelDeleteContact.accesskey;"
+            oncommand="editContactInlineUI.deleteContact();"
+            onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
+#ifdef XP_UNIX
+    <button id="editContactPanelDoneButton"
+            class="editContactPanelButton"
+            flex="1"
+            label="&editContactPanelDone.label;"
+            accesskey="&editContactPanelDone.accesskey;" default="true"
+            oncommand="editContactInlineUI.saveChanges();"
+            onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
+#endif
+  </hbox>
 </panel>
--- a/mail/base/content/editContactPanel.js
+++ b/mail/base/content/editContactPanel.js
@@ -102,20 +102,16 @@ var editContactInlineUI = {
     // Update the labels accordingly.
     document.getElementById("editContactPanelTitle").value =
       bundle.getString(type + "Title");
     document.getElementById("editContactPanelEditDetailsButton").label =
       bundle.getString(type + "DetailsLabel");
     document.getElementById("editContactPanelEditDetailsButton").accessKey =
       bundle.getString(type + "DetailsAccessKey");
 
-    // We don't need a cancel button for a read only card.
-    document.getElementById("editContactPanelCancelButton").hidden =
-      !this._writeable;
-
     // We don't need a delete button for a read only card.
     document.getElementById("editContactPanelDeleteContactButton").hidden =
       !this._writeable;
 
     var nameElement = document.getElementById("editContactName");
 
     // Set these to read only if we can't write to the directory.
     if (this._writeable) {
--- a/mail/locales/en-US/chrome/messenger/editContactOverlay.dtd
+++ b/mail/locales/en-US/chrome/messenger/editContactOverlay.dtd
@@ -9,15 +9,12 @@
 <!ENTITY editContactName.accesskey "N">
 
 <!ENTITY editContactEmail.label "Email:">
 <!ENTITY editContactEmail.accesskey "E">
 
 <!ENTITY editContactAddressBook.label "Address Book:">
 <!ENTITY editContactAddressBook.accesskey "A">
 
-<!ENTITY editContactPanelCancel.label "Cancel">
-<!ENTITY editContactPanelCancel.accesskey "C">
-
 <!ENTITY editContactPanelDone.label "Done">
 <!ENTITY editContactPanelDone.accesskey "D">
 
 <!ENTITY contactMoveDisabledWarning.description "You can't change the address book because the contact is in a mailing list.">
--- a/mail/themes/linux/mail/editContactPanel.css
+++ b/mail/themes/linux/mail/editContactPanel.css
@@ -8,16 +8,25 @@
 .editContactPanel_rowLabel {
   text-align: end;
 }
 
 #editContactPanel {
   margin-inline-start: 0;
 }
 
+#editContactPanel .panel-arrowcontent {
+  padding: 0;
+}
+
+#editContactHeader {
+  padding: 10px;
+  border-bottom: 1px solid var(--panel-separator-color)
+}
+
 #editContactPanelIcon {
   list-style-image: url("chrome://messenger/skin/icons/starred.svg");
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   width: 40px;
   height: 40px;
   min-height: 40px;
   margin: 4px;
@@ -26,34 +35,29 @@
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
 #editContactContent {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  padding: 20px 10px;
 }
 
 #editContactEmail {
   min-width: 20em;
 }
 
 #contactMoveDisabledText {
   margin-top: 8px;
   margin-bottom: 5px;
   width: 20em;
 }
 
-#editContactAddressBookList[disabled="true"] {
-  color: GrayText !important;
-}
-
 .editContactTextbox {
   -moz-appearance: none;
   cursor: text;
   margin: 1px 4px;
   background-color: -moz-Field;
   border-radius: 3px;
   border: 1px solid ThreeDShadow;
   padding: 3px 6px;
@@ -64,12 +68,70 @@
 }
 
 .editContactTextbox[readonly="true"] {
   border-color: transparent;
   background-color: inherit;
   color: inherit;
 }
 
-/* align with textbox and menulist */
-button {
+#editContactPanel button,
+#editContactPanel menulist {
   margin-inline-end: 4px;
+  min-height: 24px;
+  -moz-appearance: none;
+  background-color: var(--arrowpanel-dimmed);
+  background-image: none;
+  border: 1px solid;
+  border-color: var(--panel-separator-color) !important;
+  box-shadow: none;
+  color: inherit;
 }
+
+#editContactPanel button:hover,
+#editContactPanel menulist:not([disabled="true"]):not([open="true"]):hover {
+  background-image: linear-gradient(var(--arrowpanel-dimmed),
+                                    var(--arrowpanel-dimmed));
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editContactPanel button:hover:active,
+#editContactPanel menulist[open="true"] {
+  background-image: linear-gradient(var(--arrowpanel-dimmed-further),
+                                    var(--arrowpanel-dimmed-further));
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+#editContactPanel .editContactPanelButton {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  min-height: 41px;
+  border-width: 0;
+  border-top-width: 1px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  background-color: #0996f8;
+  color: white;
+}
+
+#editContactPanel .editContactPanelButton[default]:hover {
+  background-image: linear-gradient(#0675d3, #0675d3);
+}
+
+#editContactPanel .editContactPanelButton[default]:hover:active {
+  background-image: linear-gradient(#0568ba, #0568ba);
+}
+
+#editContactPanel .editContactPanelButton > .button-box {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+#editContactPanelBottomButtons > #editContactPanelDeleteContactButton {
+  border-inline-start-width: 1px;
+}
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -32,30 +32,34 @@
   --toolbarbutton-active-background: rgba(154, 154, 154, .5) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .3);
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(200, 200, 200, .5);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
+  --panel-separator-color: ThreeDShadow;
   --arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
   --arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
   --urlbar-popup-url-color: -moz-nativehyperlinktext;
   --urlbar-popup-action-color: -moz-nativehyperlinktext;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: 1;
+
+  --panel-separator-color: hsla(210, 4%, 10%, .14);
 }
 
 :root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
--- a/mail/themes/osx/mail/editContactPanel.css
+++ b/mail/themes/osx/mail/editContactPanel.css
@@ -8,18 +8,23 @@
 .editContactPanel_rowLabel {
   text-align: end;
 }
 
 #editContactPanel {
   margin-inline-start: 0px;
 }
 
-#editContactPanel > #editContactContent {
-  margin-top: 6px;
+#editContactPanel .panel-arrowcontent {
+  padding: 0;
+}
+
+#editContactHeader {
+  padding: 10px;
+  border-bottom: 1px solid var(--panel-separator-color)
 }
 
 #editContactPanelIcon {
   list-style-image: url("chrome://messenger/skin/icons/starred.svg");
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   width: 40px;
   height: 40px;
@@ -29,54 +34,32 @@
 
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
-#editContactEmail {
-  min-width: 20em;
+#editContactContent {
+  padding: 20px 10px;
 }
 
-/**** HUD style buttons ****/
-
-#editContactAddressBookList,
-#editContactPanel > hbox > button,
-#editContactPanelBottomButtons > button {
-  -moz-appearance: none;
-  color: #434343;
-  border-radius: 4px;
-  border: 1px solid #b5b5b5;
-  background: linear-gradient(#fff, #f2f2f2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
-              inset 0 0 1px rgba(255, 255, 255, 0.25),
-              0 1px rgba(255, 255, 255, 0.3);
-  background-clip: padding-box;
-  background-origin: padding-box;
-  padding: 2px 6px;
-  margin: 6px;
-  min-width: 79px;
-  min-height: 22px;
-}
-
-#editContactPanel > hbox > button:hover:active,
-#editContactPanelBottomButtons > button:hover:active {
-  box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
+#editContactEmail {
+  min-width: 20em;
 }
 
 #editContactAddressBookList:focus,
 #editContactPanel > hbox > button:focus,
 #editContactPanelBottomButtons > button:focus {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 #editContactAddressBookList[disabled="true"] {
-  color: GrayText !important;
+  opacity: .5;
 }
 
 #editContactAddressBookList > .menulist-dropmarker {
   -moz-appearance: none;
   display: -moz-box;
 }
 
 #editContactAddressBookList > .menulist-dropmarker > .dropmarker-icon {
@@ -108,8 +91,71 @@
   box-shadow: none;
   color: inherit;
 }
 
 #contactMoveDisabledText {
   margin-left: 8px;
   width: 20em;
 }
+
+#editContactPanel button,
+#editContactPanel menulist {
+  -moz-appearance: none;
+  margin-inline-end: 6px;
+  min-height: 22px;
+  background-color: var(--arrowpanel-dimmed);
+  background-image: none;
+  border: 1px solid;
+  border-color: var(--panel-separator-color) !important;
+  box-shadow: none;
+  color: inherit;
+}
+
+#editContactPanel button:hover,
+#editContactPanel menulist:not([disabled="true"]):not([open="true"]):hover {
+  background-image: linear-gradient(var(--arrowpanel-dimmed),
+                                    var(--arrowpanel-dimmed));
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editContactPanel button:hover:active,
+#editContactPanel menulist[open="true"] {
+  background-image: linear-gradient(var(--arrowpanel-dimmed-further),
+                                    var(--arrowpanel-dimmed-further));
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+#editContactPanel .editContactPanelButton {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  min-height: 41px;
+  border-width: 0;
+  border-top-width: 1px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  background-color: #0996f8;
+  color: white;
+}
+
+#editContactPanel .editContactPanelButton[default]:hover {
+  background-image: linear-gradient(#0675d3, #0675d3);
+}
+
+#editContactPanel .editContactPanelButton[default]:hover:active {
+  background-image: linear-gradient(#0568ba, #0568ba);
+}
+
+#editContactPanel .editContactPanelButton > .button-box {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+#editContactPanelBottomButtons > #editContactPanelDeleteContactButton {
+  border-inline-start-width: 1px;
+}
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -40,34 +40,36 @@
                                     0 1px 0 hsla(0, 0%, 0%, .05) inset,
                                     0 1px 1px hsla(0, 0%, 0%, .2) inset;
   --toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
   --toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
   --toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
-  --arrowpanel-dimmed: hsla(210, 4%, 10%, .07);
-  --arrowpanel-dimmed-further: hsla(210, 4%, 10%, .12);
+  --panel-separator-color: hsla(210, 4%, 10%, .14);
+  --arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
+  --arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 :root:-moz-window-inactive {
   --toolbar-bgcolor: -moz-mac-chrome-inactive;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: 1;
 }
 
 :root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -45,17 +45,17 @@
 }
 
 /* Style the editContactPanel textfields */
 .editContactTextbox {
   background-color: var(--lwt-toolbar-field-background-color);
   color: var(--lwt-toolbar-field-color);
 }
 .editContactTextbox:not([readonly="true"]):not([focused="true"]) {
-  border-color: var(--lwt-toolbar-field-border-color);
+  border-color: var(--panel-separator-color);
 }
 
 /* Quick-Filter-Bar */
 #quick-filter-bar:-moz-lwtheme {
   background-color: var(--lwt-accent-color);
   color: var(--lwt-text-color);
 }
 #quick-filter-bar:-moz-lwtheme-brighttext {
--- a/mail/themes/windows/mail/editContactPanel.css
+++ b/mail/themes/windows/mail/editContactPanel.css
@@ -8,16 +8,25 @@
 .editContactPanel_rowLabel {
   text-align: end;
 }
 
 #editContactPanel {
   margin-inline-start: 0;
 }
 
+#editContactPanel .panel-arrowcontent {
+  padding: 0;
+}
+
+#editContactHeader {
+  padding: 10px;
+  border-bottom: 1px solid var(--panel-separator-color)
+}
+
 #editContactPanelIcon {
   list-style-image: url("chrome://messenger/skin/icons/starred.svg");
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   width: 40px;
   height: 40px;
   min-height: 40px;
   margin: 4px;
@@ -26,18 +35,17 @@
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
 #editContactContent {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  padding: 20px 10px;
 }
 
 #editContactEmail {
   min-width: 20em;
 }
 
 .editContactTextbox {
   -moz-appearance: none;
@@ -53,20 +61,69 @@
 }
 
 .editContactTextbox[readonly="true"] {
   border-color: transparent;
   background-color: inherit;
   color: inherit;
 }
 
-#editContactAddressBookList[disabled="true"] {
-  color: grey !important;
-}
-
 #contactMoveDisabledText {
   width: 20em;
 }
 
-/* align with textbox and menulist */
-button {
+#editContactPanel button,
+#editContactPanel menulist {
   margin-inline-end: 4px;
+  -moz-appearance: none;
+  background-color: var(--arrowpanel-dimmed);
+  background-image: none;
+  border: 1px solid;
+  border-color: var(--panel-separator-color) !important;
+  box-shadow: none;
+  color: inherit;
 }
+
+#editContactPanel button:hover,
+#editContactPanel menulist:not([disabled="true"]):not([open="true"]):hover {
+  background-image: linear-gradient(var(--arrowpanel-dimmed),
+                                    var(--arrowpanel-dimmed));
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editContactPanel button:hover:active,
+#editContactPanel menulist[open="true"] {
+  background-image: linear-gradient(var(--arrowpanel-dimmed-further),
+                                    var(--arrowpanel-dimmed-further));
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+#editContactPanel .editContactPanelButton {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  min-height: 41px;
+  border-width: 0;
+  border-top-width: 1px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#editContactPanel .editContactPanelButton[default] {
+  background-color: #0996f8;
+  color: white;
+}
+
+#editContactPanel .editContactPanelButton[default]:hover {
+  background-image: linear-gradient(#0675d3, #0675d3);
+}
+
+#editContactPanel .editContactPanelButton[default]:hover:active {
+  background-image: linear-gradient(#0568ba, #0568ba);
+}
+
+#editContactPanel .editContactPanelButton > .button-box {
+  margin-left: 15px;
+  margin-right: 15px;
+}
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -33,29 +33,32 @@
   --toolbarbutton-active-background: rgba(0, 0, 0, .15);
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .15);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(0, 0, 0, .2);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
+  --panel-separator-color: ThreeDLightShadow;
   --arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
   --arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --tabs-border-color: rgba(0,0,0,.3);
     --tabline-color: #0a84ff;
 
     --toolbar-non-lwt-bgcolor: #f9f9fa;
     --toolbar-non-lwt-textcolor: #0c0c0d;
     --toolbar-non-lwt-bgimage: none;
 
+    --panel-separator-color: hsla(210,4%,10%,.14);
+
     --urlbar-popup-url-color: hsl(210, 77%, 47%);
     --urlbar-popup-action-color: hsl(178, 100%, 28%);
   }
 }
 
 @media (-moz-windows-default-theme: 0) {
   :root {
     --urlbar-popup-url-color: -moz-nativehyperlinktext;
@@ -65,19 +68,22 @@
 
 :root:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: 1;
+
+  --panel-separator-color: hsla(210, 4%, 10%, .14);
 }
 
 :root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }