chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/docs/l10n.md

@@ -1,295 +1 @@
-# Localization
-
-## How to add a localizable string
-
-When you introduce a new UI string or modify an existing one that will be displayed to the users, or remove a string that is localized, follow these steps so that it can be localized.
-
-**Table of Contents**
-- [Adding a string](#adding-a-string)
-- [Modifying a string](#modifying-a-string)
-- [Removing a string](#removing-a-string)
-
-### Adding a string
-Before proceeding, make sure you know the different [localization APIs](#what-are-the-l10n-apis) and know which one you should use.
-
-Code example:
-  ```javascript
-  import * as i18n from '../i18n/i18n.js';
-
-  // at the top of example.js file, after import statements
-  const UIStrings = {
-    /**
-      * @description A string that is already added
-      */
-    alreadyAddedString: 'Someone already created a "UIStrings = {}" and added this string',
-    /**
-      * @description This is an example description for my new string
-      */
-    addThisString: 'The new string I want to add',
-    /**
-      * @description This is an example description for my new string with placeholder
-      * @example {example for placeholder} PH1
-      */
-    addAnotherString: 'Another new string I want to add, with {PH1}',
-  };
-  const str_ = i18n.i18n.registerUIStrings('example.js', UIStrings);
-  const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-  ```
-
-  ```javascript
-  // in example.js file, where you want to call the string
-
-  const message1 = i18nString(UIStrings.addThisString);
-  console.log(message1); // The new string I want to add
-
-  const message2 = i18nString(UIStrings.addAnotherString, {PH1: 'a placeholder'});
-  console.log(message2); // Another new string I want to add, with a placeholder
-  ```
-1. If there is already `UIStrings = {}` declared in the file, add your string to it.
-  If there isn't `UIStrings = {}` in the file, create one and add your string, also register the new UIStrings into the `en-US.json` by adding:
-    1. `const str_ = i18n.i18n.registerUIStrings({the current fileName.js, relative to front_end}, UIStrings);`
-    1. `const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);`
-
-
-2. Add description and examples for placeholder(if any):
-    1. To specify the description, use `@description …`
-    `@description This is an example description for my new string`
-    2. To specify an example for placeholder, use `@example {…} …`
-    `@example {example for placeholder} PH1`
-    3. To distinguish messages with the same content, use `@meaning …`
-    `@meaning This is an example meaning to differentiate this message from the other message with same content`
-
-3. Make sure your string is localizable:
-
-   1. Do not assume word order by using concatenation. Use the whole string.
-      ❌
-      ```javascript
-      'Add' + 'breakpoint'
-      ```
-      ✔️
-      ```javascript
-      'Add breakpoint'
-      ```
-      or
-      ❌
-      ```javascript
-      let description = 'first part'
-      if (condition)
-        description += ' second part'
-      ```
-      ✔️
-      ```javascript
-      let description
-      if (condition)
-        description = 'first part second part'
-      else
-        description = 'first part'
-      ```
-   2. Use placeholder over concatenation. This is so that the translators can adjust variable order based on what works in another language. For example:
-      ❌
-      ```javascript
-      'Check ' + title + ' for more information.'
-      ```
-      ✔️
-      ```javascript
-      'Check {PH1} for more information.', {PH1: title}
-      ```
-   3. If your string contains <b>leading or trailing white space</b>, it's usually an indication that it's half of a sentence. This decreases localizability as it's essentially concatenating. Modify it so that it doesn't contain leading or trailing white space anymore if you can.
-   4. <b>Backticks</b> are only used for the text that should not be localized. They cannot be escaped as part of the string. Check if there are something should not be localized (see [locked terms](#phrases-that-are-fully-locked) for more details).
-
-      ❌ Not localized
-
-      - Numbers: 1, 1.23, 1.2e3, etc.
-      - Application data: error codes, enums, database names, rgba, urls, etc.
-
-      ✔️ Can be localized
-
-      - Words and sentences
-      - Punctuation
-      - Units of measurement: kb/s, mph, etc.
-4. The following commands would add the new strings to `en-US.json`:
-  - `git cl presubmit --upload`, or
-  - `node third_party/i18n/collect-strings.js` under the DevTools src folder
-5. Strings containing possible plurals have a special format in ICU. This is because plurals work quite differently in other languages, e.g. special forms for two or three items.
-
-    ❌
-    ```javascript
-    if (count === 1) {
-      str = '1 breakpoint';
-    } else {
-      str = '{n} breakpoints', {n: count};
-    }
-    ```
-
-    ✔️
-    ```javascript
-    '{n, plural, =1 {# breakpoint} other {# breakpoints}}', {n: count};
-    ```
-    - '#' is replaced with the value of `n`
-    - 'n' is a naming convention, but any name can be used
-    - Nesting placeholders inside of plurals is allowed
-    - Put the entire string within the plural switch, e.g. `{# breakpoints were found}`, not `{# breakpoints} were found`
-    - Always provide the `=1` and the `other` case, even if they are the same for English.
-
-### Modifying a string
-1. Update the string you want to modify in `UIStrings`
-2. Update the description and placeholders of the string if necessary
-
-### Removing a string
-1. Remove your string and the metadata from `UIStrings`
-
-
-## What are the l10n APIs?
-
-Access localized strings in the DevTools frontend using the following localization calls.
-
-### i18nString
-The basic API to make a string (with or without placeholder) localizable.
-The first argument is the string reference in `UIStrings`
-The second argument is an object for placeholders (if any)
-
-```javascript
-// at the top of example.js file, after import statements
-
-const UIStrings = {
-  /**
-    * @description This is an example description for my new string with placeholder
-    * @example {example for placeholder} PH1
-    * @example {example 2 for placeholder 2} PH2
-    */
-  addAnotherString: 'Another new string I want to add, with {PH1} and {PH2}',
-};
-
-message = i18nString(UIStrings.addAnotherString, {PH1: 'a placeholder', PH2: 'another placeholder'});
-```
-
-### i18nLazyString
-The `i18nString` function returns the translated string, with placeholders resolved. To do this, it needs access to the translated strings for the user's locale, which are not available until after DevTools has finished starting up.
-
-Calls to `i18nString` in the module scope will therefore fail when the module is imported.
-```javascript
-// Fails because i18nString runs at module-import time.
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.CONSOLE,
-  title: i18nString(UIStrings.groupSimilarMessagesInConsole),
-...
-
-function notTopLevel() {
-  console.log(extension.title);
-}
-```
-
-`i18nLazyString` fixes this problem by providing the same API, but returning a closure that returns a `LocalizedString`.
-It can be used in top-level calls; just make sure use-sites know it's a function now.
-
-```javascript
-// Works because i18nLazyString defers the loading of the translated string until later.
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.CONSOLE,
-  title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
-...
-
-// Note we need to call title() now.
-function notTopLevel() {
-  console.log(extension.title());
-}
-```
-
-### i18n.i18n.getFormatLocalizedString
-This call returns a **span element**, not a string. It is used when you want to construct a DOM element with a localizable string, or localizable content that contains some other DOM element.
-
-```javascript
-// Create the string in UIString
-/**
-*@description Message in Coverage View of the Coverage tab
-*@example {reload button icon} PH1
-*@example {record button icon} PH2
-*/
-clickTheRecordButtonSToStart: 'Click the reload button {PH1} to reload or record button {PH2} start capturing coverage.',
-
-// Element with localizable content containing two DOM elements that are buttons
-const reloadButton = UI.createInlineButton(UI.Toolbar.createActionButtonForId('coverage.start-with-reload'));
-const recordButton = UI.createInlineButton(UI.Toolbar.createActionButton(this._toggleRecordAction));
-message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: reloadButton, PH2:recordButton });
-```
-
-### i18n.i18n.lockedString
-This call is a named cast. Use it in places where a localized string is expected but the
-term you want to use does not require translation. Instead of locking the whole phrase or using
-a placeholder-only phrase, use `lockedString`.
-
-```javascript
-someFunctionRequiringALocalizedString(i18n.i18n.lockedString('HTTP'));
-```
-
-## How to write good descriptions
-
-Good descriptions can improve localizability by providing more context to the translators.
-There are some details that are very important to have in other languages!
-
-**Good description**:
-```javascript
-const UIStrings = {
-  /**
-   * @description Tooltip text that appears when hovering over the 'Focusable' attribute name under the Computed Properties section in the Accessibility pane of the Elements pane.
-   */
-  computedPropertyTooltip: 'If true, this element can receive focus.',
-};
-```
-**Bad description**:
-```javascript
-const UIStrings = {
-  /**
-   * @description Elements pane 'Focusable' tooltip.
-   */
-  computedPropertyTooltip: 'If true, this element can receive focus.',
-};
-```
-
-### What information should I provide in the message description?
-- The type of UI element where the text is displayed. Is it regular text, a label, button text, a tooltip, a link, or an accessible label? Button text is often imperative i.e. a command to do something, which is important to know in some languages.
-- _When_: What triggers the string and/or what is the result? What page or text comes before and after? e.g. "Status text while waiting for X", "Shown when the audit is finished and X error was encountered".
-- What do the placeholders stand for? Placeholder examples are sent to translators, but extra information in the description will help too. e.g. "Total time in ms that the profile took to complete", "The CSS property name that is being edited"
-- Is this a verb or a noun? Many words in English can be both, e.g. 'request', 'address', 'change', 'display', 'increase'. Particularly if the string is short, this can be hard to guess. If it's an adjective, what does it refer to? This is important for inflection in some languages, where the ending of the adjective must change for gender or case.
-- Explain or name any complex terms, e.g. "Trust Tokens are a web API - https://web.dev/trust-tokens/"
-- Where is the text located? e.g. A table header in the Sources panel, a context-menu item in the Network panel. Many strings in the code base have _only_ the location, which is not the most important context.
-
-
-## How to prevent a term being localized
-
-Any text within the backticks will not be translated.
-For example, if the 'robots.txt' in string 'Requesting for robots.txt ...' should not be translated:
-
-```javascript
-// in example.js file
-
-import * as i18n from '../i18n/i18n.js';
-const UIStrings = {
-  /**
-   * @description Example description. Note: "robots.txt" is a canonical filename and should not be translated.
-   */
-  requestMessage: 'Requesting for `robots.txt` ...',
-};
-const str_ = i18n.i18n.registerUIStrings('example.js', UIStrings);
-
-const message = i18nString(UIStrings.requestMessage);
-```
-The string will rendered with robots.txt not translated and without the backticks around it
-```javascript
-  'Requesting for robots.txt ...'
-```
-
-### Phrases that are fully locked
-Any text that is fully locked should not go into the UIStrings object. To make your intention clear
-or to make TypeScript happy, there are two methods `i18n.i18n.lockedString` and `i18n.i18n.lockedLazyString`
-that can be used instead of having fully locked phrases via `i18nString`.
-
-### What should not be localized?
-In general, branding related terms and code snippets are the ones to look for, and Sometimes some technical terms. Some examples:
-
-**Brandings:**
-Lighthouse, GitHub, DevTools, Chrome Data Saver, Safari, BlackBerry Z30, Kindle Fire HDX, Pixel 2, Microsoft Lumia 550
-**Code snippets:**
-localhost:9229, console.clear(), --memlog=all, url:a.com
-**Technical terms:**
-DOM, DIV, aria...
+This file has moved [here](./cookbook/localization.md).

package/docs/release_management.md

@@ -1,53 +1 @@
-# Release Management
-
-## Merges and Cherry-Picks
-
-The documentation on cherry-picks and merges (including backmerges and backports) can be found in [`contributing_changes.md`](contributing_changes.md#merges-and-cherry_picks).
-
-## Versioning
-
-There is no explicit versioning being done. At the time of writing no compelling
-use case was found that would require version numbers. Commits are identified by their commit hash, which should suffice for the projected future.
-
-## What happens when Chromium cuts a new Canary branch
-
-For each Chromium release branch, we create a mirror branch with the same name on our repo. Rough
-outline:
-
-1. Chromium cuts a branch e.g. 3879
-1. Bots create Chromium/3879 branch on the DevTools frontend repo
-1. The end
-
-## Handling of Beta/Stable branches
-
-Generally speaking, beta/stable branches are the same as Canary branches. There
-is a special waterfall though, that runs tests on the beta/stable branches.
-
-When Chromium updates to a new major version we need to update the branch number
-in [infra/config](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/infra/config)
-branch of devtools-frontend. Specifically, in file buckets/ci.start, promote
-the existing beta branch to stable section and modify beta section with the
-corresponding branch number for the new Chromium milestone.
-
-```python
-generate_ci_configs(
-    configurations = [
-      ...
-      config_section(
-        name="beta",
-        branch='refs/heads/chromium/4044',
-      ),
-      config_section(
-        name="stable",
-        branch='refs/heads/chromium/3987',
-      ),
-      ...
-```
-
-After editing the above mentioned file run `lucicfg generate main.star` to have the change propagated to the cfg files.
-Example: [CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2104476)
-
-## Rolling/Integrating into Chromium
-
-The [Skia
-autoroller](https://skia.googlesource.com/buildbot/+/main/autoroll/README.md) is used. The DevTools-Frontend auto-roller state can be seen and controlled [here](https://autoroll.skia.org/r/devtools-frontend-chromium?tab=status).
+This file has moved [here](./cookbook/release_management.md).

package/extensions/cxx_debugging/e2e/standalone/MemoryInspector_test.ts

@@ -45,7 +45,7 @@ describe('LinearMemoryInspector', () => {
     assert.equal(stoppedText, 'Paused on breakpoint');
 
     const localVariable = await waitFor('[data-object-property-name-for-test="d"]');
-    const memIcon = await waitFor('[title="Reveal in Memory inspector panel"]', localVariable);
+    const memIcon = await waitFor('[title="Open in Memory inspector panel"]', localVariable);
     await clickElement(memIcon);
 
     const byteHighlights = await waitForMany('.byte-cell.highlight-area', 8);

package/extensions/cxx_debugging/e2e/tsconfig.json

@@ -8,6 +8,7 @@
     "allowUnreachableCode": false,
     "useUnknownInCatchVariables": false,
     "baseUrl": ".",
+    "skipLibCheck": true,
     "paths": {
       "test/*": [
         "../../../test/*"

package/extensions/cxx_debugging/src/ExtensionOptions.ts

@@ -4,18 +4,18 @@
 
 /* eslint-disable rulesdir/check_component_naming */
 /* eslint-disable rulesdir/inject_checkbox_styles */
-/* eslint-disable rulesdir/lit_html_data_as_type */
 /* eslint-disable rulesdir/lit_html_host_this */
 
+import './CreditsItem.js';
+import './ModuleConfigurationList.js';
+
 import {html, render} from 'lit-html';
 import {until} from 'lit-html/directives/until.js';  // eslint-disable-line rulesdir/es_modules_import
 
 import {type CreditsItemData} from './CreditsItem.js';
-import './CreditsItem.js';
-import {type ModuleConfigurationsChangedEvent} from './ModuleConfigurationList.js';
-import './ModuleConfigurationList.js';
-import {DEFAULT_MODULE_CONFIGURATIONS} from './ModuleConfiguration.js';
 import {type Storage} from './DevToolsPluginHost.js';
+import {DEFAULT_MODULE_CONFIGURATIONS} from './ModuleConfiguration.js';
+import {type ModuleConfigurationsChangedEvent} from './ModuleConfigurationList.js';
 
 const CREDITS_ITEMS: CreditsItemData[] = [
   {
@@ -698,8 +698,7 @@ export class ExtensionOptions extends HTMLElement {
 
     <h2>Credits</h2>
     <div>${CREDITS_ITEMS.map(data => {
-      return html`<devtools-cxx-debugging-credits-item .data=${
-          data as CreditsItemData}></devtools-cxx-debugging-credits-item>`;
+      return html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`;
     })}</div>`;
     render(output, this.shadow, {
       eventContext: this,

package/extensions/cxx_debugging/tests/CreditsItem_test.ts

@@ -31,8 +31,8 @@ describe('CreditsItem', () => {
       homepage: 'https://www.example.com',
       license: 'Do whatever you want!'
     };
-    const el = await createItem(html`<devtools-cxx-debugging-credits-item .data=${
-        data as CreditsItemData}></devtools-cxx-debugging-credits-item>`);
+    const el = await createItem(
+        html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`);
     expect(el.data).to.equal(data);
 
     el.data = {title: 'title', homepage: 'homepage', license: 'license'};
@@ -43,8 +43,8 @@ describe('CreditsItem', () => {
 
   it('renders title and homepage correctly', async () => {
     const data: CreditsItemData = {title: 'My project', homepage: 'https://www.example.com', license: '3-BSD License'};
-    const el = await createItem(html`<devtools-cxx-debugging-credits-item .data=${
-        data as CreditsItemData}></devtools-cxx-debugging-credits-item>`);
+    const el = await createItem(
+        html`<devtools-cxx-debugging-credits-item .data=${data}></devtools-cxx-debugging-credits-item>`);
     expect(el.shadowRoot?.querySelector('.title')?.textContent).to.eql(data.title);
     expect(el.shadowRoot?.querySelector('a')?.getAttribute('href')).to.eql(data.homepage);
   });

package/front_end/.eslintrc.js

@@ -37,7 +37,6 @@ module.exports = {
         'rulesdir/enforce_custom_event_names': 'error',
         'rulesdir/set_data_type_reference': 'error',
         'rulesdir/no_bound_component_methods': 'error',
-        'rulesdir/lit_html_data_as_type': 'error',
         'rulesdir/lit_no_style_interpolation': 'error',
         'rulesdir/ban_self_closing_custom_element_tagnames': 'error',
         'rulesdir/ban_style_tags_in_lit_html': 'error',

package/front_end/Images/src/animation.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 18C6.75 18 6.04514 17.8646 5.38542 17.5938C4.72569 17.3229 4.13194 16.9236 3.60417 16.3958C3.07639 15.8681 2.67708 15.2743 2.40625 14.6146C2.13542 13.9549 2 13.25 2 12.5C2 11.4444 2.27083 10.4757 2.8125 9.59375C3.35417 8.71181 4.10417 8.03472 5.0625 7.5625C5.29861 7.04861 5.63542 6.57292 6.07292 6.13542C6.51042 5.69792 7.00694 5.34028 7.5625 5.0625C8.03472 4.11806 8.71181 3.37153 9.59375 2.82292C10.4757 2.27431 11.4444 2 12.5 2C13.25 2 13.9549 2.13542 14.6146 2.40625C15.2743 2.67708 15.8681 3.07639 16.3958 3.60417C16.9236 4.13194 17.3229 4.72569 17.5938 5.38542C17.8646 6.04514 18 6.75 18 7.5C18 8.56944 17.7326 9.53819 17.1979 10.4063C16.6632 11.2743 15.9097 11.9514 14.9375 12.4375C14.6736 12.9931 14.3229 13.4861 13.8854 13.9167C13.4479 14.3472 12.9653 14.6875 12.4375 14.9375C11.9514 15.8819 11.2674 16.6285 10.3854 17.1771C9.50347 17.7257 8.54167 18 7.5 18ZM7.5 16.5C7.95833 16.5 8.42014 16.4132 8.88542 16.2396C9.35069 16.066 9.76389 15.8194 10.125 15.5C9.36111 15.5278 8.63542 15.3993 7.94792 15.1146C7.26042 14.8299 6.64583 14.4167 6.10417 13.875C5.5625 13.3333 5.15278 12.7222 4.875 12.0417C4.59722 11.3611 4.47222 10.6389 4.5 9.875C4.18056 10.2361 3.93403 10.6493 3.76042 11.1146C3.58681 11.5799 3.5 12.0417 3.5 12.5C3.5 13.0417 3.59722 13.5486 3.79167 14.0208C3.98611 14.4931 4.27778 14.9236 4.66667 15.3125C5.05556 15.7014 5.48958 15.9965 5.96875 16.1979C6.44792 16.3993 6.95833 16.5 7.5 16.5ZM10 14C10.4722 14 10.9375 13.9132 11.3958 13.7396C11.8542 13.566 12.2708 13.3194 12.6458 13C11.8958 13.0278 11.1736 12.9028 10.4792 12.625C9.78472 12.3472 9.15972 11.9306 8.60417 11.375C8.04861 10.8194 7.63542 10.2049 7.36458 9.53125C7.09375 8.85764 6.97222 8.13889 7 7.375C6.68056 7.73611 6.43403 8.14236 6.26042 8.59375C6.08681 9.04514 6 9.51389 6 10C6 10.5417 6.09722 11.0486 6.29167 11.5208C6.48611 11.9931 6.77778 12.4236 7.16667 12.8125C7.55556 13.2014 7.98958 13.4965 8.46875 13.6979C8.94792 13.8993 9.45833 14 10 14ZM12.4375 11.4792C12.6736 11.4792 12.9063 11.4618 13.1354 11.4271C13.3646 11.3924 13.5764 11.3403 13.7708 11.2708C14.0208 10.5347 14.0625 9.80208 13.8958 9.07292C13.7292 8.34375 13.375 7.70833 12.8333 7.16667C12.2917 6.625 11.6563 6.27083 10.9271 6.10417C10.1979 5.9375 9.46528 5.97917 8.72917 6.22917C8.65972 6.42361 8.60764 6.63542 8.57292 6.86458C8.53819 7.09375 8.52083 7.32639 8.52083 7.5625C8.52083 8.07639 8.62153 8.56944 8.82292 9.04167C9.02431 9.51389 9.30556 9.93056 9.66667 10.2917C10.0417 10.6667 10.4722 10.9583 10.9583 11.1667C11.4444 11.375 11.9375 11.4792 12.4375 11.4792ZM15.5 10.125C15.8194 9.77778 16.066 9.375 16.2396 8.91667C16.4132 8.45833 16.5 7.98611 16.5 7.5C16.5 6.97222 16.3993 6.46528 16.1979 5.97917C15.9965 5.49306 15.7014 5.05556 15.3125 4.66667C14.9236 4.27778 14.4931 3.98611 14.0208 3.79167C13.5486 3.59722 13.0417 3.5 12.5 3.5C12.0278 3.5 11.566 3.58681 11.1146 3.76042C10.6632 3.93403 10.25 4.18056 9.875 4.5C10.6667 4.47222 11.3958 4.59375 12.0625 4.86458C12.7292 5.13542 13.3403 5.54861 13.8958 6.10417C14.4514 6.65972 14.8646 7.27083 15.1354 7.9375C15.4063 8.60417 15.5278 9.33333 15.5 10.125Z" fill="black"/>
+</svg>

package/front_end/Images/src/brush-2.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.14583 17.1042C4.52083 17.1042 3.93403 16.9618 3.38542 16.6771C2.83681 16.3924 2.375 16.0069 2 15.5208C2.43056 15.4931 2.79861 15.3333 3.10417 15.0417C3.40972 14.75 3.5625 14.3889 3.5625 13.9583C3.5625 13.2917 3.79271 12.7326 4.25312 12.2812C4.7134 11.8299 5.27243 11.6042 5.93021 11.6042C6.58785 11.6042 7.14236 11.8331 7.59375 12.2908C8.04514 12.7486 8.27083 13.3044 8.27083 13.9583C8.27083 14.8333 7.96875 15.5764 7.36458 16.1875C6.76042 16.7986 6.02083 17.1042 5.14583 17.1042ZM5.14583 15.7083C5.62708 15.7083 6.0391 15.5369 6.38187 15.1942C6.72451 14.8515 6.89583 14.4396 6.89583 13.9583C6.89583 13.6944 6.80208 13.4687 6.61458 13.2812C6.42708 13.0937 6.20139 13 5.9375 13C5.67361 13 5.44792 13.0937 5.26042 13.2812C5.07292 13.4687 4.97917 13.6944 4.97917 13.9583C4.97917 14.2639 4.94444 14.559 4.875 14.8437C4.80556 15.1285 4.67361 15.3819 4.47917 15.6042C4.59028 15.6319 4.70139 15.6562 4.8125 15.6771C4.92361 15.6979 5.03472 15.7083 5.14583 15.7083ZM10.0625 12.1667L7.9375 10.0417L14.5833 3.39583C14.7778 3.20139 15.0139 3.10416 15.2917 3.10416C15.5694 3.10416 15.8056 3.20139 16 3.39583L16.7083 4.10416C16.9028 4.30486 17 4.53909 17 4.80687C17 5.07451 16.9028 5.30555 16.7083 5.5L10.0625 12.1667Z" fill="black"/>
+</svg>

package/front_end/Images/src/center-focus-weak.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#5f6368"><path d="M480-336q-60 0-102-42t-42-102q0-60 42-102t102-42q60 0 102 42t42 102q0 60-42 102t-102 42Zm.21-72Q510-408 531-429.21t21-51Q552-510 530.79-531t-51-21Q450-552 429-530.79t-21 51Q408-450 429.21-429t51 21Zm-.21-72ZM216-144q-29.7 0-50.85-21.15Q144-186.3 144-216v-168h72v168h168v72H216Zm360 0v-72h168v-168h72v168q0 29.7-21.15 50.85Q773.7-144 744-144H576ZM144-576v-168q0-29.7 21.15-50.85Q186.3-816 216-816h168v72H216v168h-72Zm600 0v-168H576v-72h168q29.7 0 50.85 21.15Q816-773.7 816-744v168h-72Z"/></svg>

package/front_end/Images/src/history.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z" fill="black"/>
+</svg>

package/front_end/Images/src/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>

package/front_end/core/common/Color.ts

@@ -2152,6 +2152,16 @@ export class Legacy implements Color {
     return new Legacy(rgba, Format.RGBA);
   }
 
+  /**
+   * Returns a new color using the NTSC formula for making a RGB color grayscale.
+   * Note: this is ill-defined for colors with alpha, and alpha is not modified.
+   */
+  grayscale(): Legacy {
+    const [r, g, b, a] = this.#rgbaInternal;
+    const gray = r * 0.299 + g * 0.587 + b * 0.114;
+    return new Legacy([gray, gray, gray, a], Format.RGBA);
+  }
+
   setAlpha(alpha: number): Legacy {
     const rgba: Color4D = [...this.#rgbaInternal];
     rgba[3] = alpha;