From e31595440c2e53dc2daab4ab4eaa3472367d5a5c Mon Sep 17 00:00:00 2001 From: Aaron Forinton <89849359+AaronForinton@users.noreply.github.com> Date: Mon, 6 Feb 2023 07:26:22 +0000 Subject: [PATCH 0001/1553] remove outdated video (#5139) --- site/en/docs/puppeteer/overview/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/en/docs/puppeteer/overview/index.md b/site/en/docs/puppeteer/overview/index.md index 44c3b08553e2..698e71de714e 100644 --- a/site/en/docs/puppeteer/overview/index.md +++ b/site/en/docs/puppeteer/overview/index.md @@ -24,8 +24,6 @@ Most things that you can do manually in the browser can be done using Puppeteer! - Capture a timeline trace of your site to help diagnose performance issues. - Test Chrome Extensions. -{% YouTube id="qPD2yc8BoDk" %} - ## Next steps * Install Puppeteer and [Get Started](/docs/puppeteer/get-started)! From d14212b79eaa6be10341382ec6b71633993496c0 Mon Sep 17 00:00:00 2001 From: Ewa Date: Mon, 6 Feb 2023 09:47:45 +0100 Subject: [PATCH 0002/1553] Add fugu-showcase to external (#5161) Co-authored-by: devnook --- external/build/fugu-showcase.js | 48 +++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 external/build/fugu-showcase.js diff --git a/external/build/fugu-showcase.js b/external/build/fugu-showcase.js new file mode 100644 index 000000000000..b66d0ff185aa --- /dev/null +++ b/external/build/fugu-showcase.js @@ -0,0 +1,48 @@ +/* + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Fetches the most recent Fugu Showcase data from + * https://googlechromelabs.github.io/fugu-showcase/ + */ + +require('dotenv').config(); + +const {default: fetch} = require('node-fetch'); +const fs = require('fs'); +const path = require('path'); + +const url = 'https://googlechromelabs.github.io/fugu-showcase/data/data.json'; + +async function run() { + const r = await fetch(url); + + if (!r.ok) { + throw new Error(`Could not fetch FUGU Showcase data, status: ${r.status}`); + } + + const json = await r.json(); + + if (json['errors']) { + const error = json['errors'][0]; + throw new Error(`${error.code}: ${error.message}`); + } + + const targetFile = path.join(__dirname, '../data/fugu-showcase.json'); + fs.writeFileSync(targetFile, JSON.stringify(json)); +} + +run(); From a720d5ca255796a6aa99c1b97e8aef09cf8c8e19 Mon Sep 17 00:00:00 2001 From: Alex Rudenko Date: Mon, 6 Feb 2023 10:44:07 +0100 Subject: [PATCH 0003/1553] Document replay extensions for DevTools Recorder (#5135) * Document replay extensions for DevTools Recorder * Update description * Apply suggestions from code review --------- Co-authored-by: Jecelyn Yeen <5917927+jecfish@users.noreply.github.com> --- .../reference/devtools_recorder/index.md | 53 ++++++++++++++++++- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/site/en/docs/extensions/reference/devtools_recorder/index.md b/site/en/docs/extensions/reference/devtools_recorder/index.md index 0a7c77bed5db..a9a02d15d121 100644 --- a/site/en/docs/extensions/reference/devtools_recorder/index.md +++ b/site/en/docs/extensions/reference/devtools_recorder/index.md @@ -7,7 +7,9 @@ See [DevTools APIs summary][1] for general introduction to using Developer Tools ## Overview `devtools.recorder` API is a preview feature that allows you to extend the [Recorder panel](/docs/devtools/recorder/) in Chrome DevTools. -Currently, you can extend only the export feature. +Starting from Chrome M105, you can extend the export functionality. Starting from Chrome M112, you can extend the replay button. + +## Customizing the export feature To register an extension plugin, use the `registerRecorderExtensionPlugin` function. This function requires a plugin instance, a `name` and a `mediaType` as parameters. The plugin instance must implement two methods: `stringify` and `stringifyStep`. @@ -23,7 +25,7 @@ The [`mediaType`][4] parameter allows the extension to specify the kind of outpu `stringify` and `stringifyStep` functions. For example, `application/javascript` if the result is a JavaScript program. -## Examples +## Export plugin example The following code implements an extension plugin that stringifes a recording using `JSON.stringify`: @@ -44,7 +46,54 @@ chrome.devtools.recorder.registerRecorderExtensionPlugin( ); ``` +## Customizing the replay button + +To customize the replay button in the **Recorder**, use the `registerRecorderExtensionPlugin` function. The plugin must implement the `replay` method for the customization to take effect. +If the method is detected, a replay button will appear in the **Recorder**. +Upon clicking the button, the current recording object will be passed as the first argument to the `replay` method. + +At this point, the extension can display a `RecorderView` for handling the replay or use other extension APIs to process the replay request. To create a new `RecorderView`, invoke `chrome.devtools.recorder.createView`. + +## Replay plugin example + +The following code implements an extension plugin that creates a dummy Recorder view and displays it upon a replay request: + +```js +const view = await chrome.devtools.recorder.createView( + /* name= */ 'ExtensionName', + /* pagePath= */ 'Replay.html' +); + +let latestRecording; + +view.onShown.addListener(() => { + // Recorder has shown the view. Send additional data to the view if needed. + chrome.runtime.sendMessage(JSON.stringify(latestRecording)); +}); + +view.onHidden.addListener(() => { + // Recorder has hidden the view. +}); + +export class RecorderPlugin { + replay(recording) { + // Share the data with the view. + latestRecording = recording; + // Request to show the view. + view.show(); + } +} + +chrome.devtools.recorder.registerRecorderExtensionPlugin( + new RecorderPlugin(), + /* name=*/ 'CoffeeTest' +); +``` + +Find [a complete extension example][5] on GitHub. + [1]: /docs/extensions/mv3/devtools [2]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L245 [3]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L243 [4]: https://www.iana.org/assignments/media-types/media-types.xhtml +[5]: https://github.com/puppeteer/replay/tree/main/examples/chrome-extension-replay From 28499566dcf186c052f6372489c3b7663221e789 Mon Sep 17 00:00:00 2001 From: Joe Medley Date: Mon, 6 Feb 2023 07:13:12 -0800 Subject: [PATCH 0004/1553] Fix method name typo (#5132) * Fix method name typo * Update index.md --- .../extensions/reference/declarativeNetRequest/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/en/docs/extensions/reference/declarativeNetRequest/index.md b/site/en/docs/extensions/reference/declarativeNetRequest/index.md index f3c194e487b5..c7204ace0a32 100644 --- a/site/en/docs/extensions/reference/declarativeNetRequest/index.md +++ b/site/en/docs/extensions/reference/declarativeNetRequest/index.md @@ -147,16 +147,16 @@ An extension can add or remove rules dynamically using the [updateDynamicRules][ ## Updating enabled rulesets -An extension can update the set of enabled static rulesets using the [updateEnabledRulesets][14] API +An extension can update the set of enabled static rulesets using the [updateEnabledRulesets()][14] method. - The number of static rulesets which are enabled at one time must not exceed [MAX_NUMBER_OF_ENABLED_STATIC_RULESETS][18]. - The number of rules across enabled static rulesets across all extensions must not exceed the - [global limit][15]. Calling [getAvailableStaticRuleCount][10] is recommended to check the number + [global limit][15]. Calling [getAvailableStaticRuleCount()][10] is recommended to check the number of rules an extension can still enable before the global limit is reached. - The set of enabled static rulesets is persisted across sessions but not across extension updates. - The `rule_resources` manifest key will determine the set of enabled static rulesets on initial + The `"rule_resources"` manifest key will determine the set of enabled static rulesets on initial extension install and on each subsequent extension update. ## Implementation details From 5435df7edc926490b71bbb423f88a2e892696fb5 Mon Sep 17 00:00:00 2001 From: Jecelyn Yeen <5917927+jecfish@users.noreply.github.com> Date: Mon, 6 Feb 2023 17:35:45 +0100 Subject: [PATCH 0005/1553] What's New in DevTools (Chrome 110) (#5169) --- site/en/_partials/devtools/whats-new.md | 13 ++ site/en/blog/new-in-devtools-110/index.md | 151 ++++++++++++++++++++++ 2 files changed, 164 insertions(+) create mode 100644 site/en/blog/new-in-devtools-110/index.md diff --git a/site/en/_partials/devtools/whats-new.md b/site/en/_partials/devtools/whats-new.md index d5c8a05e1677..4cc213ff92a0 100644 --- a/site/en/_partials/devtools/whats-new.md +++ b/site/en/_partials/devtools/whats-new.md @@ -4,6 +4,19 @@ A list of everything that has been covered in the [What's New In DevTools](/tags {# $content #} +### Chrome 110 {: #chrome110 } + +* [Clearing Performance Panel on reload](/blog/new-in-devtools-110/#perf) +* [Recorder updates](/blog/new-in-devtools-110/#recorder) +* [View and highlight the code of your user flow in the Recorder](/blog/new-in-devtools-110/#recorder-code) +* [Customize selector types of a recording](/blog/new-in-devtools-110/#recorder-selector) +* [Edit user flow while recording](/blog/new-in-devtools-110/#recorder-edit) +* [Automatic in-place pretty print](/blog/new-in-devtools-110/#pretty-print) +* [Better syntax highlight and inline preview for Vue, SCSS and more](/blog/new-in-devtools-110/#syntax) +* [Ergonomic and consistent Autocomplete in the Console](/blog/new-in-devtools-110/#console) +* [Miscellaneous highlights](/blog/new-in-devtools-110/#misc) + + ### Chrome 109 {: #chrome109 } * [Recorder: Copy as options for steps, in-page replay, step’s context menu](/blog/new-in-devtools-109/#recorder) diff --git a/site/en/blog/new-in-devtools-110/index.md b/site/en/blog/new-in-devtools-110/index.md new file mode 100644 index 000000000000..e0cef3a68470 --- /dev/null +++ b/site/en/blog/new-in-devtools-110/index.md @@ -0,0 +1,151 @@ +--- +layout: 'layouts/blog-post.njk' +title: "What's New In DevTools (Chrome 110)" +authors: + - jecelynyeen +date: 2023-02-06 +description: 'Clearing Performance panel on reload, view and highlight the code in the Recorder, and more.' +hero: 'image/dPDCek3EhZgLQPGtEG3y0fTn4v82/KTdhtEIhwldooyDWFCNW.png' +alt: '' +tags: + - new-in-devtools + - devtools + - chrome-110 +--- + +{% Partial 'devtools/banner.md' %} + + + +## Clearing Performance Panel on reload {: #perf } + +The **Performance** panel now clears both the screenshot and trace when you click the **Start profiling and reload page** button. + +Previously, the **Performance** panel displayed a timeline with screenshots from previous recordings. This made it difficult to see when the actual measurement started. The panel now always navigates to the `about:blank` page first to guarantee that the recording begins with a blank trace. This aligns with the **Performance Insights** panel which already did the same. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JVXCt6hKIxMtf0tCLWwh.png", alt="Clearing Performance Panel on reload.", width="800", height="548" %} + + +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0a301d29d165f17a6eceb1adf91bff0c1c2e07eb #} + +Chromium issues: [1101268](https://crbug.com/1101268), [1382044](https://crbug.com/1382044) + + +## Recorder updates {: #recorder } + +### View and highlight the code of your user flow in the Recorder {: #recorder-code } + +The **Recorder** now offers split code view, making it easier to view your user flow code. To access the code view, open a user flow and click **Show Code**. + +The **Recorder** highlights the corresponding code as you hover over each step on the left, making it easy to track your flow. You can change the code format using the dropdown, which lets you switch between formats such as [Nightwatch Test](https://bit.ly/nightwatch-recorder) script. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ZxNNmun9Yfqs97JCAn7C.png", alt="Code view in the Recorder.", width="800", height="542" %} + +Chromium issue: [1385489](https://crbug.com/1385489) + + +### Customize selector types of a recording {: #recorder-selector } + +You can create recordings that capture only the selector types that matter to you. With the new option to customize selector types when creating a new recording, you can include or exclude selectors such as XPath, ensuring you capture only the selectors you want in your user flows. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5t2TOY9VA2Uq08Dq2ZhM.png", alt="New option to customize selector types.", width="800", height="645" %} + +Chromium issue: [1384431](https://crbug.com/1384431) + + +### Edit user flow while recording {: #recorder-edit } + +The **Recorder** now allows editing during recording, providing you with the flexibility to make changes in real-time. You no longer need to end the recording to make adjustments. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1a2S1lizzJ5acRMgjtwH.png", alt="Editing during user flow recording.", width="800", height="619" %} + +Chromium issue: [1381971](https://crbug.com/1381971) + + +## Automatic in-place pretty print {: #pretty-print } + +The **Sources** panel now automatically pretty prints minified source files in place. You can click on the **pretty print** button `{ }` to undo it. + +Previously, the **Sources** panel showed minified content by default. To format the content, you had to click the pretty print button manually. On top of that, the pretty-printed content wasn’t displayed in the same tab, but in another `::formatted` tab. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/twp21SJIisjYpnCWRbWi.png", alt="Show a minified file before and after automatic in-place pretty print.", width="800", height="501" %} + +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/3ae70742a7fce9657d8fcd578a182635e619cad5 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0b9c42efb6065c8a697eaf3acd656cb87e3d4f54 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/b6bddcbabb2d977b620758ac20785675053a4db9 #} + +Chromium issues: [1383453](https://crbug.com/1383453), [1382752](https://crbug.com/1382752), [1382397](https://crbug.com/1382397) + + +## Better syntax highlight and inline preview for Vue, SCSS and more {: #syntax } + +The **Sources** panel enhanced the syntax highlighting for several widely-used file formats, enabling you to read code more easily and recognize its structure, including Vue, JSX, Dart, LESS, SCSS, SASS, and inline CSS. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/92SB2J5N6ImqJlOY3tIB.png", alt="Syntax highlighting in Vue.", width="800", height="550" %} + +In addition, DevTools also improved the inline preview for Vue, inline HTML, and TSX. Hover over a variable to preview its value. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uLxVoWz3yyxYvOkgCq7t.png", alt="Inline preview for Vue.", width="800", height="700" %} + +Apart from that, DevTools now shows the sourcemap of a stylesheet in the **Sources** panel. For instance, when you open a SCSS file, you can access the related CSS file by clicking on the sourcemap link. + +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bK6TMGR8c6285bUlrIbx.png", alt="Sourcemap link for SASS.", width="800", height="745" %} + +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/c9af6b86b85bf23f9ed07d68b2d58b45910426de #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/4f330a0d5cef6e74b5b73f258e55cc0960769bca #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/9ec6a8092e7b45fc403d571982d1b214181d9695 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/5a02aca17849514b1e2bc828f78aedece5161dfa #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/c0928e31ba0ed2e81456f0109d323dd09768cfe1 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/992cc762b6790a7bd1a0d5c12ed0169270ac7dd0 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/f2bc726458c3d6507be9a4b56845b789c7ce653e #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/b77b77646c6257ab80893f5d1b5d9607a969c0e5 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/6f1ab763383c7641644f7fd4f88c49465a70ed01 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/11bdafdbbd9bd153aea84b1fe03db4dff89d3aa9 #} + +Chromium issues: [1385374](https://crbug.com/1385374), [1385632](https://crbug.com/1385632), [1385281](https://crbug.com/1385281), [1385269](https://crbug.com/1385269), [1383892](https://crbug.com/1383892), [1361862](https://crbug.com/1361862), [1383451](https://crbug.com/1383451), [1392106](https://crbug.com/1392106), [1149734](https://crbug.com/1149734) + + +## Ergonomic and consistent Autocomplete in the Console {: #console } + +DevTools enhances the autocompletion experience by implementing the following changes: + +- `Tab` is always used for autocompletion. +- The behavior of `Arrow right` and `Enter` varies based on context. +- The autocompletion experience is consistent across text editors, in the **Console**, **Sources**, and **Elements** panels + +For example, here is what happens when you type `cons` in the **Console**: + +- The **Console** displays a list of autocomplete suggestions, with a subtle dotted border around the top option indicating that navigation has not yet begun. + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kSTUPmkQK3HzE7BElmAK.png", alt="Dotted border around the top autocomplete option.", width="800", height="580" %} + +- The **Console** executes the line when you press `Enter`. Previously, it would automatically complete the line with the top suggestion. To auto-complete, press either `Tab` or `Arrow Right`. + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/7SZ8AM51vI7WEIovjUDX.png", alt="Executes the line on Enter.", width="800", height="549" %} + +- The **Console** highlights the selected option as you navigate through the suggestion list using the `Arrow up` and `Arrow down` shortcuts. + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/XxjZu5GrFnPEUZhoQN0i.png", alt="Highlights during suggestions navigation.", width="800", height="580" %} + +- To auto-complete with the selected option during navigation, use the keyboard keys `Tab`, `Enter`, or `Arrow Right`. + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/YU89q0lRFsocpdXS6ZMO.png", alt="Auto-complete with the selected option during navigation.", width="800", height="360" %} + +- When editing in the middle of code, for example, when the cursor is between `n` and `s`, use `Tab` for autocompletion, `Enter` to execute the line, and `Arrow Right` to move the cursor forward. + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4jiMQ2btaT4MX7Y3VqgH.png", alt="Editing in the middle of code.", width="800", height="549" %} + +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/00103b19eec2ba086c608b79ff34b696fe07bb62 #} +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/89f259ddb6c36f486108e0dc9ccb4d4125a04917 #} + +Chromium issues: [1399436](https://crbug.com/1399436), [1276960](https://crbug.com/1276960) + + +## Miscellaneous highlights {: #misc } + +These are some noteworthy fixes in this release: + +- A regression issue in DevTools, where it failed to stop at the `debugger` statement in inline scripts, has been resolved. ([1385374](https://crbug.com/1385374)) +- A new **Console** setting that allows you to expand or collapse `console.trace()` messages by default. Toggle the settings via **Settings** > **Preferences** > **Expand console.trace() messages by default**. ([1139616](https://crbug.com/1139616)) +- The [Snippets](/docs/devtools/javascript/snippets/) pane in the **Sources** panel supports enhanced autocomplete, similar to the **Console**. ([772949](https://crbug.com/772949)) + {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/thkb1CYO0yYiGHll7Yp8.png", alt="Autocomplete in Snippets.", width="800", height="417" %} + + + +{% Partial 'devtools/reach-out.md' %} +{% Partial 'devtools/whats-new.md' %} From d079b405074281a214f1b5fd9ceb45c33e1fb140 Mon Sep 17 00:00:00 2001 From: Joe Medley Date: Mon, 6 Feb 2023 09:47:04 -0800 Subject: [PATCH 0006/1553] Remove MV2 item from MV3 example (#5170) --- .../docs/extensions/reference/declarativeNetRequest/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/en/docs/extensions/reference/declarativeNetRequest/index.md b/site/en/docs/extensions/reference/declarativeNetRequest/index.md index c7204ace0a32..a6a8392cc637 100644 --- a/site/en/docs/extensions/reference/declarativeNetRequest/index.md +++ b/site/en/docs/extensions/reference/declarativeNetRequest/index.md @@ -41,8 +41,7 @@ a list containing dictionaries of type [Ruleset][4], as shown below. }, "permissions": [ "declarativeNetRequest", - "declarativeNetRequestFeedback", - "*://example.com/*" + "declarativeNetRequestFeedback" ], ... } From 1b3e51f3e60708961fefc6c09e51f38f70730a30 Mon Sep 17 00:00:00 2001 From: Ewa Date: Tue, 7 Feb 2023 08:42:43 +0100 Subject: [PATCH 0007/1553] fix lhci (#5181) Co-authored-by: devnook --- site/_data/authorsData.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/_data/authorsData.json b/site/_data/authorsData.json index 26abee9d3d2f..2c757287bc8b 100644 --- a/site/_data/authorsData.json +++ b/site/_data/authorsData.json @@ -1033,7 +1033,7 @@ "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/9vzh9pyZ3U1P2zxrzGaS.jpg" }, "ianstanion": { - "image": "image/6AZNJBRnkpQUWTKPzig99lQY8jT2/nmzrTw8LuV7YzoDPwxhy.jpg" + "image": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/x4tksWHlknXbJ0xQc957.jpg" }, "exterkamp": { "country": "US", From 7ee0e284b8d9ca25bc3b338c954e0bc27d7d8591 Mon Sep 17 00:00:00 2001 From: Alvin Bryan <107407814+alvinometric@users.noreply.github.com> Date: Tue, 7 Feb 2023 00:03:14 -0800 Subject: [PATCH 0008/1553] Fixed typo in CSS color-mix() article (#5145) --- site/en/blog/css-color-mix/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/en/blog/css-color-mix/index.md b/site/en/blog/css-color-mix/index.md index 969fc3560d33..20111718e2b0 100644 --- a/site/en/blog/css-color-mix/index.md +++ b/site/en/blog/css-color-mix/index.md @@ -199,7 +199,7 @@ both produce a vibrant result, while srgb and oklab produce unsaturated colors.
Try the demo
-If you want consistency and subtly, use oklab. In the following demo which mixes +If you want consistency and subtlety, use oklab. In the following demo which mixes blue and black, hsl and hwb produce overly vibrant and hue shifted colors while srgb and oklab produce a darker blue. From 61afb724aa8cd7b40c2ddd8021bfd892dd1cf08d Mon Sep 17 00:00:00 2001 From: John Richardson Date: Tue, 7 Feb 2023 10:13:22 +0000 Subject: [PATCH 0009/1553] Fixes a bug whereby calling setValue externally resulted in options being in a bad state. (#5183) --- site/_js/web-components/enhanced-select.js | 16 +++++-- .../enhanced-select/enhanced-select.js | 46 +++++++++++++++++++ 2 files changed, 57 insertions(+), 5 deletions(-) diff --git a/site/_js/web-components/enhanced-select.js b/site/_js/web-components/enhanced-select.js index e5dd633b5b44..bf0280f3d6a8 100644 --- a/site/_js/web-components/enhanced-select.js +++ b/site/_js/web-components/enhanced-select.js @@ -117,6 +117,8 @@ export class EnhancedSelect extends BaseElement { setValue(value) { this.value = value; + this.options.forEach(o => (o.selected = value.includes(o.value))); + const data = new FormData(); value.forEach(value => data.append(this.name, value)); @@ -404,11 +406,15 @@ export class EnhancedSelect extends BaseElement { * @param {{id:string, label: string, value: string, selected: boolean}} option */ selectOption(option) { - this.multiple - ? (option.selected = !option.selected) - : this.options.map(o => (o.selected = o === option)); - - this.setValue(this.getSelectedValues()); + if (this.multiple) { + this.setValue( + this.options + .filter(o => (o === option ? !o.selected : o.selected)) + .map(o => o.value) + ); + } else { + this.setValue([option.value]); + } this.open = this.multiple; } diff --git a/tests/site/_js/web-components/enhanced-select/enhanced-select.js b/tests/site/_js/web-components/enhanced-select/enhanced-select.js index b1b80b48a793..69d24d23a950 100644 --- a/tests/site/_js/web-components/enhanced-select/enhanced-select.js +++ b/tests/site/_js/web-components/enhanced-select/enhanced-select.js @@ -127,6 +127,52 @@ test('enhanced-select: supports multiselect', withPage, async (t, page) => { t.deepEqual(JSON.parse(value), ['1', '3']); }); +test( + 'enhanced-select: calling setValue directly behaves as expected', + withPage, + async (t, page) => { + await page.setContent(html` + + + + `); + + await addPageScript(page, '_enhanced-select.js'); + + const lastOption = await page.$('enhanced-select li:last-child'); + await lastOption.click(); + + const initialValue = await page.evaluate(() => { + return document.querySelector('enhanced-select').value; + }); + + t.deepEqual(initialValue, ['3']); + + await page.evaluate(() => { + document.querySelector('enhanced-select').setValue([]); + }); + + const resetValue = await page.evaluate(() => { + return document.querySelector('enhanced-select').value; + }); + + t.deepEqual(resetValue, []); + + const firstOption = await page.$('enhanced-select li:first-child'); + await firstOption.click(); + + const finalValue = await page.evaluate(() => { + return document.querySelector('enhanced-select').value; + }); + + t.deepEqual(finalValue, ['1']); + } +); + test( 'enhanced-select: can be opened/closed with keyboard', withPage, From c9c3d023e1b13886f7369b38176c2ba654295d9f Mon Sep 17 00:00:00 2001 From: Eiji Kitamura Date: Tue, 7 Feb 2023 19:15:16 +0900 Subject: [PATCH 0010/1553] Update the canmakepayment article (#5180) * Update the canmakepayment article * Minor nits --------- Co-authored-by: Anusmita --- .../index.md | 80 +++++++++++-------- 1 file changed, 46 insertions(+), 34 deletions(-) diff --git a/site/en/blog/payment-handler-canmakepayment-update/index.md b/site/en/blog/payment-handler-canmakepayment-update/index.md index 2fb4b92411b2..1214022d11e0 100644 --- a/site/en/blog/payment-handler-canmakepayment-update/index.md +++ b/site/en/blog/payment-handler-canmakepayment-update/index.md @@ -8,6 +8,7 @@ description: > authors: - agektmr date: 2022-10-27 +updated: 2023-02-07 --- [The Payment Handler API](https://web.dev/web-based-payment-apps-overview/) @@ -20,86 +21,97 @@ the merchant's origin and arbitrary data to [a service worker that is registered for the Payment Handler API](https://web.dev/orchestrating-payment-transactions/). This cross-origin communication does not require a user gesture and does not show any user interface. - + Chrome is going to remove the identifying fields from `canmakepayment` event and start the origin trial from Chrome 108. - + The information on this page only applies to the payment app providers that use the Payment Handler API. If you don't use it, you can skip these instructions. - + ## What's changing? - + When a merchant calls `new PaymentRequest()`, a registered service worker receives a `canmakepayment` event ([`CanMakePaymentEvent`](https://w3c.github.io/payment-handler/#the-canmakepaymentevent)) that contains following information: - + - `topOrigin` - `paymentRequestOrigin` - `methodData` - `modifiers` - + These are going to be removed and the service worker will simply receive the `canmakepayment` event without any additional information. - + ## Feature detection - -To detect whether the "canmakepayment" event is changed in the service worker + +To detect whether the `canmakepayment` event is changed in the service worker code, examine respective properties like so: - + ```js self.addEventListener(e => { - if (e.paymentRequestOrigin) {...} - if (e.topOrigin) {...} - if (e.methodData && e.methodData.length > 0) {...} - if (e.modifiers && e.modifiers.length > 0) {...} - ... + if (e.paymentRequestOrigin) {...} + if (e.topOrigin) {...} + if (e.methodData && e.methodData.length > 0) {...} + if (e.modifiers && e.modifiers.length > 0) {...} + ... }); ``` - + ## Try out the change locally - + To enable the change locally for development purposes: - -1. Use Chrome 108 or later. + +1. Use Chrome 108, 109, or 110. 2. Enter `chrome://flags/#clear-identity-in-can-make-payment` in the URL bar. 3. Enable the flag. 4. Relaunch Chrome. - -By enabling the flag, the identity fields in the "canmakepayment" event will be + +By enabling the flag, the identity fields in the `canmakepayment` event will be emptied-out (and [the Android `IS_READY_TO_PAY` Intent](https://web.dev/android-payment-apps-developers-guide/#step-2-let-a-merchant-know-if-a-customer-has-an-enrolled-instrument-that-is-ready-to-pay)). - + ## Enable the change in production - + You can also enable the change in production for testing purposes before it actually lands in Chrome. This mechanism is called an origin trial. - + {% Partial 'origin-trials' %} - + To register an origin trial: - + 1. [Request a token](/origintrials/#/view_trial/3462142213541068801) for your origin. 2. Add the token to your service worker JavaScript file using an `Origin-Trial` HTTP header. Setting HTTP headers requires access to configuring your server. The resulting response header should look something like: - + ```text - Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71... - ``` - +Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71... +``` + To see the origin trial token on the service worker file, [use the DevTools](/docs/devtools/network/reference/#headers) or the `curl` command like so: - + ```shell $ curl --head | grep -i origin-trial origin-trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71... ``` - + +## Re-enable the identity fields locally after Chrome 111 + +If you are using Chrome 111 or later, the identity fields in the +`canmakepayment` event are left empty. To re-enable the +fields locally, you can do the following: + +1. Use Chrome 111 or later. +2. Enter `chrome://flags/#add-identity-in-can-make-payment` in the URL bar. +3. Enable the flag. +4. Relaunch Chrome. + ## Next steps - -This change is planned to be enabled by default from Chrome 111. Start testing today to be prepared + +This change is planned to be enabled by default from Chrome 111. You can start testing today to be prepared for the change in time for the launch. From 1e7edb2ad9caccc91a6c5fe7cddcf5ee6a0f90ec Mon Sep 17 00:00:00 2001 From: Ewa Date: Tue, 7 Feb 2023 12:25:44 +0100 Subject: [PATCH 0011/1553] 4362 redesign fugu showcase page (#5159) * feat: add fugu-showcase page * feat: add style for fugu-showcase page * lint: fix sass errors * refector: use i18n filter and fix scss lint error * refector: move all logic to 11tydata * style: fix scss lint error * feat: add load more button * feat: add load more function * refactor: add partial template and refactor showcase logic * refactor: delete unused file * Revamp fugu showcase page and add fugu data to external * lint * fix-rollup * Add form link * Add linkable fugu filters * Add thumbnail hairline * old logo * view source * Update site/_data/fuguShowcase.js Co-authored-by: Thomas Steiner * Update site/_includes/partials/showcase-card.njk Co-authored-by: Thomas Steiner * Fix screenshot url * Update site/_includes/partials/showcase-card.njk Co-authored-by: Thomas Steiner * Overrside display none on medium screen * Add search close btn * Copy app links to clipboard * Fix image aspect ration * i18n --------- Co-authored-by: Maya Janthong Co-authored-by: devnook Co-authored-by: Thomas Steiner --- rollup.config.js | 2 + site/_data/fuguShowcase.js | 44 +++++++++ site/_data/i18n/common.yml | 13 ++- site/_data/i18n/fugu_showcase.yml | 5 + site/_includes/icons/arrow-down.svg | 2 +- site/_includes/partials/events-list.njk | 1 - site/_includes/partials/showcase-card.njk | 70 ++++++++++++++ site/_js/fugu-showcase.js | 95 +++++++++++++++++++ site/_scss/blocks/_fugu-showcase.scss | 63 ++++++++++++ site/_scss/main.scss | 2 + site/en/fugu-showcase/index.njk | 70 ++++++++++++++ types/site/_collections/fuguShowcase.d.ts | 45 +++++++++ .../_js/web-components/extended-select.d.ts | 24 +++++ 13 files changed, 432 insertions(+), 4 deletions(-) create mode 100644 site/_data/fuguShowcase.js create mode 100644 site/_data/i18n/fugu_showcase.yml create mode 100644 site/_includes/partials/showcase-card.njk create mode 100644 site/_js/fugu-showcase.js create mode 100644 site/_scss/blocks/_fugu-showcase.scss create mode 100644 site/en/fugu-showcase/index.njk create mode 100644 types/site/_collections/fuguShowcase.d.ts create mode 100644 types/site/_js/web-components/extended-select.d.ts diff --git a/rollup.config.js b/rollup.config.js index 00a6702b0db4..0cf7d34208e2 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -23,6 +23,7 @@ const devConfig = { 'site/_js/100.js', 'site/_js/events.js', 'site/_js/styleguide.js', + 'site/_js/fugu-showcase.js', ], output: { dir: 'dist/js', @@ -54,6 +55,7 @@ const productionConfig = { 'site/_js/100.js', 'site/_js/events.js', 'site/_js/styleguide.js', + 'site/_js/fugu-showcase.js', ], output: { dir: 'dist/js', diff --git a/site/_data/fuguShowcase.js b/site/_data/fuguShowcase.js new file mode 100644 index 000000000000..a6b4d9ff4a0d --- /dev/null +++ b/site/_data/fuguShowcase.js @@ -0,0 +1,44 @@ +/* + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Extract Fugu items and API names from Fugu showcase data. + */ + +const path = require('path'); +const fs = require('fs'); + +module.exports = () => { + const fuguShowcaseFile = path.join( + __dirname, + '../../external/data/fugu-showcase.json' + ); + const fuguItems = JSON.parse(fs.readFileSync(fuguShowcaseFile, 'utf-8')); + + const availableAPIs = new Set(); + fuguItems.forEach(item => { + item.usedAPIs.forEach(api => { + availableAPIs.add(api.name); + }); + }); + + return { + fuguItems, + availableApis: Array.from(availableAPIs.keys()).sort((a, b) => + a.toLowerCase().localeCompare(b.toLowerCase()) + ), + }; +}; diff --git a/site/_data/i18n/common.yml b/site/_data/i18n/common.yml index 8197da20989b..37a5cef7a5fe 100644 --- a/site/_data/i18n/common.yml +++ b/site/_data/i18n/common.yml @@ -36,7 +36,7 @@ compare_current: en: 'Current' compare_proposed: - en: 'Proposed' + en: 'Proposed' menu: en: 'menu' @@ -197,6 +197,15 @@ website: featured: en: Featured +launch_app: + en: 'Launch app' + +view_source: + en: 'View source' + +load_more: + en: 'Load more' + improve_article: en: 'Improve article' zh: '改进文章' @@ -249,7 +258,7 @@ bug_report: en: Report a bug. checkbox_group: - reset: + reset: en: Reset select_all: en: Select all diff --git a/site/_data/i18n/fugu_showcase.yml b/site/_data/i18n/fugu_showcase.yml new file mode 100644 index 000000000000..8ec5c5ea45fd --- /dev/null +++ b/site/_data/i18n/fugu_showcase.yml @@ -0,0 +1,5 @@ +select_api: + en: Select API + +search_apps: + en: Search apps diff --git a/site/_includes/icons/arrow-down.svg b/site/_includes/icons/arrow-down.svg index f449e86c1f34..0f454692bc2e 100644 --- a/site/_includes/icons/arrow-down.svg +++ b/site/_includes/icons/arrow-down.svg @@ -1,3 +1,3 @@ - + diff --git a/site/_includes/partials/events-list.njk b/site/_includes/partials/events-list.njk index bf452db46687..7e40f5d11b4d 100644 --- a/site/_includes/partials/events-list.njk +++ b/site/_includes/partials/events-list.njk @@ -30,7 +30,6 @@ {% endif %} -
+
+ + + + + Screenshot of {{ item.title }}. + + +
+ +
+ {% if item.appURL %} + + {{ icon('external-link') }} + {{ 'i18n.common.launch_app' | i18n(locale) }} + + {% endif %} + {% if item.sourceURL %} + + {{ icon('code') }} + {{ 'i18n.common.view_source' | i18n(locale) }} + + {% endif %} + + # + +
+ +

+ + {{ item.title }} + +

+ +

+ {{ item.description }} +

+ +
+ {% from 'macros/tag.njk' import tag with context %} +
+
+ {% for api in item.usedAPIs %} + {{ api.name }} + {% endfor %} +
+
+
+
diff --git a/site/_js/fugu-showcase.js b/site/_js/fugu-showcase.js new file mode 100644 index 000000000000..e19f2b5815f4 --- /dev/null +++ b/site/_js/fugu-showcase.js @@ -0,0 +1,95 @@ +/* + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import './web-components/enhanced-select'; + +(() => { + const cards = document.querySelectorAll('.fugu-card'); + /** @type HTMLInputElement|null */ + const searchAppsInput = document.querySelector('#search-fugu-apps'); + /** @type ExtendedSelect|null */ + const apiSelect = document.querySelector('#api-select'); + const searchClose = document.querySelector('#search-fugu-apps-close'); + const container = document.querySelector('.fugu-showcase'); + + if (!searchAppsInput || !apiSelect) { + return; + } + + const onSearch = () => { + const searchTerm = searchAppsInput.value; + const selectedApis = apiSelect.value; + filterCards(cards, searchTerm, selectedApis); + const url = new URL(window.location.href); + url.hash = searchTerm ? '#' + searchTerm : ''; + if (selectedApis.length) { + url.searchParams.set('api', selectedApis.join(',')); + } else { + url.searchParams.delete('api'); + } + window.history.pushState({}, '', url); + }; + + const onAppLinkClick = e => { + const appLink = e.target?.closest('.fugu-app-link'); + if (appLink) { + e.preventDefault(); + navigator.clipboard.writeText(appLink.href); + window.history.pushState({}, '', appLink.href); + searchAppsInput.value = document.location.hash.replace('#', '') || ''; + onSearch(); + } + }; + + apiSelect.addEventListener('change', onSearch); + searchAppsInput.addEventListener('input', onSearch); + searchClose?.addEventListener('click', () => { + searchAppsInput.value = ''; + onSearch(); + }); + container?.addEventListener('click', onAppLinkClick); + + const filterCards = (cards, searchTerm, selectedApis) => { + if (selectedApis.length === 0 && searchTerm.length === 0) { + cards.forEach(card => card.removeAttribute('hidden')); + return; + } + const isSelectedApi = api => selectedApis.includes(api); + cards.forEach(card => { + const cardApis = card.dataset.usedApis.split(' '); + const matchApis = selectedApis.length + ? cardApis.some(isSelectedApi) + : true; + if (card.dataset.terms.match(searchTerm) && matchApis) { + card.removeAttribute('hidden'); + } else { + card.setAttribute('hidden', 'true'); + } + }); + }; + + searchAppsInput.value = document.location.hash.replace('#', '') || ''; + apiSelect.value = + new URL(document.location.href).searchParams.get('api')?.split(',') || []; + onSearch(); + + window.addEventListener('keydown', e => { + if (e.key === 'f' && e.metaKey) { + e.preventDefault(); + searchAppsInput.focus(); + } + }); +})(); diff --git a/site/_scss/blocks/_fugu-showcase.scss b/site/_scss/blocks/_fugu-showcase.scss new file mode 100644 index 000000000000..6bca3c8ceded --- /dev/null +++ b/site/_scss/blocks/_fugu-showcase.scss @@ -0,0 +1,63 @@ +.fugu-showcase { + .search-box { + align-items: center; + gap: 1rem; + } + + .search-box__input { + background: var(--color-bg-shade); + border: 0; + border-radius: px-to-rem(100px); + display: block; + margin: 0; + padding: get-size(200) get-size(700); + + &::placeholder { + color: var(--color-secondary-text); + } + } + + .search-box__btn--close { + justify-self: end; + } + + .search-box__btn--close { + svg { + height: 18px; + width: 18px; + } + } + + label[for='api-select'] { + text-transform: uppercase; + } + + .enhanced-select__wrapper { + border: 0; + color: var(--color-primary); + } + + + .blog-grid { + justify-content: space-evenly; + } + + .blog-card__actions { + border-bottom: 1px solid var(--color-hairline); + justify-content: space-between; + width: 100%; + + a { + align-items: center; + text-decoration: none; + } + + svg { + margin-right: 8px; + } + } + + .blog-card__thumbnail img { + max-height: unset; + } +} diff --git a/site/_scss/main.scss b/site/_scss/main.scss index f21231e1eee6..d0fae8fd6d5a 100644 --- a/site/_scss/main.scss +++ b/site/_scss/main.scss @@ -79,6 +79,8 @@ @import 'blocks/landing-container'; @import 'blocks/featured-section'; @import 'blocks/load-more'; +@import 'blocks/fugu-showcase'; +@import 'blocks/enhanced-select'; @import 'node_modules/webdev-infra/shortcodes/BrowserCompat/styles'; // Utilities diff --git a/site/en/fugu-showcase/index.njk b/site/en/fugu-showcase/index.njk new file mode 100644 index 000000000000..e0a0218eed03 --- /dev/null +++ b/site/en/fugu-showcase/index.njk @@ -0,0 +1,70 @@ +--- +title: 'Project Fugu API Showcase' +subhead: > + The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu. +description: > + The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu. +hero: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/wu6CeuL1HpHtc8b4WIIm.png +alt: Blowfish swarm swimming in the ocean. +--- + +{% extends "layouts/base.njk" %} +{% from 'macros/cards/hero-card.njk' import heroCard with context %} +{% from 'macros/icon.njk' import icon with context %} + +{% block content %} + +
+
+ {% if hero %} + {{ heroCard( + "Project Fugu API Showcase", + "The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu.", + "Submit a new app", + "https://docs.google.com/forms/d/e/1FAIpQLScNd1rClbmFWh6FcMmjUNrwg9RLz8Jk4BkHz_-EOpmkVd_-9g/viewform", + hero, + "Project Fugu API Showcase", + "cyan" + ) }} + {% endif %} +
+ +
+
+ + + + + +
+
+ {% for item in fuguShowcase.fuguItems %} + {% include 'partials/showcase-card.njk' %} + {% endfor %} +
+
+
+{% endblock %} + +{% block scripts %} + +{% endblock %} \ No newline at end of file diff --git a/types/site/_collections/fuguShowcase.d.ts b/types/site/_collections/fuguShowcase.d.ts new file mode 100644 index 000000000000..addf6dd72abc --- /dev/null +++ b/types/site/_collections/fuguShowcase.d.ts @@ -0,0 +1,45 @@ +/* + * Copyright 2023 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +declare global { + export interface FuguProject { + timestamp: string, + appURL: string, + sourceURL: string, + usedAPIs: FuguAPI[], + screenshot?: string, + } + + export interface FuguShowcase { + timestamp: string, + appURL: string, + sourceURL: string, + usedAPIs: FuguAPI[], + screenshot: string, + title: string, + description: string, + meta: any, + isElectronApp: boolean, + } + + export interface FuguAPI { + name: string, + url: string, + } +} + +// empty export to keep file a module +export {}; diff --git a/types/site/_js/web-components/extended-select.d.ts b/types/site/_js/web-components/extended-select.d.ts new file mode 100644 index 000000000000..073565cc0975 --- /dev/null +++ b/types/site/_js/web-components/extended-select.d.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +declare global { + export interface ExtendedSelect extends HTMLSelectElement { + value: string[]; + } +} + +// empty export to keep file a module +export {}; From 87b328ff79e553c9b09f27e1480e6733e55292e7 Mon Sep 17 00:00:00 2001 From: John Richardson Date: Tue, 7 Feb 2023 12:18:29 +0000 Subject: [PATCH 0012/1553] Adds a new sample events page and adds it to Percy (#4604) * Refactors collection usage in the events layout, adds a new sample page and tells percy to take a snapshot of it. * Updates percy/ * Moves the new sample page over to the handbook as that's where all the percy pages will ultimately live when this is released * Disables javascript on the meet-the-team page to prevent an issue with the web-tabs component. * Reenables js on the events page * Adds data-unresolved attribute to the web-tabs component and removal to BaseElement@firstUpdated, providing the ability to detect double render. * Removes double negative. * Fixes package-lock and adds the new page to the index file. * Switches from unresolved to resolved. * revert changes to unrelated file * revert changes to unrelated file --- .percy.js | 3 +- package-lock.json | 197 +++++++++--------- package.json | 2 +- site/_includes/partials/events-list.njk | 12 +- site/_js/web-components/base-element.js | 8 + site/_js/web-components/web-tabs.js | 5 + site/en/docs/handbook/content-types/index.md | 1 + .../content-types/meet-the-team/index.md | 181 ++++++++++++++++ .../meet-the-team/meet-the-team.11tydata.js | 10 + 9 files changed, 317 insertions(+), 102 deletions(-) create mode 100644 site/en/docs/handbook/content-types/meet-the-team/index.md create mode 100644 site/en/meet-the-team/meet-the-team.11tydata.js diff --git a/.percy.js b/.percy.js index d2e366031312..1e1d57b698b7 100644 --- a/.percy.js +++ b/.percy.js @@ -4,6 +4,7 @@ const SNAPSHOTS = [ '/en/docs/handbook/content-types/docs-landing/index.html', '/en/docs/handbook/content-types/doc-post/index.html', '/en/docs/handbook/content-types/landing/index.html', + '/en/docs/handbook/content-types/meet-the-team/index.html', ]; module.exports = { @@ -33,6 +34,6 @@ module.exports = { exclude: [ // Prevent percy to snapshot all index.html files in ./dist dir ({ name }) => !SNAPSHOTS.includes(name) - ] + ], } } diff --git a/package-lock.json b/package-lock.json index 4bc869f8440c..30d0a3058fe3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1764,57 +1764,68 @@ } }, "@percy/cli": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.1.0.tgz", - "integrity": "sha512-3GSXhYEr3FA3xJnYsSMbP+GGnV/JSTcPjCVdS/yYq+PUSZlc9/36z6OE55mj/GBbskwlZ0B4xEsKTccpDtZngw==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.18.0.tgz", + "integrity": "sha512-yfvVh2uwTqMGxn2wF/RCvGVsyfXkeKOt05Cil4s8PRSBQ94iDY872lMJ3al0gSq0y4GLAH9CO7ZVt3uqD2tlBg==", + "dev": true, + "requires": { + "@percy/cli-app": "1.18.0", + "@percy/cli-build": "1.18.0", + "@percy/cli-command": "1.18.0", + "@percy/cli-config": "1.18.0", + "@percy/cli-exec": "1.18.0", + "@percy/cli-snapshot": "1.18.0", + "@percy/cli-upload": "1.18.0", + "@percy/client": "1.18.0", + "@percy/logger": "1.18.0" + } + }, + "@percy/cli-app": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.18.0.tgz", + "integrity": "sha512-EAqD61ivuCwfl6PacXW9Wx9kTRvMPCBlQnxmrhx7jJG5tIp418p4XB3zkFOAirUa/LOdwNIVaPCHJyVAcJ1V5Q==", "dev": true, "requires": { - "@percy/cli-build": "1.1.0", - "@percy/cli-command": "1.1.0", - "@percy/cli-config": "1.1.0", - "@percy/cli-exec": "1.1.0", - "@percy/cli-snapshot": "1.1.0", - "@percy/cli-upload": "1.1.0", - "@percy/client": "1.1.0", - "@percy/logger": "1.1.0" + "@percy/cli-command": "1.18.0", + "@percy/cli-exec": "1.18.0" } }, "@percy/cli-build": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.1.0.tgz", - "integrity": "sha512-99LDYYE5LPyRH6TL5mYapb0dNIQZkSrLq2I4ZyfTIUueoZ598QW1hg9IHo+URawFtjdFoMhaLlFGydMnizxCTw==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.18.0.tgz", + "integrity": "sha512-FuYWjXx4Wy0v27GpwxGX5qDq4xcLzlStbABNCp4H5RrNrLa1jkcViOKXTSurdjHYWlHHFWJUbk39D4g3ZRXOAA==", "dev": true, "requires": { - "@percy/cli-command": "1.1.0" + "@percy/cli-command": "1.18.0" } }, "@percy/cli-command": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.1.0.tgz", - "integrity": "sha512-SMU/gVqXLm5GlThadby0uP8psDOsrUfNUIaFPtiPDSm0dT2dAyN1CAyvioEPQ2znPPMQSVegCvH23lfcYM4RXA==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.18.0.tgz", + "integrity": "sha512-2dHJalp83IygD/FqXCFNND22z7f4r5uZxqr5GAyiJ0STkQYitTgwkUp+4IRdfK1zmi+A2dbyYU0xV9txEW5v8g==", "dev": true, "requires": { - "@percy/config": "1.1.0", - "@percy/core": "1.1.0", - "@percy/logger": "1.1.0" + "@percy/config": "1.18.0", + "@percy/core": "1.18.0", + "@percy/logger": "1.18.0" } }, "@percy/cli-config": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.1.0.tgz", - "integrity": "sha512-zLtyippRN402sNIDVJw1ZYPEXj5zWZgOJMUWfBq8NUbfxRzYYGCz0opMKGocx1fV8VfaFs2DywewRWKlhPM/Aw==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.18.0.tgz", + "integrity": "sha512-N5I7av5SGO5n0YC61wbqVniNxFwAQFFubKyGyGaVlQkmKyRuYCmDMHlPdSv3zyvVD1ZJCvtDzi/VqQGDubEieg==", "dev": true, "requires": { - "@percy/cli-command": "1.1.0" + "@percy/cli-command": "1.18.0" } }, "@percy/cli-exec": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.1.0.tgz", - "integrity": "sha512-7c3mePcW1ZJnsv+BAaA6YzZcTM55Eaa4WFoBEMrPWvHGLHZe3O+gehbEFyooIsDJ1I/SplDNarH3j1L5m4GQFg==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.18.0.tgz", + "integrity": "sha512-4y+XIsYS5KypJmTtGKyKFU4GZ6902dCcEMJNDc69grSsco9N2lBG2gsvChCrCA2gDT8nUvKng9z9KF2OiMvF3w==", "dev": true, "requires": { - "@percy/cli-command": "1.1.0", + "@percy/cli-command": "1.18.0", "cross-spawn": "^7.0.3", "which": "^2.0.2" }, @@ -1863,80 +1874,60 @@ } }, "@percy/cli-snapshot": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.1.0.tgz", - "integrity": "sha512-6MQhUGrRFl2g9PfqLXfTL1CVoBmamWu2fCjzfgmb9E/HHKIDzE07PrwszNzEXHhdzBHG9gRZ0Bt6kzZ/Fta5UQ==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.18.0.tgz", + "integrity": "sha512-3a7HqJU/wCT7fKraYw6S4cs8KrlUZ0MbDV9/dEbFh9nSfz0BLQjcK+kL8OzjxM+bVwZ6pf62FJl44nVLpXqrGw==", "dev": true, "requires": { - "@percy/cli-command": "1.1.0", + "@percy/cli-command": "1.18.0", "yaml": "^2.0.0" }, "dependencies": { "yaml": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.1.tgz", - "integrity": "sha512-1NpAYQ3wjzIlMs0mgdBmYzLkFgWBIWrzYVDYfrixhoFNNgJ444/jT2kUT2sicRbJES3oQYRZugjB6Ro8SjKeFg==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz", + "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==", "dev": true } } }, "@percy/cli-upload": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.1.0.tgz", - "integrity": "sha512-P1GC3g0wYjy88h4zFBkInUcGWM8i99cJLyhKWg5WAK+bU5ot/Hc/4KgmNayHVxNJ/orcr1eHaP9pANbw82+igA==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.18.0.tgz", + "integrity": "sha512-JSRoE0aTnBH1HGNGmDJxGNkNIGor7H8pv6lO8AUiwCwQ55EHgLqtWlhwq+2AHz7QOiGD8aOHQTwJk6GcCIIa3A==", "dev": true, "requires": { - "@percy/cli-command": "1.1.0", + "@percy/cli-command": "1.18.0", "fast-glob": "^3.2.11", "image-size": "^1.0.0" - }, - "dependencies": { - "image-size": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.1.tgz", - "integrity": "sha512-VAwkvNSNGClRw9mDHhc5Efax8PLlsOGcUTh0T/LIriC8vPA3U5PdqXWqkz406MoYHMKW8Uf9gWr05T/rYB44kQ==", - "dev": true, - "requires": { - "queue": "6.0.2" - } - }, - "queue": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", - "dev": true, - "requires": { - "inherits": "~2.0.3" - } - } } }, "@percy/client": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.1.0.tgz", - "integrity": "sha512-AHbOlz/sAgTJeyMuDedW9+y/hYdKLneYEoE0kFTFQMelDzCn+CD7sW58tLLnBG8+wpjCAz65WGeK+3WNJ+R3IA==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.18.0.tgz", + "integrity": "sha512-onuVIpB6TPNjEhLlPsyhJYXTY2xdv3iNx4bj8Yfk751vQ33US2z4FEWDQKIEvHJGcFT7NEIHXFT3bYcFDmREdQ==", "dev": true, "requires": { - "@percy/env": "1.1.0", - "@percy/logger": "1.1.0" + "@percy/env": "1.18.0", + "@percy/logger": "1.18.0" } }, "@percy/config": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.1.0.tgz", - "integrity": "sha512-Lsbyf81B6T9qfUYZnPzKplnScY8NBOXtXwd+r7oYLpMny80c4hKQ1zi9W1aOfpoWIq7j5L7N68exEQjE465LLQ==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.18.0.tgz", + "integrity": "sha512-bjAiZuhORij3vxeolVjpf7ZU1Sjqv2Y9CgsBthoIu20f5o0a10w6JGgPkDjT3NaAIZDXgbxVsrWovlslbRC57w==", "dev": true, "requires": { - "@percy/logger": "1.1.0", + "@percy/logger": "1.18.0", "ajv": "^8.6.2", "cosmiconfig": "^7.0.0", "yaml": "^2.0.0" }, "dependencies": { "ajv": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", - "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -1952,23 +1943,23 @@ "dev": true }, "yaml": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.1.tgz", - "integrity": "sha512-1NpAYQ3wjzIlMs0mgdBmYzLkFgWBIWrzYVDYfrixhoFNNgJ444/jT2kUT2sicRbJES3oQYRZugjB6Ro8SjKeFg==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz", + "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==", "dev": true } } }, "@percy/core": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.1.0.tgz", - "integrity": "sha512-k7uBp4vXSwICM9n0sRgQiPXkiUbjNbTY3wPDVGY0h/lQwKL2CESt2G+pVl5h7I7OHmNHDZEDgrqpGuq/kDkxvQ==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.18.0.tgz", + "integrity": "sha512-9d8mkE6bfp0nRxhnGgC8N2KBG+MRiCxfvmZGfKENEoSY8NTTjJ5LqF+ol1JRwQ+uTABPZgy9XItWLINrS3yC1Q==", "dev": true, "requires": { - "@percy/client": "1.1.0", - "@percy/config": "1.1.0", - "@percy/dom": "1.1.0", - "@percy/logger": "1.1.0", + "@percy/client": "1.18.0", + "@percy/config": "1.18.0", + "@percy/dom": "1.18.0", + "@percy/logger": "1.18.0", "content-disposition": "^0.5.4", "cross-spawn": "^7.0.3", "extract-zip": "^2.0.1", @@ -2007,9 +1998,9 @@ "dev": true }, "path-to-regexp": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz", - "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", + "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==", "dev": true }, "safe-buffer": { @@ -2045,21 +2036,21 @@ } }, "@percy/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-6doaOh81Guv+aPMayMCTA3O1Pa/YwH2uwT5NGo5dNjCdeomk/BnA+ZhtTRiarW0ymF7q+z6paGhq3R+717YuUQ==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.18.0.tgz", + "integrity": "sha512-FoaUgmdCaymSVV/5UQsDwPlZYpSymViODiGJxEJnfESKB4L5aNWQTL3QefFOAI67Q9lUIezW7oueLPsH2XlCNg==", "dev": true }, "@percy/env": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.1.0.tgz", - "integrity": "sha512-Y2lSuiP+zyLSYf7IV/95MgNqiL6nRDYk9Ji8CMZPKuvPIrnCDExZ7nqszCli3hJ4qi6U4m1NykJWPDei4GjZNw==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.18.0.tgz", + "integrity": "sha512-b+RTDPst4yKk67EQMjGeBIjfAkqZy2jUXgW3SKaNCyCOzI+16IXJ1gJSrniv29TpxgqDa1y3OUyWTPkmuDVi2A==", "dev": true }, "@percy/logger": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.1.0.tgz", - "integrity": "sha512-bAlxBcdnViTpGQZtjs361vXSlaxEj6Zt4Wt1Mo7EdPwv/zya2cBpLFNNcRycWto4mdb5Qnpht+IPXf7RFXJ/nw==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.18.0.tgz", + "integrity": "sha512-ZC9OqaTVPjnndcSfbQaU0NcquC0J4KZFx7hEDznukXNsLIK4WSLiEK1QS+tGxAkIKZilHmVc/vv9q3lMvlQDaQ==", "dev": true }, "@protobufjs/aspromise": { @@ -9035,6 +9026,15 @@ "integrity": "sha512-+mQSgMRiFD3L3AOxLYOCxjIq4OnAmo5CIuC+lj5ehCJcPtV++QacEV7FdpzvYxH6DaOySWzQU6RR0lPLy37ckA==", "dev": true }, + "image-size": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz", + "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==", + "dev": true, + "requires": { + "queue": "6.0.2" + } + }, "image-ssim": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz", @@ -13580,6 +13580,15 @@ "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz", "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=" }, + "queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dev": true, + "requires": { + "inherits": "~2.0.3" + } + }, "quick-lru": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz", diff --git a/package.json b/package.json index b1e846f6646e..9421994fcd29 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "devDependencies": { "@ava/babel": "^1.0.1", "@google-cloud/secret-manager": "^3.2.2", - "@percy/cli": "^1.1.0", + "@percy/cli": "^1.16.0", "@rollup/plugin-commonjs": "^15.1.0", "@rollup/plugin-json": "^4.1.0", "ava": "^3.12.1", diff --git a/site/_includes/partials/events-list.njk b/site/_includes/partials/events-list.njk index 7e40f5d11b4d..73c6bbdfa5e3 100644 --- a/site/_includes/partials/events-list.njk +++ b/site/_includes/partials/events-list.njk @@ -14,13 +14,13 @@
- {% for event in collections.currentEvents.slice(0,show) %} + total-items="{{ currentEvents.length }}"> + {% for event in currentEvents.slice(0,show) %} {% include 'partials/event-card.njk' %} {% endfor %}
- {% if collections.currentEvents.length > show %} + {% if currentEvents.length > show %}