Add a linter to the chromium-side of chrome://media-app

Linters are cool.

PRESUBMIT.py is the one that was in ui/file_manager, but with the path
adjusted so it can find `web_dev_style`.

.eslintrc.js is the one from ui/webui but with

  'parserOptions': {
    'ecmaVersion': 2018,
    'sourceType': 'module',
  },

added. This is needed to support `await` and spread syntax, and matches
our closure typechecking flags.

Note we also inherit the .eslintrc.js configuration in src/.eslintrc.js.


Fixes were mostly achieved by
  ./third_party/node/linux/node-linux-x64/bin/node \
      third_party/node/node_modules/eslint/bin/eslint.js \
      chromeos/components/media_app_ui/{test,resources/{js,mock}} --fix


The remaining bits were:
 -  document.getElementById is a restricted keyword. Recommendation is
to use resources/js/util.js, but I'm not sure we need/want that
dependency. Found a workaround (querySelector), but we might add that
dependency in a follow-up. (Where we use getElementById is placeholder/
experimental code currently).
 -  linter didn't like declaring a "namespace" like media_app. Changed
to declare pageHandler directly.
 -  linter also couldn't automatically fix the `==` -> `===`.

Bug: b/152284689
Change-Id: Ib12765ade3cc5f3a9f46448ad8741eb3b8434737
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2119336Reviewed-by: Patti <patricialor@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753523}

chromeos/components/media_app_ui/.eslintrc.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+module.exports = {
+  'env': {
+    'browser': true,
+    'es6': true,
+  },
+  'parserOptions': {
+    'ecmaVersion': 2018,
+    'sourceType': 'module',
+  },
+  'rules': {
+    'eqeqeq': ['error', 'always', {'null': 'ignore'}],
+  },
+};

chromeos/components/media_app_ui/PRESUBMIT.py

+# Copyright 2020 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+def CheckChangeOnUpload(input_api, output_api):
+  return _CommonChecks(input_api, output_api)
+
+
+def CheckChangeOnCommit(input_api, output_api):
+  return _CommonChecks(input_api, output_api)
+
+
+def _CommonChecks(input_api, output_api):
+  results = input_api.canned_checks.CheckPatchFormatted(input_api, output_api,
+                                                        check_js=True)
+  try:
+    import sys
+    old_sys_path = sys.path[:]
+    cwd = input_api.PresubmitLocalPath()
+    sys.path += [input_api.os_path.join(cwd, '..', '..', '..', 'tools')]
+    from web_dev_style import presubmit_support
+    results += presubmit_support.CheckStyle(input_api, output_api)
+  finally:
+    sys.path = old_sys_path
+  return results

chromeos/components/media_app_ui/resources/js/launch.js

@@ -43,7 +43,7 @@ let currentDirectoryHandle = null;
 const guestMessagePipe = new MessagePipe('chrome://media-app-guest');
 
 guestMessagePipe.registerHandler(Message.OPEN_FEEDBACK_DIALOG, () => {
-  let response = media_app.handler.openFeedbackDialog();
+  let response = mediaAppPageHandler.openFeedbackDialog();
   if (response === null) {
     response = {errorMessage: 'Null response received'};
   }
@@ -148,7 +148,7 @@ async function setCurrentDirectory(directory, focusFile) {
       currentFiles.push({token: -1, file: asFile.file, handle: asFile.handle});
     }
   }
-  entryIndex = currentFiles.findIndex(i => i.file.name == focusFile.name);
+  entryIndex = currentFiles.findIndex(i => i.file.name === focusFile.name);
   currentDirectoryHandle = directory;
   sendFilesToGuest();
 }
@@ -183,9 +183,9 @@ async function advance(direction) {
   sendFilesToGuest();
 }
 
-document.getElementById('prev-container')
+document.querySelector('#prev-container')
     .addEventListener('click', () => advance(-1));
