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

Bug 1565172 Add routing support for Manifest page, r=ladybenko,fluent-reviewers,flod 

Add routing support for Manifest page with simple CSS and fluent string for `no manifest found`

Differential Revision: https://phabricator.services.mozilla.com/D40808

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ola Gasidlo 2019-08-13 13:18:23 +00:00
Родитель 5ad66b00c3
Коммит 6d236dc311
22 изменённых файлов: 158 добавлений и 2 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -11,6 +11,7 @@
* Components
*/
@import "resource://devtools/client/application/src/components/App.css";
@import "resource://devtools/client/application/src/components/manifest/ManifestPage.css";
@import "resource://devtools/client/application/src/components/service-workers/Worker.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerList.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerListEmpty.css";

7
devtools/client/application/src/components/layout/PageContainer.js
Просмотреть файл

@ -13,6 +13,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { PAGE_TYPES } = require("../../constants");
const ManifestPage = createFactory(require("../manifest/ManifestPage"));
const WorkersPage = createFactory(require("../service-workers/WorkersPage"));
class PageContainer extends PureComponent {
@ -26,9 +27,15 @@ class PageContainer extends PureComponent {
let component = null;
switch (this.props.page) {
case PAGE_TYPES.MANIFEST:
component = ManifestPage({});
break;
case PAGE_TYPES.SERVICE_WORKERS:
component = WorkersPage({});
break;
default:
console.error("Unknown path. Can not direct to a page.");
return null;
}
return component;

16
devtools/client/application/src/components/manifest/ManifestPage.css Normal file
Просмотреть файл

@ -0,0 +1,16 @@
/* 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-page {
height: 100vh;
padding: 0 2rem;
display: grid;
-moz-user-select: none;
/* slipt up in components in https://bugzilla.mozilla.org/show_bug.cgi?id=1566011 */
align-items: center;
justify-content: center;
font-size: var(--title-10-font-size);
color: var(--theme-toolbar-color);
}

30
devtools/client/application/src/components/manifest/ManifestPage.js Normal file
Просмотреть файл

@ -0,0 +1,30 @@
/* 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/. */
"use strict";
const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const {
section,
} = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
class ManifestPage extends PureComponent {
render() {
return Localized(
{
id: "manifest-empty-intro",
},
section({ className: `manifest-page` })
);
}
}
// Exports
module.exports = ManifestPage;

8
devtools/client/application/src/components/manifest/moz.build Normal file
Просмотреть файл

@ -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/.
DevToolsModules(
'ManifestPage.css',
'ManifestPage.js'
)

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

@ -4,6 +4,7 @@
DIRS += [
'layout',
'manifest',
'service-workers',
'ui',
]

3
devtools/client/application/src/constants.js
Просмотреть файл

@ -15,10 +15,11 @@ const actionTypes = {
};
const PAGE_TYPES = {
MANIFEST: "manifest",
SERVICE_WORKERS: "service-workers",
};
const DEFAULT_PAGE = PAGE_TYPES.SERVICE_WORKERS;
const DEFAULT_PAGE = PAGE_TYPES.MANIFEST;
// flatten constants
module.exports = Object.assign({}, { DEFAULT_PAGE, PAGE_TYPES }, actionTypes);

3
devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js
Просмотреть файл

@ -23,6 +23,9 @@ add_task(async function() {
const { panel, tab, target } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
info("Wait until the service worker appears in the application panel");
await waitUntil(() => getWorkerContainers(doc).length === 1);

3
devtools/client/application/test/browser/browser_application_panel_list-domain-workers.js
Просмотреть файл

@ -21,6 +21,9 @@ add_task(async function() {
const { panel, target } = await openNewTabAndApplicationPanel(SIMPLE_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
info("Wait until the service worker appears in the application panel");
await waitUntil(() => getWorkerContainers(doc).length === 1);

3
devtools/client/application/test/browser/browser_application_panel_list-several-workers.js
Просмотреть файл

@ -17,6 +17,9 @@ add_task(async function() {
const { panel, target } = await openNewTabAndApplicationPanel(SIMPLE_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
info("Wait until the service worker appears in the application panel");
await waitUntil(() => getWorkerContainers(doc).length === 1);

3
devtools/client/application/test/browser/browser_application_panel_list-single-worker.js
Просмотреть файл

@ -12,6 +12,9 @@ add_task(async function() {
const { panel, tab } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
const isWorkerListEmpty = !!doc.querySelector(".worker-list-empty");
ok(isWorkerListEmpty, "No Service Worker displayed");

3
devtools/client/application/test/browser/browser_application_panel_list-unicode.js
Просмотреть файл

@ -18,6 +18,9 @@ add_task(async function() {
const { panel, target } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
info("Wait until the service worker appears in the application panel");
await waitUntil(() => getWorkerContainers(doc).length === 1);

3
devtools/client/application/test/browser/browser_application_panel_list-workers-empty.js
Просмотреть файл

@ -16,6 +16,9 @@ add_task(async function() {
const { panel, tab } = await openNewTabAndApplicationPanel(EMPTY_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
await waitUntil(() => doc.querySelector(".js-worker-list-empty") !== null);
ok(true, "No service workers are shown for an empty page");

4
devtools/client/application/test/browser/browser_application_panel_open-links.js
Просмотреть файл

@ -15,9 +15,11 @@ add_task(async function() {
await enableApplicationPanel();
const { panel, toolbox } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
// detach devtools in a separate window
await toolbox.switchHost(Toolbox.HostType.WINDOW);

7
devtools/client/application/test/browser/browser_application_panel_start-service-worker.js
Просмотреть файл

@ -21,6 +21,9 @@ add_task(async function() {
const { panel, tab, target } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
await waitForWorkerRegistration(tab);
info("Wait until the service worker appears in the application panel");
@ -59,6 +62,10 @@ add_task(async function() {
const { panel, tab, target } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
await waitForWorkerRegistration(tab);
info("Wait until the service worker appears in the application panel");

3
devtools/client/application/test/browser/browser_application_panel_unregister-worker.js
Просмотреть файл

@ -11,6 +11,9 @@ add_task(async function() {
const { panel, tab, target } = await openNewTabAndApplicationPanel(TAB_URL);
const doc = panel.panelWin.document;
// select service worker view
selectPage(panel, "service-workers");
info("Wait until the service worker appears in the application panel");
await waitUntil(() => getWorkerContainers(doc).length === 1);

9
devtools/client/application/test/browser/head.js
Просмотреть файл

@ -81,3 +81,12 @@ async function waitForWorkerRegistration(swTab) {
})
);
}
// TODO: update this function once the sidebar links are implemented (See bug
// https: //bugzilla.mozilla.org/show_bug.cgi?id=1565213), and switch to to
// click those links instead, since it's more representative of what users do
function selectPage(panel, page) {
info(`Selecting application page: ${page}`);
const actions = panel.panelWin.Application.actions;
actions.updateSelectedPage(page);
}

2
devtools/client/application/test/components/layout/__snapshots__/components_application_panel-PageContainer.test.js.snap
Просмотреть файл

@ -4,4 +4,6 @@ exports[`PageContainer renders nothing when an invalid page is selected 1`] = `"
exports[`PageContainer renders nothing when no page is selected 1`] = `""`;
exports[`PageContainer renders the ManifestPage component when manifest page is selected 1`] = `<ManifestPage />`;
exports[`PageContainer renders the WorkersPage component when workers page is selected 1`] = `<Connect(WorkersPage) />`;

14
devtools/client/application/test/components/layout/components_application_panel-PageContainer.test.js
Просмотреть файл

@ -7,6 +7,8 @@
const { shallow } = require("enzyme");
const { createFactory } = require("react");
console.error = jest.fn();
// Import setupStore with imported & combined reducers
const {
setupStore,
@ -33,6 +35,16 @@ describe("PageContainer", () => {
});
}
beforeEach(() => {
console.error.mockClear();
});
it("renders the ManifestPage component when manifest page is selected", () => {
const store = buildStoreWithSelectedPage(PAGE_TYPES.MANIFEST);
const wrapper = shallow(PageContainer({ store })).dive();
expect(wrapper).toMatchSnapshot();
});
it("renders the WorkersPage component when workers page is selected", () => {
const store = buildStoreWithSelectedPage(PAGE_TYPES.SERVICE_WORKERS);
const wrapper = shallow(PageContainer({ store })).dive();
@ -42,12 +54,14 @@ describe("PageContainer", () => {
it("renders nothing when no page is selected", () => {
const store = buildStoreWithSelectedPage(null);
const wrapper = shallow(PageContainer({ store })).dive();
expect(console.error).toHaveBeenCalledTimes(1);
expect(wrapper).toMatchSnapshot();
});
it("renders nothing when an invalid page is selected", () => {
const store = buildStoreWithSelectedPage("foo");
const wrapper = shallow(PageContainer({ store })).dive();
expect(console.error).toHaveBeenCalledTimes(1);
expect(wrapper).toMatchSnapshot();
});
});

11
devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap Normal file
Просмотреть файл

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ManifestPage renders the expected snapshot 1`] = `
<Localized
id="manifest-empty-intro"
>
<section
className="manifest-page"
/>
</Localized>
`;

23
devtools/client/application/test/components/manifest/components_application_panel-ManifestPage.test.js Normal file
Просмотреть файл

@ -0,0 +1,23 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Import libs
const { shallow } = require("enzyme");
const { createFactory } = require("react");
const ManifestPage = createFactory(
require("devtools/client/application/src/components/manifest/ManifestPage")
);
/**
* Test for ManifestPage.js component
*/
describe("ManifestPage", () => {
it("renders the expected snapshot", () => {
const wrapper = shallow(ManifestPage({}));
expect(wrapper).toMatchSnapshot();
});
});

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

@ -79,3 +79,6 @@ serviceworker-empty-suggestions-debugger = Step through your Service Worker regi
# 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>
# Text displayed when no manifest was found for the current page.
manifest-empty-intro = No manifest found to inspect.