Remember The Milk のキーボード・ショートカットを分かり易く表示する

すっごく今更ですけど Remember The Milk を使ってみました。 思い立ったのが今日の朝なので1日も使ってませんけど、しばらく使ってみることにします。
使うからにはキーボード・ショートカットを使ってサクサクっと編集したいのですけど、キーボード・ショートカットとか覚えたくない。 というか覚えられない。 というわけでそれっぽいところにキーボード・ショートカットを表示するユーザー・スタイルシートを自分用に書いてみました。 例によって userstyles.org に上げてあります。

• Remember The Milk - display keyboard shortcuts | Userstyles.org

ちなみにコードは以下。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.rememberthemilk.com") {
  #detailstitle_highlight[title]::after {
    content: " (r)";
    color: #575757;
    font-weight: normal;
  }
  #detailsdue::after       { content: " (d)"; }
  #detailsreoccur::after   { content: " (f)"; }
  #detailsduration::after  { content: " (g)"; }
  #detailstags::after      { content: " (s)"; }
  #detailslocation::after  { content: " (l)"; }
  #detailsurl::after       { content: " (u)"; }
  #detailspostponed::after { content: " (p)"; }
  #detailsnotes::after     { content: " (y)"; }

  #tasksToolbox > .xtoolbox_selector > a:first-child::after { content: " (a)"; }
  #tasksToolbox > .xtoolbox_selector > a:last-child::after  { content: " (n)"; }
  #addEntry > a::after { content: " (t)"; }

  #tasktabs:after, #detailstabs::after {
    content: "(h)";
    line-height: 2;
    margin: 0 0.5em;
  }

  #searchtogglewrap::before {
    content: "(C-S-/) ";
    margin-left: -10em;
  }

  #viewSelector > a[href="#section.overview"]::after  { content: " (C-S-6)"; }
  #viewSelector > a[href="#section.tasks"]::after     { content: " (C-S-7)"; }
  #viewSelector > a[href="#section.locations"]::after { content: " (C-S-8)"; }
  #viewSelector > a[href="#section.contacts"]::after  { content: " (C-S-9)"; }
  #viewSelector > a[href="#section.settings"]::after  { content: " (C-S-0)"; }
  #viewSelector > a::after { font-size: 80%; }
  #appheaderlogo { position: absolute !important; }
  #topnav { position: relative !important; }

  #statusboxUndo > a::after { content: " (z)"; }

  #tasksToolbox > .xtoolbox_actions > form > div::after {
    content: " Complete (c), Postpone (p)";
    color: #757575;
  }
  #tasksToolbox::after {
    content: "Up (k), Down (j), Select (i), Undo (z), Multi-edit (m)";
    color: #757575;
    display: block;
    margin: 5px 0 -1.5em 20px;
  }
}

これを書くにあたっては Firebug が大活躍でした。 DOM Inspector よりずっど使いやすい。 ほとんど疑似要素になっちゃいましたけど、 Greasemonkey でやるべきだったかな。

2007-01-13 11:55 更新

上に表示される名前が長い名前の場合にロゴの後ろに隠れてしまっていたのを修正しました。

2007-01-14 19:18 更新

変更時に出てくる黄色いボックスの中の「とりけす」にも表示するようにしました。