Bug 1881816 - Move all newtab/content-src/*.js files which are modules to use .mjs extensions. r=amy

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

browser/components/newtab/.eslintrc.js

@@ -15,11 +15,7 @@ module.exports = {
     {
       // TODO: Bug 1773467 - Move these to .mjs or figure out a generic way
       // to identify these as modules.
-      files: [
+      files: ["test/schemas/**/*.js", "test/unit/**/*.js"],
-        "content-src/**/*.js",
-        "test/schemas/**/*.js",
-        "test/unit/**/*.js",
-      ],
       parserOptions: {
         sourceType: "module",
       },

browser/components/newtab/content-src/components/Base/Base.jsx

@@ -73,7 +73,7 @@ export class _Base extends React.PureComponent {
     ]
       .filter(v => v)
       .join(" ");
-    global.document.body.className = bodyClassName;
+    globalThis.document.body.className = bodyClassName;
   }
 
   render() {

browser/components/newtab/content-src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -119,7 +119,7 @@ export class _CollapsibleSection extends React.PureComponent {
 }
 
 _CollapsibleSection.defaultProps = {
-  document: global.document || {
+  document: globalThis.document || {
     addEventListener: () => {},
     removeEventListener: () => {},
     visibilityState: "hidden",

browser/components/newtab/content-src/components/ContextMenu/ContextMenu.jsx

@@ -26,12 +26,12 @@ export class ContextMenu extends React.PureComponent {
   componentDidMount() {
     this.onShow();
     setTimeout(() => {
-      global.addEventListener("click", this.hideContext);
+      globalThis.addEventListener("click", this.hideContext);
     }, 0);
   }
 
   componentWillUnmount() {
-    global.removeEventListener("click", this.hideContext);
+    globalThis.removeEventListener("click", this.hideContext);
   }
 
   onClick(event) {

browser/components/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.jsx

@@ -442,9 +442,9 @@ export class CollapseToggle extends React.PureComponent {
 
   setBodyClass() {
     if (this.renderAdmin && !this.state.collapsed) {
-      global.document.body.classList.add("no-scroll");
+      globalThis.document.body.classList.add("no-scroll");
     } else {
-      global.document.body.classList.remove("no-scroll");
+      globalThis.document.body.classList.remove("no-scroll");
     }
   }
 
@@ -457,7 +457,7 @@ export class CollapseToggle extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    global.document.body.classList.remove("no-scroll");
+    globalThis.document.body.classList.remove("no-scroll");
   }
 
   render() {

browser/components/newtab/content-src/components/DiscoveryStreamAdmin/SimpleHashRouter.jsx

@@ -8,19 +8,19 @@ export class SimpleHashRouter extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onHashChange = this.onHashChange.bind(this);
-    this.state = { hash: global.location.hash };
+    this.state = { hash: globalThis.location.hash };
   }
 
   onHashChange() {
-    this.setState({ hash: global.location.hash });
+    this.setState({ hash: globalThis.location.hash });
   }
 
   componentWillMount() {
-    global.addEventListener("hashchange", this.onHashChange);
+    globalThis.addEventListener("hashchange", this.onHashChange);
   }
 
   componentWillUnmount() {
-    global.removeEventListener("hashchange", this.onHashChange);
+    globalThis.removeEventListener("hashchange", this.onHashChange);
   }
 
   render() {

browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -384,6 +384,6 @@ export const DiscoveryStreamBase = connect(state => ({
   DiscoveryStream: state.DiscoveryStream,
   Prefs: state.Prefs,
   Sections: state.Sections,
-  document: global.document,
+  document: globalThis.document,
   App: state.App,
 }))(_DiscoveryStreamBase);

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -28,7 +28,7 @@ export function DSSubHeader({ children }) {
   );
 }
 
-export function OnboardingExperience({ dispatch, windowObj = global }) {
+export function OnboardingExperience({ dispatch, windowObj = globalThis }) {
   const [dismissed, setDismissed] = useState(false);
   const [maxHeight, setMaxHeight] = useState(null);
   const heightElement = useRef(null);

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter.jsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { cardContextTypes } from "../../Card/types.js";
+import { cardContextTypes } from "../../Card/types.mjs";
 import { SponsoredContentHighlight } from "../FeatureHighlight/SponsoredContentHighlight";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { FluentOrText } from "../../FluentOrText/FluentOrText.jsx";

browser/components/newtab/content-src/components/DiscoveryStreamImpressionStats/ImpressionStats.jsx

@@ -241,8 +241,8 @@ export class ImpressionStats extends React.PureComponent {
 }
 
 ImpressionStats.defaultProps = {
-  IntersectionObserver: global.IntersectionObserver,
+  IntersectionObserver: globalThis.IntersectionObserver,
-  document: global.document,
+  document: globalThis.document,
   rows: [],
   source: "",
 };

browser/components/newtab/content-src/components/ModalOverlay/ModalOverlay.jsx

@@ -53,4 +53,4 @@ export class ModalOverlayWrapper extends React.PureComponent {
   }
 }
 
-ModalOverlayWrapper.defaultProps = { document: global.document };
+ModalOverlayWrapper.defaultProps = { document: globalThis.document };

browser/components/newtab/content-src/components/Sections/Sections.jsx

@@ -30,7 +30,7 @@ export class Section extends React.PureComponent {
     let cardsPerRow = CARDS_PER_ROW_DEFAULT;
     if (
       props.compactCards &&
-      global.matchMedia(`(min-width: 1072px)`).matches
+      globalThis.matchMedia(`(min-width: 1072px)`).matches
     ) {
       // If the section has compact cards and the viewport is wide enough, we show
       // 4 columns instead of 3.
@@ -323,7 +323,7 @@ export class Section extends React.PureComponent {
 }
 
 Section.defaultProps = {
-  document: global.document,
+  document: globalThis.document,
   rows: [],
   emptyState: {},
   pref: {},

browser/components/newtab/content-src/components/TopSites/TopSiteImpressionWrapper.jsx

@@ -142,8 +142,8 @@ export class TopSiteImpressionWrapper extends React.PureComponent {
 }
 
 TopSiteImpressionWrapper.defaultProps = {
-  IntersectionObserver: global.IntersectionObserver,
+  IntersectionObserver: globalThis.IntersectionObserver,
-  document: global.document,
+  document: globalThis.document,
   actionType: null,
   tile: null,
 };

browser/components/newtab/content-src/components/TopSites/TopSites.jsx

@@ -90,7 +90,7 @@ export class _TopSites extends React.PureComponent {
     // We hide 2 sites per row when not in the wide layout.
     let sitesPerRow = TOP_SITES_MAX_SITES_PER_ROW;
     // $break-point-widest = 1072px (from _variables.scss)
-    if (!global.matchMedia(`(min-width: 1072px)`).matches) {
+    if (!globalThis.matchMedia(`(min-width: 1072px)`).matches) {
       sitesPerRow -= 2;
     }
     return this.props.TopSites.rows.slice(

browser/components/newtab/content-src/lib/constants.mjs

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export const IS_NEWTAB =
-  global.document && global.document.documentURI === "about:newtab";
+  globalThis.document && globalThis.document.documentURI === "about:newtab";
 export const NEWTAB_DARK_THEME = {
   ntp_background: {
     r: 42,

browser/components/newtab/content-src/lib/detect-user-session-start.mjs

@@ -2,8 +2,11 @@
  * 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/. */
 
-import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
+import {
-import { perfService as perfSvc } from "content-src/lib/perf-service";
+  actionCreators as ac,
+  actionTypes as at,
+} from "../../common/Actions.mjs";
+import { perfService as perfSvc } from "./perf-service.mjs";
 
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -12,7 +15,7 @@ export class DetectUserSessionStart {
   constructor(store, options = {}) {
     this._store = store;
     // Overrides for testing
-    this.document = options.document || global.document;
+    this.document = options.document || globalThis.document;
     this._perfService = options.perfService || perfSvc;
     this._onVisibilityChange = this._onVisibilityChange.bind(this);
   }

browser/components/newtab/content-src/lib/init-store.mjs

@@ -8,7 +8,10 @@ import {
   actionCreators as ac,
   actionTypes as at,
   actionUtils as au,
-} from "common/Actions.mjs";
+} from "../../common/Actions.mjs";
+// We disable import checking here as redux is installed via the npm packages
+// at the newtab level, rather than in the top-level package.json.
+// eslint-disable-next-line import/no-unresolved
 import { applyMiddleware, combineReducers, createStore } from "redux";
 
 export const MERGE_STORE_ACTION = "NEW_TAB_INITIAL_STATE";
@@ -117,12 +120,12 @@ export function initStore(reducers, initialState) {
   const store = createStore(
     mergeStateReducer(combineReducers(reducers)),
     initialState,
-    global.RPMAddMessageListener &&
+    globalThis.RPMAddMessageListener &&
       applyMiddleware(rehydrationMiddleware, messageMiddleware)
   );
 
-  if (global.RPMAddMessageListener) {
+  if (globalThis.RPMAddMessageListener) {
-    global.RPMAddMessageListener(INCOMING_MESSAGE_NAME, msg => {
+    globalThis.RPMAddMessageListener(INCOMING_MESSAGE_NAME, msg => {
       try {
         store.dispatch(msg.data);
       } catch (ex) {

browser/components/newtab/content-src/lib/link-menu-options.mjs

@@ -2,7 +2,10 @@
  * 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/. */
 
-import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
+import {
+  actionCreators as ac,
+  actionTypes as at,
+} from "../../common/Actions.mjs";
 
 const _OpenInPrivateWindow = site => ({
   id: "newtab-menu-open-new-private-window",

browser/components/newtab/content-src/lib/perf-service.mjs

@@ -2,8 +2,6 @@
  * 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";
-
 let usablePerfObj = window.performance;
 
 export function _PerfService(options) {
@@ -37,8 +35,8 @@ _PerfService.prototype = {
    * @param  {String} type eg "mark"
    * @return {Array}       Performance* objects
    */
-  getEntriesByName: function getEntriesByName(name, type) {
+  getEntriesByName: function getEntriesByName(entryName, type) {
-    return this._perf.getEntriesByName(name, type);
+    return this._perf.getEntriesByName(entryName, type);
   },
 
   /**
@@ -89,11 +87,11 @@ _PerfService.prototype = {
    * See [bug 1369303](https://bugzilla.mozilla.org/show_bug.cgi?id=1369303)
    * for more info.
    */
-  getMostRecentAbsMarkStartByName(name) {
+  getMostRecentAbsMarkStartByName(entryName) {
-    let entries = this.getEntriesByName(name, "mark");
+    let entries = this.getEntriesByName(entryName, "mark");
 
     if (!entries.length) {
-      throw new Error(`No marks with the name ${name}`);
+      throw new Error(`No marks with the name ${entryName}`);
     }
 
     let mostRecentEntry = entries[entries.length - 1];

browser/components/newtab/content-src/lib/screenshot-utils.mjs

@@ -30,7 +30,7 @@ export const ScreenshotUtils = {
     }
     if (this.isBlob(false, remoteImage)) {
       return {
-        url: global.URL.createObjectURL(remoteImage.data),
+        url: globalThis.URL.createObjectURL(remoteImage.data),
         path: remoteImage.path,
       };
     }
@@ -41,7 +41,7 @@ export const ScreenshotUtils = {
   // This should always be called with a local image and not a remote image.
   maybeRevokeBlobObjectURL(localImage) {
     if (this.isBlob(true, localImage)) {
-      global.URL.revokeObjectURL(localImage.url);
+      globalThis.URL.revokeObjectURL(localImage.url);
     }
   },
 

browser/components/newtab/karma.mc.config.js

@@ -211,7 +211,7 @@ module.exports = function (config) {
       devtool: "inline-source-map",
       // This resolve config allows us to import with paths relative to the root directory, e.g. "lib/ActivityStream.sys.mjs"
       resolve: {
-        extensions: [".js", ".jsx"],
+        extensions: [".js", ".jsx", ".mjs"],
         modules: [PATHS.moduleResolveDirectory, "node_modules"],
         alias: {
           asrouter: path.join(__dirname, "../asrouter"),
@@ -260,7 +260,7 @@ module.exports = function (config) {
           },
           {
             enforce: "post",
-            test: /\.js[mx]?$/,
+            test: /\.js[x]?$/,
             loader: "@jsdevtools/coverage-istanbul-loader",
             options: { esModules: true },
             include: [

browser/components/newtab/lib/SectionsManager.sys.mjs

@@ -389,7 +389,7 @@ export const SectionsManager = {
 
   /**
    * Sets each card in highlights' context menu options based on the card's type.
-   * (See types.js for a list of types)
+   * (See types.mjs for a list of types)
    *
    * @param rows section rows containing a type for each card
    */

browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSContextFooter.test.jsx

@@ -5,7 +5,7 @@ import {
 } from "content-src/components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter";
 import React from "react";
 import { mount } from "enzyme";
-import { cardContextTypes } from "content-src/components/Card/types.js";
+import { cardContextTypes } from "content-src/components/Card/types.mjs";
 import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText.jsx";
 
 describe("<DSContextFooter>", () => {

browser/components/newtab/webpack.system-addon.config.js

@@ -48,7 +48,7 @@ module.exports = (env = {}) => ({
   },
   // This resolve config allows us to import with paths relative to the root directory, e.g. "lib/ActivityStream.sys.mjs"
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".mjs"],
     modules: ["node_modules", "."],
   },
   externals: {