chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/scripts/stylelint_rules/tests/use_theme_colors_test.js

@@ -6,17 +6,21 @@ const stylelint = require('stylelint');
 const path = require('path');
 const {assert} = require('chai');
 
-const config = {
-  plugins: [path.resolve(__dirname, '../lib/use_theme_colors.js')],
-  rules: {'plugin/use_theme_colors': [true]},
+const configBase = {
+  config: {
+    plugins: [path.resolve(__dirname, '../lib/use_theme_colors.mjs')],
+    rules: {'plugin/use_theme_colors': [true]},
+  },
+  // Remove once we use a ESM test runner
+  quietDeprecationWarnings: true,
 };
 
-async function lint(code) {
+async function lintAndGetWarnings(code) {
   const {
     results: [{warnings}],
   } = await stylelint.lint({
     code,
-    config,
+    ...configBase,
   });
   return warnings;
 }
@@ -29,12 +33,14 @@ describe('use_theme_colors', () => {
   });
 
   it('errors when a hex color is used', async () => {
-    const warnings = await lint('p { color: #fff000; }');
+    const warnings = await lintAndGetWarnings('p { color: #fff000; }');
 
     assert.deepEqual(warnings, [
       {
         column: 5,
         line: 1,
+        endColumn: 20,
+        endLine: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
@@ -43,11 +49,13 @@ describe('use_theme_colors', () => {
   });
 
   it('errors when a RGB color is used', async () => {
-    const warnings = await lint('p { color: rgb(0, 0, 0); }');
+    const warnings = await lintAndGetWarnings('p { color: rgb(0, 0, 0); }');
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 25,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -57,11 +65,15 @@ describe('use_theme_colors', () => {
   });
 
   it('errors when an HSL color is used', async () => {
-    const warnings = await lint('p { color: hsl(0deg 0% 70% / 50%); }');
+    const warnings = await lintAndGetWarnings(
+        'p { color: hsl(0deg 0% 70% / 50%); }',
+    );
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 35,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -71,11 +83,15 @@ describe('use_theme_colors', () => {
   });
 
   it('errors when finding a bad color inside a border declaration', async () => {
-    const warnings = await lint('p { border-left: 1px solid #fff; }');
+    const warnings = await lintAndGetWarnings(
+        'p { border-left: 1px solid #fff; }',
+    );
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 33,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -85,11 +101,13 @@ describe('use_theme_colors', () => {
   });
 
   it('errors on border-color', async () => {
-    const warnings = await lint('p { border-color: #fff; }');
+    const warnings = await lintAndGetWarnings('p { border-color: #fff; }');
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 24,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -99,11 +117,15 @@ describe('use_theme_colors', () => {
   });
 
   it('errors on outline', async () => {
-    const warnings = await lint('p { outline: 4px solid #ff0000; }');
+    const warnings = await lintAndGetWarnings(
+        'p { outline: 4px solid #ff0000; }',
+    );
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 32,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -121,13 +143,13 @@ describe('use_theme_colors', () => {
 }`;
 
     process.env.THEME_COLORS_AUTOFIX = 1;
-    const {output} = await stylelint.lint({
+    const {code: outputCode} = await stylelint.lint({
       fix: true,
       code,
-      config,
+      ...configBase,
     });
     assert.strictEqual(
-        output,
+        outputCode,
         `p {
     background: #fff; /* stylelint-disable-line plugin/use_theme_colors */
     /* See: crbug.com/1152736 for color variable migration. */
@@ -149,13 +171,13 @@ describe('use_theme_colors', () => {
 }`;
 
     process.env.THEME_COLORS_AUTOFIX = 1;
-    const {output} = await stylelint.lint({
+    const {code: outputCode} = await stylelint.lint({
       fix: true,
       code,
-      config,
+      ...configBase,
     });
     assert.strictEqual(
-        output,
+        outputCode,
         `p {
     background: #fff; /* stylelint-disable-line plugin/use_theme_colors */
     /* See: crbug.com/1152736 for color variable migration. */
@@ -168,20 +190,24 @@ describe('use_theme_colors', () => {
   });
 
   it('does not autofix valid variable color usage', async () => {
-    const {output} = await stylelint.lint({
+    const {code: outputCode} = await stylelint.lint({
       fix: true,
       code: 'p { color: var(--color-primary-old); }',
-      config,
+      ...configBase,
     });
-    assert.strictEqual(output, 'p { color: var(--color-primary-old); }');
+    assert.strictEqual(outputCode, 'p { color: var(--color-primary-old); }');
   });
 
   it('errors when a variable is used that is not defined in themeColors', async () => {
-    const warnings = await lint('p { color: var(--not-a-theme-color); }');
+    const warnings = await lintAndGetWarnings(
+        'p { color: var(--not-a-theme-color); }',
+    );
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 37,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -191,13 +217,15 @@ describe('use_theme_colors', () => {
   });
 
   it('errors when finding a bad variable in a border declaration', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         'p { border-left: 1px solid var(--not-a-theme-color); }',
     );
 
     assert.deepEqual(warnings, [
       {
         column: 5,
+        endColumn: 53,
+        endLine: 1,
         line: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -207,17 +235,21 @@ describe('use_theme_colors', () => {
   });
 
   it('allows locally declared variables to be used', async () => {
-    const warnings = await lint('p { color: var(--color-primary-old); }');
+    const warnings = await lintAndGetWarnings(
+        'p { color: var(--color-primary-old); }',
+    );
     assert.lengthOf(warnings, 0);
   });
 
   it('allows any var(--image-file-*)', async () => {
-    const warnings = await lint('p { background: var(--image-file-fof); }');
+    const warnings = await lintAndGetWarnings(
+        'p { background: var(--image-file-fof); }',
+    );
     assert.lengthOf(warnings, 0);
   });
 
   it('allows variables within rgb', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         'p { background: rgb(var(--override-base-color) / 20%); }',
     );
     assert.lengthOf(warnings, 0);
@@ -227,7 +259,7 @@ describe('use_theme_colors', () => {
     const code = `:host-context(.theme-with-dark-background) p {
       color: #fff;
     }`;
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
@@ -235,7 +267,7 @@ describe('use_theme_colors', () => {
     const code = `.spectrum-sat {
       background-image: var(--my-lovely-image);
     }`;
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
@@ -243,11 +275,13 @@ describe('use_theme_colors', () => {
     const code = `.spectrum-sat {
       background-image: linear-gradient(to right, #fff, rgb(204 154 129 / 0%));
     }`;
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     // Two warnings: one for each colour (#fff and rgb(...))
     assert.deepEqual(warnings, [
       {
         line: 2,
+        endColumn: 80,
+        endLine: 2,
         column: 7,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -256,6 +290,8 @@ describe('use_theme_colors', () => {
       {
         line: 2,
         column: 7,
+        endColumn: 80,
+        endLine: 2,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
@@ -267,7 +303,7 @@ describe('use_theme_colors', () => {
     const code = `.theme-with-dark-background p {
       color: #fff;
     }`;
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
@@ -275,23 +311,25 @@ describe('use_theme_colors', () => {
     const code = `p {
       color: var(--override-custom-color);
     }`;
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
   it('correctly only detects the relevant color variables for border-X declarations', async () => {
     const code = 'header {border-bottom: var(--header-border-height) solid var(--color-details-hairline); }';
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
   it('errors on a bad variable name for a border color', async () => {
     const code = 'header {border-top: var(--header-border-height) solid var(--color-does-not-exist); }';
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.deepEqual(warnings, [
       {
         line: 1,
         column: 9,
+        endColumn: 83,
+        endLine: 1,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
@@ -300,7 +338,7 @@ describe('use_theme_colors', () => {
   });
 
   it('does not error when there is a var for the border width', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         'p { border: var(--button-border-size) solid var(--color-primary); }',
     );
 
@@ -308,7 +346,7 @@ describe('use_theme_colors', () => {
   });
 
   it('does not error when there is a var for the outline width', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         'p { outline: var(--button-border-size) solid var(--color-primary); }',
     );
 
@@ -316,15 +354,13 @@ describe('use_theme_colors', () => {
   });
 
   it('does not error when the outline is set to none', async () => {
-    const warnings = await lint(
-        'p { outline: none; }',
-    );
+    const warnings = await lintAndGetWarnings('p { outline: none; }');
 
     assert.lengthOf(warnings, 0);
   });
 
   it('does not error when using --sys-elevation for box-shadow', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         'p { box-shadow: var(--sys-elevation-level1); }',
     );
 
@@ -332,7 +368,9 @@ describe('use_theme_colors', () => {
   });
 
   it('does error when using a random color for box shadow', async () => {
-    const warnings = await lint('p { box-shadow: 0 1px 2px 0 #ff0000; }');
+    const warnings = await lintAndGetWarnings(
+        'p { box-shadow: 0 1px 2px 0 #ff0000; }',
+    );
 
     assert.lengthOf(warnings, 1);
   });
@@ -347,12 +385,12 @@ describe('use_theme_colors', () => {
      * actually fill it in.
      */
     const code = 'header { color: var(); }';
-    const warnings = await lint(code);
+    const warnings = await lintAndGetWarnings(code);
     assert.lengthOf(warnings, 0);
   });
 
   it('allows multi line declared variables to be used', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         `p {
         color: var(
           --color-primary-old
@@ -363,7 +401,7 @@ describe('use_theme_colors', () => {
   });
 
   it('error with multi line variable declarations', async () => {
-    const warnings = await lint(
+    const warnings = await lintAndGetWarnings(
         `p {
         color: var(
           --my-color
@@ -373,6 +411,8 @@ describe('use_theme_colors', () => {
     assert.deepEqual(warnings, [
       {
         column: 9,
+        endColumn: 11,
+        endLine: 4,
         line: 2,
         rule: 'plugin/use_theme_colors',
         severity: 'error',
@@ -380,4 +420,24 @@ describe('use_theme_colors', () => {
       },
     ]);
   });
+
+  it('works with valid variable color inside color-mix', async () => {
+    const warnings = await lintAndGetWarnings(
+        `p {
+        color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
+      }`,
+    );
+
+    assert.lengthOf(warnings, 0);
+  });
+
+  it('error with invalid variable color inside color-mix', async () => {
+    const warnings = await lintAndGetWarnings(
+        `p {
+        color: color-mix(in srgb, var(--my-color), var(--sys-color-state-hover-on-prominent) 6%);
+      }`,
+    );
+
+    assert.lengthOf(warnings, 1);
+  });
 });

package/scripts/tools/update_goldens.py

@@ -55,7 +55,6 @@ class ProjectConfig:
 TOOLS_DIR = os.path.dirname(os.path.abspath(__file__))
 BASE_DIR = os.path.normpath(os.path.join(TOOLS_DIR, '..', '..'))
 DEPOT_TOOLS_DIR = os.path.join(BASE_DIR, 'third_party', 'depot_tools')
-GSUTIL = os.path.join(DEPOT_TOOLS_DIR, 'gsutil.py')
 VPYTHON = os.path.join(DEPOT_TOOLS_DIR, 'vpython3')
 GOLDENS_DIR = os.path.join(BASE_DIR, 'test', 'interactions', 'goldens')
 
@@ -64,13 +63,12 @@ WARNING_BUILDERS_STILL_RUNNING = 'Patchset %s has builders that are still ' \
 WARNING_BUILDERS_FAILED = 'Patchset %s has builders that failed:\n  %s\n'
 WARNING_BUILDERS_MISSING = 'Patchset %s does not have screenshot tests for ' \
     'all platform.\nOnly these builders found:\n  %s'
-WARNING_GSUTIL_CONNECTIVITY = (
-    'Ups! gsutil seems to not work for you right '
+WARNING_GCS_CONNECTIVITY = (
+    'Ups! "gcloud storage" seems to not work for you right '
     'now.\nThis is either a connectivity problem or a configuration issue.\n'
     'Make sure you are logged in with your Google account and you are included '
     'in the devtools-dev@google.com group.\n'
-    'Try running "./third_party/depot_tools/gsutil.py config" command.\n'
-    'When prompted for a project id, please use "v8-infra".\n')
+    'Try running "gcloud config set core/project v8-infra" command.\n')
 WARNING_GIT_DIRTY = 'Before attempting to apply screenshot patches, please' \
     'make sure your local repo is clean.\nFolder %s seems to contain ' \
     'un-committed changes.' % GOLDENS_DIR
@@ -154,7 +152,7 @@ def trigger(project_config, options):
 
 def update(project_config, options):
     test_clean_git()
-    test_gsutil_connectivity(project_config)
+    test_gcs_connectivity(project_config)
     wait_sec = options.wait_sec
     if wait_sec:
         wait_sec = max(wait_sec, 30)
@@ -205,15 +203,15 @@ def test_clean_git():
         sys.exit(0)
 
 
-def test_gsutil_connectivity(project_config):
-    """Test if gsutil needs to be configured for current user."""
-    process = subprocess.Popen(gsutil_cmd('ls', project_config.gs_root),
+def test_gcs_connectivity(project_config):
+    """Test if gcloud needs to be configured for current user."""
+    process = subprocess.Popen(gcstorage_cmd('ls', project_config.gs_root),
                                stdout=subprocess.PIPE,
                                stderr=subprocess.PIPE)
     _, stderr = process.communicate()
     if process.returncode != 0:
         print(stderr.decode('utf-8'), '\n')
-        print(WARNING_GSUTIL_CONNECTIVITY)
+        print(WARNING_GCS_CONNECTIVITY)
         sys.exit(0)
 
 
@@ -403,7 +401,7 @@ def download_patches(project_config, results, destination_dir, verbose):
         local_path = os.path.join(destination_dir, patch_platform + '.patch')
         if verbose:
             print('Downloading patch file from: ' + gs_location)
-        run_command(gsutil_cmd('cp', gs_location, local_path), verbose)
+        run_command(gcstorage_cmd('cp', gs_location, local_path), verbose)
         patches.append(local_path)
     return patches
 
@@ -446,8 +444,8 @@ def run_command(command, verbose, message=None):
         sys.exit(1)
 
 
-def gsutil_cmd(*args):
-    return [VPYTHON, GSUTIL] + list(args)
+def gcstorage_cmd(*args):
+    return ["gcloud", "storage"] + list(args)
 
 
 if __name__ == '__main__':

package/.eslintignore

@@ -1,41 +0,0 @@
-front_end/diff/diff_match_patch.jD
-front_end/models/javascript_metadata/NativeFunctions.js
-
-// All of these scripts are auto-generated so don't lint them.
-front_end/generated/ARIAProperties.js
-front_end/generated/Deprecation.ts
-front_end/generated/InspectorBackendCommands.js
-front_end/generated/protocol-mapping.d.ts
-front_end/generated/protocol-proxy-api.d.ts
-front_end/generated/protocol.ts
-
-
-// Any third_party addition has its source code checked out into
-// third_party/X/package, so we ignore that code as it's not code we author or
-// own.
-front_end/third_party/*/package/
-// Any JS files are also not authored by devtools-frontend, so we ignore those.
-front_end/third_party/**/*.js
-// Lighthouse doesn't have a package/ folder but has other nested folders, so
-// we ignore any folders within the lighthouse directory.
-front_end/third_party/lighthouse/*/
-// The CodeMirror bundle file is auto-generated and rolled-up as part of the
-// install script, so we don't need to lint it.
-front_end/third_party/codemirror.next/bundle.ts
-// Lit lib files are auto-generated and rolled up as part of the install script.
-front_end/third_party/lit/src/*.ts
-// @puppeteer/replay is auto-generated.
-front_end/third_party/puppeteer-replay/**/*.ts
-
-extensions/cxx_debugging/third_party/
-
-node_modules
-scripts/build/typescript/tests
-scripts/migration/**/*.js
-scripts/protocol_typescript/*.js
-scripts/deps/tests/fixtures
-test/**/fixtures/
-test/e2e/**/*.js
-test/shared/**/*.js
-
-*.d.ts