Bug 1624346 - Use destructuring when possible r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D67778

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/actions/breakpoints/syncBreakpoint.js

@@ -58,7 +58,7 @@ async function findNewLocation(
   const func = symbols ? findFunctionByName(symbols, name, index) : null;
 
   // Fallback onto the location line, if we do not find a function.
-  let line = location.line;
+  let { line } = location;
   if (func) {
     line = func.location.start.line + offset.line;
   }

devtools/client/debugger/src/actions/expressions.js

@@ -139,7 +139,7 @@ function evaluateExpression(cx: ThreadContext, expression: Expression) {
       return;
     }
 
-    let input = expression.input;
+    let { input } = expression;
     const frame = getSelectedFrame(getState(), cx.thread);
 
     if (frame) {

devtools/client/debugger/src/actions/pause/mapScopes.js

@@ -51,7 +51,7 @@ export async function buildOriginalScopes(
 
   const inputs = [];
   for (let i = 0; i < originalVariables.vars.length; i++) {
-    const expr = originalVariables.vars[i].expr;
+    const { expr } = originalVariables.vars[i];
     const expression = expr
       ? expr.replace(expressionRegex, frameBase)
       : "void 0";
@@ -66,7 +66,7 @@ export async function buildOriginalScopes(
 
   const variables = {};
   for (let i = 0; i < originalVariables.vars.length; i++) {
-    const name = originalVariables.vars[i].name;
+    const { name } = originalVariables.vars[i];
     variables[name] = { value: results[i].result };
   }
 

devtools/client/debugger/src/actions/tabs.js

@@ -22,8 +22,7 @@ import type { Action, ThunkArgs } from "./types";
 import type { Source, Context } from "../types";
 
 export function updateTab(source: Source, framework: string): Action {
-  const { url, id: sourceId } = source;
-  const isOriginal = source.isOriginal;
+  const { url, id: sourceId, isOriginal } = source;
 
   return {
     type: "UPDATE_TAB",
@@ -35,8 +34,7 @@ export function updateTab(source: Source, framework: string): Action {
 }
 
 export function addTab(source: Source): Action {
-  const { url, id: sourceId } = source;
-  const isOriginal = source.isOriginal;
+  const { url, id: sourceId, isOriginal } = source;
 
   return {
     type: "ADD_TAB",

devtools/client/debugger/src/actions/tests/preview.spec.js

@@ -65,7 +65,7 @@ async function pause(store, client) {
   await dispatch(actions.selectSource(cx, base.id));
   await waitForState(store, state => selectors.hasSymbols(state, base));
 
-  const thread = cx.thread;
+  const { thread } = cx;
   const frames = [makeFrame({ id: "frame1", sourceId: base.id, thread })];
   client.getFrames = async () => frames;
 

devtools/client/debugger/src/client/firefox.js

@@ -45,7 +45,7 @@ async function onTargetAvailable({
     // Make sure targetFront.threadFront is availabled and attached.
     await targetFront.onThreadAttached;
 
-    const threadFront = targetFront.threadFront;
+    const { threadFront } = targetFront;
     if (!threadFront) {
       return;
     }

devtools/client/debugger/src/client/firefox/commands.js

@@ -81,7 +81,7 @@ function createObjectFront(grip: Grip): ObjectFront {
 }
 
 async function loadObjectProperties(root: Node) {
-  const utils = Reps.objectInspector.utils;
+  const { utils } = Reps.objectInspector;
   const properties = await utils.loadProperties.loadItemProperties(
     root,
     devToolsClient

devtools/client/debugger/src/client/firefox/targets.js

@@ -43,7 +43,7 @@ async function attachTargets(targetLists, args) {
       // Content process targets have already been attached by the toolbox.
       // And the thread front has been initialized from there.
       // So we only need to retrieve it here.
-      let threadFront = targetFront.threadFront;
+      let { threadFront } = targetFront;
 
       // But workers targets are still only managed by the debugger codebase
       // and so we have to attach their thread actor

devtools/client/debugger/src/components/Editor/Preview/Popup.js

@@ -67,7 +67,7 @@ export class Popup extends Component<Props> {
   }
 
   addHighlightToToken() {
-    const target = this.props.preview.target;
+    const { target } = this.props.preview;
     if (target) {
       target.classList.add("preview-token");
       addHighlightToTargetSiblings(target, this.props);
@@ -75,7 +75,7 @@ export class Popup extends Component<Props> {
   }
 
   removeHighlightFromToken() {
-    const target = this.props.preview.target;
+    const { target } = this.props.preview;
     if (target) {
       target.classList.remove("preview-token");
       removeHighlightForTargetSiblings(target);
@@ -261,6 +261,7 @@ export function addHighlightToTargetSiblings(target: Element, props: Object) {
   ) {
     let nextSibling = target.nextSibling;
     let nextElementSibling = target.nextElementSibling;
+
     // Note: Declaring previous/next ELEMENT siblings as well because
     // properties like innerHTML can't be checked on nextSibling
     // without creating a flow error even if the node is an element type.

devtools/client/debugger/src/components/Editor/SearchBar.js

@@ -92,7 +92,7 @@ class SearchBar extends Component<Props, State> {
   }
 
   componentWillUnmount() {
-    const shortcuts = this.context.shortcuts;
+    const { shortcuts } = this.context;
     const {
       searchShortcut,
       searchAgainShortcut,
@@ -109,7 +109,7 @@ class SearchBar extends Component<Props, State> {
     // overwrite this.doSearch with debounced version to
     // reduce frequency of queries
     this.doSearch = debounce(this.doSearch, 100);
-    const shortcuts = this.context.shortcuts;
+    const { shortcuts } = this.context;
     const {
       searchShortcut,
       searchAgainShortcut,
@@ -191,7 +191,7 @@ class SearchBar extends Component<Props, State> {
   traverseResults = (e: SyntheticEvent<HTMLElement>, rev: boolean) => {
     e.stopPropagation();
     e.preventDefault();
-    const editor = this.props.editor;
+    const { editor } = this.props;
 
     if (!editor) {
       return;

devtools/client/debugger/src/components/Editor/Tabs.js

@@ -277,7 +277,7 @@ class Tabs extends PureComponent<Props, State> {
   }
 
   renderDropdown() {
-    const hiddenTabs = this.state.hiddenTabs;
+    const { hiddenTabs } = this.state;
     if (!hiddenTabs || hiddenTabs.length == 0) {
       return null;
     }

devtools/client/debugger/src/components/Editor/index.js

@@ -154,9 +154,9 @@ class Editor extends PureComponent<Props, State> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    let editor = this.state.editor;
+    let { editor } = this.state;
 
-    if (!this.state.editor && nextProps.selectedSource) {
+    if (!editor && nextProps.selectedSource) {
       editor = this.setupEditor();
     }
 
@@ -258,13 +258,14 @@ class Editor extends PureComponent<Props, State> {
   };
 
   componentWillUnmount() {
-    if (this.state.editor) {
-      this.state.editor.destroy();
-      this.state.editor.codeMirror.off("scroll", this.onEditorScroll);
+    const { editor } = this.state;
+    if (editor) {
+      editor.destroy();
+      editor.codeMirror.off("scroll", this.onEditorScroll);
       this.setState({ editor: (null: any) });
     }
 
-    const shortcuts = this.context.shortcuts;
+    const { shortcuts } = this.context;
     shortcuts.off(L10N.getStr("sourceTabs.closeTab.key"));
     shortcuts.off(L10N.getStr("toggleBreakpoint.key"));
     shortcuts.off(L10N.getStr("toggleCondPanel.breakpoint.key"));

devtools/client/debugger/src/components/QuickOpenModal.js

@@ -340,7 +340,7 @@ export class QuickOpenModal extends Component<Props, State> {
   };
 
   getResultCount = () => {
-    const results = this.state.results;
+    const { results } = this.state;
     return results && results.length ? results.length : 0;
   };
 

devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js

@@ -93,15 +93,17 @@ type Props = {
 
 class CommandBar extends Component<Props> {
   componentWillUnmount() {
-    const shortcuts = this.context.shortcuts;
+    const { shortcuts } = this.context;
+
     COMMANDS.forEach(action => shortcuts.off(getKey(action)));
+
     if (isMacOS) {
       COMMANDS.forEach(action => shortcuts.off(getKeyForOS("WINNT", action)));
     }
   }
 
   componentDidMount() {
-    const shortcuts = this.context.shortcuts;
+    const { shortcuts } = this.context;
 
     COMMANDS.forEach(action =>
       shortcuts.on(getKey(action), (_, e) => this.handleEvent(e, action))

devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js

@@ -151,10 +151,10 @@ export default class Group extends Component<Props, State> {
   renderDescription() {
     const { l10n } = this.context;
     const { group } = this.props;
+    const { expanded } = this.state;
 
     const frame = group[0];
-    const expanded = this.state.expanded;
-    const l10NEntry = this.state.expanded
+    const l10NEntry = expanded
       ? "callStack.group.collapseTooltip"
       : "callStack.group.expandTooltip";
     const title = l10n.getFormatStr(l10NEntry, frame.library);

devtools/client/debugger/src/components/SecondaryPanes/Scopes.js

@@ -186,7 +186,7 @@ class Scopes extends PureComponent<Props, State> {
       return null;
     }
 
-    const watchpoint = item.contents.watchpoint;
+    const { watchpoint } = item.contents;
     return (
       <button
         className={`remove-${watchpoint}-watchpoint`}

devtools/client/debugger/src/components/shared/Popover.js

@@ -251,7 +251,7 @@ class Popover extends Component<Props, State> {
 
   getChildren() {
     const { children } = this.props;
-    const coords = this.state.coords;
+    const { coords } = this.state;
     const gap = this.getGap();
 
     return coords.orientation === "up" ? [children, gap] : [gap, children];

devtools/client/debugger/src/reducers/ast.js

@@ -123,7 +123,7 @@ export function isSymbolsLoading(state: OuterState, source: ?Source): boolean {
 }
 
 export function getInScopeLines(state: OuterState, location: SourceLocation) {
-  const inScopeLines = state.ast.inScopeLines;
+  const { inScopeLines } = state.ast;
   return inScopeLines[makeBreakpointId(location)];
 }
 

devtools/client/debugger/src/reducers/tabs.js

@@ -104,7 +104,7 @@ function update(
  * @static
  */
 export function getNewSelectedSourceId(state: State, tabList: TabList): string {
-  const selectedLocation = state.sources.selectedLocation;
+  const { selectedLocation } = state.sources;
   const availableTabs = state.tabs.tabs;
   if (!selectedLocation) {
     return "";
@@ -120,7 +120,7 @@ export function getNewSelectedSourceId(state: State, tabList: TabList): string {
   );
 
   if (matchingTab) {
-    const sources = state.sources.sources;
+    const { sources } = state.sources;
     if (!sources) {
       return "";
     }

devtools/client/debugger/src/utils/prefs.js

@@ -12,7 +12,7 @@ import Services from "devtools-services";
 // Schema version to bump when the async store format has changed incompatibly
 // and old stores should be cleared.
 const prefsSchemaVersion = 11;
-const pref = Services.pref;
+const { pref } = Services;
 
 if (isDevelopment()) {
   pref("devtools.browsertoolbox.fission", false);

devtools/client/debugger/src/utils/source.js

@@ -111,7 +111,7 @@ export function isPrettyURL(url: string): boolean {
 }
 
 export function isThirdParty(source: Source) {
-  const url = source.url;
+  const { url } = source;
   if (!source || !url) {
     return false;
   }

devtools/client/debugger/src/utils/sources-tree/formatTree.js

@@ -19,8 +19,7 @@ export function formatTree(
       str = formatTree(t, depth + 1, str);
     });
   } else {
-    const id = tree.contents.id;
-    str += `${whitespace} - ${tree.name} path=${tree.path} source_id=${id} \n`;
+    str += `${whitespace} - ${tree.name} path=${tree.path} source_id=${tree.contents.id} \n`;
   }
 
   return str;

devtools/client/debugger/src/utils/telemetry.js

@@ -72,7 +72,7 @@ export function recordEvent(eventName: string, fields: {} = {}) {
   /* eslint-enable camelcase */
 
   if (!isFirefoxPanel() && window.dbg) {
-    const events = window.dbg._telemetry.events;
+    const { events } = window.dbg._telemetry;
     if (!events[eventName]) {
       events[eventName] = [];
     }

devtools/client/debugger/src/utils/ui.js

@@ -16,7 +16,7 @@ export function isVisible() {
 /* Gets the line numbers width in the code editor
  */
 export function getLineNumberWidth(editor: Object) {
-  const gutters = editor.display.gutters;
+  const { gutters } = editor.display;
   const lineNumbers = gutters.querySelector(".CodeMirror-linenumbers");
   return lineNumbers?.clientWidth;
 }
@@ -28,7 +28,7 @@ export function getLineNumberWidth(editor: Object) {
  * how we overlay breakpoints.
  */
 export function resizeBreakpointGutter(editor: Object) {
-  const gutters = editor.display.gutters;
+  const { gutters } = editor.display;
   const breakpoints = gutters.querySelector(".breakpoints");
   if (breakpoints) {
     breakpoints.style.width = `${getLineNumberWidth(editor)}px`;

devtools/client/debugger/src/workers/parser/getScopes/visitor.js

@@ -444,7 +444,7 @@ const scopeCollectionVisitor = {
         refs: [],
       };
     } else if (t.isFunction(node)) {
-      let scope = state.scope;
+      let { scope } = state;
       if (t.isFunctionExpression(node) && isNode(node.id, "Identifier")) {
         scope = pushTempScope(state, "block", "Function Expression", {
           start: fromBabelLocation(node.loc.start, state.sourceId),
@@ -914,8 +914,7 @@ function buildMetaBindings(
     t.isNumericLiteral(parent.expressions[0]) &&
     parent.expressions[1] === node
   ) {
-    let start = parent.loc.start;
-    let end = parent.loc.end;
+    let { start, end } = parent.loc;
 
     if (t.isCallExpression(grandparent, { callee: parent })) {
       // Attempt to expand the range around parentheses, e.g.

devtools/client/debugger/src/workers/parser/getSymbols.js

@@ -189,7 +189,7 @@ function extractSymbol(path: SimplePath, symbols, state) {
   }
 
   if (t.isCallExpression(path)) {
-    const callee = path.node.callee;
+    const { callee } = path.node;
     const args = path.node.arguments;
     if (t.isMemberExpression(callee)) {
       const {
@@ -236,7 +236,7 @@ function extractSymbol(path: SimplePath, symbols, state) {
     }
 
     if (path.node.typeAnnotation) {
-      const column = path.node.typeAnnotation.loc.start.column;
+      const { column } = path.node.typeAnnotation.loc.start;
       end = { ...end, column };
     }
 
@@ -344,7 +344,7 @@ function extendSnippet(
 
 function getMemberSnippet(node: Node, expression: string = "") {
   if (t.isMemberExpression(node)) {
-    const name = node.property.name;
+    const { name } = node.property;
     const snippet = getMemberSnippet(
       node.object,
       extendSnippet(name, expression, { node })
@@ -379,7 +379,7 @@ function getObjectSnippet(
     return expression;
   }
 
-  const name = path.node.key.name;
+  const { name } = path.node.key;
 
   const extendedExpression = extendSnippet(name, expression, path, prevPath);
 
@@ -418,7 +418,7 @@ function getSnippet(
 
   if (t.isVariableDeclaration(path)) {
     const node = path.node.declarations[0];
-    const name = node.id.name;
+    const { name } = node.id;
     return extendSnippet(name, expression, path, prevPath);
   }
 

devtools/client/debugger/src/workers/parser/utils/getFunctionName.js

@@ -18,7 +18,7 @@ export default function getFunctionName(node: Node, parent: Node): string {
     t.isObjectMethod(node, { computed: false }) ||
     t.isClassMethod(node, { computed: false })
   ) {
-    const key = node.key;
+    const { key } = node;
 
     if (t.isIdentifier(key)) {
       return key.name;
@@ -38,7 +38,7 @@ export default function getFunctionName(node: Node, parent: Node): string {
     // can change to use computed: false like ObjectProperty.
     (t.isClassProperty(parent, { value: node }) && !parent.computed)
   ) {
-    const key = parent.key;
+    const { key } = parent;
 
     if (t.isIdentifier(key)) {
       return key.name;

devtools/client/debugger/src/workers/parser/utils/inferClassName.js

@@ -10,7 +10,7 @@ import type { SimplePath } from "./simple-path";
 // createClass or extend
 function fromCallExpression(callExpression: SimplePath) {
   const whitelist = ["extend", "createClass"];
-  const callee = callExpression.node.callee;
+  const { callee } = callExpression.node;
   if (!callee) {
     return null;
   }
@@ -38,7 +38,7 @@ function fromCallExpression(callExpression: SimplePath) {
     return null;
   }
 
-  const left = assignment.node.left;
+  const { left } = assignment.node;
 
   if (left.name) {
     return name;
@@ -54,7 +54,7 @@ function fromCallExpression(callExpression: SimplePath) {
 // the function class is inferred from a prototype assignment
 // e.g. TodoClass.prototype.render = function() {}
 function fromPrototype(assignment) {
-  const left = assignment.node.left;
+  const { left } = assignment.node;
   if (!left) {
     return null;
   }