Use Prefs for feature flags (firefox-devtools#5039)

Author: jasonLaster

assets/panel/prefs.js

@@ -41,14 +41,18 @@ pref("devtools.debugger.file-search-case-sensitive", false);
 pref("devtools.debugger.file-search-whole-word", false);
 pref("devtools.debugger.file-search-regex-match", false);
 pref("devtools.debugger.features.async-stepping", true);
+pref("devtools.debugger.project-directory-root", "");
 
-pref("devtools.debugger.features.project-text-search", true);
 pref("devtools.debugger.features.wasm", true);
 pref("devtools.debugger.features.shortcuts", true);
-pref("devtools.debugger.project-directory-root", "");
 pref("devtools.debugger.features.root", false);
 pref("devtools.debugger.features.column-breakpoints", false);
+pref("devtools.debugger.features.chrome-scopes", false);
 pref("devtools.debugger.features.map-scopes", true);
-pref("devtools.debugger.features.breakpoints-dropdown", false);
+pref("devtools.debugger.features.breakpoints-dropdown", true);
 pref("devtools.debugger.features.remove-command-bar-options", false);
-pref("devtools.debugger.features.workers", false);
+pref("devtools.debugger.features.workers", true);
+pref("devtools.debugger.features.code-coverage", false);
+pref("devtools.debugger.features.event-listeners", false);
+pref("devtools.debugger.features.code-folding", false);
+pref("devtools.debugger.features.outline", true);

circle.yml

@@ -1,12 +1,12 @@
 machine:
   node:
-    version: 7.7.2
+    version: 8.5.0
   services:
     - docker
   environment:
     DOWNLOADS_PATH: "$HOME/downloads"
     YARN_PATH: "$HOME/.yarn"
-    YARN_VERSION: 0.28.4
+    YARN_VERSION: 1.3.2
     PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
   post:
     - mkdir -p $DOWNLOADS_PATH
@@ -19,7 +19,6 @@ test:
   pre:
     - greenkeeper-lockfile-update
   override:
-    - mkdir -p $CIRCLE_TEST_REPORTS/mocha
     - mkdir -p $CIRCLE_TEST_REPORTS/flow-coverage
     - mkdir -p $CIRCLE_TEST_REPORTS/jest-coverage
     - jest -i --no-colors --testResultsProcessor jest-junit-reporter --coverage --coverageDirectory=$CIRCLE_TEST_REPORTS/jest-coverage

configs/application.json

@@ -4,7 +4,8 @@
   "workers": {
     "parserURL": "http://localhost:8000/assets/build/parser-worker.js",
     "sourceMapURL": "http://localhost:8000/assets/build/source-map-worker.js",
-    "prettyPrintURL": "http://localhost:8000/assets/build/pretty-print-worker.js"
+    "prettyPrintURL":
+      "http://localhost:8000/assets/build/pretty-print-worker.js"
   },
   "theme": "light",
   "logging": {
@@ -15,28 +16,7 @@
   "performance": {
     "actions": false
   },
-  "features": {
-    "chromeScopes": {
-      "label": "Chrome Scopes",
-      "enabled": false
-    },
-    "eventListeners": {
-      "label": "Event Listeners",
-      "enabled": false
-    },
-    "codeCoverage": {
-      "label": "Code Coverage",
-      "enabled": false
-    },
-    "codeFolding": {
-      "label": "Code Folding",
-      "enabled": false
-    },
-    "searchNav": {
-      "label": "Search Navigation",
-      "enabled": false
-    }
-  },
+  "features": {},
   "chrome": {
     "debug": true,
     "host": "localhost",

configs/development.json

@@ -19,56 +19,7 @@
       "http://localhost:8000/assets/build/pretty-print-worker.js",
     "searchURL": "http://localhost:8000/assets/build/search-worker.js"
   },
-  "features": {
-    "blackbox": {
-      "label": "Black Box",
-      "enabled": true
-    },
-    "previewWatch": {
-      "label": "Add watch expression from preview",
-      "enabled": true
-    },
-    "chromeScopes": {
-      "label": "Chrome Scopes",
-      "enabled": false
-    },
-    "eventListeners": {
-      "label": "Event Listeners",
-      "enabled": false
-    },
-    "codeCoverage": {
-      "label": "Code Coverage",
-      "enabled": false
-    },
-    "codeFolding": {
-      "label": "Code Folding",
-      "enabled": false
-    },
-    "searchNav": {
-      "label": "Search Navigation",
-      "enabled": true
-    },
-    "outline": {
-      "label": "Source Outline",
-      "enabled": true
-    },
-    "collapseFrame": {
-      "label": "Collapse Call Frames",
-      "enabled": true
-    },
-    "columnBreakpoints": {
-      "label": "Column Breakpoints",
-      "enabled": false
-    },
-    "highlightScopeLines": {
-      "label": "Highlight the lines in scope",
-      "enabled": false
-    },
-    "workers": {
-      "label": "Workers",
-      "enabled": false
-    }
-  },
+  "features": {},
   "chrome": {
     "debug": true,
     "host": "localhost",

configs/firefox-panel.json

@@ -7,33 +7,9 @@
   },
   "workers": {
     "parserURL": "resource://devtools/client/debugger/new/parser-worker.js",
-    "prettyPrintURL": "resource://devtools/client/debugger/new/pretty-print-worker.js",
+    "prettyPrintURL":
+      "resource://devtools/client/debugger/new/pretty-print-worker.js",
     "searchURL": "resource://devtools/client/debugger/new/search-worker.js"
   },
-  "features": {
-    "blackbox": {
-      "enabled": true
-    },
-    "chromeScopes": {
-      "enabled": false
-    },
-    "eventListeners": {
-      "enabled": false
-    },
-    "codeCoverage": {
-      "enabled": false
-    },
-    "codeFolding": {
-      "enabled": false
-    },
-    "searchNav": {
-      "enabled": true
-    },
-    "collapseFrame": {
-      "enabled": true
-    },
-    "outline": {
-      "enabled": true
-    }
-  }
+  "features": {}
 }

docs/README.md

@@ -15,7 +15,6 @@ permalink: docs/
 * [Local Development](./local-development.md)
 * [Lerna](./lerna.md)
 * [Flow types](./flow.md)
-* [Feature flags](./feature-flags.md)
 * [Issues](./issues.md)
 * [Pull requests](./pull-requests.md)
 * [Maintainer information](./maintainer.md)

docs/feature-flags.md

@@ -655,19 +655,6 @@ index 1cfe2da..7e3068f 100644
  pref("devtools.debugger.features.project-text-search", true);
  pref("devtools.debugger.features.wasm", true);
 +pref("devtools.debugger.features.awesome", false);
-diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
-index 47714d3..540c98d 100644
---- a/src/components/Editor/index.js
-+++ b/src/components/Editor/index.js
-@@ -152,7 +152,7 @@ class Editor extends PureComponent {
-       codeMirror.on("gutterContextMenu", (cm, line, eventName, event) =>
-         this.onGutterContextMenu(event)
-       );
--
-+
-       codeMirror.on("contextmenu", (cm, event) => this.openMenu(event, cm));
-     } else {
-       codeMirrorWrapper.addEventListener("contextmenu", event =>
 diff --git a/src/utils/prefs.js b/src/utils/prefs.js
 index 429d56c..dadb36c 100644
 --- a/src/utils/prefs.js

docs/local-development.md

@@ -14,7 +14,7 @@ import type {
 
 import { createPause, createSource } from "./create";
 import sourceQueue from "../../utils/source-queue";
-import { isEnabled } from "devtools-config";
+import { features } from "../../utils/prefs";
 
 const CALL_STACK_PAGE_SIZE = 1000;
 
@@ -81,7 +81,7 @@ function resumed(_: "resumed", packet: ResumedPacket) {
 function newSource(_: "newSource", { source }: SourcePacket) {
   sourceQueue.queue(source);
 
-  if (isEnabled("eventListeners")) {
+  if (features.eventListeners) {
     actions.fetchEventListeners();
   }
 }

src/client/firefox/events.js

@@ -4,13 +4,12 @@
 
 // @flow
 import React, { Component } from "react";
-import { isEnabled } from "devtools-config";
 import ReactDOM from "react-dom";
-
 import classnames from "classnames";
 import Svg from "../shared/Svg";
 
 import { getDocument, toEditorLine } from "../../utils/editor";
+import { features } from "../../utils/prefs";
 
 const breakpointSvg = document.createElement("div");
 ReactDOM.render(<Svg name="breakpoint" />, breakpointSvg);
@@ -19,7 +18,7 @@ function makeMarker(isDisabled: boolean) {
   const bp = breakpointSvg.cloneNode(true);
   bp.className = classnames("editor new-breakpoint", {
     "breakpoint-disabled": isDisabled,
-    "folding-enabled": isEnabled("codeFolding")
+    "folding-enabled": features.codeFolding
   });
 
   return bp;

src/components/Editor/Breakpoint.js

@@ -14,7 +14,7 @@ import {
 } from "../../selectors";
 
 import classnames from "classnames";
-import { isEnabled } from "devtools-config";
+import { features } from "../../utils/prefs";
 import { isPretty, isLoaded, getFilename } from "../../utils/source";
 import { getGeneratedSource } from "../../reducers/sources";
 import { shouldShowFooter, shouldShowPrettyPrint } from "../../utils/editor";
@@ -70,7 +70,7 @@ class SourceFooter extends PureComponent<Props> {
     const { selectedSource, toggleBlackBox } = this.props;
     const sourceLoaded = selectedSource && isLoaded(selectedSource);
 
-    if (!isEnabled("blackbox") || !sourceLoaded) {
+    if (!sourceLoaded) {
       return;
     }
 
@@ -112,7 +112,7 @@ class SourceFooter extends PureComponent<Props> {
   coverageButton() {
     const { recordCoverage } = this.props;
 
-    if (!isEnabled("codeCoverage")) {
+    if (!features.codeCoverage) {
       return;
     }
 

src/components/Editor/Footer.js

@@ -6,7 +6,6 @@
 
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { isEnabled } from "devtools-config";
 
 import Reps from "devtools-reps";
 const { REPS: { Rep }, MODE, ObjectInspectorUtils } = Reps;
@@ -186,26 +185,6 @@ export class Popup extends Component<Props> {
     );
   }
 
-  renderAddToExpressionBar(expression: string) {
-    if (!isEnabled("previewWatch")) {
-      return null;
-    }
-
-    const { addExpression } = this.props;
-    return (
-      <div className="add-to-expression-bar">
-        <div className="prompt">»</div>
-        <div className="expression-to-save-label">{expression}</div>
-        <div
-          className="expression-to-save-button"
-          onClick={event => addExpression(event)}
-        >
-          {L10N.getStr("addWatchExpressionButton")}
-        </div>
-      </div>
-    );
-  }
-
   renderPreview(expression: string, value: Object, extra: Object) {
     const root = {
       name: expression,
@@ -218,12 +197,7 @@ export class Popup extends Component<Props> {
     }
 
     if (value.type === "object") {
-      return (
-        <div>
-          {this.renderObjectPreview(expression, root, extra)}
-          {this.renderAddToExpressionBar(expression)}
-        </div>
-      );
+      return <div>{this.renderObjectPreview(expression, root, extra)}</div>;
     }
 
     return this.renderSimplePreview(value);

src/components/Editor/Preview/Popup.js

@@ -279,7 +279,9 @@ class SourcesTree extends Component<Props, State> {
       };
 
       menuOptions.push(copySourceUri2);
-    } else if (features.root) {
+    }
+
+    if (isDirectory(item) && features.root) {
       menuOptions.push({
         id: "node-set-directory-root",
         label: setDirectoryRootLabel,
@@ -288,6 +290,7 @@ class SourcesTree extends Component<Props, State> {
         click: () => setProjectDirectoryRoot(item.path)
       });
     }
+
     showMenu(event, menuOptions);
   }