Light TableのHTML構造メモ（タグ名がないものはdiv）
全体構造
body
#loader //"起動時の画面。起動後はopacity: 0;"
#wrapper
#canvas
#multi //"中心部分"
.tabsets
.tabset
.tabset
...
span.button.fullscreen //"フルスクリーン時の閉じるボタン"
#statusbar-container
#side //"左サイドバー"
.content
.vertical-grip
#right-bar
.vertical-grip
.content
.command.selector
.clients //"Show connect barで表示される部分"
.navigate
.docs-serch.filter-list
#bottombar
.horizontal-grip
.content
.popup //"アプリ終了確認時のみ存在"
div
div
div
h2
p
ul.buttons
li.button //"Discard changes"
li.button //"cancel"
#sideの構造
# side > .content
.workspace //"Workspaceの表示があるときのみ存在"
.wstree
ul.buttons
ul.root //"メインの箇所。左サイドバーほぼ全体"
.tree-root //"ツリー表示の部分全体"
ul.opened
li //"ディレクトリ1"
input.rename //"rename時のテキストフィールド"
.tree-item
p //"ファイル名表示部分。ディレクトリの場合、p.folder"
div
ul.sub //"開いているとき、ul.sub.opened"
li //"上のliの構造と同じになる"
li //"ディレクトリ2"
...
.recent
#right-barの構造
# right-bar > .content
.command.selector
.selector
.filter-list
input.search
ul
li //"選択されている場合、li.selected"
p //"コマンド名と説明の表示"
p
p.binding //"ショートカットキーがあるときのみ存在"
...
.options //"syntaxの選択のようなオプション表示があるときに中身がある"
h2
div
.clients //"選択表示のときは、.clients.selecting"
.list //"接続済みリスト"
h2.toggle.add.button
ul
li
div
h2 //"タイトル"
.details
table
span.button
span.button.unset
...
.connector //"選択表示"
h2.toggle.button
ul
li
h2 //"タイトル"
p
...
.navigate //"Navigate"
.filter-list
input.search
ul
li
h2
p
...
.docs-search.filter-list //"search docs"
input.search
.types
ul.results
li
...
#bottombarの構造
# bottombar > .content
ul.console //"Consoleの表示があるときのみ存在"
li
table
tr
td.loc
em.file
td
pre
li.error //"エラー出力の場合"
pre
...
#multi > #statusbar-containerの構造
# statusbar-container
#find-bar
input.find
input.replace
button
ul#statusbar
li
span.pos //"右端の行数/列数"
li.left
.log
span.load-wrapper
span.img
span.message
li
span.console-toggle //"エラーがあるとき、span.console-toggle.error.dirty"
#multi > .tabsets > .tabsetの構造
.list //"タブ群"
ul
li //"タブ1つ。編集中（未保存）のとき、li.dirty"
span.file-name
span.tab-close
...
.items
.content //"Welcomeタブ"
#intro
h1
img
p
p
.content //"エディタのタブ"
.CodeMirror.CodeMirror-wrap
div
textarea //"エディタの現在のカーソル部分の入力欄"
.CodeMirror-hscrollbar
.CodeMirror-vscrollbar
.CodeMirror-scrollbar-filler
.CodeMirror-gutter-filler
.CodeMirror-scroll
.CodeMirror-sizer
div
.CodeMirror-lines
div
.CodeMirror-measure
.CodeMirror-measure
div
.CodeMirror-cursors
.CodeMirror-cursor
.CodeMirror-code
div //"エディタの1行。アクティブのときは、.CodeMirror-activeline"
.CodeMirror-gutter-wrapper //"行番号"
.CodeMirror-linenumber.CodeMirror-gutter-elt
pre //"1行の内容"
span
span
...
span.CodeMirror-widget //"インラインの結果がある場合"
span.inline-result.result-mark
span.truncated
span.full
...
div
.CodeMirror-gutters
.CodeMirror-gutter.CodeMirror-linenumbers
.content //"Pluginsタブ"
.plugin-manager //"Availableを表示しているときは、.plugin-manager.server"
.tabs
button
button
input
ul.server-plugins //"Available"
li
span.install
span.source
a
h1 //"タイトル"
span.version
h3 //"by..."
p
ul.plugins //"Installed"
.content //"Search resultsタブ"
.search-results
ul.res //"検索結果"
li
p.path
span.file
p.entry
span.line
pre
p.entry
...
...
.searcher
p
input.search
div
input.replace
button.replace
input.loc
.content //"Versionタブ"
#version-info
.info
.CodeMirror.CodeMirror-wrap
.content //"consoleタブ"
ul.console
li
.content //"browserタブ"
#browser
.frame-shade
iframe //"ブラウザ本体"
nav
button
button
input.url-bar
button
.content //"Docsタブ"
.docs
.frame-shade
iframe
.vertical-grip