зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1575499 - Part 3: UI fixes and CSS refactor r=Ola
> IMPORTANT: this depends on https://phabricator.services.mozilla.com/D43050 to be on central. If it has not been merged already, run `arc patch D43050` before downloading this stack. - Put style rules into their own components stylesheet. - Used theme-related colors instead of the same ones for both dark and light themes. - Made selectors to be class-specific (so they have low specificity) - Removed some unused CSS in `base.css` - Fix extra blank space when a section of the manifest is empty (made the hardcoded icons array empty so this can be seen) NOTE: The CSS/markup for the warnings will be handled in https://bugzilla.mozilla.org/show_bug.cgi?id=1575872 Differential Revision: https://phabricator.services.mozilla.com/D43231 --HG-- rename : devtools/client/application/src/components/manifest/Manifest.css => devtools/client/application/src/components/manifest/ManifestSection.css extra : moz-landing-system : lando
This commit is contained in:
Belén Albeza
Родитель
1033de808b
Коммит
62d81c33b2
|
|
@ -11,7 +11,9 @@
|
|||
* Components
|
||||
*/
|
||||
@import "resource://devtools/client/application/src/components/App.css";
|
||||
@import "resource://devtools/client/application/src/components/manifest/Manifest.css";
|
||||
@import "resource://devtools/client/application/src/components/manifest/ManifestItem.css";
|
||||
@import "resource://devtools/client/application/src/components/manifest/ManifestItemWarning.css";
|
||||
@import "resource://devtools/client/application/src/components/manifest/ManifestSection.css";
|
||||
@import "resource://devtools/client/application/src/components/routing/PageSwitcher.css";
|
||||
@import "resource://devtools/client/application/src/components/service-workers/Worker.css";
|
||||
@import "resource://devtools/client/application/src/components/service-workers/WorkerList.css";
|
||||
|
|
|
|||
|
|
@ -25,14 +25,13 @@
|
|||
--list-line-height: 1.25;
|
||||
|
||||
/* Global colours */
|
||||
--bg-color: var(--grey-10);
|
||||
--text-color: var(--grey-90);
|
||||
|
||||
/* Global layout vars */
|
||||
--base-unit: 4px;
|
||||
--separator-color: var(--theme-text-color-alt);
|
||||
|
||||
/* extra, raw colors */
|
||||
--blue-50-a30: rgba(10, 132, 255, 0.3);
|
||||
|
||||
/* Global layout vars */
|
||||
--base-unit: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -59,13 +58,6 @@ a {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
.application--title {
|
||||
font-size: var(--title-30-font-size);
|
||||
font-weight: var(--title-30-font-weight);
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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/. */
|
||||
|
||||
.manifest {
|
||||
padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 4);
|
||||
border-bottom: 1px solid var(--grey-20);
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.manifest:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.manifest__title {
|
||||
font-size: var(--title-10-font-size);
|
||||
font-weight: var(--title-20-font-weight);
|
||||
text-align: left;
|
||||
padding: calc(var(--base-unit) * 2) 0;
|
||||
}
|
||||
|
||||
.manifest__row {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.manifest__col-label {
|
||||
color: var(--grey-50);
|
||||
font-weight: var(--title-30-font-weight);
|
||||
width: calc(var(--base-unit) * 28);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.manifest__col-value {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.manifest__row-error .manifest__col-label {
|
||||
width: calc(var(--base-unit) * 6);
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ const ManifestItemWarning = createFactory(require("./ManifestItemWarning"));
|
|||
const ManifestSection = createFactory(require("./ManifestSection"));
|
||||
|
||||
/**
|
||||
* Displays a canonical manifest, splitted in different sections
|
||||
* A canonical manifest, splitted in different sections
|
||||
*/
|
||||
class Manifest extends PureComponent {
|
||||
static get propTypes() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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/. */
|
||||
|
||||
.manifest-item {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.manifest-item__label {
|
||||
color: var(--theme-text-color-alt);
|
||||
font-weight: var(--title-30-font-weight);
|
||||
width: calc(var(--base-unit) * 28);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.manifest-item__value {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -27,16 +27,16 @@ class ManifestItem extends PureComponent {
|
|||
const { children, label } = this.props;
|
||||
return tr(
|
||||
{
|
||||
className: "manifest__row",
|
||||
className: "manifest-item",
|
||||
},
|
||||
th(
|
||||
{
|
||||
className: "manifest__col-label",
|
||||
className: "manifest-item__label",
|
||||
scope: "row",
|
||||
},
|
||||
label
|
||||
),
|
||||
td({ className: "manifest__col-value" }, children)
|
||||
td({ className: "manifest-item__value" }, children)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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/. */
|
||||
|
||||
.manifest-warning {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -14,27 +14,35 @@ const {
|
|||
} = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
/**
|
||||
* This component
|
||||
* A Manifest warning validation message
|
||||
*/
|
||||
class ManifestItemWarning extends PureComponent {
|
||||
// TODO: this probably should not be a table, but a list. It might also make
|
||||
// more sense to rename to ManifestIssue. Address in:
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1575872
|
||||
|
||||
static get propTypes() {
|
||||
// TODO: pass multiple props instead of just a single object
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1575872
|
||||
return {
|
||||
warning: PropTypes.object.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { warning } = this.props;
|
||||
|
||||
return tr(
|
||||
{ className: "manifest__row manifest__row-error" },
|
||||
{ className: "manifest-warning" },
|
||||
th(
|
||||
{ className: "manifest__col-label", scope: "row" },
|
||||
{ scope: "row" },
|
||||
img({
|
||||
src: "chrome://global/skin/icons/warning.svg",
|
||||
// TODO: Add a localized string in
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1575872
|
||||
alt: "Warning icon",
|
||||
src: "chrome://global/skin/icons/warning.svg",
|
||||
})
|
||||
),
|
||||
td({ className: "manifest__col-value" }, warning.warn)
|
||||
td({}, warning.warn)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,23 +28,7 @@ class ManifestPage extends PureComponent {
|
|||
"Icons item at index 2 is invalid. Icons item at index 2 is invalid. Icons item at index 2 is invalid. Icons item at index 2 is invalid.",
|
||||
},
|
||||
],
|
||||
icons: [
|
||||
{
|
||||
key: "16x16",
|
||||
value:
|
||||
"https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
{
|
||||
key: "32x32",
|
||||
value:
|
||||
"https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
{
|
||||
key: "64x64",
|
||||
value:
|
||||
"https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
],
|
||||
icons: [],
|
||||
identity: [
|
||||
{
|
||||
key: "name",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* 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/. */
|
||||
|
||||
.manifest-section {
|
||||
padding-block: calc(var(--base-unit) * 2);
|
||||
width: 100%;
|
||||
border-spacing: calc(var(--base-unit) * 2) 0;
|
||||
}
|
||||
|
||||
.manifest-section--empty {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
.manifest-section:not(:last-child) {
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.manifest-section__title {
|
||||
font-size: var(--title-10-font-size);
|
||||
font-weight: var(--title-20-font-weight);
|
||||
text-align: left;
|
||||
padding-block-start: calc(var(--base-unit) * 2);
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ const {
|
|||
} = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
/**
|
||||
* Displays a section of a manifest in the form of a captioned table.
|
||||
* A section of a manifest in the form of a captioned table.
|
||||
*/
|
||||
class ManifestSection extends PureComponent {
|
||||
static get propTypes() {
|
||||
|
|
@ -25,10 +25,15 @@ class ManifestSection extends PureComponent {
|
|||
|
||||
render() {
|
||||
const { children, title } = this.props;
|
||||
const isEmpty = !children || children.length === 0;
|
||||
|
||||
return table(
|
||||
{ className: "manifest" },
|
||||
caption({ className: "manifest__title" }, title),
|
||||
{
|
||||
className: `manifest-section ${
|
||||
isEmpty ? "manifest-section--empty" : ""
|
||||
}`,
|
||||
},
|
||||
caption({ className: "manifest-section__title" }, title),
|
||||
tbody({}, children)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'Manifest.css',
|
||||
'Manifest.js',
|
||||
'ManifestEmpty.js',
|
||||
'ManifestItem.css',
|
||||
'ManifestItem.js',
|
||||
'ManifestItemWarning.css',
|
||||
'ManifestItemWarning.js',
|
||||
'ManifestLoader.js',
|
||||
'ManifestPage.js',
|
||||
'ManifestSection.css',
|
||||
'ManifestSection.js',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
height: 100vh;
|
||||
padding: 0 2rem;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.worker:not(:last-child) {
|
||||
border-bottom: 1px solid var(--theme-text-color-alt);
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.worker__header {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ class WorkerList extends PureComponent {
|
|||
Localized(
|
||||
{ id: "serviceworker-list-header" },
|
||||
h1({
|
||||
className: "application--title",
|
||||
className: "app-page__title",
|
||||
})
|
||||
),
|
||||
ul(
|
||||
|
|
|
|||
|
|
@ -6,22 +6,7 @@ exports[`ManifestPage renders the expected snapshot 1`] = `
|
|||
>
|
||||
<Connect(ManifestLoader) />
|
||||
<Manifest
|
||||
icons={
|
||||
Array [
|
||||
Object {
|
||||
"key": "16x16",
|
||||
"value": "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
Object {
|
||||
"key": "32x32",
|
||||
"value": "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
Object {
|
||||
"key": "64x64",
|
||||
"value": "https://design.firefox.com/icons/icons/desktop/default-browser-16.svg",
|
||||
},
|
||||
]
|
||||
}
|
||||
icons={Array []}
|
||||
identity={
|
||||
Array [
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Array [
|
|||
id="serviceworker-list-header"
|
||||
>
|
||||
<h1
|
||||
className="application--title"
|
||||
className="app-page__title"
|
||||
/>
|
||||
</Localized>
|
||||
<ul>
|
||||
|
|
@ -56,7 +56,7 @@ Array [
|
|||
id="serviceworker-list-header"
|
||||
>
|
||||
<h1
|
||||
className="application--title"
|
||||
className="app-page__title"
|
||||
/>
|
||||
</Localized>
|
||||
<ul>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче