mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1635402 - UX polish: empty pages r=jdescottes,Gijs 

Differential Revision: https://phabricator.services.mozilla.com/D81362
This commit is contained in:
Belén Albeza 2020-07-13 15:36:35 +00:00
Родитель c7c65a2a89
Коммит 9eebfc0610
10 изменённых файлов: 203 добавлений и 137 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
devtools/client/application/application.css
Просмотреть файл

@ -24,7 +24,6 @@
@import "resource://devtools/client/application/src/components/routing/SidebarItem.css";
@import "resource://devtools/client/application/src/components/service-workers/Registration.css";
@import "resource://devtools/client/application/src/components/service-workers/RegistrationList.css";
@import "resource://devtools/client/application/src/components/service-workers/RegistrationListEmpty.css";
@import "resource://devtools/client/application/src/components/service-workers/Worker.css";
@import "resource://devtools/client/application/src/components/ui/UIButton.css";

9
devtools/client/application/src/base.css
Просмотреть файл

@ -17,7 +17,6 @@
--title-20-font-size: 17px;
--title-20-font-weight: 400;
--title-30-font-size: 22px;
--title-30-font-weight: 300;
/* Global styles */
--base-line-height: 1.8;
@ -33,6 +32,14 @@
/* Global layout vars */
--base-unit: 4px;
/* these are the color for icons in empty pages - note that these are not
available in devtools' variables.css */
--dimmed-icon-color: #d3d3d3;
}
:root.theme-dark {
--dimmed-icon-color: #484848;
}
/*

48
devtools/client/application/src/components/manifest/ManifestEmpty.js
Просмотреть файл

@ -13,7 +13,10 @@ const {
const {
a,
article,
aside,
div,
h1,
img,
p,
} = require("devtools/client/shared/vendor/react-dom-factories");
@ -35,18 +38,41 @@ class ManifestEmpty extends PureComponent {
render() {
return article(
{ className: "manifest-empty js-manifest-empty" },
Localized(
{
id: "manifest-empty-intro",
a: a({
className: "external-link",
onClick: () => this.openDocumentation(),
}),
},
h1({ className: "app-page__title" })
{ className: "app-page__icon-container js-manifest-empty" },
aside(
{},
Localized(
{
id: "sidebar-item-manifest",
attrs: {
alt: true,
},
},
img({
className: "app-page__icon",
src: "chrome://devtools/skin/images/application-manifest.svg",
})
)
),
Localized({ id: "manifest-non-existing" }, p({}))
div(
{},
Localized(
{
id: "manifest-empty-intro2",
},
h1({ className: "app-page__title" })
),
p(
{},
Localized(
{ id: "manifest-empty-intro-link" },
a({
onClick: () => this.openDocumentation(),
})
)
),
Localized({ id: "manifest-non-existing" }, p({}))
)
);
}
}

17
devtools/client/application/src/components/routing/PageSwitcher.css
Просмотреть файл

@ -26,3 +26,20 @@
font-weight: var(--title-20-font-weight);
margin: 0;
}
.app-page__icon-container {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: calc(var(--base-unit) * 4);
}
.app-page__icon {
width: calc(var(--base-unit) * 10);
height: calc(var(--base-unit) * 10);
fill: var(--dimmed-icon-color);
-moz-context-properties: fill;
/* alignment fix for text to compensate for low baseline */
margin-block-start: var(--base-unit);
}

16
devtools/client/application/src/components/service-workers/RegistrationListEmpty.css
Просмотреть файл

@ -1,16 +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/. */
.app-page__title .external-link {
font-weight: var(--title-30-font-weight);
}
.registration-list-empty__tips {
margin-inline-start: 2rem;
}
.registration-list-empty__tips-item {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}

78
devtools/client/application/src/components/service-workers/RegistrationListEmpty.js
Просмотреть файл

@ -12,10 +12,11 @@ const {
const {
a,
article,
aside,
div,
h1,
li,
img,
p,
ul,
} = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
@ -52,43 +53,62 @@ class RegistrationListEmpty extends PureComponent {
render() {
return article(
{ className: "registration-list-empty js-registration-list-empty" },
Localized(
{
id: "serviceworker-empty-intro",
a: a({
className: "external-link",
onClick: () => this.openDocumentation(),
}),
},
h1({ className: "app-page__title" })
{ className: "app-page__icon-container js-registration-list-empty" },
aside(
{},
Localized(
{
id: "sidebar-item-service-workers",
attrs: {
alt: true,
},
},
img({
className: "app-page__icon",
src: "chrome://devtools/skin/images/debugging-workers.svg",
})
)
),
Localized({ id: "serviceworker-empty-suggestions" }, p({})),
ul(
{ className: "registration-list-empty__tips" },
div(
{},
Localized(
{
id: "serviceworker-empty-suggestions-console",
a: a({ className: "link", onClick: () => this.switchToConsole() }),
id: "serviceworker-empty-intro2",
},
li({ className: "registration-list-empty__tips-item" })
h1({ className: "app-page__title" })
),
Localized(
{
id: "serviceworker-empty-suggestions-debugger",
a: a({ className: "link", onClick: () => this.switchToDebugger() }),
},
li({ className: "registration-list-empty__tips-item" })
),
Localized(
{
id: "serviceworker-empty-suggestions-aboutdebugging",
id: "serviceworker-empty-suggestions2",
a: a({
className: "link js-trusted-link",
onClick: () => this.openAboutDebugging(),
onClick: () => this.switchToConsole(),
}),
// NOTE: for <Localized> to parse the markup in the string, the
// markup needs to be actual HTML elements
span: a({
onClick: () => this.switchToDebugger(),
}),
},
li({ className: "registration-list-empty__tips-item" })
p({})
),
p(
{},
Localized(
{ id: "serviceworker-empty-intro-link" },
a({
onClick: () => this.openDocumentation(),
})
)
),
p(
{},
Localized(
{ id: "serviceworker-empty-suggestions-aboutdebugging2" },
a({
className: "js-trusted-link",
onClick: () => this.openAboutDebugging(),
})
)
)
)
);

1
devtools/client/application/src/components/service-workers/moz.build
Просмотреть файл

@ -7,7 +7,6 @@ DevToolsModules(
'Registration.js',
'RegistrationList.css',
'RegistrationList.js',
'RegistrationListEmpty.css',
'RegistrationListEmpty.js',
'Worker.css',
'Worker.js',

56
devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap
Просмотреть файл

@ -2,25 +2,45 @@
exports[`ManifestEmpty renders the expected snapshot 1`] = `
<article
className="manifest-empty js-manifest-empty"
className="app-page__icon-container js-manifest-empty"
>
<Localized
a={
<a
className="external-link"
onClick={[Function]}
<aside>
<Localized
attrs={
Object {
"alt": true,
}
}
id="sidebar-item-manifest"
>
<img
className="app-page__icon"
src="chrome://devtools/skin/images/application-manifest.svg"
/>
}
id="manifest-empty-intro"
>
<h1
className="app-page__title"
/>
</Localized>
<Localized
id="manifest-non-existing"
>
<p />
</Localized>
</Localized>
</aside>
<div>
<Localized
id="manifest-empty-intro2"
>
<h1
className="app-page__title"
/>
</Localized>
<p>
<Localized
id="manifest-empty-intro-link"
>
<a
onClick={[Function]}
/>
</Localized>
</p>
<Localized
id="manifest-non-existing"
>
<p />
</Localized>
</div>
</article>
`;

87
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap
Просмотреть файл

@ -2,68 +2,65 @@
exports[`RegistrationListEmpty renders the expected snapshot 1`] = `
<article
className="registration-list-empty js-registration-list-empty"
className="app-page__icon-container js-registration-list-empty"
>
<Localized
a={
<a
className="external-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-intro"
>
<h1
className="app-page__title"
/>
</Localized>
<Localized
id="serviceworker-empty-suggestions"
>
<p />
</Localized>
<ul
className="registration-list-empty__tips"
>
<aside>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
attrs={
Object {
"alt": true,
}
}
id="serviceworker-empty-suggestions-console"
id="sidebar-item-service-workers"
>
<li
className="registration-list-empty__tips-item"
<img
className="app-page__icon"
src="chrome://devtools/skin/images/debugging-workers.svg"
/>
</Localized>
</aside>
<div>
<Localized
id="serviceworker-empty-intro2"
>
<h1
className="app-page__title"
/>
</Localized>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-debugger"
>
<li
className="registration-list-empty__tips-item"
/>
</Localized>
<Localized
a={
id="serviceworker-empty-suggestions2"
span={
<a
className="link js-trusted-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-aboutdebugging"
>
<li
className="registration-list-empty__tips-item"
/>
<p />
</Localized>
</ul>
<p>
<Localized
id="serviceworker-empty-intro-link"
>
<a
onClick={[Function]}
/>
</Localized>
</p>
<p>
<Localized
id="serviceworker-empty-suggestions-aboutdebugging2"
>
<a
className="js-trusted-link"
onClick={[Function]}
/>
</Localized>
</p>
</div>
</article>
`;

27
devtools/client/locales/en-US/application.ftl
Просмотреть файл

@ -56,32 +56,29 @@ serviceworker-worker-status-running = Running
# Service Worker status. A stopped service worker is registered but not currently active.
serviceworker-worker-status-stopped = Stopped
# Text displayed when no service workers are visible for the current page. Clicking on the
# link will open https://developer-mozilla-org/docs/Web/API/Service_Worker_API/Using_Service_Workers
serviceworker-empty-intro = You need to register a Service Worker to inspect it here. <a>Learn more</a>
# Text displayed when no service workers are visible for the current page.
serviceworker-empty-intro2 = No service workers found
# Link will open https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers
serviceworker-empty-intro-link = Learn more
# Text displayed when there are no Service Workers to display for the current page,
# introducing hints to debug Service Worker issues.
serviceworker-empty-suggestions = If the current page should have a service worker, here are some things you can try
# Suggestion to check for errors in the Console to investigate why a service worker is not
# registered. Clicking on the link opens the webconsole.
serviceworker-empty-suggestions-console = Look for errors in the Console. <a>Open the Console</a>
# Suggestion to use the debugger to investigate why a service worker is not registered.
# Clicking on the link will switch from the Application panel to the debugger.
serviceworker-empty-suggestions-debugger = Step through your Service Worker registration and look for exceptions. <a>Open the Debugger</a>
# <a> and <span> are links that will open the webconsole and the debugger, respectively.
serviceworker-empty-suggestions2 = If the current page should have a service worker, you could look for errors in the <a>Console</a> or step through your service worker registration in the <span>Debugger</span>.
# Suggestion to go to about:debugging in order to see Service Workers for all domains.
# Clicking on the link will open about:debugging in a new tab.
serviceworker-empty-suggestions-aboutdebugging = Inspect Service Workers from other domains. <a>Open about:debugging</a>
# Link will open about:debugging in a new tab.
serviceworker-empty-suggestions-aboutdebugging2 = View service workers from other domains
# Header for the Manifest page when we have an actual manifest
manifest-view-header = App Manifest
# Header for the Manifest page when there's no manifest to inspect
manifest-empty-intro2 = No web app manifest detected
# The link will open https://developer.mozilla.org/en-US/docs/Web/Manifest
manifest-empty-intro = You need to add a web app manifest to inspect it here. <a>Learn more</a>
manifest-empty-intro-link = Learn how to add a manifest
# Header for the Errors and Warnings section of Manifest inspection displayed in the application panel.
manifest-item-warnings = Errors and Warnings