style: console

lionelhorn · Apr 16, 2020 · 16bfcad · 16bfcad
1 parent 9137335
commit 16bfcad
Show file tree

Hide file tree

Showing 15 changed files with 998 additions and 665 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Chrome devtools framework",
   "main": "index.js",
   "scripts": {
-    "format": "prettier src/*.{html,js,json} *.js --write",
+    "format": "prettier src/**/*.{html,js,json} *.js --write",
     "build:debug": "node scripts/build_debug"
   },
   "repository": {

diff --git a/prettier.config.js b/prettier.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  semi: false,
   singleQuote: true,
-  trailingComma: 'all',
-}
+  arrowParens: 'avoid',
+  printWidth: 120,
+};
diff --git a/src/chi_app.js b/src/chi_app.js
@@ -1,4 +1,4 @@
-import './shell.js'
-import { startApplication } from './RuntimeInstantiator.js'
+import './shell.js';
+import { startApplication } from './RuntimeInstantiator.js';
 
-startApplication('chi_app')
+startApplication('chi_app');
diff --git a/src/chi_console/ConsoleContextSelector.js b/src/chi_console/ConsoleContextSelector.js
@@ -20,31 +20,50 @@ export class ConsoleContextSelector {
     this._toolbarItem = new UI.Toolbar.ToolbarItem(this._dropDown.element);
     this._toolbarItem.setEnabled(false);
     this._toolbarItem.setTitle(ls`JavaScript context: Not selected`);
-    this._items.addEventListener(
-        UI.ListModel.Events.ItemsReplaced, () => this._toolbarItem.setEnabled(!!this._items.length));
+    this._items.addEventListener(UI.ListModel.Events.ItemsReplaced, () =>
+      this._toolbarItem.setEnabled(!!this._items.length)
+    );
 
     this._toolbarItem.element.classList.add('toolbar-has-dropdown');
 
     SDK.SDKModel.TargetManager.instance().addModelListener(
-        SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextCreated, this._onExecutionContextCreated,
-        this);
+      SDK.RuntimeModel.RuntimeModel,
+      SDK.RuntimeModel.Events.ExecutionContextCreated,
+      this._onExecutionContextCreated,
+      this
+    );
     SDK.SDKModel.TargetManager.instance().addModelListener(
-        SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextChanged, this._onExecutionContextChanged,
-        this);
+      SDK.RuntimeModel.RuntimeModel,
+      SDK.RuntimeModel.Events.ExecutionContextChanged,
+      this._onExecutionContextChanged,
+      this
+    );
     SDK.SDKModel.TargetManager.instance().addModelListener(
-        SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextDestroyed,
-        this._onExecutionContextDestroyed, this);
+      SDK.RuntimeModel.RuntimeModel,
+      SDK.RuntimeModel.Events.ExecutionContextDestroyed,
+      this._onExecutionContextDestroyed,
+      this
+    );
     SDK.SDKModel.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this._frameNavigated,
