зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1505126 - Part 1: UX fixes. r=jdescottes,daisuke,Ola
Differential Revision: https://phabricator.services.mozilla.com/D28515 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Belén Albeza
Родитель
b5e28c3210
Коммит
73c4b82016
|
|
@ -27,11 +27,13 @@
|
|||
--link-color-hover: #0060df;
|
||||
|
||||
/* Colors from Photon */
|
||||
--success-50: #30e60b;
|
||||
--warning-50: #ffe900;
|
||||
--warning-90: #3e2800;
|
||||
--error-50: #ff0039;
|
||||
--error-60: #d70022;
|
||||
--success-background: #30e60b;
|
||||
--warning-background: #fffbd6; /* from the Web Console */
|
||||
--warning-icon: var(--yellow-65); /* from the Web Console */
|
||||
--warning-text: var(--yellow-80); /* from the Web Console */
|
||||
--error-background: #fdf2f5; /* from the Web Console */
|
||||
--error-icon: var(--red-60); /* from the Web Console */
|
||||
--error-text: var(--red-70); /* from the Web Console */
|
||||
--highlight-50: #0a84ff;
|
||||
--grey-20: #ededf0; /* for ui, no special semantic */
|
||||
--grey-30: #d7d7db; /* for ui, no special semantic */
|
||||
|
|
@ -62,6 +64,8 @@
|
|||
--caption-20-color: var(--grey-50);
|
||||
--display-20-font-size: 36px;
|
||||
--display-20-font-weight: 200;
|
||||
--display-10-font-size: 28px;
|
||||
--display-10-font-weight: 200;
|
||||
--title-20-font-size: 17px;
|
||||
--title-20-font-weight: 600;
|
||||
--title-30-font-size: 22px;
|
||||
|
|
@ -178,8 +182,8 @@ p, h1 {
|
|||
|
||||
/* Main style for heading (i.e. h1) */
|
||||
.main-heading {
|
||||
font-size: var(--display-20-font-size);
|
||||
font-weight: var(--display-20-font-weight);
|
||||
font-size: var(--display-10-font-size);
|
||||
font-weight: var(--display-10-font-weight);
|
||||
line-height: 1.2;
|
||||
color: var(--in-content-text-color);
|
||||
}
|
||||
|
|
@ -224,6 +228,11 @@ p, h1 {
|
|||
margin-block-end: calc(var(--base-unit) * 4);
|
||||
}
|
||||
|
||||
.alt-heading--larger {
|
||||
font-size: var(--title-30-font-size);
|
||||
font-weight: var(--title-30-font-weight);
|
||||
}
|
||||
|
||||
/* Alternative style for a subheading (i.e. h2). It features an icon */
|
||||
/* +--------+-------------+
|
||||
* | [Icon] | Lorem ipsum |
|
||||
|
|
@ -395,15 +404,15 @@ Form controls
|
|||
}
|
||||
|
||||
.badge--success {
|
||||
background: var(--success-50);
|
||||
background: var(--success-background);
|
||||
}
|
||||
|
||||
.badge--warning {
|
||||
background: var(--warning-50);
|
||||
background: var(--warning-background);
|
||||
}
|
||||
|
||||
.badge--error {
|
||||
background: var(--error-50);
|
||||
background: var(--error-background);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -413,7 +422,7 @@ Form controls
|
|||
background-color: var(--white-100); /* from common.inc.css */
|
||||
border-radius: var(--card-shadow-blur-radius); /* from common.inc.css */
|
||||
box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
|
||||
padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
|
||||
padding-block: calc(var(--base-unit) * 5);
|
||||
}
|
||||
|
||||
.card__heading {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.app {
|
||||
/* from common */
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-width: 320px;
|
||||
--app-top-padding: 70px;
|
||||
--app-bottom-padding: 40px;
|
||||
--app-left-padding: 34px;
|
||||
|
|
@ -57,4 +57,6 @@
|
|||
|
||||
.page {
|
||||
max-width: var(--page-width);
|
||||
font-size: var(--body-20-font-size);
|
||||
font-weight: var(--body-20-font-weight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
grid-column-gap: var(--main-heading-icon-gap);
|
||||
grid-template-areas:
|
||||
"icon title action"
|
||||
"icon subtitle action";
|
||||
"icon subtitle .";
|
||||
grid-template-columns: var(--main-heading-icon-size) 1fr max-content;
|
||||
grid-template-rows: 1fr max-content;
|
||||
|
||||
|
|
@ -38,9 +38,5 @@
|
|||
grid-area: subtitle;
|
||||
}
|
||||
.runtime-info__action {
|
||||
align-self: start;
|
||||
/* The default-button has a font-size of 1em at the moment, this rule should not be
|
||||
* necessary after the first patch from Bug 1525615 lands. */
|
||||
font-size: var(--base-font-size);
|
||||
grid-area: action;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"status . toggle";
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-column-gap: calc(var(--base-unit) * 2);
|
||||
grid-row-gap: var(--base-unit);
|
||||
}
|
||||
|
||||
.connect-page__usb-section__heading__toggle {
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ class ConnectPage extends PureComponent {
|
|||
},
|
||||
dom.h1(
|
||||
{
|
||||
className: "alt-heading",
|
||||
className: "alt-heading alt-heading--larger",
|
||||
},
|
||||
"Setup"
|
||||
),
|
||||
|
|
@ -258,7 +258,7 @@ class ConnectPage extends PureComponent {
|
|||
{
|
||||
id: "about-debugging-setup-connect-heading",
|
||||
},
|
||||
dom.h1(
|
||||
dom.h2(
|
||||
{
|
||||
className: "alt-heading",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
grid-column-gap: var(--header-col-gap);
|
||||
align-items: center;
|
||||
|
||||
padding-block: calc(var(--base-unit) * 4);
|
||||
padding-block-end: calc(var(--base-unit) * 4);
|
||||
padding-inline: calc(var(--base-unit) * 5);
|
||||
}
|
||||
|
||||
|
|
@ -39,10 +39,8 @@
|
|||
padding-inline-start: calc(var(--base-unit) * 5
|
||||
+ var(--header-col-gap) + var(--icon-size));
|
||||
padding-inline-end: calc(var(--base-unit) * 5);
|
||||
padding-block-end: calc(var(--base-unit) * 4);
|
||||
}
|
||||
|
||||
.connect-section__extra {
|
||||
border-block-start: 1px solid var(--card-separator-color);
|
||||
padding-block-end: calc(var(--base-unit) * 4);
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ class DebugTargetList extends PureComponent {
|
|||
{
|
||||
id: "about-debugging-debug-target-list-empty",
|
||||
},
|
||||
dom.span(
|
||||
dom.p(
|
||||
{
|
||||
className: "js-debug-target-list-empty",
|
||||
},
|
||||
|
|
@ -53,22 +53,23 @@ class DebugTargetList extends PureComponent {
|
|||
targets,
|
||||
} = this.props;
|
||||
|
||||
return dom.ul(
|
||||
{
|
||||
className: "debug-target-list js-debug-target-list",
|
||||
},
|
||||
targets.length === 0
|
||||
? this.renderEmptyList()
|
||||
: targets.map((target, key) =>
|
||||
DebugTargetItem({
|
||||
actionComponent,
|
||||
additionalActionsComponent,
|
||||
detailComponent,
|
||||
dispatch,
|
||||
key,
|
||||
target,
|
||||
})),
|
||||
);
|
||||
return targets.length === 0
|
||||
? this.renderEmptyList()
|
||||
: dom.ul(
|
||||
{
|
||||
className: "debug-target-list js-debug-target-list",
|
||||
},
|
||||
targets.map((target, key) =>
|
||||
DebugTargetItem({
|
||||
actionComponent,
|
||||
additionalActionsComponent,
|
||||
detailComponent,
|
||||
dispatch,
|
||||
key,
|
||||
target,
|
||||
})
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,5 +22,5 @@
|
|||
}
|
||||
|
||||
.service-worker-action__status--running::before {
|
||||
background-color: var(--success-50);
|
||||
background-color: var(--success-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,21 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.message--level-error {
|
||||
--message-color: var(--white-100);
|
||||
--message-background-color: var(--error-60);
|
||||
--message-color: var(--error-text);
|
||||
--message-background-color: var(--error-background);
|
||||
--message-icon-color: var(--error-icon);
|
||||
}
|
||||
|
||||
.message--level-info {
|
||||
--message-color: var(--grey-90);
|
||||
--message-background-color: var(--grey-20);
|
||||
--message-icon-color: var(--grey-90);
|
||||
}
|
||||
|
||||
.message--level-warning {
|
||||
--message-color: var(--warning-90);
|
||||
--message-background-color: var(--warning-50);
|
||||
--message-color: var(--warning-text);
|
||||
--message-background-color: var(--warning-background);
|
||||
--message-icon-color: var(--warning-icon);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -31,9 +34,8 @@
|
|||
border-radius: var(--base-unit);
|
||||
color: var(--message-color);
|
||||
display: grid;
|
||||
fill: var(--message-color);
|
||||
grid-column-gap: var(--base-unit);
|
||||
grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
|
||||
grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
|
||||
grid-template-areas:
|
||||
"icon body button";
|
||||
margin: calc(var(--base-unit) * 2) 0;
|
||||
|
|
@ -43,6 +45,7 @@
|
|||
|
||||
.message__icon {
|
||||
margin: var(--base-unit);
|
||||
fill: var(--message-icon-color);
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
|
|
@ -54,24 +57,18 @@
|
|||
|
||||
.message__button {
|
||||
grid-area: button;
|
||||
fill: var(--message-icon-color);
|
||||
}
|
||||
|
||||
.message__button--warning:hover {
|
||||
background-color: var(--yellow-60);
|
||||
.message__button:hover {
|
||||
/* reverse colors with icon when hover state */
|
||||
background-color: var(--message-icon-color);
|
||||
fill: var(--message-background-color);
|
||||
}
|
||||
|
||||
.message__button--warning:active {
|
||||
background-color: var(--yellow-70);
|
||||
.message__button:active {
|
||||
/* reverse colors with text when active state */
|
||||
background-color: var(--message-color);
|
||||
fill: var(--message-background-color);
|
||||
}
|
||||
|
||||
.message__button--error {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.message__button--error:hover {
|
||||
background-color: var(--red-70);
|
||||
}
|
||||
|
||||
.message__button--error:active {
|
||||
background-color: var(--red-80);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
font-size: var(--message-font-size);
|
||||
}
|
||||
|
||||
.sidebar__adb-status {
|
||||
margin-block-end: calc(var(--base-unit) * 2);
|
||||
}
|
||||
|
||||
.sidebar__refresh-usb {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ class Sidebar extends PureComponent {
|
|||
),
|
||||
SidebarItem(
|
||||
{
|
||||
className: "sidebar-item--overflow sidebar-item--full-width",
|
||||
className: "sidebar__adb-status sidebar-item--full-width",
|
||||
},
|
||||
dom.hr({ className: "separator separator--breathe" }),
|
||||
this.renderAdbStatus(),
|
||||
|
|
|
|||
|
|
@ -30,11 +30,6 @@
|
|||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
/* .sidebar-item--overflow {
|
||||
min-height: var(--category-height);
|
||||
height: auto;
|
||||
} */
|
||||
|
||||
.sidebar-item__link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
|
@ -46,7 +41,7 @@
|
|||
}
|
||||
|
||||
.sidebar-item:not(.sidebar-item--selectable) {
|
||||
color: var(--grey-40);
|
||||
color: var(--grey-50);
|
||||
}
|
||||
|
||||
.sidebar-item--selectable:hover {
|
||||
|
|
|
|||
|
|
@ -11,11 +11,12 @@
|
|||
*/
|
||||
|
||||
.sidebar-runtime-item__container {
|
||||
box-sizing: border-box;
|
||||
height: var(--category-height);
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-column-gap: var(--base-unit);
|
||||
grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
|
||||
height: 100%;
|
||||
font-size: var(--body-20-font-size);
|
||||
font-weight: var(--body-20-font-weight);
|
||||
}
|
||||
|
|
@ -26,10 +27,14 @@
|
|||
}
|
||||
|
||||
.sidebar-runtime-item__runtime {
|
||||
line-height: 1.2;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sidebar-runtime-item__runtime__details {
|
||||
font-size: var(--caption-10-font-size);
|
||||
font-weight: var(--caption-10-font-weight);
|
||||
}
|
||||
|
||||
.sidebar-runtime-item__message:first-of-type {
|
||||
margin-block-start: calc(var(--base-unit) * -1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,8 +71,7 @@ class SidebarRuntimeItem extends PureComponent {
|
|||
return Message(
|
||||
{
|
||||
level,
|
||||
key: className,
|
||||
className,
|
||||
className: `${className} sidebar-runtime-item__message`,
|
||||
},
|
||||
Localized(
|
||||
{
|
||||
|
|
@ -159,29 +158,25 @@ class SidebarRuntimeItem extends PureComponent {
|
|||
getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
|
||||
getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
|
||||
|
||||
return [
|
||||
SidebarItem(
|
||||
return SidebarItem(
|
||||
{
|
||||
isSelected,
|
||||
to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
|
||||
},
|
||||
dom.section(
|
||||
{
|
||||
className: "sidebar-item--tall",
|
||||
key: "sidebar-item",
|
||||
isSelected,
|
||||
to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
|
||||
className: "sidebar-runtime-item__container",
|
||||
},
|
||||
dom.section(
|
||||
dom.img(
|
||||
{
|
||||
className: "sidebar-runtime-item__container",
|
||||
},
|
||||
dom.img(
|
||||
{
|
||||
className: "sidebar-runtime-item__icon ",
|
||||
src: icon,
|
||||
alt: connectionStatus,
|
||||
title: connectionStatus,
|
||||
}
|
||||
),
|
||||
this.renderName(),
|
||||
!isUnavailable && !isConnected ? this.renderConnectButton() : null
|
||||
className: "sidebar-runtime-item__icon ",
|
||||
src: icon,
|
||||
alt: connectionStatus,
|
||||
title: connectionStatus,
|
||||
}
|
||||
),
|
||||
this.renderName(),
|
||||
!isUnavailable && !isConnected ? this.renderConnectButton() : null
|
||||
),
|
||||
this.renderMessage(
|
||||
isConnectionFailed,
|
||||
|
|
@ -201,7 +196,7 @@ class SidebarRuntimeItem extends PureComponent {
|
|||
"about-debugging-sidebar-item-connect-button-connection-not-responding",
|
||||
"qa-connection-not-responding"
|
||||
),
|
||||
];
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче