Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

[インデックス 13083] ファイルの概要

このコミットは、Goプロジェクトのmisc/chrome/gophertoolというChrome拡張機能に対する2つの修正を含んでいます。具体的には、Code Review (CL) 番号の認識範囲の下限値を調整し、macOS上のChromeブラウザにおける入力フィールドのフォーカス問題を修正しています。

コミット

commit 6dfe0162a659d75bf83379dd03c040ae8666b9a5
Author: Shenghou Ma <minux.ma@gmail.com>
Date:   Thu May 17 04:22:44 2012 +0800

    misc/chrome/gophertool: lower CL number's lower bound and fix input focus on Mac
    As our CL number could be as small as 152046, changed CL number's lower bound
    to 150000. Hopefully our issue count won't reach 150000 any time soon.
    Chrome on Mac OS X has very strange behavior regarding the focus, although we
    force the focus to the input box on load, the page still come up with focus on
    "issue". Set the tabindex of the input box as a workaround.
    
    R=golang-dev, bradfitz
    CC=golang-dev
    https://golang.org/cl/6212055

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/6dfe0162a659d75bf83379dd03c040ae8666b9a5

元コミット内容

このコミットは、GoプロジェクトのChrome拡張機能であるgophertoolにおいて、以下の2つの問題を解決します。

  1. CL番号の下限値の引き下げ: GoプロジェクトのCL番号が152046という小さな値になる可能性があるため、CL番号と認識する下限値を1,000,000から150,000に引き下げました。
  2. Mac版Chromeでの入力フォーカス問題の修正: macOS上のChromeブラウザで、ページロード時に強制的に入力ボックスにフォーカスを当てても、「issue」という要素にフォーカスが当たってしまう奇妙な挙動を修正するため、入力ボックスにtabindex属性を設定するワークアラウンドを適用しました。

変更の背景

このコミットは、Goプロジェクトの開発ワークフローにおける利便性と互換性の向上を目的としています。

CL番号の下限値の変更の背景: Goプロジェクトでは、コードレビューシステム(当時はGoogle Code Review、現在はGerrit)を通じて変更が管理されており、各変更セットには一意の「Change List (CL)」番号が割り当てられます。コミットメッセージによると、当時のCL番号が「152046」という比較的低い値になることが判明しました。しかし、gophertoolの既存のロジックでは、入力された数値が1,000,000未満の場合、それをGoプロジェクトのIssueトラッカーのIDとして扱っていました。このため、152046のようなCL番号が入力された際に、正しくCode ReviewのURLに変換されず、誤ってIssueのURLにリダイレクトされてしまう問題が発生していました。この問題を解決し、より広範なCL番号に対応するために、下限値を150,000に引き下げる必要がありました。コミットメッセージには「Hopefully our issue count won't reach 150000 any time soon.」とあり、Issue IDとCL番号の衝突を避けるための暫定的な措置であったことが伺えます。

Mac版Chromeでの入力フォーカス問題の背景: gophertoolの目的は、ユーザーが入力フィールドにCL番号やIssue IDなどを入力し、「go」ボタンを押すことで関連するGoプロジェクトのページに素早くナビゲートすることです。このユーザー体験を最適化するためには、拡張機能のポップアップが開いた際に、自動的に入力フィールドにフォーカスが当たり、ユーザーがすぐにタイピングを開始できることが望ましいです。しかし、macOS上のChromeブラウザでは、JavaScriptで明示的にフォーカスを設定しても、なぜか「issue」という別の要素にフォーカスが移ってしまうという奇妙な挙動が報告されました。これはユーザーが毎回手動で入力フィールドをクリックする必要があるため、使い勝手を損ねていました。この問題を回避し、期待通りのフォーカス挙動を実現するために、HTMLのtabindex属性を利用したワークアラウンドが導入されました。

前提知識の解説

CL (Change List) 番号

CL番号(Change List number)は、Google内部およびGoプロジェクトのようなGoogleが関与するオープンソースプロジェクトで広く使用されている、コード変更の単位を識別するためのユニークな番号です。これは、GitにおけるコミットハッシュやGitHubにおけるプルリクエスト番号に似ていますが、Googleのコードレビューシステム(Gerritや以前のMondrian/Appspot Code Review)と密接に連携しています。

開発者は、コードの変更を提案する際に「チェンジリスト」を作成し、それにCL番号が割り当てられます。このチェンジリストは、レビューのために提出され、承認されると最終的にメインのコードベースにマージされます。CL番号は、特定の変更セットを指し示すための永続的な識別子として機能します。

