Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 08:15:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1639605 - Part 2: Add a new ManifestUrlItem component to show manifest URLs correctly in RTL mode r=jdescottes

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D84724
This commit is contained in:
Belén Albeza 2020-07-24 13:25:44 +00:00
parent 1fb9f63524
commit 0d00aa1f55
15 changed files with 240 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/application/application.css
View File

@ -20,6 +20,7 @@
@import "chrome://devtools/content/application/src/components/manifest/ManifestJsonLink.css";
@import "chrome://devtools/content/application/src/components/manifest/ManifestLoader.css";
@import "chrome://devtools/content/application/src/components/manifest/ManifestSection.css";
@import "chrome://devtools/content/application/src/components/manifest/ManifestUrlItem.css";
@import "chrome://devtools/content/application/src/components/routing/PageSwitcher.css";
@import "chrome://devtools/content/application/src/components/routing/Sidebar.css";
@import "chrome://devtools/content/application/src/components/routing/SidebarItem.css";

5
devtools/client/application/src/components/manifest/Manifest.js
View File

@ -25,6 +25,9 @@ const ManifestColorItem = createFactory(
const ManifestIconItem = createFactory(
require("devtools/client/application/src/components/manifest/ManifestIconItem")
);
const ManifestUrlItem = createFactory(
require("devtools/client/application/src/components/manifest/ManifestUrlItem")
);
const ManifestItem = createFactory(
require("devtools/client/application/src/components/manifest/ManifestItem")
);
@ -78,6 +81,8 @@ class Manifest extends PureComponent {
// we cannot use them as unique IDs
domKey = index;
return ManifestIconItem({ label: key, key: domKey, value });
case MANIFEST_MEMBER_VALUE_TYPES.URL:
return ManifestUrlItem({ label: key, key: domKey, value });
case MANIFEST_MEMBER_VALUE_TYPES.STRING:
default:
return ManifestItem({ label: key, key: domKey }, value);

8
devtools/client/application/src/components/manifest/ManifestUrlItem.css Normal file
View 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/. */
.manifest-item__url {
direction: ltr; /* force LTR so the # stays at the beginning of the hex number */
display: inline-block;
}

37
devtools/client/application/src/components/manifest/ManifestUrlItem.js Normal file
View File

@ -0,0 +1,37 @@
/* 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 { div } = require("devtools/client/shared/vendor/react-dom-factories");
const Types = require("devtools/client/application/src/types/index");
const ManifestItem = createFactory(
require("devtools/client/application/src/components/manifest/ManifestItem")
);
/**
* This component displays a Manifest member which holds a URL
*/
class ManifestUrlItem extends PureComponent {
static get propTypes() {
return {
...Types.manifestItemUrl, // { label, value }
};
}
render() {
const { label, value } = this.props;
return ManifestItem(
{ label },
div({ className: "manifest-item__url" }, value)
);
}
}
module.exports = ManifestUrlItem;

5
devtools/client/application/src/components/manifest/moz.build
View File

@ -7,11 +7,12 @@ DevToolsModules(
'ManifestColorItem.js',
'ManifestEmpty.js',
'ManifestIconItem.js',
'ManifestIssue.js',
'ManifestIssueList.js',
'ManifestIssue.js',
'ManifestIssueList.js',
'ManifestItem.js',
'ManifestJsonLink.js',
'ManifestLoader.js',
'ManifestPage.js',
'ManifestSection.js',
'ManifestUrlItem.js',
)

1
devtools/client/application/src/constants.js
View File

@ -39,6 +39,7 @@ const MANIFEST_MEMBER_VALUE_TYPES = {
COLOR: "color",
ICON: "icon",
STRING: "string",
URL: "url",
};
const MANIFEST_ISSUE_LEVELS = {

3
devtools/client/application/src/reducers/manifest-state.js
View File

@ -49,6 +49,9 @@ function _processRawManifestMembers(rawManifest) {
function getValueTypeForMember(key) {
switch (key) {
case "start_url":
case "scope":
return MANIFEST_MEMBER_VALUE_TYPES.URL;
case "theme_color":
case "background_color":
return MANIFEST_MEMBER_VALUE_TYPES.COLOR;

6
devtools/client/application/src/types/manifest.js
View File

@ -37,6 +37,11 @@ const manifestItemIcon = {
}).isRequired,
};
const manifestItemUrl = {
label: PropTypes.string.isRequired,
value: PropTypes.string,
};
const manifestMemberColor = {
key: manifestItemColor.label,
value: manifestItemColor.value,
@ -77,6 +82,7 @@ module.exports = {
// specific manifest items
manifestItemColor,
manifestItemIcon,
manifestItemUrl,
// manifest issues
manifestIssue,
manifestIssueArray,

152
devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap
View File

@ -133,7 +133,57 @@ exports[`Manifest does render the issues section when the manifest is not valid
</article>
`;
exports[`Manifest renders the expected snapshop for a manifest with icon members 1`] = `
exports[`Manifest renders the expected snapshot for a manifest with color members 1`] = `
<article
className="js-manifest"
>
<Localized
id="manifest-view-header"
>
<h1
className="app-page__title"
/>
</Localized>
<ManifestJsonLink />
<ManifestSection
key="manifest-section-1"
title="manifest-item-identity"
>
<table>
<tbody />
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-2"
title="manifest-item-presentation"
>
<table>
<tbody>
<ManifestColorItem
key="background_color"
label="background_color"
value="red"
/>
<ManifestColorItem
key="theme_color"
label="theme_color"
value="rgb(0, 0, 0)"
/>
</tbody>
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-3"
title="manifest-item-icons"
>
<table>
<tbody />
</table>
</ManifestSection>
</article>
`;
exports[`Manifest renders the expected snapshot for a manifest with icon members 1`] = `
<article
className="js-manifest"
>
@ -203,56 +253,6 @@ exports[`Manifest renders the expected snapshop for a manifest with icon members
</article>
`;
exports[`Manifest renders the expected snapshot for a manifest with color members 1`] = `
<article
className="js-manifest"
>
<Localized
id="manifest-view-header"
>
<h1
className="app-page__title"
/>
</Localized>
<ManifestJsonLink />
<ManifestSection
key="manifest-section-1"
title="manifest-item-identity"
>
<table>
<tbody />
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-2"
title="manifest-item-presentation"
>
<table>
<tbody>
<ManifestColorItem
key="background_color"
label="background_color"
value="red"
/>
<ManifestColorItem
key="theme_color"
label="theme_color"
value="rgb(0, 0, 0)"
/>
</tbody>
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-3"
title="manifest-item-icons"
>
<table>
<tbody />
</table>
</ManifestSection>
</article>
`;
exports[`Manifest renders the expected snapshot for a manifest with string members 1`] = `
<article
className="js-manifest"
@ -344,3 +344,53 @@ exports[`Manifest renders the expected snapshot for a manifest with unknown type
</ManifestSection>
</article>
`;
exports[`Manifest renders the expected snapshot for a manifest with url members 1`] = `
<article
className="js-manifest"
>
<Localized
id="manifest-view-header"
>
<h1
className="app-page__title"
/>
</Localized>
<ManifestJsonLink />
<ManifestSection
key="manifest-section-1"
title="manifest-item-identity"
>
<table>
<tbody />
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-2"
title="manifest-item-presentation"
>
<table>
<tbody>
<ManifestUrlItem
key="start_url"
label="start_url"
value="https://example.com/"
/>
<ManifestUrlItem
key="scope"
label="scope"
value="https://example.com/"
/>
</tbody>
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-3"
title="manifest-item-icons"
>
<table>
<tbody />
</table>
</ManifestSection>
</article>
`;

21
devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestUrlItem.test.js.snap Normal file
View File

@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ManifestUrlItem renders the expected snapshot for a populated url 1`] = `
<ManifestItem
label="foo"
>
<div
className="manifest-item__url"
/>
</ManifestItem>
`;
exports[`ManifestUrlItem renders the expected snapshot for an empty url 1`] = `
<ManifestItem
label="foo"
>
<div
className="manifest-item__url"
/>
</ManifestItem>
`;

8
devtools/client/application/test/node/components/manifest/components_application_panel-Manifest.test.js
View File

@ -16,6 +16,7 @@ const {
MANIFEST_ICON_MEMBERS,
MANIFEST_STRING_MEMBERS,
MANIFEST_UNKNOWN_TYPE_MEMBERS,
MANIFEST_URL_MEMBERS,
MANIFEST_NO_ISSUES,
MANIFEST_WITH_ISSUES,
} = require("devtools/client/application/test/node/fixtures/data/constants");
@ -40,11 +41,16 @@ describe("Manifest", () => {
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshop for a manifest with icon members", () => {
it("renders the expected snapshot for a manifest with icon members", () => {
const wrapper = shallow(Manifest(MANIFEST_ICON_MEMBERS));
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshot for a manifest with url members", () => {
const wrapper = shallow(Manifest(MANIFEST_URL_MEMBERS));
expect(wrapper).toMatchSnapshot();
});
it("does render the issues section when the manifest is not valid", () => {
const wrapper = shallow(Manifest(MANIFEST_WITH_ISSUES));
expect(wrapper).toMatchSnapshot();

30
devtools/client/application/test/node/components/manifest/components_application_panel-ManifestUrlItem.test.js Normal file
View File

@ -0,0 +1,30 @@
/* 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 ManifestUrlItem = createFactory(
require("devtools/client/application/src/components/manifest/ManifestUrlItem")
);
/*
* Unit tests for the ManifestUrlItem component
*/
describe("ManifestUrlItem", () => {
it("renders the expected snapshot for a populated url", () => {
const wrapper = shallow(
ManifestUrlItem({ label: "foo" }, "https://example.com")
);
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshot for an empty url", () => {
const wrapper = shallow(ManifestUrlItem({ label: "foo" }));
expect(wrapper).toMatchSnapshot();
});
});

11
devtools/client/application/test/node/fixtures/data/constants.js
View File

@ -257,6 +257,16 @@ const MANIFEST_UNKNOWN_TYPE_MEMBERS = {
validation: [],
};
// props for a manifest with url values
const MANIFEST_URL_MEMBERS = {
icons: [],
identity: [],
presentation: [
{ key: "start_url", value: "https://example.com/", type: "url" },
{ key: "scope", value: "https://example.com/", type: "url" },
],
};
const MANIFEST_WITH_ISSUES = {
icons: [],
identity: [{ key: "name", value: "foo", type: "string" }],
@ -298,4 +308,5 @@ module.exports = {
MANIFEST_ICON_MEMBERS,
MANIFEST_STRING_MEMBERS,
MANIFEST_UNKNOWN_TYPE_MEMBERS,
MANIFEST_URL_MEMBERS,
};

6
devtools/client/application/test/xpcshell/test_manifest_reducer.js
View File

@ -11,7 +11,7 @@ const {
MANIFEST_MEMBER_VALUE_TYPES,
} = require("devtools/client/application/src/constants.js");
const { ICON, COLOR, STRING } = MANIFEST_MEMBER_VALUE_TYPES;
const { ICON, COLOR, STRING, URL } = MANIFEST_MEMBER_VALUE_TYPES;
const {
manifestReducer,
@ -49,11 +49,15 @@ const MANIFEST_PROCESSING = [
source: {
name: "Foo",
background_color: "#FF0000",
start_url: "https://example.com/?q=foo",
scope: "https://example.com",
},
processed: {
identity: [{ key: "name", value: "Foo", type: STRING }],
presentation: [
{ key: "background_color", value: "#FF0000", type: COLOR },
{ key: "start_url", value: "https://example.com/?q=foo", type: URL },
{ key: "scope", value: "https://example.com", type: URL },
],
},
},

1
devtools/client/jar.mn
View File

@ -358,6 +358,7 @@ devtools.jar:
content/application/src/components/manifest/ManifestJsonLink.css (application/src/components/manifest/ManifestJsonLink.css)
content/application/src/components/manifest/ManifestLoader.css (application/src/components/manifest/ManifestLoader.css)
content/application/src/components/manifest/ManifestSection.css (application/src/components/manifest/ManifestSection.css)
content/application/src/components/manifest/ManifestUrlItem.css (application/src/components/manifest/ManifestUrlItem.css)
content/application/src/components/routing/PageSwitcher.css (application/src/components/routing/PageSwitcher.css)
content/application/src/components/routing/Sidebar.css (application/src/components/routing/Sidebar.css)
content/application/src/components/routing/SidebarItem.css (application/src/components/routing/SidebarItem.css)