Bug 1832348 - Part 1: Replace .panel-footer with moz-button-group in editBookmarkPanel r=hjones,dao

Differential Revision: https://phabricator.services.mozilla.com/D181285
This commit is contained in:
ganna 2023-08-30 17:35:38 +00:00
parent 9b1b5b5349
commit fffedee9ef
4 changed files with 25 additions and 28 deletions

View File

@ -55,6 +55,7 @@ var StarUI = {
delete this.panel;
this._createPanelIfNeeded();
var element = this._element("editBookmarkPanel");
window.ensureCustomElements("moz-button-group");
// initially the panel is hidden
// to avoid impacting startup / new window performance
element.hidden = false;

View File

@ -187,30 +187,19 @@
data-l10n-id="bookmark-panel-show-editor-checkbox"
oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
</vbox>
<hbox id="editBookmarkPanelBottomButtons"
<html:moz-button-group
class="panel-footer"
data-l10n-id="bookmark-panel"
data-l10n-attrs="style">
#ifndef XP_UNIX
<button id="editBookmarkPanelDoneButton"
class="editBookmarkPanelBottomButton"
class="panel-footer-button"
data-l10n-id="bookmark-panel-save-button"
default="true"
oncommand="StarUI.panel.hidePopup();"/>
<button id="editBookmarkPanelRemoveButton"
class="editBookmarkPanelBottomButton"
class="panel-footer-button"
oncommand="StarUI.removeBookmarkButtonCommand();"/>
#else
<button id="editBookmarkPanelRemoveButton"
class="editBookmarkPanelBottomButton"
oncommand="StarUI.removeBookmarkButtonCommand();"/>
<button id="editBookmarkPanelDoneButton"
class="editBookmarkPanelBottomButton"
data-l10n-id="bookmark-panel-save-button"
default="true"
oncommand="StarUI.panel.hidePopup();"/>
#endif
</hbox>
</html:moz-button-group>
</vbox>
</panel>
</html:template>

View File

@ -99,10 +99,6 @@
opacity: 0.7;
}
#editBookmarkPanelBottomButtons > button {
margin-top: 0;
}
#editBookmarkPanel .expander-up > .button-box > .button-text,
#editBookmarkPanel .expander-down > .button-box > .button-text {
display: none;

View File

@ -189,13 +189,17 @@ button.text-link .button-text {
/* Panel footer buttons */
.panel-footer {
.panel-footer:not(moz-button-group) {
display: flex;
justify-content: flex-end;
}
.panel-footer {
margin: 8px 16px 16px;
}
.panel-footer > button {
.panel-footer > button,
.panel-footer-button {
appearance: none;
border: 0;
border-radius: 4px;
@ -208,33 +212,40 @@ button.text-link .button-text {
margin-bottom: 0;
}
.panel-footer > button[disabled] {
.panel-footer > button[disabled],
.panel-footer-button[disabled] {
opacity: 0.4;
}
.panel-footer > button:focus-visible {
.panel-footer > button:focus-visible,
.panel-footer-button:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.panel-footer > button:not([disabled]):hover {
.panel-footer > button:not([disabled]):hover,
.panel-footer-button:not([disabled]):hover {
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
}
.panel-footer > button:not([disabled]):hover:active {
.panel-footer > button:not([disabled]):hover:active,
.panel-footer-button:not([disabled]):hover:active {
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
}
.panel-footer > button:not([disabled])[default] {
.panel-footer > button:not([disabled])[default],
.panel-footer-button:not([disabled])[default] {
color: var(--button-primary-color);
background-color: var(--button-primary-bgcolor);
}
.panel-footer > button:not([disabled])[default]:hover {
.panel-footer > button:not([disabled])[default]:hover,
.panel-footer-button:not([disabled])[default]:hover {
background-color: var(--button-primary-hover-bgcolor);
}
.panel-footer > button:not([disabled])[default]:hover:active {
.panel-footer > button:not([disabled])[default]:hover:active,
.panel-footer-button:not([disabled])[default]:hover:active {
background-color: var(--button-primary-active-bgcolor);
}