chrome-devtools-frontend 1.0.939277 → 1.0.941095

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -0,0 +1,100 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as IconButton from '../icon_button/icon_button.js';
+
+import panelFeedbackStyles from './panelFeedback.css.js';
+
+const UIStrings = {
+  /**
+  *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
+  */
+  previewText: 'Our team is actively working on this feature and we would love to know what you think.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Title of the UI section that shows the user that this feature is in preview. Used as the main heading. Not a verb.
+  */
+  previewFeature: 'Preview feature',
+  /**
+  *@description Title of the section to the quick start video and documentation on experimental panels.
+  */
+  videoAndDocumentation: 'Video and documentation',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PanelFeedback.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const previewFeatureUrl = new URL('../../../Images/ic_preview_feature.svg', import.meta.url).toString();
+const videoThumbnailUrl = new URL('../../../Images/preview_feature_video_thumbnail.svg', import.meta.url).toString();
+
+export interface PanelFeedbackData {
+  feedbackUrl: string;
+  quickStartUrl: string;
+  quickStartLinkText: string;
+}
+export class PanelFeedback extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+
+  #props: PanelFeedbackData = {
+    feedbackUrl: '',
+    quickStartUrl: '',
+    quickStartLinkText: '',
+  };
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [panelFeedbackStyles];
+  }
+
+  set data(data: PanelFeedbackData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('PanelFeedback render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="preview">
+        <h2 class="flex">
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconPath: previewFeatureUrl,
+            width: '24px',
+            height: '24px',
+            color: 'var(--color-primary)',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+        </h2>
+        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <div class="video">
+          <div class="thumbnail">
+            <img src=${videoThumbnailUrl} role="presentation" />
+          </div>
+          <div class="video-description">
+            <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
+            <x-link class="quick-start-link" href=${this.#props.quickStartUrl}>${this.#props.quickStartLinkText}</x-link>
+          </div>
+        </div>
+      </div>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-panel-feedback', PanelFeedback);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-panel-feedback': PanelFeedback;
+  }
+}

package/front_end/ui/components/panel_feedback/panelFeedback.css

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/**
+ * Copyright 2021 Google LLC. All rights reserved.
+ */
+
+:host {
+  display: block;
+}
+
+.preview {
+  padding: 12px 16px;
+  border: 1px solid var(--color-details-hairline);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 12px;
+  margin: 42px 0;
+  letter-spacing: 0.01em;
+}
+
+h2 {
+  color: var(--color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  margin: 9px 0 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+  font-weight: normal;
+}
+
+.preview p {
+  margin-bottom: 24px;
+}
+
+.thumbnail {
+  height: 92px;
+}
+
+.video {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+}
+
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}
+
+x-link.quick-start-link { /* stylelint-disable-line selector-type-no-unknown */
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.04em;
+}
+
+.video-description {
+  min-width: min-content;
+  flex-basis: min-content;
+  flex-grow: 1;
+}

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -0,0 +1,5 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as PanelFeedback from './PanelFeedback.js';

package/front_end/ui/components/report_view/reportValue.css

@@ -14,4 +14,5 @@
   color: var(--color-text-primary);
   margin-inline-start: 0;
   padding: 0 6px;
+  overflow-wrap: break-word;
 }

package/front_end/ui/legacy/softContextMenu.css

@@ -42,6 +42,7 @@
   padding: 3px 7px 3px 8px;
   margin: 0 13px 0 0;
   white-space: nowrap;
+  align-items: center;
 }
 
 .soft-context-menu-item devtools-icon {

package/package.json

@@ -31,7 +31,7 @@
     "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js",
     "check-gn": "third_party/node/node.py --output scripts/check_gn.js",
     "check-json": "third_party/node/node.py --output scripts/json_validator/validate_module_json.js",
-    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.js && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
     "components-server": "third_party/node/node.py --output scripts/component_server/server.js",
@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.939277"
+  "version": "1.0.941095"
 }

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -44,7 +44,7 @@ module.exports = {
 
     function findComponentTagNameFromStaticProperty(classBodyNode) {
       return classBodyNode.body.find(node => {
-        return node.type === 'ClassProperty' && node.key.name === 'litTagName';
+        return node.type === 'PropertyDefinition' && node.key.name === 'litTagName';
       });
     }
 

package/scripts/eslint_rules/lib/enforce_custom_event_names.js

@@ -73,7 +73,7 @@ module.exports = {
 
         // If the reference is right, let's find the value of the static eventName property and make sure it is valid.
         const eventNameProperty = node.body.body.find(classBodyPart => {
-          return classBodyPart.type === 'ClassProperty' && classBodyPart.key.name === 'eventName';
+          return classBodyPart.type === 'PropertyDefinition' && classBodyPart.key.name === 'eventName';
         });
 
         // This should always exist because we checked for its existence

package/scripts/eslint_rules/lib/l10n_no_i18nString_calls_module_instantiation.js

@@ -7,7 +7,7 @@
 // One of these AST nodes must be an ancestor of an i18nString call.
 const REQUIRED_ANCESTOR = new Set([
   'ArrowFunctionExpression',
-  'ClassProperty',
+  'PropertyDefinition',
   'FunctionDeclaration',
   'FunctionExpression',
   'MethodDefinition',

package/scripts/eslint_rules/lib/no_underscored_properties.js

@@ -49,7 +49,7 @@ module.exports = {
   },
   create: function(context) {
     return {
-      ClassProperty(node) {
+      PropertyDefinition(node) {
         checkNodeForUnderscoredProperties(context, node, 'property');
       },
       MethodDefinition(node) {

package/front_end/entrypoints/main/module.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ]
-}