-        this);
+      SDK.ResourceTreeModel.ResourceTreeModel,
+      SDK.ResourceTreeModel.Events.FrameNavigated,
+      this._frameNavigated,
+      this
+    );
 
     self.UI.context.addFlavorChangeListener(
-        SDK.RuntimeModel.ExecutionContext, this._executionContextChangedExternally, this);
+      SDK.RuntimeModel.ExecutionContext,
+      this._executionContextChangedExternally,
+      this
+    );
     self.UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameSelectedInUI, this);
     SDK.SDKModel.TargetManager.instance().observeModels(SDK.RuntimeModel.RuntimeModel, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
-        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.CallFrameSelected, this._callFrameSelectedInModel,
-        this);
+      SDK.DebuggerModel.DebuggerModel,
+      SDK.DebuggerModel.Events.CallFrameSelected,
+      this._callFrameSelectedInModel,
+      this
+    );
   }
 
   /**
@@ -196,7 +215,7 @@ export class ConsoleContextSelector {
     }
     const resourceTreeModel = executionContext.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
     const frame =
-        executionContext.frameId && resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId);
+      executionContext.frameId && resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId);
     if (!frame) {
       return false;
     }
@@ -242,7 +261,7 @@ export class ConsoleContextSelector {
     title.createTextChild(this.titleFor(item).trimEndWithMaxLength(100));
     const subTitle = shadowRoot.createChild('div', 'subtitle');
     subTitle.createTextChild(this._subtitleFor(item));
-    element.style.paddingLeft = (8 + this._depthFor(item) * 15) + 'px';
+    element.style.paddingLeft = 8 + this._depthFor(item) * 15 + 'px';
     return element;
   }
 

diff --git a/src/chi_console/ConsoleFilter.js b/src/chi_console/ConsoleFilter.js
@@ -5,7 +5,7 @@
 import * as SDK from '../sdk/sdk.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
-import {ConsoleViewMessage} from './ConsoleViewMessage.js';  // eslint-disable-line no-unused-vars
+import { ConsoleViewMessage } from './ConsoleViewMessage.js'; // eslint-disable-line no-unused-vars
 
 export class ConsoleFilter {
   /**
@@ -66,14 +66,19 @@ export class ConsoleFilter {
    */
   shouldBeVisible(viewMessage) {
     const message = viewMessage.consoleMessage();
-    if (this.executionContext &&
-        (this.executionContext.runtimeModel !== message.runtimeModel() ||
-         this.executionContext.id !== message.executionContextId)) {
+    if (
+      this.executionContext &&
+      (this.executionContext.runtimeModel !== message.runtimeModel() ||
+        this.executionContext.id !== message.executionContextId)
+    ) {
       return false;
     }
 
-    if (message.type === SDK.ConsoleModel.MessageType.Command || message.type === SDK.ConsoleModel.MessageType.Result ||
-        message.isGroupMessage()) {
+    if (
+      message.type === SDK.ConsoleModel.MessageType.Command ||
+      message.type === SDK.ConsoleModel.MessageType.Result ||
+      message.isGroupMessage()
+    ) {
       return true;
     }
 
@@ -98,10 +103,11 @@ export class ConsoleFilter {
             break;
           }
           case FilterType.Source: {
-            const sourceNameForMessage = message.source ?
-                SDK.ConsoleModel.MessageSourceDisplayName.get(
-                    /** @type {!SDK.ConsoleModel.MessageSource} */ (message.source)) :
-                message.source;
+            const sourceNameForMessage = message.source
+              ? SDK.ConsoleModel.MessageSourceDisplayName.get(
+                  /** @type {!SDK.ConsoleModel.MessageSource} */ (message.source)
+                )
+              : message.source;
             if (!passesFilter(filter, sourceNameForMessage, true /* exactMatch */)) {
               return false;
             }
@@ -148,5 +154,5 @@ export class ConsoleFilter {
 export const FilterType = {
   Context: 'context',
   Source: 'source',
-  Url: 'url'
+  Url: 'url',
 };
diff --git a/src/chi_console/ConsolePanel.js b/src/chi_console/ConsolePanel.js
@@ -26,10 +26,10 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../common/common.js';  // eslint-disable-line no-unused-vars
+import * as Common from '../common/common.js'; // eslint-disable-line no-unused-vars
 import * as UI from '../ui/ui.js';
 
-import {ConsoleView} from './ConsoleView.js';
+import { ConsoleView } from './ConsoleView.js';
 
 /**
  * @unrestricted

diff --git a/src/chi_console/ConsolePinPane.js b/src/chi_console/ConsolePinPane.js
@@ -108,8 +108,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
     return Promise.all(updatePromises).then(this._updatedForTest.bind(this));
   }
 
-  _updatedForTest() {
-  }
+  _updatedForTest() {}
 }
 
 /**
@@ -156,48 +155,60 @@ export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
 
     this._pinPreview.addEventListener('mouseenter', this.setHovered.bind(this, true), false);
     this._pinPreview.addEventListener('mouseleave', this.setHovered.bind(this, false), false);
-    this._pinPreview.addEventListener('click', event => {
-      if (this._lastNode) {
-        Common.Revealer.reveal(this._lastNode);
-        event.consume();
-      }
-    }, false);
-
-    this._editorPromise = self.runtime.extension(UI.TextEditor.TextEditorFactory).instance().then(factory => {
-      this._editor = factory.createEditor({
-        devtoolsAccessibleName: ls`Live expression editor`,
-        lineNumbers: false,
-        lineWrapping: true,
-        mimeType: 'javascript',
-        autoHeight: true,
-        placeholder: ls`Expression`
-      });
-      this._editor.configureAutocomplete(
-          ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this._editor));
-      this._editor.widget().show(nameElement);
-      this._editor.widget().element.classList.add('console-pin-editor');
-      this._editor.widget().element.tabIndex = -1;
-      this._editor.setText(expression);
-      this._editor.widget().element.addEventListener('keydown', event => {
-        if (event.key === 'Tab' && !this._editor.text()) {
+    this._pinPreview.addEventListener(
+      'click',
+      event => {
+        if (this._lastNode) {
+          Common.Revealer.reveal(this._lastNode);
           event.consume();
-          return;
         }
-        if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) {
-          this._editor.setText(this._committedExpression);
-        }
-      }, true);
-      this._editor.widget().element.addEventListener('focusout', event => {
-        const text = this._editor.text();
-        const trimmedText = text.trim();
-        if (text.length !== trimmedText.length) {
-          this._editor.setText(trimmedText);
-        }
-        this._committedExpression = trimmedText;
-        pinPane._savePins();
-        this._editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
+      },
+      false
+    );
+
+    this._editorPromise = self.runtime
+      .extension(UI.TextEditor.TextEditorFactory)
+      .instance()
+      .then(factory => {
+        this._editor = factory.createEditor({
+          devtoolsAccessibleName: ls`Live expression editor`,
+          lineNumbers: false,
+          lineWrapping: true,
+          mimeType: 'javascript',
+          autoHeight: true,
+          placeholder: ls`Expression`,
+        });
+        this._editor.configureAutocomplete(
+          ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this._editor)
+        );
+        this._editor.widget().show(nameElement);
+        this._editor.widget().element.classList.add('console-pin-editor');
+        this._editor.widget().element.tabIndex = -1;
+        this._editor.setText(expression);
+        this._editor.widget().element.addEventListener(
+          'keydown',
+          event => {
+            if (event.key === 'Tab' && !this._editor.text()) {
+              event.consume();
+              return;
+            }
+            if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) {
+              this._editor.setText(this._committedExpression);
+            }
+          },
+          true
+        );
+        this._editor.widget().element.addEventListener('focusout', event => {
+          const text = this._editor.text();
+          const trimmedText = text.trim();
+          if (text.length !== trimmedText.length) {
+            this._editor.setText(trimmedText);
+          }
+          this._committedExpression = trimmedText;
+          pinPane._savePins();
+          this._editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
+        });
       });
-    });
   }
 
   /**
@@ -256,8 +267,13 @@ export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
     const throwOnSideEffect = isEditing && text !== this._committedExpression;
     const timeout = throwOnSideEffect ? 250 : undefined;
     const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
-    const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
-        text, throwOnSideEffect, timeout, !isEditing /* allowErrors */, 'console');
+    const { preview, result } = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
+      text,
+      throwOnSideEffect,
+      timeout,
+      !isEditing /* allowErrors */,
+      'console'
+    );
     if (this._lastResult && this._lastExecutionContext) {
       this._lastExecutionContext.runtimeModel.releaseEvaluationResult(this._lastResult);
     }