このコミットの文脈では、gophertoolが入力された数値がCL番号なのか、それともGoプロジェクトのIssueトラッカーのIssue IDなのかを判断するために、このCL番号の概念が用いられています。

misc/chrome/gophertool

misc/chrome/gophertoolは、Goプロジェクトのリポジトリ内のmiscディレクトリに存在する、Chromeブラウザ用の拡張機能です。この拡張機能は、Go開発者がGo関連の様々なリソース(GoのIssueトラッカー、Code Review、コミットログ、パッケージドキュメントなど)に素早くアクセスできるように設計されています。

ユーザーは、この拡張機能のポップアップに数値や文字列を入力することで、対応するGoのIssueページ、Code Reviewページ、またはその他の関連ページに直接ナビゲートできます。例えば、CL番号を入力すればそのCode Reviewページへ、Issue IDを入力すればそのIssueページへ、といった具合です。

tabindex属性

tabindexはHTMLのグローバル属性の一つで、要素がキーボードナビゲーション(Tabキーなど)によってフォーカス可能であるかどうか、およびそのフォーカス順序を定義するために使用されます。

  • tabindex="0": 要素がキーボードナビゲーションによってフォーカス可能になり、そのフォーカス順序はドキュメントのソース順序に従います。
  • tabindex="-1": 要素はプログラム的に(JavaScriptのfocus()メソッドなどによって)フォーカス可能になりますが、キーボードナビゲーションではスキップされます。
  • tabindex="正の整数": 要素がキーボードナビゲーションによってフォーカス可能になり、そのフォーカス順序はtabindexの値が小さいものから大きいものへと決定されます。同じtabindex値を持つ要素間では、ドキュメントのソース順序が適用されます。

このコミットでは、tabindex="1"が入力ボックスに設定されています。これは、その入力ボックスがキーボードナビゲーションにおいて最も優先的にフォーカスされるべき要素であることを示唆しています。これにより、macOS上のChromeで発生していた、意図しない要素にフォーカスが当たってしまう問題を回避し、ユーザーが拡張機能のポップアップを開いた際に、すぐにテキスト入力ができるようにするワークアラウンドとして機能します。

技術的詳細

CL番号の認識ロジックの変更

gopher.js内のurlForInput関数は、ユーザーが入力した文字列が数値である場合に、それがGoのIssue IDなのか、それともCode ReviewのCL番号なのかを判断し、適切なURLを生成する役割を担っています。

変更前は、入力された数値t1000000(100万)未満の場合にIssue IDとして扱われ、それ以上の場合にCode ReviewのCL番号として扱われていました。これは、GoプロジェクトのIssue IDが通常は比較的若い番号であり、Code ReviewのCL番号はそれよりも大きな番号になるという当時の慣習に基づいていたと考えられます。

しかし、コミットメッセージにあるように、実際のCL番号が「152046」のように100万を下回るケースが発生しました。このため、既存のロジックでは152046のようなCL番号が誤ってIssue IDとして解釈され、http://code.google.com/p/go/issues/detail?id=152046のような誤ったURLが生成されてしまう問題がありました。

この問題を解決するため、条件式がt < 1000000からt < 150000に変更されました。これにより、150,000未満の数値はIssue IDとして、150,000以上の数値はCode ReviewのCL番号として扱われるようになります。この「150000」という値は、当時の実際のCL番号の最小値(152046)を考慮し、かつ将来的にIssue IDがこの値に達する可能性が低いという予測に基づいて設定された暫定的な閾値です。

Mac版Chromeでの入力フォーカス問題の解決

popup.htmlは、gophertoolのポップアップUIを定義するHTMLファイルです。このファイルには、ユーザーがCL番号やIssue IDなどを入力するための<input type="text" id="inputbox" />要素が含まれています。

通常、JavaScriptのfocus()メソッドなどを使用して、ページロード時に入力フィールドに自動的にフォーカスを当てることができます。しかし、コミットメッセージによると、macOS上のChromeブラウザでは、この自動フォーカスが期待通りに機能せず、代わりに「issue」というテキストリンク(おそらく<a href="#" onclick="openURL('http://code.google.com/p/go/issues/')">issue</a>のような要素)にフォーカスが当たってしまうという特異な挙動が見られました。これは、ブラウザの内部的なフォーカス管理ロジックや、特定の要素のレンダリング順序、あるいはJavaScriptの実行タイミングなど、複数の要因が絡み合って発生する可能性のある問題です。

