chrome-devtools-frontend 1.0.951864 → 1.0.952284

package/front_end/.eslintrc.js

@@ -139,6 +139,12 @@ module.exports = {
           }
         ]
       }
+    },
+    {
+      'files': ['panels/**/components/*.ts', 'ui/components/**/*.ts'],
+      'rules': {
+        'rulesdir/use_private_class_members': 2,
+      }
     }
   ]
 };

package/front_end/entrypoints/formatter_worker/AcornTokenizer.ts

@@ -34,28 +34,28 @@ export type TokenOrComment = Acorn.Token|Acorn.Comment;
  * out whether the next token should be the preceding comment or not.
  */
 export class AcornTokenizer {
-  private readonly content: string;
-  private readonly comments: Acorn.Comment[];
-  private tokenizer: {
+  readonly #content: string;
+  readonly #comments: Acorn.Comment[];
+  #tokenizer: {
     getToken(): Acorn.Token,
     [Symbol.iterator](): Iterator<Acorn.Token>,
   };
-  private textCursor: TextUtils.TextCursor.TextCursor;
-  private tokenLineStartInternal: number;
-  private tokenLineEndInternal: number;
-  private tokenColumnStartInternal: number;
-  private bufferedToken?: TokenOrComment;
+  #textCursor: TextUtils.TextCursor.TextCursor;
+  #tokenLineStartInternal: number;
+  #tokenLineEndInternal: number;
+  #tokenColumnStartInternal: number;
+  #bufferedToken?: TokenOrComment;
 
   constructor(content: string) {
-    this.content = content;
-    this.comments = [];
-    this.tokenizer =
-        Acorn.tokenizer(this.content, {onComment: this.comments, ecmaVersion: ECMA_VERSION, allowHashBang: true});
-    const contentLineEndings = Platform.StringUtilities.findLineEndingIndexes(this.content);
-    this.textCursor = new TextUtils.TextCursor.TextCursor(contentLineEndings);
-    this.tokenLineStartInternal = 0;
-    this.tokenLineEndInternal = 0;
-    this.tokenColumnStartInternal = 0;
+    this.#content = content;
+    this.#comments = [];
+    this.#tokenizer =
+        Acorn.tokenizer(this.#content, {onComment: this.#comments, ecmaVersion: ECMA_VERSION, allowHashBang: true});
+    const contentLineEndings = Platform.StringUtilities.findLineEndingIndexes(this.#content);
+    this.#textCursor = new TextUtils.TextCursor.TextCursor(contentLineEndings);
+    this.#tokenLineStartInternal = 0;
+    this.#tokenLineEndInternal = 0;
+    this.#tokenColumnStartInternal = 0;
     // If the first "token" should be a comment, we don't want to shift
     // the comment from the array (which happens in `nextTokenInternal`).
     // Therefore, we should bail out from retrieving the token if this
@@ -65,7 +65,7 @@ export class AcornTokenizer {
     // themselves. In that case, we first retrieve the actual token, before
     // we see the comment itself. In that case, we should proceed and
     // initialize `bufferedToken` as normal, to allow us to fix the reordering.
-    if (this.comments.length === 0) {
+    if (this.#comments.length === 0) {
       this.nextTokenInternal();
     }
   }
@@ -95,20 +95,20 @@ export class AcornTokenizer {
   }
 
   private nextTokenInternal(): TokenOrComment|undefined {
-    if (this.comments.length) {
-      const nextComment = this.comments.shift();
+    if (this.#comments.length) {
+      const nextComment = this.#comments.shift();
       // If this was the last comment to process, we need to make
       // sure to update our `bufferedToken` to become the actual
       // token. This only happens when we are processing the very
       // first comment of a file (usually a hashbang comment)
       // in which case we don't have to fix the reordering of tokens.
-      if (!this.bufferedToken && this.comments.length === 0) {
-        this.bufferedToken = this.tokenizer.getToken();
+      if (!this.#bufferedToken && this.#comments.length === 0) {
+        this.#bufferedToken = this.#tokenizer.getToken();
       }
       return nextComment;
     }
-    const token = this.bufferedToken;
-    this.bufferedToken = this.tokenizer.getToken();
+    const token = this.#bufferedToken;
+    this.#bufferedToken = this.#tokenizer.getToken();
     return token;
   }
 
@@ -118,35 +118,35 @@ export class AcornTokenizer {
       return null;
     }
 
-    this.textCursor.advance(token.start);
-    this.tokenLineStartInternal = this.textCursor.lineNumber();
-    this.tokenColumnStartInternal = this.textCursor.columnNumber();
+    this.#textCursor.advance(token.start);
+    this.#tokenLineStartInternal = this.#textCursor.lineNumber();
+    this.#tokenColumnStartInternal = this.#textCursor.columnNumber();
 
-    this.textCursor.advance(token.end);
-    this.tokenLineEndInternal = this.textCursor.lineNumber();
+    this.#textCursor.advance(token.end);
+    this.#tokenLineEndInternal = this.#textCursor.lineNumber();
     return token;
   }
 
   peekToken(): TokenOrComment|null {
-    if (this.comments.length) {
-      return this.comments[0];
+    if (this.#comments.length) {
+      return this.#comments[0];
     }
-    if (!this.bufferedToken) {
+    if (!this.#bufferedToken) {
       return null;
     }
-    return this.bufferedToken.type !== Acorn.tokTypes.eof ? this.bufferedToken : null;
+    return this.#bufferedToken.type !== Acorn.tokTypes.eof ? this.#bufferedToken : null;
   }
 
   tokenLineStart(): number {
-    return this.tokenLineStartInternal;
+    return this.#tokenLineStartInternal;
   }
 
   tokenLineEnd(): number {
-    return this.tokenLineEndInternal;
+    return this.#tokenLineEndInternal;
   }
 
   tokenColumnStart(): number {
-    return this.tokenColumnStartInternal;
+    return this.#tokenColumnStartInternal;
   }
 }
 

package/front_end/entrypoints/formatter_worker/CSSFormatter.ts

@@ -40,21 +40,21 @@ const cssTrimEnd = (tokenValue: string): string => {
 };
 
 export class CSSFormatter {
-  private readonly builder: FormattedContentBuilder;
-  private toOffset!: number;
-  private fromOffset!: number;
-  private lineEndings!: number[];
-  private lastLine: number;
-  private state: {
+  readonly #builder: FormattedContentBuilder;
+  #toOffset!: number;
+  #fromOffset!: number;
+  #lineEndings!: number[];
+  #lastLine: number;
+  #state: {
     eatWhitespace: (boolean|undefined),
     seenProperty: (boolean|undefined),
     inPropertyValue: (boolean|undefined),
     afterClosingBrace: (boolean|undefined),
   };
   constructor(builder: FormattedContentBuilder) {
-    this.builder = builder;
-    this.lastLine = -1;
-    this.state = {
+    this.#builder = builder;
+    this.#lastLine = -1;
+    this.#state = {
       eatWhitespace: undefined,
       seenProperty: undefined,
       inPropertyValue: undefined,
@@ -63,84 +63,84 @@ export class CSSFormatter {
   }
 
   format(text: string, lineEndings: number[], fromOffset: number, toOffset: number): void {
-    this.lineEndings = lineEndings;
-    this.fromOffset = fromOffset;
-    this.toOffset = toOffset;
-    this.state = {
+    this.#lineEndings = lineEndings;
+    this.#fromOffset = fromOffset;
+    this.#toOffset = toOffset;
+    this.#state = {
       eatWhitespace: undefined,
       seenProperty: undefined,
       inPropertyValue: undefined,
       afterClosingBrace: undefined,
     };
-    this.lastLine = -1;
+    this.#lastLine = -1;
     const tokenize = createTokenizer('text/css');
-    const oldEnforce = this.builder.setEnforceSpaceBetweenWords(false);
-    tokenize(text.substring(this.fromOffset, this.toOffset), this.tokenCallback.bind(this));
-    this.builder.setEnforceSpaceBetweenWords(oldEnforce);
+    const oldEnforce = this.#builder.setEnforceSpaceBetweenWords(false);
+    tokenize(text.substring(this.#fromOffset, this.#toOffset), this.tokenCallback.bind(this));
+    this.#builder.setEnforceSpaceBetweenWords(oldEnforce);
   }
 
   private tokenCallback(token: string, type: string|null, startPosition: number): void {
-    startPosition += this.fromOffset;
-    const startLine =
-        Platform.ArrayUtilities.lowerBound(this.lineEndings, startPosition, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
-    if (startLine !== this.lastLine) {
-      this.state.eatWhitespace = true;
+    startPosition += this.#fromOffset;
+    const startLine = Platform.ArrayUtilities.lowerBound(
+        this.#lineEndings, startPosition, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
+    if (startLine !== this.#lastLine) {
+      this.#state.eatWhitespace = true;
     }
-    if (type && (/^property/.test(type) || /^variable-2/.test(type)) && !this.state.inPropertyValue) {
-      this.state.seenProperty = true;
+    if (type && (/^property/.test(type) || /^variable-2/.test(type)) && !this.#state.inPropertyValue) {
+      this.#state.seenProperty = true;
     }
-    this.lastLine = startLine;
+    this.#lastLine = startLine;
     // https://drafts.csswg.org/css-syntax/#whitespace
     const isWhitespace = /^(?:\r?\n|[\t\f\r ])+$/.test(token);
     if (isWhitespace) {
-      if (!this.state.eatWhitespace) {
-        this.builder.addSoftSpace();
+      if (!this.#state.eatWhitespace) {
+        this.#builder.addSoftSpace();
       }
       return;
     }
-    this.state.eatWhitespace = false;
+    this.#state.eatWhitespace = false;
     if (token === '\n') {
       return;
     }
 
     if (token !== '}') {
-      if (this.state.afterClosingBrace) {
-        this.builder.addNewLine(true);
+      if (this.#state.afterClosingBrace) {
+        this.#builder.addNewLine(true);
       }
-      this.state.afterClosingBrace = false;
+      this.#state.afterClosingBrace = false;
     }
     if (token === '}') {
-      if (this.state.inPropertyValue) {
-        this.builder.addNewLine();
+      if (this.#state.inPropertyValue) {
+        this.#builder.addNewLine();
       }
-      this.builder.decreaseNestingLevel();
-      this.state.afterClosingBrace = true;
-      this.state.inPropertyValue = false;
-    } else if (token === ':' && !this.state.inPropertyValue && this.state.seenProperty) {
-      this.builder.addToken(token, startPosition);
-      this.builder.addSoftSpace();
-      this.state.eatWhitespace = true;
-      this.state.inPropertyValue = true;
-      this.state.seenProperty = false;
+      this.#builder.decreaseNestingLevel();
+      this.#state.afterClosingBrace = true;
+      this.#state.inPropertyValue = false;
+    } else if (token === ':' && !this.#state.inPropertyValue && this.#state.seenProperty) {
+      this.#builder.addToken(token, startPosition);
+      this.#builder.addSoftSpace();
+      this.#state.eatWhitespace = true;
+      this.#state.inPropertyValue = true;
+      this.#state.seenProperty = false;
       return;
     } else if (token === '{') {
-      this.builder.addSoftSpace();
-      this.builder.addToken(token, startPosition);
-      this.builder.addNewLine();
-      this.builder.increaseNestingLevel();
+      this.#builder.addSoftSpace();
+      this.#builder.addToken(token, startPosition);
+      this.#builder.addNewLine();
+      this.#builder.increaseNestingLevel();
       return;
     }
 
-    this.builder.addToken(cssTrimEnd(token), startPosition);
+    this.#builder.addToken(cssTrimEnd(token), startPosition);
 
-    if (type === 'comment' && !this.state.inPropertyValue && !this.state.seenProperty) {
-      this.builder.addNewLine();
+    if (type === 'comment' && !this.#state.inPropertyValue && !this.#state.seenProperty) {
+      this.#builder.addNewLine();
     }
-    if (token === ';' && this.state.inPropertyValue) {
-      this.state.inPropertyValue = false;
-      this.builder.addNewLine();
+    if (token === ';' && this.#state.inPropertyValue) {
+      this.#state.inPropertyValue = false;
+      this.#builder.addNewLine();
     } else if (token === '}') {
-      this.builder.addNewLine();
+      this.#builder.addNewLine();
     }
   }
 }

package/front_end/entrypoints/formatter_worker/ESTreeWalker.ts

@@ -7,16 +7,16 @@ import type * as Acorn from '../../third_party/acorn/acorn.js';
 const SkipSubTreeObject: Object = {};
 
 export class ESTreeWalker {
-  private readonly beforeVisit: (arg0: Acorn.ESTree.Node) => (Object | undefined);
-  private readonly afterVisit: Function;
-  private walkNulls: boolean;
+  readonly #beforeVisit: (arg0: Acorn.ESTree.Node) => (Object | undefined);
+  readonly #afterVisit: Function;
+  #walkNulls: boolean;
 
   constructor(
       beforeVisit: (arg0: Acorn.ESTree.Node) => (Object | undefined),
       afterVisit?: ((arg0: Acorn.ESTree.Node) => void)) {
-    this.beforeVisit = beforeVisit;
-    this.afterVisit = afterVisit || function(): void {};
-    this.walkNulls = false;
+    this.#beforeVisit = beforeVisit;
+    this.#afterVisit = afterVisit || function(): void {};
+    this.#walkNulls = false;
   }
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -26,7 +26,7 @@ export class ESTreeWalker {
   }
 
   setWalkNulls(value: boolean): void {
-    this.walkNulls = value;
+    this.#walkNulls = value;
   }
 
   walk(ast: Acorn.ESTree.Node): void {
@@ -34,7 +34,7 @@ export class ESTreeWalker {
   }
 
   private innerWalk(node: Acorn.ESTree.Node, parent: Acorn.ESTree.Node|null): void {
-    if (!node && parent && this.walkNulls) {
+    if (!node && parent && this.#walkNulls) {
       const result = ({raw: 'null', value: null, parent: null} as Acorn.ESTree.SimpleLiteral);
       // Otherwise Closure can't handle the definition
       result.type = 'Literal';
@@ -47,8 +47,8 @@ export class ESTreeWalker {
     }
     node.parent = parent;
 
-    if (this.beforeVisit.call(null, node) === ESTreeWalker.SkipSubtree) {
-      this.afterVisit.call(null, node);
+    if (this.#beforeVisit.call(null, node) === ESTreeWalker.SkipSubtree) {
+      this.#afterVisit.call(null, node);
       return;
     }
 
@@ -82,7 +82,7 @@ export class ESTreeWalker {
       }
     }
 
-    this.afterVisit.call(null, node);
+    this.#afterVisit.call(null, node);
   }
 
   private walkArray(nodeArray: Acorn.ESTree.Node[], parentNode: Acorn.ESTree.Node|null): void {

package/front_end/entrypoints/formatter_worker/FormattedContentBuilder.ts

@@ -3,16 +3,16 @@
 // found in the LICENSE file.
 
 export class FormattedContentBuilder {
-  private lastOriginalPosition = 0;
-  private formattedContent: string[] = [];
-  private formattedContentLength = 0;
-  private lastFormattedPosition = 0;
-  private nestingLevel = 0;
-  private newLines = 0;
-  private enforceSpaceBetweenWords = true;
-  private softSpace = false;
-  private hardSpaces = 0;
-  private cachedIndents = new Map<number, string>();
+  #lastOriginalPosition = 0;
+  #formattedContent: string[] = [];
+  #formattedContentLength = 0;
+  #lastFormattedPosition = 0;
+  #nestingLevel = 0;
+  #newLines = 0;
+  #enforceSpaceBetweenWords = true;
+  #softSpace = false;
+  #hardSpaces = 0;
+  #cachedIndents = new Map<number, string>();
 
   mapping = {original: [0], formatted: [0]};
 
@@ -20,14 +20,14 @@ export class FormattedContentBuilder {
   }
 
   setEnforceSpaceBetweenWords(value: boolean): boolean {
-    const oldValue = this.enforceSpaceBetweenWords;
-    this.enforceSpaceBetweenWords = value;
+    const oldValue = this.#enforceSpaceBetweenWords;
+    this.#enforceSpaceBetweenWords = value;
     return oldValue;
   }
 
   addToken(token: string, offset: number): void {
-    const last = this.formattedContent[this.formattedContent.length - 1];
-    if (this.enforceSpaceBetweenWords && last && /\w/.test(last[last.length - 1]) && /\w/.test(token)) {
+    const last = this.#formattedContent[this.#formattedContent.length - 1];
+    if (this.#enforceSpaceBetweenWords && last && /\w/.test(last[last.length - 1]) && /\w/.test(token)) {
       this.addSoftSpace();
     }
 
@@ -39,91 +39,91 @@ export class FormattedContentBuilder {
   }
 
   addSoftSpace(): void {
-    if (!this.hardSpaces) {
-      this.softSpace = true;
+    if (!this.#hardSpaces) {
+      this.#softSpace = true;
     }
   }
 
   addHardSpace(): void {
-    this.softSpace = false;
-    ++this.hardSpaces;
+    this.#softSpace = false;
+    ++this.#hardSpaces;
   }
 
   addNewLine(noSquash?: boolean): void {
     // Avoid leading newlines.
-    if (!this.formattedContentLength) {
+    if (!this.#formattedContentLength) {
       return;
     }
     if (noSquash) {
-      ++this.newLines;
+      ++this.#newLines;
     } else {
-      this.newLines = this.newLines || 1;
+      this.#newLines = this.#newLines || 1;
     }
   }
 
   increaseNestingLevel(): void {
-    this.nestingLevel += 1;
+    this.#nestingLevel += 1;
   }
 
   decreaseNestingLevel(): void {
-    if (this.nestingLevel > 0) {
-      this.nestingLevel -= 1;
+    if (this.#nestingLevel > 0) {
+      this.#nestingLevel -= 1;
     }
   }
 
   content(): string {
-    return this.formattedContent.join('') + (this.newLines ? '\n' : '');
+    return this.#formattedContent.join('') + (this.#newLines ? '\n' : '');
   }
 
   private appendFormatting(): void {
-    if (this.newLines) {
-      for (let i = 0; i < this.newLines; ++i) {
+    if (this.#newLines) {
+      for (let i = 0; i < this.#newLines; ++i) {
         this.addText('\n');
       }
       this.addText(this.indent());
-    } else if (this.softSpace) {
+    } else if (this.#softSpace) {
       this.addText(' ');
     }
-    if (this.hardSpaces) {
-      for (let i = 0; i < this.hardSpaces; ++i) {
+    if (this.#hardSpaces) {
+      for (let i = 0; i < this.#hardSpaces; ++i) {
         this.addText(' ');
       }
     }
-    this.newLines = 0;
-    this.softSpace = false;
-    this.hardSpaces = 0;
+    this.#newLines = 0;
+    this.#softSpace = false;
+    this.#hardSpaces = 0;
   }
 
   private indent(): string {
-    const cachedValue = this.cachedIndents.get(this.nestingLevel);
+    const cachedValue = this.#cachedIndents.get(this.#nestingLevel);
     if (cachedValue) {
       return cachedValue;
     }
 
     let fullIndent = '';
-    for (let i = 0; i < this.nestingLevel; ++i) {
+    for (let i = 0; i < this.#nestingLevel; ++i) {
       fullIndent += this.indentString;
     }
 
     // Cache a maximum of 20 nesting level indents.
-    if (this.nestingLevel <= 20) {
-      this.cachedIndents.set(this.nestingLevel, fullIndent);
+    if (this.#nestingLevel <= 20) {
+      this.#cachedIndents.set(this.#nestingLevel, fullIndent);
     }
     return fullIndent;
   }
 
   private addText(text: string): void {
-    this.formattedContent.push(text);
-    this.formattedContentLength += text.length;
+    this.#formattedContent.push(text);
+    this.#formattedContentLength += text.length;
   }
 
   private addMappingIfNeeded(originalPosition: number): void {
-    if (originalPosition - this.lastOriginalPosition === this.formattedContentLength - this.lastFormattedPosition) {
+    if (originalPosition - this.#lastOriginalPosition === this.#formattedContentLength - this.#lastFormattedPosition) {
       return;
     }
     this.mapping.original.push(originalPosition);
-    this.lastOriginalPosition = originalPosition;
-    this.mapping.formatted.push(this.formattedContentLength);
-    this.lastFormattedPosition = this.formattedContentLength;
+    this.#lastOriginalPosition = originalPosition;
+    this.mapping.formatted.push(this.#formattedContentLength);
+    this.#lastFormattedPosition = this.#formattedContentLength;
   }
 }