Add linting and prop types

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true,
+    "webextensions": true
+  },
+  "extends": "semistandard-react",
+  "parser": "babel-eslint"
+}

package.json

@@ -9,26 +9,31 @@
     "normalize.css": "^8.0.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "react-router-dom": "^4.3.1",
-    "typeface-roboto": "0.0.54"
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",
     "@babel/core": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.2",
     "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.0",
+    "eslint": "^5.12.0",
+    "eslint-config-semistandard-react": "^4.2.0",
+    "eslint-plugin-semistandard-react": "^4.1.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "prop-types": "^15.6.2",
     "style-loader": "^0.23.0",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.1"
   },
   "scripts": {
-    "build": "webpack --config ./webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.config.js --mode development",
+    "lint": "eslint ./src"
   },
   "repository": {
     "type": "git",

src/background/index.js

@@ -13,7 +13,7 @@ function onInstalled() {
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     console.log(`BG: Got a message! ${message}, ${sender}, ${sendResponse}`);
 
-        if (message.action === "bg_mountContentScript") {
+    if (message.action === 'bg_mountContentScript') {
       chrome.tabs.executeScript(message.tabId, {
         file: 'content.bundle.js' // Relative path is apparently determined from the manifest.json's position
       });

src/devpanel/components/App.js

@@ -3,10 +3,9 @@ import './App.css';
 
 import Header from './Header/Header.js';
 import Main from './Main/Main.js';
-import Footer from './Footer/Footer.js'
+import Footer from './Footer/Footer.js';
 
 class App extends Component {
-
   componentDidMount () {
 
   }
@@ -17,7 +16,7 @@ class App extends Component {
 
   render () {
     return (
-            <div className="App">
+      <div className='App'>
         <Header />
         <Main />
         <Footer />

src/devpanel/components/Container.js

@@ -1,13 +1,19 @@
 import React from 'react';
+import { node, string } from 'prop-types';
 import './Container.css';
 
 const MezzuriteDetails = (props) => (
-    <div className="Container">
+  <div className='Container'>
     { props.title &&
-            <p className="title">{props.title}</p>
+    <p className='title'>{props.title}</p>
     }
     {props.children}
   </div>
 );
 
+MezzuriteDetails.propTypes = {
+  children: node,
+  title: string
+};
+
 export default MezzuriteDetails;

src/devpanel/components/Footer/Footer.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import './Footer.css'
+import './Footer.css';
 
-import githubLogo from './GitHub-Mark-Light-32px.png'
+import githubLogo from './GitHub-Mark-Light-32px.png';
 
 const Footer = () => (
-    <footer className="Footer">
-        <a href="https://github.com/Microsoft/Mezzurite-DevTools" target="_blank">
-            <img id="gh-logo" src={githubLogo} />
+  <footer className='Footer'>
+    <a href='https://github.com/Microsoft/Mezzurite-DevTools' target='_blank'>
+      <img id='gh-logo' src={githubLogo} />
     </a>
     <span>Visit us on GitHub! ~ The Mezzurite Development Team</span>
   </footer>

src/devpanel/components/Header/Header.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import './Header.css'
+import './Header.css';
 
 class Header extends Component {
-
   componentDidMount () {
 
   }
@@ -13,7 +12,7 @@ class Header extends Component {
 
   render () {
     return (
-            <header className="Header">
+      <header className='Header'>
         <h1>Mezzurite Developer Tools</h1>
       </header>
     );

src/devpanel/components/Main/Main.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-import './Main.css'
+import './Main.css';
 import MezzuriteInfo from '../MezzuriteInfo/MezzuriteInfo.js';
 
 class Main extends Component {
-
   componentDidMount () {
 
   }
@@ -14,7 +13,7 @@ class Main extends Component {
 
   render () {
     return (
-            <main className="Main">
+      <main className='Main'>
         <MezzuriteInfo />
       </main>
     );

src/devpanel/components/MezzuriteInfo/MezzuriteDetails.js

@@ -1,16 +1,22 @@
 import React from 'react';
-import './MezzuriteDetails.css'
+import { string } from 'prop-types';
+import './MezzuriteDetails.css';
 import Container from '../Container.js';
 
 const MezzuriteDetails = (props) => (
-    <Container title="Mezzurite Framework Details">
-        <div id="mezzurite-package">
+  <Container title='Mezzurite Framework Details'>
+    <div id='mezzurite-package'>
       <span>Mezzurite Package Name: </span>{props.mezzuritePackage}
     </div>
-        <div id="mezzurite-version">
+    <div id='mezzurite-version'>
       <span>Mezzurite Package Version: </span>{props.mezzuriteVersion}
     </div>
   </Container>
 );
 
+MezzuriteDetails.propTypes = {
+  mezzuritePackage: string,
+  mezzuriteVersion: string
+};
+
 export default MezzuriteDetails;

src/devpanel/components/MezzuriteInfo/MezzuriteInfo.js

@@ -7,17 +7,17 @@ class MezzuriteInfo extends Component {
   constructor (props) {
     super(props);
     this.state = {
-            mezzuriteFoundMessage: "",
-            mezzuritePackage: "",
-            mezzuriteVersion: "",
+      mezzuriteFoundMessage: '',
+      mezzuritePackage: '',
+      mezzuriteVersion: '',
       timings: []
     };
   }
 
   componentDidMount () {
     MezzuriteInspector.getMezzuriteObjectAsync().then(value => {
-            const strNotFound = "Mezzurite has not been detected on this page";
-            const strFound = "Mezzurite has been detected on this page";
+      const strNotFound = 'Mezzurite has not been detected on this page';
+      const strFound = 'Mezzurite has been detected on this page';
 
       if (value === undefined) {
         this.setState({ mezzuriteFoundMessage: strNotFound });
@@ -47,7 +47,7 @@ class MezzuriteInfo extends Component {
 
   render () {
     return (
-            <div className="MezzuriteInfo">
+      <div className='MezzuriteInfo'>
         <MezzuriteDetails
           mezzuritePackage={this.state.mezzuritePackage}
           mezzuriteVersion={this.state.mezzuriteVersion}

src/devpanel/components/MezzuriteInfo/MezzuriteTimings.js

@@ -1,18 +1,27 @@
 import React from 'react';
+import { arrayOf, number, objectOf, string } from 'prop-types';
 import Container from '../Container.js';
 
 const MezzuriteTimings = (props) => {
   const timingItems = props.timings.map(timing =>
-        <li>{timing.metricType + ", " + timing.value + ", " + timing.data}</li>
+    <li>{timing.metricType + ', ' + timing.value + ', ' + timing.data}</li>
   );
 
   return (
-        <Container title="Mezzurite Timings">
-            <ul id="mezzurite-timings-list">
+    <Container title='Mezzurite Timings'>
+      <ul id='mezzurite-timings-list'>
         {timingItems}
       </ul>
     </Container>
-    )
+  );
+};
+
+MezzuriteTimings.propTypes = {
+  timings: arrayOf(objectOf({
+    data: string,
+    metricType: string,
+    value: number
+  }))
 };
 
 export default MezzuriteTimings;

src/devpanel/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MemoryRouter } from 'react-router-dom';
 
 import 'normalize.css';
 import './index.css';

src/devpanel/services/MezzuriteInspector.js

@@ -1,33 +1,3 @@
-/**
- * This is a callback function signature for handling the response that
- * is asynchronously returned by `chrome.devtools.inspectedWindow.eval()`.
- * @callback evalCallback
- * @param {Object} result - The result of the evaluated statement.
- * @param {Object} exceptionInfo - The exception details, if present.
- */
-
-/**
- * Attempts to get the `window.mezzurite` object from the inspected window.
- * @param {evalCallback} callback - The callback that handles the response.
- */
-function getMezzuriteObject(callback) {
-    const expression = `window.mezzurite`;
-    chrome.devtools.inspectedWindow.eval(expression, callback);
-}
-
-function getMezzuriteObjectAsync() {
-    const expression = `window.mezzurite`;
-    return new Promise(function(resolve, reject) {
-        chrome.devtools.inspectedWindow.eval(expression, (result, exceptionInfo) => {
-            if (exceptionInfo.isException === true) {
-                reject(Error(exceptionInfo));
-            } else {
-                resolve(result); // Return the object, which can be undefined. Let caller handle it.
-            }
-        });
-    });
-}
-
 class MezzuriteInspector {
   static getMezzuriteObjectAsync () {
     const expression = `window.mezzurite`;
@@ -50,7 +20,7 @@ class MezzuriteInspector {
     chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       console.log(`DT: Got a message! ${message}, ${sender}, ${sendResponse}`);
 
-            if (message.action === "timing") {
+      if (message.action === 'timing') {
         callback(message.payload);
       }
     });
@@ -63,7 +33,7 @@ class MezzuriteInspector {
      */
   static tellBackgroundToMountContentScript () {
     chrome.runtime.sendMessage({
-            action: "bg_mountContentScript",
+      action: 'bg_mountContentScript',
       tabId: chrome.devtools.inspectedWindow.tabId
     });
   }

src/devtools/index.js

@@ -14,11 +14,11 @@ const mezzuriteLoadCheckInterval = setInterval(
  * Creates the Mezzurite panel in the Chrome Developer Tools page.
  */
 function createPanel () {
-    const title = "Mezzurite";
+  const title = 'Mezzurite';
   const iconPath = null;
-    const pagePath = "devpanel.html"; // Relative path is apparently determined from the manifest.json's position
+  const pagePath = 'devpanel.html'; // Relative path is apparently determined from the manifest.json's position
   chrome.devtools.panels.create(title, iconPath, pagePath, function (panel) {
-        console.log("The Mezzurite panel in DevTools was created!");
+    console.log('The Mezzurite panel in DevTools was created!');
   });
 }
 
@@ -53,7 +53,7 @@ function createPanelIfMezzuriteLoaded() {
       return; // Mezzurite not found
     }
 
-        console.log("Mezzurite was found!");
+    console.log('Mezzurite was found!');
 
     // Stop checking for Mezzurite every second, as we have found it.
     clearInterval(mezzuriteLoadCheckInterval);

src/inject/content.js

@@ -20,7 +20,7 @@ function onTimingEvent(timingEvent) {
   console.log(`CS: Got a timing event! ${timingEvent}`);
   console.log(timingEvent);
   chrome.runtime.sendMessage({
-        action: "timing",
+    action: 'timing',
     payload: timingEvent.detail
   });
 }

src/inject/injected.js

@@ -8,7 +8,7 @@
   // the extension has already verified the existence of `window.mezzurite`.
   if (!window.mezzurite.EventElement) {
     window.mezzurite.EventElement = {};
-        window.mezzurite.EventElement = document.createTextNode("");
+    window.mezzurite.EventElement = document.createTextNode('');
   }
 
   window.mezzurite.EventElement.addEventListener('Timing', (timingEvent) => {

webpack.config.js

@@ -12,18 +12,18 @@ module.exports = {
     content: './src/inject/content.js',
     inject: './src/inject/injected.js'
   },
-  mode: "development",
+  mode: 'development',
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /(node_modules|bower_components)/,
-        loader: "babel-loader",
-        options: { presets: ["@babel/env"] }
+        loader: 'babel-loader',
+        options: { presets: ['@babel/env'] }
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
@@ -31,10 +31,10 @@ module.exports = {
       }
     ]
   },
-  resolve: { extensions: ["*", ".js", ".jsx"] },
+  resolve: { extensions: ['*', '.js', '.jsx'] },
   output: {
-    path: path.resolve(__dirname, "dist/"),
-    filename: "[name].bundle.js"
+    path: path.resolve(__dirname, 'dist/'),
+    filename: '[name].bundle.js'
   },
   plugins: [
     new CleanWebpackPlugin(['dist']),