この問題を解決するために、入力フィールドである<input id="inputbox" ... />要素にtabindex="1"属性が追加されました。tabindex="1"を設定することで、この入力フィールドはキーボードナビゲーションにおいて最も優先的にフォーカスされる要素として扱われます。これにより、ブラウザがページをロードし、フォーカス可能な要素を決定する際に、明示的にこの入力ボックスが最初にフォーカスされるべき要素であると指示され、macOS上のChromeでの奇妙なフォーカス挙動が回避されるワークアラウンドとなります。

コアとなるコードの変更箇所

diff --git a/misc/chrome/gophertool/gopher.js b/misc/chrome/gophertool/gopher.js
index 847c1c70d6..3238f0fccd 100644
--- a/misc/chrome/gophertool/gopher.js
+++ b/misc/chrome/gophertool/gopher.js
@@ -12,7 +12,7 @@ function urlForInput(t) {
     }
 
     if (numericRE.test(t)) {
-        if (t < 1000000) {
+        if (t < 150000) {
             return "http://code.google.com/p/go/issues/detail?id=" + t;
         }\n        return "http://codereview.appspot.com/" + t + "/";
diff --git a/misc/chrome/gophertool/popup.html b/misc/chrome/gophertool/popup.html
index 4816c392be..a569392d0d 100644
--- a/misc/chrome/gophertool/popup.html
+++ b/misc/chrome/gophertool/popup.html
@@ -48,7 +48,7 @@ function openURL(url) {
 <a href="#" onclick="openURL('http://codereview.appspot.com/')">codereview</a>,
 <a href="#" onclick="openURL('http://code.google.com/p/go/source/list')">commit</a>, or
 <a href="#" onclick="openURL('http://golang.org/pkg/')">pkg</a> id/name:</small>
-<form style='margin: 0' onsubmit="return navigate();"><nobr><input id="inputbox" size=10 /><input type="submit" value="go" /></nobr></form>
+<form style='margin: 0' onsubmit="return navigate();"><nobr><input id="inputbox" size=10 tabindex=1 /><input type="submit" value="go" /></nobr></form>
 <small>Also: <a href="#" onclick="openURL('http://build.golang.org/')">buildbots</small>
 </body>
 </html>

コアとなるコードの解説

misc/chrome/gophertool/gopher.js の変更

 if (numericRE.test(t)) {
-        if (t < 1000000) {
+        if (t < 150000) {
             return "http://code.google.com/p/go/issues/detail?id=" + t;
         }
         return "http://codereview.appspot.com/" + t + "/";

このJavaScriptコードスニペットは、ユーザーが入力した値tが数値である場合に、それがIssue IDなのかCL番号なのかを判別し、適切なURLを返すロジックを含んでいます。

  • 変更前 (t < 1000000): 以前は、入力された数値が1,000,000未満であればGoのIssue IDとして扱い、http://code.google.com/p/go/issues/detail?id=にそのIDを付加して返していました。1,000,000以上であればCode ReviewのCL番号として扱い、http://codereview.appspot.com/にCL番号を付加して返していました。
  • 変更後 (t < 150000): このコミットにより、閾値が1,000,000から150,000に引き下げられました。これにより、150,000未満の数値はIssue IDとして、150,000以上の数値はCode ReviewのCL番号として扱われるようになります。この変更は、実際のCL番号が152046のように100万を下回るケースに対応し、gophertoolがCL番号を正しくCode ReviewのURLに変換できるようにするために行われました。

misc/chrome/gophertool/popup.html の変更

-<form style='margin: 0' onsubmit="return navigate();"><nobr><input id="inputbox" size=10 /><input type="submit" value="go" /></nobr></form>
+<form style='margin: 0' onsubmit="return navigate();"><nobr><input id="inputbox" size=10 tabindex=1 /><input type="submit" value="go" /></nobr></form>

このHTMLコードスニペットは、gophertoolのポップアップUIにおける入力フォームの定義です。

  • 変更前 (<input id="inputbox" size=10 />): 以前は、入力フィールドである<input>要素にはidsize属性のみが設定されていました。
  • 変更後 (<input id="inputbox" size=10 tabindex=1 />): このコミットにより、<input>要素にtabindex="1"属性が追加されました。このtabindex属性は、キーボードナビゲーションにおける要素のフォーカス順序を制御します。tabindex="1"を設定することで、この入力ボックスがページ内で最も優先的にフォーカスされるべき要素であることをブラウザに明示的に指示します。これにより、macOS上のChromeで発生していた、ポップアップ表示時に意図しない要素にフォーカスが当たってしまう問題を回避し、ユーザーがすぐにテキスト入力を行えるようにするワークアラウンドとして機能します。

関連リンク

参考にした情報源リンク