Commit faa0ac18 authored by Gary Blackwood's avatar Gary Blackwood Committed by Jason Laster
Browse files

Bug 1520957 - [release 119] Add 'Collapse all' and 'Expand all' sources... 

Bug 1520957 - [release 119] Add 'Collapse all' and 'Expand all' sources context menu options (#7714). r=dwalsh
parent 46d7c99b

devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js

+5 −1
Original line number Diff line number Diff line
@@ -81,6 +81,8 @@ type State = { 
  highlightItems?: any

};



type SetExpanded = (item: TreeNode, expanded: boolean, altKey: boolean) => void;



class SourcesTree extends Component<Props, State> {

  mounted: boolean;
@@ -238,7 +240,8 @@ class SourcesTree extends Component<Props, State> { 
    depth: number,

    focused: boolean,

    _,

    expanded: boolean

    expanded: boolean,

    { setExpanded }: { setExpanded: SetExpanded }

  ) => {

    const { debuggeeUrl, projectRoot } = this.props;
@@ -253,6 +256,7 @@ class SourcesTree extends Component<Props, State> { 
        source={this.getSource(item)}

        debuggeeUrl={debuggeeUrl}

        projectRoot={projectRoot}

        setExpanded={setExpanded}

      />

    );

  };

devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTreeItem.js

+51 −19
Original line number Diff line number Diff line
@@ -42,12 +42,22 @@ type Props = { 
  hasSiblingOfSameName: boolean,

  focusItem: TreeNode => void,

  selectItem: TreeNode => void,

  setExpanded: (TreeNode, boolean, boolean) => void,

  clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,

  setProjectDirectoryRoot: typeof actions.setProjectDirectoryRoot

};



type State = {};



type MenuOption = {

  id: string,

  label: string,

  disabled: boolean,

  click: () => any

};



type ContextMenu = Array<MenuOption>;



class SourceTreeItem extends Component<Props, State> {

  getIcon(item: TreeNode, depth: number) {

    const { debuggeeUrl, projectRoot, source } = this.props;
@@ -120,7 +130,10 @@ class SourceTreeItem extends Component<Props, State> { 
      }

    }



    if (isDirectory(item) && features.root) {

    if (isDirectory(item)) {

      this.addCollapseExpandAllOptions(menuOptions, item);



      if (features.root) {

        const { path } = item;

        const { projectRoot } = this.props;
@@ -141,10 +154,29 @@ class SourceTreeItem extends Component<Props, State> { 
          });

        }

      }

    }



    showMenu(event, menuOptions);

  };



  addCollapseExpandAllOptions = (menuOptions: ContextMenu, item: TreeNode) => {

    const { setExpanded } = this.props;



    menuOptions.push({

      id: "node-menu-collapse-all",

      label: L10N.getStr("collapseAll.label"),

      disabled: false,

      click: () => setExpanded(item, false, true)

    });



    menuOptions.push({

      id: "node-menu-expand-all",

      label: L10N.getStr("expandAll.label"),

      disabled: false,

      click: () => setExpanded(item, true, true)

    });

  };



  renderItemArrow() {

    const { item, expanded } = this.props;

    return isDirectory(item) ? (

devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js

+27 −2
Original line number Diff line number Diff line
@@ -34,6 +34,18 @@ describe("SourceTreeItem", () => { 
  describe("onContextMenu of the tree", () => {

    it("shows context menu on directory to set as root", async () => {

      const menuOptions = [

        {

          click: expect.any(Function),

          disabled: false,

          id: "node-menu-collapse-all",

          label: "Collapse all"

        },

        {

          click: expect.any(Function),

          disabled: false,

          id: "node-menu-expand-all",

          label: "Expand all"

        },

        {

          accesskey: "r",

          click: expect.any(Function),
@@ -55,7 +67,7 @@ describe("SourceTreeItem", () => { 
      expect(mockEvent.preventDefault).toHaveBeenCalled();

      expect(mockEvent.stopPropagation).toHaveBeenCalled();



      showMenu.mock.calls[0][1][0].click();

      showMenu.mock.calls[0][1][2].click();

      expect(props.setProjectDirectoryRoot).toHaveBeenCalled();

      expect(props.clearProjectDirectoryRoot).not.toHaveBeenCalled();

      expect(copyToTheClipboard).not.toHaveBeenCalled();
@@ -95,6 +107,18 @@ describe("SourceTreeItem", () => { 


    it("shows context menu on root to remove directory root", async () => {

      const menuOptions = [

        {

          click: expect.any(Function),

          disabled: false,

          id: "node-menu-collapse-all",

          label: "Collapse all"

        },

        {

          click: expect.any(Function),

          disabled: false,

          id: "node-menu-expand-all",

          label: "Expand all"

        },

        {

          click: expect.any(Function),

          disabled: false,
@@ -121,7 +145,7 @@ describe("SourceTreeItem", () => { 
      expect(mockEvent.preventDefault).toHaveBeenCalled();

      expect(mockEvent.stopPropagation).toHaveBeenCalled();



      showMenu.mock.calls[0][1][0].click();

      showMenu.mock.calls[0][1][2].click();

      expect(props.setProjectDirectoryRoot).not.toHaveBeenCalled();

      expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();

      expect(copyToTheClipboard).not.toHaveBeenCalled();
@@ -290,6 +314,7 @@ function generateDefaults(overrides) { 
    setProjectDirectoryRoot: jest.fn(),

    selectItem: jest.fn(),

    focusItem: jest.fn(),

    setExpanded: jest.fn(),

    ...overrides

  };

}

devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap

+48 −0
Original line number Diff line number Diff line
@@ -44,6 +44,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -72,6 +73,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -119,6 +121,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -205,6 +208,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -246,6 +250,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -274,6 +279,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -321,6 +327,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -389,6 +396,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -430,6 +438,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -447,6 +456,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -483,6 +493,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -540,6 +551,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -581,6 +593,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -599,6 +612,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -636,6 +650,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -694,6 +709,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -735,6 +751,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -753,6 +770,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": null,

    },
@@ -779,6 +797,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={null}

        />,
@@ -824,6 +843,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": null,

  },
@@ -854,6 +874,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -870,6 +891,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -905,6 +927,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -961,6 +984,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -1002,6 +1026,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1018,6 +1043,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": null,

    },
@@ -1042,6 +1068,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={null}

        />,
@@ -1085,6 +1112,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": null,

  },
@@ -1115,6 +1143,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1133,6 +1162,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": null,

    },
@@ -1159,6 +1189,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={null}

        />,
@@ -1204,6 +1235,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": null,

  },
@@ -1234,6 +1266,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1251,6 +1284,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -1287,6 +1321,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -1344,6 +1379,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -1385,6 +1421,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1401,6 +1438,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -1436,6 +1474,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -1492,6 +1531,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -1546,6 +1586,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1573,6 +1614,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -1619,6 +1661,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -1699,6 +1742,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",
@@ -1753,6 +1797,7 @@ Object { 
  </div>,

  "defaultState": null,

  "instance": SourceTreeItem {

    "addCollapseExpandAllOptions": [Function],

    "context": Object {},

    "onClick": [Function],

    "onContextMenu": [Function],
@@ -1781,6 +1826,7 @@ Object { 
      },

      "projectRoot": "",

      "selectItem": [MockFunction],

      "setExpanded": [MockFunction],

      "setProjectDirectoryRoot": [MockFunction],

      "source": Object {

        "contentType": "",
@@ -1828,6 +1874,7 @@ Object { 
          }

          projectRoot=""

          selectItem={[MockFunction]}

          setExpanded={[MockFunction]}

          setProjectDirectoryRoot={[MockFunction]}

          source={

            Object {
@@ -1909,6 +1956,7 @@ Object { 
    },

    "projectRoot": "",

    "selectItem": [MockFunction],

    "setExpanded": [MockFunction],

    "setProjectDirectoryRoot": [MockFunction],

    "source": Object {

      "contentType": "",

devtools/client/locales/en-US/debugger.properties

+8 −0
Original line number Diff line number Diff line
@@ -30,6 +30,14 @@ copySource.accesskey=y 
copySourceUri2=Copy source URI

copySourceUri2.accesskey=u



# LOCALIZATION NOTE (collapseAll.label): This is the text that appears in the

# context menu to collapse a directory and all of its subdirectories.

collapseAll.label=Collapse all



# LOCALIZATION NOTE (expandAll.label): This is the text that appears in the

# context menu to expand a directory and all of its subdirectories.

expandAll.label=Expand all



# LOCALIZATION NOTE (setDirectoryRoot.label): This is the text that appears in the

# context menu to set a directory as root directory

setDirectoryRoot.label=Set directory root