文字列をまるめる

javascript Jetpack

Jetpack(Firefox?)のコンテキストメニューのlabelは62文字くらいで省略されてしまうのでUIを考えた。

jetpack.future.import("menu");
jetpack.menu.context.page.add("1234567890123456789012345678901234567890123456789012345678901234567890")

問題点

  • 絶対パスのように長い文字列を表示させたい場合に途中で切れてしまう。
    • 肝心のフォルダ名が省略されたら意味が無い。
  • 絶対パスの表示はユーザにとってあまり重要ではない。
    • 最初と最後のほうさえ確認できればよい。
  • ユーザには相対パスで表示する選択肢も用意する。

sample

任意の文字数に収まるように、真ん中を省略する関数を考えた。

function round_string(str, num) {
  let separator = "...", n = Math.floor((num - separator.length) / 2);
  return str.substr(0, n) + separator + str.substr(str.length - n);
}
jetpack.future.import("menu");
let path = "C:\\Users\\hoge\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\piyo.default\\JetpackFeatures";
let newPath = round_string(path, 50);
let aFile = Components.classes["@mozilla.org/file/local;1"].
              createInstance(Components.interfaces.nsILocalFile);
aFile.initWithPath(path);

jetpack.menu.context.page.add(path);    // length : 83
jetpack.menu.context.page.add(newPath); // length : 49
jetpack.menu.context.page.add(aFile.leafName);
結果

上、絶対パスをそのまま表示したもの。途中で省略されている。
中、round_string関数を使って50文字以内になるようにまるめた。
下、nsILocalFileオブジェクトを作ってleafNameプロパティから相対パスを得た。

感想

こっそり製作中のJetpack featureで使う。

関連