corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1932354 - Fix sidebar visual styling nits r=sidebar-reviewers,desktop-theme-reviewers,fxview-reviewers,dao,hjones,jsudiaman

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D232286
This commit is contained in:
Nikki Sharpley
2024-12-19 21:35:47 +00:00
parent 6d2274a1e9
commit e118a4fc86
14 changed files with 75 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/firefoxview/fxview-search-textbox.css
View File

@@ -27,6 +27,7 @@
bottom: 0;
margin: auto 0;
padding: 2px;
pointer-events: none;
}
.search-icon:dir(ltr) {

21
browser/components/firefoxview/fxview-tab-list.mjs
View File

@@ -694,6 +694,25 @@ export class FxviewTabRowBase extends MozLitElement {
</span>`;
}
getIconSrc(actionClass) {
let iconSrc;
switch (actionClass) {
case "delete-button":
iconSrc = "chrome://global/skin/icons/delete.svg";
break;
case "dismiss-button":
iconSrc = "chrome://global/skin/icons/close.svg";
break;
case "options-button":
iconSrc = "chrome://global/skin/icons/more.svg";
break;
default:
iconSrc = null;
break;
}
return iconSrc;
}
secondaryButtonTemplate() {
return html`${when(
this.secondaryL10nId && this.secondaryActionHandler,
@@ -713,6 +732,7 @@ export class FxviewTabRowBase extends MozLitElement {
this.currentActiveElementId === "fxview-tab-row-secondary-button"
? "0"
: "-1"}"
iconSrc=${this.getIconSrc(this.secondaryActionClass)}
></moz-button>`
)}`;
}
@@ -736,6 +756,7 @@ export class FxviewTabRowBase extends MozLitElement {
this.currentActiveElementId === "fxview-tab-row-tertiary-button"
? "0"
: "-1"}"
iconSrc=${this.getIconSrc(this.tertiaryActionClass)}
></moz-button>`
)}`;
}

16
browser/components/firefoxview/fxview-tab-row.css
View File

@@ -119,22 +119,6 @@
background-image: url("chrome://global/skin/media/audio.svg");
}
.fxview-tab-row-button.delete-button::part(button) {
background-image: url("chrome://global/skin/icons/delete.svg");
}
.fxview-tab-row-button.dismiss-button::part(button) {
background-image: url("chrome://global/skin/icons/close.svg");
-moz-context-properties: fill;
fill: currentColor;
background-repeat: no-repeat;
background-position: center;
}
.fxview-tab-row-button.options-button::part(button) {
background-image: url("chrome://global/skin/icons/more.svg");
}
.fxview-tab-row-button.undo-button::part(button) {
font-size: var(--font-size-small);
font-weight: 400;

3
browser/components/sidebar/sidebar-customize.css
View File

@@ -88,7 +88,8 @@ moz-checkbox {
#manage-settings {
display: flex;
align-items: center;
gap: var(--space-large);
gap: var(--space-small);
padding-inline-start: var(--space-medium);
}
.customize-group {

3
browser/components/sidebar/sidebar-history.css
View File

@@ -5,6 +5,7 @@
.options-container {
display: flex;
width: 100%;
align-items: center;
}
fxview-search-textbox {
@@ -12,5 +13,5 @@ fxview-search-textbox {
}
.menu-button::part(button) {
background-image: url("chrome://global/skin/icons/more.svg");
margin-inline-start: var(--space-small);
}

2
browser/components/sidebar/sidebar-history.mjs
View File

@@ -286,8 +286,8 @@ export class SidebarHistory extends SidebarPage {
aria-haspopup="menu"
aria-expanded="false"
view=${this.view}
size="small"
type="icon ghost"
iconsrc="chrome://global/skin/icons/more.svg"
>
</moz-button>
</div>

5
browser/components/sidebar/sidebar-main.css
View File

@@ -41,7 +41,6 @@
.actions-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
max-width: 100%;
overflow-x: hidden;
@@ -54,10 +53,6 @@
--button-outer-padding-inline: var(--space-medium);
--button-outer-padding-block: var(--space-xxsmall);
&::part(button) {
height: var(--tab-min-height);
}
&:first-of-type {
--button-outer-padding-block-start: var(--space-small);
}

4
browser/components/sidebar/sidebar-panel-header.css
View File

@@ -12,10 +12,6 @@
fill: currentColor;
font-size: 15px;
.header-close-button::part(button) {
background-image: url("chrome://global/skin/icons/close-12.svg");
}
h4 {
margin-block: var(--space-large);
}

22
browser/components/sidebar/sidebar-panel-header.mjs
View File

@@ -29,17 +29,17 @@ export class SidebarPanelHeader extends MozLitElement {
return html`
<link rel="stylesheet" href="chrome://browser/content/sidebar/sidebar-panel-header.css"></link>
<div class="sidebar-panel-header">
<h4 class="text-truncated-ellipsis">${this.heading}</h4>
<moz-button
class="header-close-button"
data-l10n-id="sidebar-panel-header-close-button"
@click=${this.closeSidebarPanel}
view=${this.view}
size="default"
type="icon ghost"
>
</moz-button>
</div>
<h4 class="text-truncated-ellipsis">${this.heading}</h4>
<moz-button
iconsrc="chrome://global/skin/icons/close.svg"
data-l10n-id="sidebar-panel-header-close-button"
@click=${this.closeSidebarPanel}
view=${this.view}
size="default"
type="icon ghost"
>
</moz-button>
</div>
`;
}
}

10
browser/components/sidebar/sidebar-tab-list.css
View File

@@ -2,13 +2,17 @@
* 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/. */
/* TODO: (Bug 1908692) Should be using design tokens. */
sidebar-tab-row {
border-radius: var(--border-radius-medium);
height: var(--size-item-large);
&:hover {
background-color: color-mix(in srgb, currentColor 14%, transparent);
background-color: var(--button-background-color-ghost-hover);
color: var(--button-text-color-ghost-hover);
}
&:active {
background-color: color-mix(in srgb, currentColor 21%, transparent);
background-color: var(--button-background-color-ghost-active);
color: var(--button-text-color-ghost-active);
}
}

1
browser/components/sidebar/sidebar-tab-list.mjs
View File

@@ -107,6 +107,7 @@ export class SidebarTabRow extends FxviewTabRowBase {
id="fxview-tab-row-secondary-button"
type="icon ghost"
@click=${this.secondaryActionHandler}
iconSrc=${this.getIconSrc(this.secondaryActionClass)}
></moz-button>`
)}`;
}

18
browser/components/sidebar/sidebar-tab-row.css
View File

@@ -7,7 +7,6 @@
:host(:hover) & {
display: inline;
justify-self: end;
}
}
@@ -20,7 +19,20 @@
}
.fxview-tab-row-main {
height: 32px;
box-sizing: border-box;
padding-block: 4px;
padding-inline: 8px 4px;
border-radius: var(--border-radius-medium);
gap: 8px;
flex: 1;
&:hover, &:hover:active {
background-color: unset;
}
}
.fxview-tab-row-button {
--button-outer-padding-block: 4px;
--button-outer-padding-inline: 4px;
--button-size-icon: 24px;
--button-min-height: 24px;
}

10
browser/components/sidebar/sidebar.css
View File

@@ -6,7 +6,8 @@
@import url("chrome://browser/skin/browser-colors.css");
:root {
--sidebar-box-border: 0.5px solid var(--border-color-deemphasized);
--sidebar-box-border-color: light-dark(color-mix(in srgb, currentColor 10%, transparent), var(--border-color-deemphasized));
--sidebar-box-border: 0.5px solid var(--sidebar-box-border-color);
--sidebar-box-background: light-dark(rgba(0, 0, 0, .03), rgba(255, 255, 255, .05));
--sidebar-box-color: currentColor;
background-color: transparent;
@@ -20,6 +21,10 @@ body {
}
moz-card {
--card-gap: var(--space-small);
--card-padding: 8px;
--card-heading-padding-inline: 12px;
margin-block-start: var(--space-medium);
box-shadow: none;
background-color: var(--sidebar-box-background);
@@ -64,11 +69,12 @@ fxview-search-textbox {
background-color: var(--sidebar-box-background);
color: var(--sidebar-box-color);
border: var(--sidebar-box-border);
border-radius: 2em;
border-radius: var(--border-radius-medium);
}
&::part(container) {
width: 100%;
height: var(--size-item-large)
}
}

12
toolkit/content/widgets/moz-card/moz-card.css
View File

@@ -30,15 +30,15 @@
:host([type=accordion]) {
summary {
padding-block: var(--card-padding);
padding-block: var(--card-padding-block, var(--card-padding));
}
#content {
padding-block-end: var(--card-padding);
padding-block-end: var(--card-padding-block, var(--card-padding));
}
}
:host(:not([type=accordion])) {
.moz-card {
padding-block: var(--card-padding);
padding-block: var(--card-padding-block, var(--card-padding));
}
}
@@ -65,7 +65,7 @@ summary {
align-items: center;
justify-content: flex-start;
gap: var(--card-gap);
padding-inline: var(--card-padding);
padding-inline: var(--card-heading-padding-inline, var(--card-padding));
border-radius: var(--card-border-radius);
.chevron-icon {
@@ -99,14 +99,14 @@ summary {
#content {
align-self: stretch;
padding-inline: var(--card-padding);
padding-inline: var(--card-padding-inline, var(--card-padding));
border-end-start-radius: var(--card-border-radius);
border-end-end-radius: var(--card-border-radius);
@media (prefers-contrast) {
:host([type=accordion]) & {
border-block-start: 0;
padding-block-start: var(--card-padding);
padding-block-start: var(--card-padding-block, var(--card-padding));
}
}
}