Support createChild and toolbar items in the preferTemplateLiterals rule

Bug: 400353541
Change-Id: I27a18bb4829336dfaba4dcdd697c84d6591fb60e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6357270
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

scripts/eslint_rules/lib/no-imperative-dom-api.js

@@ -13,6 +13,10 @@ function isIdentifier(node, name) {
   return node.type === 'Identifier' && (Array.isArray(name) ? name.includes(node.name) : node.name === name);
 }
 
+function isMemberExpression(node, objectPredicate, propertyPredicate) {
+  return node.type === 'MemberExpression' && objectPredicate(node.object) && propertyPredicate(node.property);
+}
+
 function getEnclosingExpression(node) {
   while (node.parent) {
     if (node.parent.type === 'BlockStatement') {
@@ -199,6 +203,24 @@ module.exports = {
       return null;
     }
 
+    /**
+     * @param {Node} event
+     * @return {string|null}
+     */
+    function getEvent(event) {
+      switch (sourceCode.getText(event)) {
+        case 'UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED':
+          return 'change';
+        case 'UI.Toolbar.ToolbarInput.Event.ENTER_PRESSED':
+          return 'submit';
+        default:
+          if (event.type === 'Literal') {
+            return event.value.toString();
+          }
+          return null;
+      }
+    }
+
     /**
      *  @param {DomFragmentReference} reference
      *  @param {DomFragment} domFragment
@@ -237,11 +259,15 @@ module.exports = {
           domFragment.attributes.push({key: attribute.value.toString(), value});
         }
       } else if (isMethodCall && isIdentifier(property, 'addEventListener')) {
-        const event = firstArg;
+        const event = getEvent(firstArg);
         const value = secondArg;
-        if (event.type === 'Literal' && value.type !== 'SpreadElement') {
-          domFragment.eventListeners.push({key: event.value.toString(), value});
+        if (event && value.type !== 'SpreadElement') {
+          domFragment.eventListeners.push({key: event, value});
         }
+      } else if (isMethodCall && isIdentifier(property, 'appendToolbarItem')) {
+        const childFragment = getOrCreateDomFragment(firstArg);
+        childFragment.parent = domFragment;
+        domFragment.children.push(childFragment);
       } else if (
           isPropertyMethodCall && isIdentifier(property, 'classList') && isIdentifier(grandParent.property, 'add')) {
         domFragment.classList.push(propertyMethodArgument);
@@ -253,6 +279,16 @@ module.exports = {
             value: subpropertyValue,
           });
         }
+      } else if (isMethodCall && isIdentifier(property, 'createChild')) {
+        if (firstArg?.type === 'Literal') {
+          const childFragment = getOrCreateDomFragment(grandParent);
+          childFragment.tagName = String(firstArg.value);
+          childFragment.parent = domFragment;
+          domFragment.children.push(childFragment);
+          if (secondArg) {
+            childFragment.classList.push(secondArg);
+          }
+        }
       } else if (isMethodCall && isIdentifier(property, 'appendChild')) {
         const childFragment = getOrCreateDomFragment(firstArg);
         childFragment.parent = domFragment;
@@ -310,6 +346,53 @@ export const DEFAULT_VIEW = (input, _output, target) => {
           }
         }
       },
+      NewExpression(node) {
+        if (isMemberExpression(
+                node.callee, n => isMemberExpression(n, n => isIdentifier(n, 'UI'), n => isIdentifier(n, 'Toolbar')),
+                n => isIdentifier(n, 'ToolbarFilter'))) {
+          const domFragment = getOrCreateDomFragment(node);
+          domFragment.tagName = 'devtools-toolbar-input';
+          domFragment.attributes.push({
+            key: 'type',
+            value: /** @type {Node} */ ({type: 'Literal', value: 'filter'}),
+          });
+          const placeholder = node.arguments[0];
+          const flexGrow = node.arguments[1];
+          const flexShrink = node.arguments[2];
+          const title = node.arguments[3];
+          const jslogContext = node.arguments[6];
+          if (placeholder && !isIdentifier(placeholder, 'undefined')) {
+            domFragment.attributes.push({
+              key: 'placeholder',
+              value: placeholder,
+            });
+          }
+          if (flexGrow && !isIdentifier(flexGrow, 'undefined')) {
+            domFragment.style.push({
+              key: 'flex-grow',
+              value: flexGrow,
+            });
+          }
+          if (flexShrink && !isIdentifier(flexShrink, 'undefined')) {
+            domFragment.style.push({
+              key: 'flex-shrink',
+              value: flexShrink,
+            });
+          }
+          if (title && !isIdentifier(title, 'undefined')) {
+            domFragment.attributes.push({
+              key: 'title',
+              value: title,
+            });
+          }
+          if (jslogContext && !isIdentifier(jslogContext, 'undefined')) {
+            domFragment.attributes.push({
+              key: 'id',
+              value: jslogContext,
+            });
+          }
+        }
+      },
       'Program:exit'() {
         while (queue.length) {
           const domFragment = queue.pop();

scripts/eslint_rules/tests/no-imperative-dom-api.test.js

@@ -149,6 +149,67 @@ class SomeWidget extends UI.Widget.Widget {
     const div = document.createElement('div');
     div.className = 'some-class';
   }
+}`,
+      errors: [{messageId: 'preferTemplateLiterals'}],
+    },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    this.contentElement.createChild('span', 'some-class');
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <span class="some-class"></span>
+    </div>\`,
+    target, {host: input});
+};
+
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+  }
+}`,
+      errors: [{messageId: 'preferTemplateLiterals'}],
+    },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const toolbar = this.contentElement.createChild('devtools-toolbar');
+    const filterInput = new UI.Toolbar.ToolbarFilter('some-placeholder', 0.5, 1, undefined, undefined, false, 'some-filter');
+    filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged.bind(this));
+    toolbar.appendToolbarItem(filterInput);
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <devtools-toolbar>
+        <devtools-toolbar-input type="filter" placeholder="some-placeholder" id="some-filter"
+            @change=\${this.onFilterChanged.bind(this)} style="flex-grow:0.5; flex-shrink:1"></devtools-toolbar-input>
+      </devtools-toolbar>
+    </div>\`,
+    target, {host: input});
+};
+
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const filterInput = new UI.Toolbar.ToolbarFilter('some-placeholder', 0.5, 1, undefined, undefined, false, 'some-filter');
+    filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged.bind(this));
+    toolbar.appendToolbarItem(filterInput);
+  }
 }`,
       errors: [{messageId: 'preferTemplateLiterals'}],
     },