-document.getElementById('next-container')
+document.querySelector('#next-container')
     .addEventListener('click', () => advance(1));
 
 // Wait for 'load' (and not DOMContentLoaded) to ensure the subframe has been

chromeos/components/media_app_ui/resources/js/media_app.externs.js

@@ -10,7 +10,7 @@
  */
 
 /** @const */
-var mediaApp = {};
+const mediaApp = {};
 
 /**
  * Wraps an HTML File object (or a mock, or media loaded through another means).

chromeos/components/media_app_ui/resources/js/mojo_api_bootstrap.js

@@ -2,10 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const media_app = {
-  handler: new mediaAppUi.mojom.PageHandlerRemote()
-};
+const mediaAppPageHandler = new mediaAppUi.mojom.PageHandlerRemote();
 
 // Set up a page handler to talk to the browser process.
 mediaAppUi.mojom.PageHandlerFactory.getRemote().createPageHandler(
-    media_app.handler.$.bindNewPipeAndPassReceiver());
+    mediaAppPageHandler.$.bindNewPipeAndPassReceiver());

chromeos/components/media_app_ui/resources/js/receiver.js

@@ -72,7 +72,8 @@ class ReceivedFileList {
     // don't break older versions of the media app which uses item(0) instead
     // of getCurrentlyWritable()
     // TODO(b/151880563): remove this.
-    let {files, writableFileIndex} = filesMessage;
+    let writableFileIndex = filesMessage.writableFileIndex;
+    const files = filesMessage.files;
     while (writableFileIndex > 0) {
       files.push(files.shift());
       writableFileIndex--;
@@ -102,7 +103,7 @@ class ReceivedFileList {
 parentMessagePipe.registerHandler(Message.LOAD_FILES, (message) => {
   const filesMessage = /** @type{!LoadFilesMessage} */ (message);
   loadFiles(new ReceivedFileList(filesMessage));
-})
+});
 
 /**
  * A delegate which exposes privileged WebUI functionality to the media

chromeos/components/media_app_ui/resources/js/web_app_file_handling.externs.js

@@ -37,7 +37,7 @@ class FileSystemWriter {
  *   data: (BufferSource|Blob|string|undefined)
  * }}
  */
