Light TableのHTML構造

[Light Table](http://www.lighttable.com/)のHTML構造メモ（タグ名がないものはdiv）

# 全体構造

```css
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の構造

```css
#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の構造

```css
#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の構造

```css
#bottombar > .content
	ul.console //"Consoleの表示があるときのみ存在"
		li
			table
				tr
					td.loc
						em.file
					td
						pre
		li.error //"エラー出力の場合"
			pre
		...
```

# #multi > #statusbar-containerの構造

```css
#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の構造

```css
.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
```