Bug 1575499 - Part 1: Rename ManifestView to Manifest 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. `*View` suffixes are sometimes used in JS frameworks context in the same sense we use our `*Page` suffix in here. To avoid confusion –and to have a shorter name– I renamed components to just `Manifest*` Differential Revision: https://phabricator.services.mozilla.com/D43229 --HG-- rename : devtools/client/application/src/components/manifest/ManifestView.css => devtools/client/application/src/components/manifest/Manifest.css rename : devtools/client/application/src/components/manifest/ManifestView.js => devtools/client/application/src/components/manifest/Manifest.js rename : devtools/client/application/src/components/manifest/ManifestViewEmpty.js => devtools/client/application/src/components/manifest/ManifestEmpty.js rename : devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestView.test.js.snap => devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap rename : devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestViewEmpty.test.js.snap => devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap rename : devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js => devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js rename : devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js => devtools/client/application/test/components/manifest/components_application_panel-ManifestEmpty.test.js extra : moz-landing-system : lando
2019-08-26 12:31:10 +00:00 · 2019-08-26 12:31:10 +00:00 · 20f700885f
--- a/devtools/client/application/application.css
+++ b/devtools/client/application/application.css
@ -11,7 +11,7 @@
 * Components
 */
@import "resource://devtools/client/application/src/components/App.css";
-@import "resource://devtools/client/application/src/components/manifest/ManifestView.css";
+@import "resource://devtools/client/application/src/components/manifest/Manifest.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";
--- a/devtools/client/application/src/components/manifest/ManifestView.css
+++ b/devtools/client/application/src/components/manifest/ManifestView.css
@ -2,40 +2,40 @@
 * 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-view {
+.manifest {
  padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 4);
  border-bottom: 1px solid var(--grey-20);
  display: table;
  width: 100%;
 }

