chrome-devtools-frontend 1.0.952865 → 1.0.953165

package/front_end/ui/components/docs/component_docs.ts

@@ -16,13 +16,13 @@ ToggleFonts.init();
 // This can be used by tests to hide the UI elements that are part of the component docs interface.
 // E.g., this is useful for screenshot tests.
 window.addEventListener('hidecomponentdocsui', () => {
-  for (const node of document.querySelectorAll('.component-docs-ui')) {
-    (node as HTMLElement).style.display = 'none';
+  for (const node of document.querySelectorAll<HTMLElement>('.component-docs-ui')) {
+    node.style.display = 'none';
   }
 });
 
 window.addEventListener('showcomponentdocsui', () => {
-  for (const node of document.querySelectorAll('.component-docs-ui')) {
-    (node as HTMLElement).style.display = '';
+  for (const node of document.querySelectorAll<HTMLElement>('.component-docs-ui')) {
+    node.style.display = '';
   }
 });

package/front_end/ui/components/docs/component_docs_styles.css

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021 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.
+ */
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+}
+
+#index-page h1 {
+  text-align: left;
+  border-bottom: 1px solid var(--color-details-hairline);
+  padding: 10px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.components-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 10px;
+}
+
+.components-list li {
+  width: 20%;
+  min-width: 150px;
+  max-width: 300px;
+  margin: 0 12px 12px 0;
+}
+
+.components-list a {
+  display: block;
+  padding: 10px;
+}
+
+.components-list a:link,
+.components-list a:visited {
+  text-transform: capitalize;
+  color: var(--color-primary);
+  text-decoration: none;
+  box-shadow: var(--drop-shadow);
+}
+
+.components-list a:hover {
+  box-shadow: var(--drop-shadow-depth-3);
+}

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.952865"
+  "version": "1.0.953165"
 }

package/scripts/check_experiments.js

@@ -15,7 +15,7 @@ const parseOptions = {
   range: true,
 };
 
-const USER_METRICS_ENUM_ENDPOINT = '__lastValidEnumPosition';
+const USER_METRICS_ENUM_ENDPOINT = 'MaxValue';
 
 /**
  * Determines if a node is a class declaration.
@@ -162,8 +162,7 @@ function getMainImplExperimentList(mainImplFile, experimentNames) {
  * Determines if AST Node is the DevtoolsExperiments Enum declaration
  */
 function isExperimentEnumDeclaration(node) {
-  return node.type === 'ExportNamedDeclaration' && node.declaration.declarations &&
-      node.declaration.declarations[0].id.name === 'DevtoolsExperiments';
+  return node.type === 'ExportNamedDeclaration' && node?.declaration?.id?.name === 'DevtoolsExperiments';
 }
 
 /**
@@ -173,9 +172,7 @@ function getUserMetricExperimentList(userMetricsFile) {
   const userMetricsAST = espree.parse(userMetricsFile, {ecmaVersion: 11, sourceType: 'module', range: true});
   for (const node of userMetricsAST.body) {
     if (isExperimentEnumDeclaration(node)) {
-      return node.declaration.declarations[0].init.properties.map(property => {
-        return property.key.value;
-      });
+      return node.declaration.members.map(member => member.id.value);
     }
   }
   return null;

package/scripts/component_server/server.js

@@ -150,20 +150,12 @@ function createServerIndexFile(componentNames) {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width" />
       <title>DevTools components</title>
-      <style>
-        a:link, a:visited {
-          color: blue;
-          text-transform: capitalize;
-          text-decoration: none;
-        }
-        a:hover {
-          text-decoration: underline;
-        }
-      </style>
+      <link rel="stylesheet" href="/front_end/ui/legacy/themeColors.css" />
+      <link rel="stylesheet" href="/front_end/ui/components/docs/component_docs_styles.css" />
     </head>
-    <body>
+    <body id="index-page">
       <h1>DevTools components</h1>
-      <ul>
+      <ul class="components-list">
         ${componentNames.map(name => {
           const niceName = name.replace(/_/g, ' ');
           return `<li><a href='/front_end/ui/components/docs/${name}'>${niceName}</a></li>`;

package/scripts/eslint_rules/lib/check_enumerated_histograms.js

@@ -0,0 +1,32 @@
+// 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.
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'check arguments when recording enumerated histograms',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: []  // no options
+  },
+  create: function(context) {
+    return {
+      CallExpression(node) {
+        if (node?.callee?.object?.name === 'InspectorFrontendHostInstance' &&
+            node.callee.property.name === 'recordEnumeratedHistogram') {
+          if (node?.arguments[2]?.property?.name !== 'MaxValue') {
+            context.report({
+              node: node,
+              message:
+                  'When calling \'recordEnumeratedHistogram\' the third argument should be of the form \'SomeEnum.MaxValue\'.'
+            });
+          }
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/check_enumerated_histograms_test.js

@@ -0,0 +1,32 @@
+// Copyright 2021 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.
+'use strict';
+
+const rule = require('../lib/check_enumerated_histograms.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+ruleTester.run('check_enumerated_histograms', rule, {
+  valid: [
+    {
+      code: 'InspectorFrontendHostInstance.recordEnumeratedHistogram(\'someparam\', 1, foo.MaxValue);',
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code:
+          'InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.IssueCreated, issueCreated, IssueCreated.MaxValue);',
+      filename: 'front_end/components/test.ts'
+    }
+  ],
+  invalid: [{
+    code: 'InspectorFrontendHostInstance.recordEnumeratedHistogram(\'someparam\', 1, 5);',
+    filename: 'front_end/components/test.ts',
+    errors: [{
+      message:
+          'When calling \'recordEnumeratedHistogram\' the third argument should be of the form \'SomeEnum.MaxValue\'.'
+    }],
+  }]
+});