トップ > 大規模ソフトウェア(Chromium)を手探る - 設定画面(settings)を手探る1 -

大規模ソフトウェア(Chromium)を手探る - 設定画面(settings)を手探る1 -

電気系3年生後期実験「大規模ソフトウェアを手探る」でChromiumブラウザーをまさぐったお話です。

発表スライドがこちらになります。

docs.google.com

実験で取り組んだことの概要については、 大規模ソフトウェア(Chromium)を手探る 導入・ビルド編 - あさりさんの作業日記 をご参照ください。

akaria.hatenablog.com

そうだ、設定画面をいじろう

前の記事（大規模ソフトウェア(Chromium)を手探る user profileに設定を追加する - あさりさんの作業日記）までで、検索ボックスに表示される検索履歴から、指定したキーワードを含む履歴を表示しないようにすることができました。

残りのやることは、ユーザーが検索履歴非表示キーワードを指定できるようにするだけです。

今回は、Chromium内の設定画面にキーワード設定欄を追加することにしました。

f:id:elecho:20171027143347p:plain

課題1: どこを編集すれば良い？？？？

まず、Chromiumブラウザーの設定画面（chrome://settings/）のHTMLソースコードを見てみます。

あれ、たったの27行だけ？？でも、とりあえずL.22の<settings-ui></settings-ui>のというところでDOMを読み込んで表示されてそうですね。

そこで、「settings-ui」をCode Searchで検索してみると…

が見つかります。これを見ると、settings_ui.htmlではさらに

L.71〜<settings-menu></settings-menu>やL.82〜<settings-main></settings-main>が呼ばれていることがわかります。山勘をはって<settings-main></settings-main>の中身を見てみると、

src/chrome/browser/resources/settings/settings_main/settings_main.html

となっていて、どうやらL.43〜L.51<settings-basic-page></settings-basic-page>の中で定義されていそうです。

もう一度「settings-basic-page」をCode Searchでググると、

src/chrome/browser/resources/settings/basic_page/basic_page.html

ということで、どうやらいろんな項目が呼び出されていそうなページが出てきました。試しにひとつのDOMタグを消してみるとその項目が表示されなくなったので、このファイルをいじれば良さそうです。

※ちなみに、どのタグのなかでどの部分が定義されているかはCode SearchしなくてもChromiumのDeveloper tools（検証）を使えばできるはずなのですが、デバッグモードでビルドするとDeveloper toolsの挙動がものすごく重くなって話にならなかったので文字通りググりました。
他には、「検証」で出てきたタグを適当に選んでCode Searchに突っ込んでも良かったかもしれないですね。

（もう一回リリースモードでビルドし直してもいいんだけれど、フルビルドまたn時間かかるのか…う、頭が…）

課題2: 設定画面に表示を追加してみよう

課題1でいじる場所を見つけたので、設定画面を追加してみましょう。

といっても、どういじればいいのかわからないのでとりあえず他の設定項目をパクってきます。

どれをパクろうかと思ったとき、シンプルなやつがいいと思ったので、ファイルが3つしかなかった
src/chrome/browser/resources/settings/multidevice_page
f:id:elecho:20171029231728p:plain:w300

をパクることにしました。

ということで、まずはbasic_page.htmlを

src/chrome/browser/resources/settings/basic_page/basic_page.html

というように変更し、src/chrome/browser/resources/settings/restrict_keyword/ディレクトリを作ってその中にrestrict_keyword.html, restrick_keyword.jsを作って表示させようとしたものの、

動かず…！

どうしてかと思って、multidevice_pageのDOMモジュールである「settings-multidevice-page」でCode Search検索をかけてみると…

f:id:elecho:20171030011218p:plain

というようにいろいろなファイルを編集する必要がありそうでした…

ただ、このリストにはテストなどの直接は関係ないファイルも含まれているため、先ほど編集した本体の他に関係のあるファイルをまとめてみると、

があります。

あと、basic_page.html内の該当部分(L.282〜L.292)

<if expr="chromeos">
          <template is="dom-if"
              if="[[shouldShowMultidevice_(showMultidevice, pageVisibility)]]"
              restamp>
            <settings-section page-title="$i18n{multidevicePageTitle}"
                section="multidevice">
              <settings-multidevice-page prefs="{{prefs}}">
              </settings-multidevice-page>
            </settings-section>
          </template>
</if>

の中で

<settings-section ... section="multidevice">

となっているのもあやしいので、「src/chrome/browser/resources/settings/」ディレクトリ内で「multidevice」と検索してみると、他にも

といういかにもそれっぽいファイルが見つかりました。

これらのファイルを以下のように編集すると、

src/chrome/browser/resources/settings/settings_resources.grd

src/chrome/browser/resources/settings/multidevice_page/compiled_resources2.gyp（追加）

src/chrome/browser/resources/settings/route.js

無事、以下のように表示画面を追加できました。

f:id:elecho:20171030014911p:plain

大規模ソフトウェア(Chromium)を手探る - 設定画面(settings)を手探る2 - へ続く…

elecho.hatenablog.com