-.manifest-view:last-child {
+.manifest:last-child {
  border-bottom: 0;
 }

-.manifest-view__title {
+.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-view__row {
+.manifest__row {
  vertical-align: top;
 }

-.manifest-view__col-label {
+.manifest__col-label {
 	color: var(--grey-50);
  font-weight: var(--title-30-font-weight);
  width: calc(var(--base-unit) * 28);
  text-align: right;
 }

-.manifest-view__col-value {
+.manifest__col-value {
  word-break: break-all;
 }

-.manifest-view__row-error .manifest-view__col-label {
+.manifest__row-error .manifest__col-label {
  width: calc(var(--base-unit) * 6);
  text-align: left;
 }
--- a/devtools/client/application/src/components/manifest/ManifestView.js
+++ b/devtools/client/application/src/components/manifest/ManifestView.js
@ -23,10 +23,11 @@ const Localized = createFactory(FluentReact.Localized);
 const ManifestItemIcon = createFactory(require("./ManifestItemIcon"));
 const ManifestItemText = createFactory(require("./ManifestItemText"));
 const ManifestItemWarning = createFactory(require("./ManifestItemWarning"));
+
 /**
- * This component
+ * Displays a canonical manifest, splitted in different sections
 */
-class ManifestView extends PureComponent {
+class Manifest extends PureComponent {
  static get propTypes() {
    return {
      identity: PropTypes.object.isRequired,
@ -47,10 +48,10 @@ class ManifestView extends PureComponent {
        h1({ className: "app-page__title" })
      ),
      table(
-        { className: "manifest-view", key: "errors-and-warnings" },
+        { className: "manifest", key: "errors-and-warnings" },
        Localized(
          { id: "manifest-item-warnings" },
-          caption({ className: "manifest-view__title" })
+          caption({ className: "manifest__title" })
        ),
        tbody(
          {},
@ -60,10 +61,10 @@ class ManifestView extends PureComponent {
        )
      ),
      table(
-        { className: "manifest-view", key: "identity" },
+        { className: "manifest", key: "identity" },
        Localized(
          { id: "manifest-item-identity" },
-          caption({ className: "manifest-view__title" })
+          caption({ className: "manifest__title" })
        ),
        tbody(
          {},
@ -73,10 +74,10 @@ class ManifestView extends PureComponent {
        )
      ),
      table(
-        { className: "manifest-view", key: "presentation" },
+        { className: "manifest", key: "presentation" },
        Localized(
          { id: "manifest-item-presentation" },
-          caption({ className: "manifest-view__title" })
+          caption({ className: "manifest__title" })
        ),
        tbody(
          {},
@ -86,10 +87,10 @@ class ManifestView extends PureComponent {
        )
      ),
      table(
-        { className: "manifest-view", key: "icons" },
+        { className: "manifest", key: "icons" },
        Localized(
          { id: "manifest-item-icons" },
-          caption({ className: "manifest-view__title" })
+          caption({ className: "manifest__title" })
        ),
        tbody(
          {},
@ -103,4 +104,4 @@ class ManifestView extends PureComponent {
 }

 // Exports
-module.exports = ManifestView;
+module.exports = Manifest;
--- a/devtools/client/application/src/components/manifest/ManifestViewEmpty.js
+++ b/devtools/client/application/src/components/manifest/ManifestViewEmpty.js
@ -21,10 +21,10 @@ const Localized = createFactory(FluentReact.Localized);
 * This component displays help information when no manifest is found for the
 * current target.
 */
-class ManifestViewEmpty extends PureComponent {
+class ManifestEmpty extends PureComponent {
  render() {
    return article(
-      { className: "manifest-view-empty" },
+      { className: "manifest-empty" },
      Localized(
        {
          id: "manifest-view-header",
@ -37,4 +37,4 @@ class ManifestViewEmpty extends PureComponent {
 }

 // Exports
-module.exports = ManifestViewEmpty;
+module.exports = ManifestEmpty;
--- a/devtools/client/application/src/components/manifest/ManifestItemIcon.js
+++ b/devtools/client/application/src/components/manifest/ManifestItemIcon.js
@ -25,9 +25,9 @@ class ManifestItemIcon extends PureComponent {
    const { icon } = this.props;

    return tr(
-      { className: "manifest-view__row" },
-      th({ className: "manifest-view__col-label", scope: "row" }, icon.size),
-      td({ className: "manifest-view__col-value" }, icon.src)
+      { className: "manifest__row" },
+      th({ className: "manifest__col-label", scope: "row" }, icon.size),
+      td({ className: "manifest__col-value" }, icon.src)
    );
  }
 }
--- a/devtools/client/application/src/components/manifest/ManifestItemText.js
+++ b/devtools/client/application/src/components/manifest/ManifestItemText.js
@ -26,9 +26,9 @@ class ManifestItemText extends PureComponent {
    const { name, val } = this.props;

    return tr(
-      { className: "manifest-view__row" },
-      th({ className: "manifest-view__col-label", scope: "row" }, name),
-      td({ className: "manifest-view__col-value" }, val)
+      { className: "manifest__row" },
+      th({ className: "manifest__col-label", scope: "row" }, name),
+      td({ className: "manifest__col-value" }, val)
    );
  }
 }
--- a/devtools/client/application/src/components/manifest/ManifestItemWarning.js
+++ b/devtools/client/application/src/components/manifest/ManifestItemWarning.js
@ -26,15 +26,15 @@ class ManifestItemWarning extends PureComponent {
    const { warning } = this.props;

    return tr(
-      { className: "manifest-view__row manifest-view__row-error" },
+      { className: "manifest__row manifest__row-error" },
      th(
-        { className: "manifest-view__col-label", scope: "row" },
+        { className: "manifest__col-label", scope: "row" },
        img({
          src: "chrome://global/skin/icons/warning.svg",
          alt: "Warning icon",
        })
      ),
-      td({ className: "manifest-view__col-value" }, warning.warn)
+      td({ className: "manifest__col-value" }, warning.warn)
    );
  }
 }
--- a/devtools/client/application/src/components/manifest/ManifestPage.js
+++ b/devtools/client/application/src/components/manifest/ManifestPage.js
@ -14,14 +14,14 @@ const {

 const ManifestLoader = createFactory(require("../manifest/ManifestLoader"));

-const ManifestView = createFactory(require("./ManifestView"));
-const ManifestViewEmpty = createFactory(require("./ManifestViewEmpty"));
+const Manifest = createFactory(require("./Manifest"));
+const ManifestEmpty = createFactory(require("./ManifestEmpty"));

 const { MANIFEST_DATA } = require("../../constants");

 class ManifestPage extends PureComponent {
  render() {
-    const isManifestViewEmpty = !MANIFEST_DATA;
+    const isManifestEmpty = !MANIFEST_DATA;

    // needs to be replaced with data from ManifestLoader
    const data = {
@ -42,12 +42,12 @@ class ManifestPage extends PureComponent {

    return section(
      {
-        className: `app-page ${isManifestViewEmpty ? "app-page--empty" : ""}`,
+        className: `app-page ${isManifestEmpty ? "app-page--empty" : ""}`,
      },
      ManifestLoader({}),
-      isManifestViewEmpty
-        ? ManifestViewEmpty({})
-        : ManifestView({
+      isManifestEmpty
+        ? ManifestEmpty({})
+        : Manifest({
            identity: data.identity,
            warnings: data.warnings,
            icons: data.icons,
--- a/devtools/client/application/src/components/manifest/moz.build
+++ b/devtools/client/application/src/components/manifest/moz.build
@ -3,12 +3,12 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 DevToolsModules(
+    'Manifest.css',
+    'Manifest.js',
+    'ManifestEmpty.js',
 	'ManifestItemIcon.js',
 	'ManifestItemText.js',
 	'ManifestItemWarning.js',
    'ManifestLoader.js',
    'ManifestPage.js',
-    'ManifestView.css',
-    'ManifestView.js',
-    'ManifestViewEmpty.js'
 )
--- a/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestView.test.js.snap
+++ b/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestView.test.js.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`ManifestView renders the expected snapshot 1`] = `
+exports[`Manifest renders the expected snapshot 1`] = `
 <article>
  <Localized
    id="manifest-view-header"
@ -10,14 +10,14 @@ exports[`ManifestView renders the expected snapshot 1`] = `
    />
  </Localized>
  <table
-    className="manifest-view"
+    className="manifest"
    key="errors-and-warnings"
  >
    <Localized
      id="manifest-item-warnings"
    >
      <caption
-        className="manifest-view__title"
+        className="manifest__title"
      />
    </Localized>
    <tbody>
@ -40,14 +40,14 @@ exports[`ManifestView renders the expected snapshot 1`] = `
    </tbody>
  </table>
  <table
-    className="manifest-view"
+    className="manifest"
    key="identity"
  >
    <Localized
      id="manifest-item-identity"
    >
      <caption
-        className="manifest-view__title"
+        className="manifest__title"
      />
    </Localized>
    <tbody>
@ -64,14 +64,14 @@ exports[`ManifestView renders the expected snapshot 1`] = `
    </tbody>
  </table>
  <table
-    className="manifest-view"
+    className="manifest"
    key="presentation"
  >
    <Localized
      id="manifest-item-presentation"
    >
      <caption
-        className="manifest-view__title"
+        className="manifest__title"
      />
    </Localized>
    <tbody>
@ -103,14 +103,14 @@ exports[`ManifestView renders the expected snapshot 1`] = `
    </tbody>
  </table>
  <table
-    className="manifest-view"
+    className="manifest"
    key="icons"
  >
    <Localized
      id="manifest-item-icons"
    >
      <caption
-        className="manifest-view__title"
+        className="manifest__title"
      />
    </Localized>
    <tbody>
--- a/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestViewEmpty.test.js.snap
+++ b/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestViewEmpty.test.js.snap
@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`ManifestViewEmpty renders the expected snapshot 1`] = `
+exports[`ManifestEmpty renders the expected snapshot 1`] = `
 <article
-  className="manifest-view-empty"
+  className="manifest-empty"
 >
  <Localized
    id="manifest-view-header"
--- a/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestPage.test.js.snap
+++ b/devtools/client/application/test/components/manifest/snapshots/components_application_panel-ManifestPage.test.js.snap
@ -5,7 +5,7 @@ exports[`ManifestPage renders the expected snapshot 1`] = `
  className="app-page "
 >
  <Connect(ManifestLoader) />
-  <ManifestView
+  <Manifest
    icons={
      Array [
        Object {
--- a/devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js
+++ b/devtools/client/application/test/components/manifest/components_application_panel-ManifestView.test.js
@ -7,8 +7,8 @@
 const { shallow } = require("enzyme");
 const { createFactory } = require("react");

-const ManifestView = createFactory(
-  require("devtools/client/application/src/components/manifest/ManifestView")
+const Manifest = createFactory(
+  require("devtools/client/application/src/components/manifest/Manifest")
 );

 const { MANIFEST_DATA } = require("../../../src/constants");
@ -31,13 +31,13 @@ const data = {
 };

 /**
- * Test for ManifestView.js component
+ * Test for Manifest component
 */

-describe("ManifestView", () => {
+describe("Manifest", () => {
  it("renders the expected snapshot", () => {
    const wrapper = shallow(
-      ManifestView({
+      Manifest({
        identity: data.identity,
        warnings: data.warnings,
        icons: data.icons,
--- a/devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js
+++ b/devtools/client/application/test/components/manifest/components_application_panel-ManifestViewEmpty.test.js
@ -7,17 +7,17 @@
 const { shallow } = require("enzyme");
 const { createFactory } = require("react");

-const ManifestViewEmpty = createFactory(
-  require("devtools/client/application/src/components/manifest/ManifestViewEmpty")
+const ManifestEmpty = createFactory(
+  require("devtools/client/application/src/components/manifest/ManifestEmpty")
 );

 /**
- * Test for ManifestPage.js component
+ * Test for ManifestEmpty component
 */

-describe("ManifestViewEmpty", () => {
+describe("ManifestEmpty", () => {
  it("renders the expected snapshot", () => {
-    const wrapper = shallow(ManifestViewEmpty({}));
+    const wrapper = shallow(ManifestEmpty({}));
    expect(wrapper).toMatchSnapshot();
  });
 });