Move the name field on the `page.on('metric') API

[ankur22]

What?

This change does two things:

1. Moves the name field to the level above.
2. Rename the urls field to matches.

So from:

  page.on('metric', (metric) => {
    metric.tag({
      urls: [
        {url: /^https:\/\/test\.k6\.io\/\?q=[0-9a-z]+$/, name:'test'},
      ]
    });
  });

to:

  page.on('metric', (metric) => {
    metric.tag({
      name:'test',
      matches: [
        {url: /^https:\/\/test\.k6\.io\/\?q=[0-9a-z]+$/},
      ]
    });
  });

Why?

It was unclear what name was doing when it was part of the "match" object and it made it difficult to add other fields to the object to match against.

urls doesn't lend itself to extending with more fields to match against. It also doesn't represent what it is doing, whereas matches is a helpful verb that makes it clearer to the user/reader of the API what its impact is.

By moving the name field one level up, and renaming urls to matches, we can now read this API:

    metric.tag({
      name:'test',
      matches: [
        {url: /^https:\/\/test\.k6\.io\/\?q=[0-9a-z]+$/},
      ]
    });

as:

1. tag metric;
2. with this name;
3. that matches.

Checklist

• [X] I have performed a self-review of my code
• [ ] I have added tests for my changes
• [ ] I have commented on my code, particularly in hard-to-understand areas

Related PR(s)/Issue(s)

Updates: https://github.com/grafana/xk6-browser/issues/1487