AtomでPHP Debugの変数をデフォルトで開いた状態にする

Windows 10 + XAMPPという環境において、PHPでサイトを作っておりました。

デフォルトでは変数は閉じられている

AtomでPHPのデバッグを行うためには、「atom-debug-ui」、「atom-ide-ui」、「ide-php」、「php-debug」という4つのパッケージをインストールします。
すると、画面左下に「PHP Debug」というボタンが表示されるので、これを押すとatom-debug-uiによって作られたデバッグ用の領域が表示されます。
その中にある「Content」というタブには、「Locals」、「Superglobals」、「User defined constants」という項目があり、この中に変数が表示されるのですが、デバッグを行っていない時はこれらの項目は表示されていません。
デバッグを開始するとブレークポイントで止まり、Contentに3つの項目が現れ、その中にその時点での変数が表示されます。
これらの項目はデフォルトでは閉じられた状態となっており、変数を見るためにはクリックしなければなりません。
また、変数が配列やオブジェクトの場合もデフォルトでは閉じられた状態となっており、これらもまた、中身を見るためにはクリックしなければなりません。
そして、せっかく開いた項目や変数も、デバッグを終了してもう一度デバッグを行うと、また閉じられた状態に戻ってしまいます。
毎回クリックして開くのは面倒なので、デフォルトで開いた状態にしたいと思い、自分でコードを書きました。

このあたりの処理はReactで書かれているようなのですが、私はReactどころかJavaScriptすらほとんど勉強していません。
デベロッパーツールを見たりconsole.logで変数を表示したりしながらコードを書いたので、苦労した上に頭の悪いコードになっているかもしれません・・・
「もっとスマートな方法があるよ」という方は、ぜひ教えてください。

実現方法

結論から言えば、「C:\Users\User\.atom\packages\atom-debug-ui\lib\context」にある「context-variable-list-view.js」を、次のコードに書き換えてください。

私が書き加えたのは6つのフラグとif文です。
途中にコメントアウトされたconsole.logがいくつもありますが、これは私が確認のために使っていたものなので、もちろん削除しても問題無いです。
ただ、色々いじる時にあった方が便利かもしれないので残しておきます。

context-variable-list-view.js

'use babel'
/** @jsx etch.dom */

import etch from 'etch'
import UiComponent from '../ui/component'

import ContextVariableView from './context-variable-view'
import helpers from '../helpers'

export default class ContextVariableListView extends UiComponent {

  render () {
    const {context,services,state,variableContext} = this.props;
    const path = (variableContext.parent) ? variableContext.parent + '.' + variableContext.identifer : variableContext.identifier;
    const variables = variableContext.variables.map((variable,index) => {
      return <ContextVariableView key={variable.identifier + ":" + index} services={services} context={context} variable={variable} parent={path} />
    });

    const labels = variableContext.labels.map((label,index) => {
      return <span className={label.classes}>{label.text}</span>
    });
/*
        console.log(labels.length); //ex. 1
        console.log(JSON.stringify(labels)); //ex. [{"tag":"span","props":{"className":"variable php syntax--php syntax--type"},"children":[{"text":"Locals"}]}]
        console.log(labels); //ex. Array(1)
        console.log(labels[0]); //ex. {tag: "span", props: {…}, children: Array(1)}
        console.log(labels[0]["tag"]); //ex. span
        console.log(labels[0]["props"]); //ex. {className: "variable php syntax--php syntax--type"}
        console.log(labels[0]["props"]["className"]); //ex. variable php syntax--php syntax--type
        console.log(labels[0]["children"]); //ex. Array(1)
        console.log(labels[0]["children"][0]); //ex. {text:"Locals"}
        console.log(labels[0]["children"][0]["text"]); //ex. Locals
        console.log(variables); //ex. Array(5)
        console.log(path); //ex. Locals
*/
        locals_flg = true; //keep Locals opened : true
        locals_variables_flg = true; //keep variables in Locals opened : true
        superglobals_flg = true; //keep Superglobals opened : true
        superglobals_variables_flg = true; //keep variables in Superglobals opened : true
        user_defined_constants_flg = true; //keep User defined constantslocals opened : true
        user_defined_constants_variables_flg = true; //keep variables in User defined constantslocals opened : true

        if ((path=="Locals" && locals_flg)
            || (path=="Locals.undefined" && locals_variables_flg)
            || (path=="Superglobals" && superglobals_flg)
            || (path=="Superglobals.undefined" && superglobals_variables_flg)
            || (path=="User defined constants" && user_defined_constants_flg)
            || (path=="User defined constants.undefined" && user_defined_constants_variables_flg)) {
            return <li className="context-variable-list-view">
                <details open>
                    <summary>
                    {labels}
            </summary>
            <ul>
                    {variables}
            </ul>
            </details>
            </li>
        } else {
            return <li className="context-variable-list-view">
                <details data-name="dataname">
                    <summary>
                    {labels}
            </summary>
            <ul>
                    {variables}
            </ul>
            </details>
            </li>
        }

        return <li className="context-variable-list-view">
          <details data-name="dataname">
            <summary>
              {labels}
            </summary>
            <ul>
            {variables}
            </ul>
          </details>
        </li>
    }

  init ()  {
    super.init()
  }

}

使い方

6つのフラグはそれぞれ、3つの項目を開いた状態にするか、その中の変数を開いた状態にするか、を意味します。
開いた状態にしたい時は、trueにしてください。

ただ、このコードでは、例えば、superglobals_variables_flgを立てるとSuperglobalsの中の変数が全て開いた状態となるため、
余計な変数まで開いてしまい、縦に長過ぎて見難くなってしまう場合があります。
特定の変数だけを開いた状態にしたい時は、superglobals_variables_flgをfalseにして、if文の条件式の「|| (path=="Superglobals.undefined"&&superglobals_variables_flg)」の前に、「|| labels[0]["children"][0]["text"]=="$_SESSION"」みたいな条件を書き加えれば良いです。
(こんなことするなら、デベロッパーツールで見たり、console.logで表示する方が楽かもしれませんが・・・)