-var WriteParams;
+let WriteParams;
 
 /** @interface */
 class FileSystemWritableFileStream {
@@ -66,7 +66,7 @@ class FileSystemWritableFileStream {
 }
 
 /** @typedef {{writable: boolean}} */
-var FileSystemHandlePermissionDescriptor;
+let FileSystemHandlePermissionDescriptor;
 
 /** @interface */
 class FileSystemHandle {
@@ -101,7 +101,7 @@ class FileSystemHandle {
 }
 
 /** @typedef {{keepExistingData: boolean}} */
-var FileSystemCreateWriterOptions;
+let FileSystemCreateWriterOptions;
 
 /** @interface */
 class FileSystemFileHandle extends FileSystemHandle {
@@ -123,16 +123,16 @@ class FileSystemFileHandle extends FileSystemHandle {
 }
 
 /** @typedef {{create: boolean}} */
-var FileSystemGetFileOptions;
+let FileSystemGetFileOptions;
 
 /** @typedef {{create: boolean}} */
-var FileSystemGetDirectoryOptions;
+let FileSystemGetDirectoryOptions;
 
 /** @typedef {{recursive: boolean}} */
-var FileSystemRemoveOptions;
+let FileSystemRemoveOptions;
 
 /** @typedef {{type: string}} */
-var GetSystemDirectoryOptions;
+let GetSystemDirectoryOptions;
 
 /** @interface */
 class FileSystemDirectoryHandle extends FileSystemHandle {
@@ -165,7 +165,7 @@ class FileSystemDirectoryHandle extends FileSystemHandle {
    * @return {Promise<!FileSystemDirectoryHandle>}
    */
   static getSystemDirectory(options) {}
-};
+}
 
 /** @interface */
 class LaunchParams {
@@ -179,7 +179,7 @@ class LaunchParams {
 }
 
 /** @typedef {function(LaunchParams)} */
-var LaunchConsumer;
+let LaunchConsumer;
 
 /** @interface */
 class LaunchQueue {
@@ -194,7 +194,7 @@ class LaunchQueue {
  *    extensions: (!Array<string>|undefined)
  * }}
  */
-var ChooseFileSystemEntriesOptionsAccepts;
+let ChooseFileSystemEntriesOptionsAccepts;
 
 /**
  * @typedef {{
@@ -204,7 +204,7 @@ var ChooseFileSystemEntriesOptionsAccepts;
  *    excludeAcceptAllOption: (boolean|undefined)
  * }}
  */
-var chooseFileSystemEntriesOptions;
+let chooseFileSystemEntriesOptions;
 
 /**
  * @param {(!chooseFileSystemEntriesOptions|undefined)} options

chromeos/components/media_app_ui/resources/mock/js/app_main.js

@@ -14,7 +14,7 @@
  *
  * @typedef{function(string): Promise<!HTMLElement>}}
  */
-var ModuleHandler;
+let ModuleHandler;
 
 /** @type{ModuleHandler} */
 const createVideoChild = async (blobSrc) => {

chromeos/components/media_app_ui/test/driver.js

@@ -56,7 +56,7 @@ class FakeWritableFileStream {
   }
   /** @override */
   async seek(offset) {
-    throw new Error('seek() not implemented.')
+    throw new Error('seek() not implemented.');
   }
 }
 
@@ -86,7 +86,7 @@ class FakeFileSystemFileHandle extends FakeFileSystemHandle {
   }
   /** @override */
   createWriter(options) {
-    throw new Error('createWriter() deprecated.')
+    throw new Error('createWriter() deprecated.');
   }
   /** @override */
   async createWritable(options) {

chromeos/components/media_app_ui/test/driver_api.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /** @typedef {{testQueryResult: string}} */
-var TestMessageResponseData;
+let TestMessageResponseData;
 
 /**
  * @typedef {{
@@ -15,4 +15,4 @@ var TestMessageResponseData;
  *     deleteLastFile: (boolean|undefined)
  * }}
  */
-var TestMessageQueryData;
+let TestMessageQueryData;

chromeos/components/media_app_ui/test/guest_query_receiver.js

@@ -73,7 +73,7 @@ function installTestHandlers() {
   loadFiles = async (/** !ReceivedFileList */ fileList) => {
     lastReceivedFileList = fileList;
     realLoadFiles(fileList);
-  }
+  };
 }
 
 // Ensure content and all scripts have loaded before installing test handlers.

chromeos/components/media_app_ui/test/media_app_guest_ui_browsertest.js

@@ -8,6 +8,8 @@
 
 GEN('#include "chromeos/constants/chromeos_features.h"');
 
+// js2gtest fixtures require var here (https://crbug.com/1033337).
+// eslint-disable-next-line no-var
 var MediaAppGuestUIBrowserTest = class extends testing.Test {
   /** @override */
   get browsePreload() {

chromeos/components/media_app_ui/test/media_app_ui_browsertest.js

@@ -15,6 +15,8 @@ const GUEST_ORIGIN = 'chrome://media-app-guest';
 
 let driver = null;
 
+// js2gtest fixtures require var here (https://crbug.com/1033337).
+// eslint-disable-next-line no-var
 var MediaAppUIBrowserTest = class extends testing.Test {
   /** @override */
   get browsePreload() {
@@ -108,7 +110,7 @@ TEST_F('MediaAppUIBrowserTest', 'LoadFile', async () => {
 // Tests that chrome://media-app can successfully send a request to open the
 // feedback dialog and recieve a response.
 TEST_F('MediaAppUIBrowserTest', 'CanOpenFeedbackDialog', async () => {
-  const result = await media_app.handler.openFeedbackDialog();
+  const result = await mediaAppPageHandler.openFeedbackDialog();
 
   assertEquals(result.errorMessage, '');
   testDone();