Version 2.1

Also mentioned HTML hinting in readme file

CodeMirror-3.1/addon/hint/simple-hint.css

@@ -1,16 +0,0 @@
-.CodeMirror-completions {
-  position: absolute;
-  z-index: 10;
-  overflow: hidden;
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-}
-.CodeMirror-completions select {
-  background: #fafafa;
-  outline: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font-family: monospace;
-}

CodeMirror-3.11/addon/hint/show-hint.css

@@ -0,0 +1,38 @@
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  border-radius: 3px;
+  border: 1px solid silver;
+
+  background: white;
+  font-size: 90%;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  max-width: 19em;
+  overflow: hidden;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+
+.CodeMirror-hint-active {
+  background: #08f;
+  color: white;
+}

CodeMirror-3.11/lib/codemirror.css

@@ -41,6 +41,7 @@
 
 .CodeMirror div.CodeMirror-cursor {
   border-left: 1px solid black;
+  z-index: 3;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
@@ -49,17 +50,14 @@
 .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
   width: auto;
   border: 0;
-  background: transparent;
+  background: #7e7;
-  background: rgba(0, 200, 0, .4);
+  z-index: 1;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
-}
-/* Kludge to turn off filter in ie9+, which also accepts rgba */
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) {
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 }
 /* Can style cursor different in overwrite (non-insert) mode */
 .CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
 
+.cm-tab { display: inline-block; }
+
 /* DEFAULT THEME */
 
 .cm-s-default .cm-keyword {color: #708;}
@@ -90,7 +88,6 @@
 .cm-positive {color: #292;}
 .cm-header, .cm-strong {font-weight: bold;}
 .cm-em {font-style: italic;}
-.cm-emstrong {font-style: italic; font-weight: bold;}
 .cm-link {text-decoration: underline;}
 
 .cm-invalidchar {color: #f00;}
@@ -107,6 +104,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   line-height: 1;
   position: relative;
   overflow: hidden;
+  background: white;
+  color: black;
 }
 
 .CodeMirror-scroll {
@@ -153,6 +152,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 .CodeMirror-gutter {
   height: 100%;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
   display: inline-block;
   /* Hack to make IE7 behave */
   *zoom:1;
@@ -169,7 +170,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
   border-width: 0;
   background: transparent;
   font-family: inherit;

CodeMirror-3.11/theme/ambiance.css

@@ -46,7 +46,6 @@
   background-color: #202020;
   -webkit-box-shadow: inset 0 0 10px black;
   -moz-box-shadow: inset 0 0 10px black;
-  -o-box-shadow: inset 0 0 10px black;
   box-shadow: inset 0 0 10px black;
 }
 

CodeMirror-3.11/theme/eclipse.css

@@ -1,4 +1,3 @@
-.cm-s-eclipse.CodeMirror {background: #fff; color: #000;}
 .cm-s-eclipse span.cm-meta {color: #FF1717;}
 .cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
 .cm-s-eclipse span.cm-atom {color: #219;}

CodeMirror-3.11/theme/elegant.css

@@ -1,4 +1,3 @@
-.cm-s-elegant.CodeMirror {background: #fff; color: #000;}
 .cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;}
 .cm-s-elegant span.cm-comment {color: #262; font-style: italic; line-height: 1em;}
 .cm-s-elegant span.cm-meta {color: #555; font-style: italic; line-height: 1em;}

CodeMirror-3.11/theme/erlang-dark.css

@@ -7,15 +7,15 @@
 .cm-s-erlang-dark span.cm-atom       { color: #845dc4; }
 .cm-s-erlang-dark span.cm-attribute  { color: #ff80e1; }
 .cm-s-erlang-dark span.cm-bracket    { color: #ff9d00; }
-.cm-s-erlang-dark span.cm-builtin    { color: #eeaaaa; }
+.cm-s-erlang-dark span.cm-builtin    { color: #eaa; }
-.cm-s-erlang-dark span.cm-comment    { color: #7777ff; }
+.cm-s-erlang-dark span.cm-comment    { color: #77f; }
-.cm-s-erlang-dark span.cm-def        { color: #ee77aa; }
+.cm-s-erlang-dark span.cm-def        { color: #e7a; }
 .cm-s-erlang-dark span.cm-error      { color: #9d1e15; }
 .cm-s-erlang-dark span.cm-keyword    { color: #ffee80; }
 .cm-s-erlang-dark span.cm-meta       { color: #50fefe; }
 .cm-s-erlang-dark span.cm-number     { color: #ffd0d0; }
-.cm-s-erlang-dark span.cm-operator   { color: #dd1111; }
+.cm-s-erlang-dark span.cm-operator   { color: #d11; }
 .cm-s-erlang-dark span.cm-string     { color: #3ad900; }
 .cm-s-erlang-dark span.cm-tag        { color: #9effff; }
 .cm-s-erlang-dark span.cm-variable   { color: #50fe50; }
-.cm-s-erlang-dark span.cm-variable-2 { color: #ee00ee; }
+.cm-s-erlang-dark span.cm-variable-2 { color: #e0e; }

CodeMirror-3.11/theme/neat.css

@@ -1,4 +1,3 @@
-.cm-s-neat.CodeMirror { background: #fff; color: #000; }
 .cm-s-neat span.cm-comment { color: #a86; }
 .cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: blue; }
 .cm-s-neat span.cm-string { color: #a22; }

CodeMirror-3.11/theme/xq-light.css

@@ -0,0 +1,43 @@
+/*
+Copyright (C) 2011 by MarkLogic Corporation
+Author: Mike Brevoort <mike@brevoort.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+.cm-s-xq-light span.cm-keyword {line-height: 1em; font-weight: bold; color: #5A5CAD; }
+.cm-s-xq-light span.cm-atom {color: #6C8CD5;}
+.cm-s-xq-light span.cm-number {color: #164;}
+.cm-s-xq-light span.cm-def {text-decoration:underline;}
+.cm-s-xq-light span.cm-variable {color: black; }
+.cm-s-xq-light span.cm-variable-2 {color:black;}
+.cm-s-xq-light span.cm-variable-3 {color: black; }
+.cm-s-xq-light span.cm-property {}
+.cm-s-xq-light span.cm-operator {}
+.cm-s-xq-light span.cm-comment {color: #0080FF; font-style: italic;}
+.cm-s-xq-light span.cm-string {color: red;}
+.cm-s-xq-light span.cm-meta {color: yellow;}
+.cm-s-xq-light span.cm-error {color: #f00;}
+.cm-s-xq-light span.cm-qualifier {color: grey}
+.cm-s-xq-light span.cm-builtin {color: #7EA656;}
+.cm-s-xq-light span.cm-bracket {color: #cc7;}
+.cm-s-xq-light span.cm-tag {color: #3F7F7F;}
+.cm-s-xq-light span.cm-attribute {color: #7F007F;}
+
+.cm-s-xq-light .CodeMirror-activeline-background {background: #e8f2ff !important;}
+.cm-s-xq-light .CodeMirror-matchingbracket {border:1px solid grey;color:black !important;background:yellow;}

README.md

@@ -44,7 +44,7 @@ You can run ICEcoder either online or locally, on Linux, Windows or Mac based pl
 * Shell terminal
 * JS Hint validation as you type
 * Emmet snippet typing booster
-* JavaScript code hinting
+* HTML & JavaScript code hinting
 * Alphanumeric tab sorting
 * Tag wrappers
 * Config template

editor.php

@@ -1,18 +1,18 @@
 <?php include("lib/settings.php");?>
 <!DOCTYPE html>
 
-<html style="margin: 0" onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false; top.ICEcoder.tabDragEnd()" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'editor');top.ICEcoder.canResizeFilesW()}">
+<html style="margin: 0" onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false; if (!top.ICEcoder.overCloseLink) {top.ICEcoder.tabDragEnd()}" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'editor');top.ICEcoder.canResizeFilesW()}">
 <head>
 <title>ICEcoder v <?php echo $ICEcoder["versionNo"];?> editor</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="robots" content="noindex, nofollow">
 <link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/lib/codemirror.css">
-<link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/addon/hint/simple-hint.css">
+<link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/addon/hint/show-hint.css">
 <!--
 codemirror-compressed.js
 incls:	codemirror
 modes:	clike, coffeescript, css, javascript, less, php, ruby & xml
-utils:	foldcode, searchcursor, match-highlighter, simple-hint, javascript-hint, closetag
+utils:	closetag, foldcode, xml-fold, brace-fold, show-hint, javascript-hint, html-hint, searchcursor, match-highlighter
 //-->
 <script src="<?php echo $ICEcoder["codeMirrorDir"]; ?>/lib/codemirror-compressed.js"></script>
 <?php
@@ -98,7 +98,7 @@ $activeLineBG = array_search($ICEcoder["theme"],array("eclipse","elegant","neat"
 		}
 	},1000);
 	</script>
-	<?php if(is_dir('test')) {?>
+	<?php if(is_dir('test') && !$ICEcoder['demoMode']) {?>
 	<div style="clear: both">
 		<br><br>
 		<h2 style="color: rgba(0,198,255,0.7)">test suite</h2>
@@ -117,7 +117,9 @@ CodeMirror.keyMap.ICEcoder = {
 };
 CodeMirror.commands.autocomplete = function(cm) {
 	if (top.ICEcoder.caretLocType=="JavaScript") {
-		CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
+		CodeMirror.showHint(cm, CodeMirror.javascriptHint);
+	} else {
+		CodeMirror.showHint(cm, CodeMirror.htmlHint);
 	}
 }
 

files.php

@@ -1,7 +1,7 @@
 <?php include("lib/settings.php");?>
 <!DOCTYPE html>
 
-<html onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false; top.ICEcoder.tabDragEnd()" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'files');top.ICEcoder.canResizeFilesW()}" onContextMenu="top.ICEcoder.rightClickedFile=top.ICEcoder.thisFileFolderLink; return top.ICEcoder.showMenu()" onClick="top.ICEcoder.selectFileFolder()">
+<html onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false; if (!top.ICEcoder.overCloseLink) {top.ICEcoder.tabDragEnd()}" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'files');top.ICEcoder.canResizeFilesW()}" onContextMenu="top.ICEcoder.rightClickedFile=top.ICEcoder.thisFileFolderLink; return top.ICEcoder.showMenu()" onClick="top.ICEcoder.selectFileFolder()">
 <head>
 <title>ICEcoder v <?php echo $ICEcoder["versionNo"];?> file manager</title>
 <meta name="robots" content="noindex, nofollow">

index.php

@@ -16,7 +16,7 @@ if ($ICEcoder["checkUpdates"]) {
 }
 ?>
 <!DOCTYPE html>
-<html onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false;top.ICEcoder.tabDragEnd()" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'top');top.ICEcoder.canResizeFilesW()}">
+<html onMouseDown="top.ICEcoder.mouseDown=true" onMouseUp="top.ICEcoder.mouseDown=false; if (!top.ICEcoder.overCloseLink) {top.ICEcoder.tabDragEnd()}" onMouseMove="if(top.ICEcoder) {top.ICEcoder.getMouseXY(event,'top');top.ICEcoder.canResizeFilesW()}">
 <head>
 <title>ICEcoder v <?php echo $ICEcoder["versionNo"];?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -130,7 +130,7 @@ if (file_exists(dirname(__FILE__)."/plugins/jshint/jshint.js")) {
 		<a nohref onClick="top.ICEcoder.alphaTabs()"><img src="images/nav-alpha.png" class="alphaTabs" title="Alphabetize tabs"></a>
 		<?php
 		for ($i=1;$i<=100;$i++) {
-			echo '<div id="tab'.$i.'" class="tab" onMouseDown="ICEcoder.canSwitchTabs ? ICEcoder.switchTab(parseInt(this.id.slice(3),10)) : ICEcoder.canSwitchTabs=true; thisColor=\'#000\'; ICEcoder.tabDragStart(parseInt(this.id.slice(3),10))" onMouseOver="thisColor=this.style.color;this.style.color=\'#000\'" onMouseOut="this.style.color=thisColor"></div>';
+			echo '<div id="tab'.$i.'" class="tab" onMouseDown="ICEcoder.canSwitchTabs ? ICEcoder.switchTab(parseInt(this.id.slice(3),10)) : ICEcoder.canSwitchTabs=true; thisColor=\'#000\'; if (!top.ICEcoder.overCloseLink) {ICEcoder.tabDragStart(parseInt(this.id.slice(3),10))}" onMouseOver="thisColor=this.style.color;this.style.color=\'#000\'" onMouseOut="this.style.color=thisColor"></div>';
 		}
 		?><div class="newTab" onClick="ICEcoder.newTab()" id="newTab"><img src="images/nav-new.png"></div>
 	</div>
@@ -164,7 +164,7 @@ if (file_exists(dirname(__FILE__)."/plugins/jshint/jshint.js")) {
 			</div>
 		</form>
 		<form onSubmit="return ICEcoder.goToLine()">
-			<div class="codeAssist"><input type="checkbox" name="codeAssist" id="codeAssist" checked onClick="top.ICEcoder.codeAssistToggle()">Code Assist</div>
+			<div class="codeAssist" title="Turn on/off JS Hint &amp; CSS color previews"><input type="checkbox" name="codeAssist" id="codeAssist" checked onClick="top.ICEcoder.codeAssistToggle()">Code Assist</div>
 			<div class="goLine">Go to Line<input type="text" name="goToLine" value="" id="goToLineNo" class="textbox goToLine">
 		</form>
 	</div>
@@ -172,8 +172,8 @@ if (file_exists(dirname(__FILE__)."/plugins/jshint/jshint.js")) {
 </div>
 
 <div class="footer" id="footer" onContextMenu="return false">
-	<div class="nesting" id="nestValid">Nesting OK</div>
+	<div class="nesting" id="nestValid"></div>
-	<div class="nestLoc">cursor nest location</div>
+	<div class="nestLoc" id="nestDisplayText"></div>
 	<div class="nestDisplay" id="nestDisplay"></div>
 	<div class="charDisplay" id="charDisplay"><span id="char"></span></div>
 </div>

lib/config-template.php

@@ -18,8 +18,10 @@ $ICEcoder = array(
 			array("Emmet","plugins/emmet/icon.png","margin-top: 3px","http://docs.emmet.io","_blank",""),
 			array("ICErepo","plugins/ice-repo/icon.png","margin-top: 3px","plugins/ice-repo","_blank",""),
 			array("Dochub","plugins/dochub/icon.png","margin-top: 3px","http://dochub.io","_blank",""),
+			array("Voke","plugins/voke/icon.png","margin-top: 3px","http://voke.fm","_blank",""),
 			array("JS Regex","plugins/jsregex/icon.png","margin-top: 3px","http://jsregex.herokuapp.com","_blank",""),
 			array("wireframe|cc","plugins/wireframecc/icon.png","margin-top: 3px","http://wireframe.cc","_blank",""),
+			array("TinyPNG","plugins/tinypng/icon.png","margin-top: 7px","http://tinypng.org","_blank",""),
 			array("Zip It!","plugins/zip-it/icon.png","margin-top: 3px; margin-left: 3px","plugins/zip-it/?zip=|&exclude=*.doc*.gif*.jpg*.jpeg*.pdf*.png*.swf*.xml*.zip","fileControl:<b>Zipping Files</b>","30")
 			),
 "theme"			=> "default",

lib/help.php

@@ -16,17 +16,12 @@
 <a href="javascript:top.ICEcoder.showManual('<?php echo $ICEcoder["versionNo"];?>')" style="position: absolute; top: 26px; right: 20px"><div style="padding: 10px; background: #2187e7; color: #fff; font-size: 18px">ICEcoder manual</div></a>
 
 <div style="display: inline-block; width: 365px; margin-right: 20px">
-	<h2>Within file manager</h2>
-	<span class="key">Left click</span> <span class="shortcut">Select file / folder</span><br>
-	<span class="key">Double click</span> <span class="shortcut">Open file</span><br>
-	<span class="key">CTRL <span class="plus">+</span> click</span> <span class="shortcut">Multiple select</span><br>
-	<span class="key">Right click</span> <span class="shortcut">Options for selected</span><br>
-	<span class="key">Delete</span> <span class="shortcut">Delete selected</span><br><br><br>
-
 	<h2>Within document</h2>
 	<span class="key">CTRL <span class="plus">+</span> &uarr;</span> <span class="shortcut">Move line up</span><br>
 	<span class="key">CTRL <span class="plus">+</span> &darr;</span> <span class="shortcut">Move line down</span><br>
-	<span class="key">CTRL <span class="plus">+</span> I</span> <span class="shortcut">Search selected text</span><br>
+	<span class="key">CTRL <span class="plus">+</span> +</span> <span class="shortcut">Duplicate line</span><br>
+	<span class="key">CTRL <span class="plus">+</span> -</span> <span class="shortcut">Remove line</span><br>
+	<span class="key">CTRL <span class="plus">+</span> i</span> <span class="shortcut">Search selected text</span><br>
 	<span class="key">Esc</span> <span class="shortcut">Comment / uncomment text</span><br>
 	<span class="key">Tab</span> <span class="shortcut">Insert tab / indent selected text</span><br>
 	<span class="key">CTRL <span class="plus">+</span> Alt <span class="plus">+</span> d</span> <span class="shortcut">Wrap selected in &lt;div&gt;</span><br>
@@ -42,22 +37,31 @@
 </div>
 
 <div style="display: inline-block; width: 365px">
+	<h2>On logo</h2>
+	<span class="key">Left click</span> <span class="shortcut">Help</span><br>
+	<span class="key">Right click</span> <span class="shortcut">Settings</span><br><br>
+
+	<h2>Within file manager</h2>
+	<span class="key">Left click</span> <span class="shortcut">Select file / folder</span><br>
+	<span class="key">Double click</span> <span class="shortcut">Open file</span><br>
+	<span class="key">CTRL <span class="plus">+</span> left click</span> <span class="shortcut">Multiple select</span><br>
+	<span class="key">Right click</span> <span class="shortcut">Options for selected</span><br>
+	<span class="key">Delete</span> <span class="shortcut">Delete selected</span><br><br>
+
 	<h2>Anywhere</h2>
 	<span class="key">CTRL <span class="plus">+</span> &rarr;</span> <span class="shortcut">Next tab</span><br>
 	<span class="key">CTRL <span class="plus">+</span> &larr;</span> <span class="shortcut">Previous tab</span><br>
 	<span class="key">CTRL <span class="plus">+</span> +</span> <span class="shortcut">New tab</span><br>
 	<span class="key">CTRL <span class="plus">+</span> -</span> <span class="shortcut">Close current tab</span><br>
-	<span class="key">CTRL <span class="plus">+</span> F</span> <span class="shortcut">Find</span><br>
+	<span class="key">CTRL <span class="plus">+</span> o</span> <span class="shortcut">Open file prompt</span><br>
-	<span class="key">CTRL <span class="plus">+</span> G</span> <span class="shortcut">Go to line</span><br>
+	<span class="key">CTRL <span class="plus">+</span> f</span> <span class="shortcut">Find</span><br>
-	<span class="key">CTRL <span class="plus">+</span> S</span> <span class="shortcut">Save</span><br>
+	<span class="key">CTRL <span class="plus">+</span> g</span> <span class="shortcut">Focus on Go to line input</span><br>
-	<span class="key">CTRL <span class="plus">+</span> Shift <span class="plus">+</span> S</span> <span class="shortcut">Save as...</span><br>
+	<span class="key">CTRL <span class="plus">+</span> s</span> <span class="shortcut">Save</span><br>
+	<span class="key">CTRL <span class="plus">+</span> Shift <span class="plus">+</span> s</span> <span class="shortcut">Save as...</span><br>
 	<span class="key">CTRL <span class="plus">+</span> Enter</span> <span class="shortcut">View webpage</span><br>
-	<span class="key">CTRL <span class="plus">+</span> S <span class="plus">+</span> Enter</span> <span class="shortcut">Save & create sticky tab</span><br>
+	<span class="key">CTRL <span class="plus">+</span> s <span class="plus">+</span> Enter</span> <span class="shortcut">Save & create sticky tab</span><br>
-	<span class="key">Esc</span> <span class="shortcut">Cancel tasks</span><br><br><br>
+	<span class="key">Esc</span> <span class="shortcut">Cancel tasks</span><br>
 
-	<h2>On logo</h2>
-	<span class="key">Left click</span> <span class="shortcut">Help</span><br>
-	<span class="key">Right click</span> <span class="shortcut">Settings</span><br>
 </div>
 
 </body>

lib/ice-coder.css

@@ -1,158 +1,171 @@
-/* First, reset everything to a standard */
+/* First, reset everything to a standard */
-html, body, div, span, applet, object, iframe,
+html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
+a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
+small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
+b, u, i, center,
-dl, dt, dd, ol, ul, li,
+dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
+fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
+table, caption, tbody, tfoot, thead, tr, th, td {
-	font-family: arial, verdana, helvetica, sans-serif;
+	font-family: arial, verdana, helvetica, sans-serif;
-	border: 0;
+	border: 0;
-	margin: 0;
+	margin: 0;
-	padding: 0;
+	padding: 0;
-	outline: 0;
+	outline: 0;
-	font-size: 12px;
+	font-size: 12px;
-	vertical-align: top;
+	vertical-align: top;
-}
+}
-
+
-body {overflow: hidden;
+body {overflow: hidden;
-	-webkit-user-select: none;
+	-webkit-user-select: none;
-	-moz-user-select: none;
+	-moz-user-select: none;
-	user-select: none;
+	user-select: none;
-	background-color: #222;
+	background-color: #222;
-}
+}
-
+
-h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
+h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
-h2 {font-size: 18px; font-weight: normal; color: #fff}
+h2 {font-size: 18px; font-weight: normal; color: #fff}
-
+
-.blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
+.blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
-.blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
+.blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
-.popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
+.popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
-.whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
+.whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
-
+
-.circleOutside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #2187e7;
+.circleOutside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #2187e7;
-	width:50px; height:50px; margin:0 auto; -moz-animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear;
+	width:50px; height:50px; margin:0 auto; -moz-animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear;
-}
+}
-.circleInside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7;
+.circleInside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7;
-	width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear;
+	width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear;
-}
+}
-@-moz-keyframes spin {
+@-moz-keyframes spin {
-	0% {-moz-transform:rotate(0deg)}
+	0% {-moz-transform:rotate(0deg)}
-	100% {-moz-transform:rotate(360deg)}
+	100% {-moz-transform:rotate(360deg)}
-}
+}
-@-moz-keyframes spinoff {
+@-moz-keyframes spinoff {
-	0% {-moz-transform:rotate(0deg)}
+	0% {-moz-transform:rotate(0deg)}
-	100% {-moz-transform:rotate(-360deg)}
+	100% {-moz-transform:rotate(-360deg)}
-}
+}
-@-webkit-keyframes spin {
+@-webkit-keyframes spin {
-	0% {-webkit-transform:rotate(0deg)}
+	0% {-webkit-transform:rotate(0deg)}
-	100% {-webkit-transform:rotate(360deg)}
+	100% {-webkit-transform:rotate(360deg)}
-}
+}
-@-webkit-keyframes spinoff {
+@-webkit-keyframes spinoff {
-	0% {-webkit-transform:rotate(0deg)}
+	0% {-webkit-transform:rotate(0deg)}
-	100% {-webkit-transform:rotate(-360deg)}
+	100% {-webkit-transform:rotate(-360deg)}
-}
+}
-
+
-.progressBar {position:absolute; top: 0; left: 0; width:100%; height:1px; margin:2px 0; background:#2187e7; box-shadow:0 0 10px 1px rgba(0,198,255,0.7)}
+.progressBar {position:absolute; top: 0; left: 0; width:100%; height:1px; margin:2px 0; background:#2187e7; box-shadow:0 0 10px 1px rgba(0,198,255,0.7)}
-@-moz-keyframes fullexpand {
+@-moz-keyframes fullexpand {
-	0%  {width:0}
+	0%  {width:0}
-	100%{width:100%}	
+	100%{width:100%}	
-}
+}
-@-webkit-keyframes fullexpand {
+@-webkit-keyframes fullexpand {
-	0%  {width:0}
+	0%  {width:0}
-	100%{width:100%}	
+	100%{width:100%}	
-}
+}
-
+
-.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; text-align: right; z-index: 2}
+.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; text-align: right; z-index: 2}
-.header .plugins {position: absolute; display: inline-block; left: 15px; top: 3px}
+.header .plugins {position: absolute; display: inline-block; left: 15px; top: 3px}
-.header .plugins img {position: relative; display: inline-block; margin-right: 15px}
+.header .plugins img {position: relative; display: inline-block; margin-right: 15px}
-.header .screenModeIcon {position: absolute; top: 5px; right: 178px; cursor: pointer}
+.header .screenModeIcon {position: absolute; top: 5px; right: 178px; cursor: pointer}
-.header .version {position: relative; display: inline-block; margin-top: 25px; font-size: 10px; color: #bbb}
+.header .version {position: relative; display: inline-block; margin-top: 25px; font-size: 10px; color: #bbb}
-.header .version a {font-size: 10px; color: #bbb; text-decoration: none}
+.header .version a {font-size: 10px; color: #bbb; text-decoration: none}
-.header .logo {position: relative; margin: 5px 10px 0 5px; cursor: pointer}
+.header .logo {position: relative; margin: 5px 10px 0 5px; cursor: pointer}
-
+
-.files {position: absolute; display: inline-block; top: 0; left: 0; height: 100%; width: 250px; background-color: #444; background-image: url('../images/files-arrow.png'); background-repeat: no-repeat; background-position: 100% 50%; overflow: hidden; z-index: 1;
+.files {position: absolute; display: inline-block; top: 0; left: 0; height: 100%; width: 250px; background-color: #444; background-image: url('../images/files-arrow.png'); background-repeat: no-repeat; background-position: 100% 50%; overflow: hidden; z-index: 1;
-	box-shadow: 0 50px 10px 4px rgba(0,0,0,0.4);
+	box-shadow: 0 50px 10px 4px rgba(0,0,0,0.4);
-}
+}
-.files .account {display: inline-block; height: 50px; width: 250px; margin-top: 40px; background-color: #888}
+.files .account {display: inline-block; height: 50px; width: 250px; margin-top: 40px; background-color: #888}
-.files .accountOptions {position: relative; height: 32px; width: 100%; margin-left: 15px; margin-top: 8px}
+.files .accountOptions {position: relative; height: 32px; width: 100%; margin-left: 15px; margin-top: 8px}
-.files .accountOptions div {display: inline-block; background: url('../images/file-manager-icons.png') 0 0 no-repeat; cursor: pointer}
+.files .accountOptions div {display: inline-block; background: url('../images/file-manager-icons.png') 0 0 no-repeat; cursor: pointer}
-.files .accountOptions .save {width: 30px; height: 32px; opacity: 0.3}
+.files .accountOptions .save {width: 30px; height: 32px; opacity: 0.3}
-.files .accountOptions .open {width: 25px; height: 32px; background-position: -32px -3px; margin: 3px 0 0 7px; opacity: 0.3}
+.files .accountOptions .open {width: 25px; height: 32px; background-position: -32px -3px; margin: 3px 0 0 7px; opacity: 0.3}
-.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 10px; opacity: 0.3}
+.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 10px; opacity: 0.3}
-.files .accountOptions .newFolder {width: 20px; height: 16px; background-position: -80px 0; margin: 8px 0 0 5px; opacity: 0.3}
+.files .accountOptions .newFolder {width: 20px; height: 16px; background-position: -80px 0; margin: 8px 0 0 5px; opacity: 0.3}
-.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3}
+.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3}
-.files .accountOptions .rename {width: 16px; height: 16px; background-position: -116px 0; margin: 8px 0 0 5px; opacity: 0.3}
+.files .accountOptions .rename {width: 16px; height: 16px; background-position: -116px 0; margin: 8px 0 0 5px; opacity: 0.3}
-.files .accountOptions .view {width: 16px; height: 16px; background-position: -132px 0; margin: 8px 0 0 5px; opacity: 0.3}
+.files .accountOptions .view {width: 16px; height: 16px; background-position: -132px 0; margin: 8px 0 0 5px; opacity: 0.3}
-.files .accountOptions .lock {position: relative; margin-left: 208px; margin-top: -27px; width: 12px; height: 16px; background-position: -64px -16px; z-index: 1}
+.files .accountOptions .lock {position: relative; margin-left: 208px; margin-top: -27px; width: 12px; height: 16px; background-position: -64px -16px; z-index: 1}
-.files input:focus, .findReplace input:focus, .findReplace select:focus, .accountPassword:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
+.files input:focus, .findReplace input:focus, .findReplace select:focus, .accountPassword:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
-.files .button {position: absolute; border: 0; background: #444; color: #eee; height:20px; margin-top: 16px; margin-left: 5px; font-size: 11px; cursor: pointer}
+.files .button {position: absolute; border: 0; background: #444; color: #eee; height:20px; margin-top: 16px; margin-left: 5px; font-size: 11px; cursor: pointer}
-.files .button:hover {background-color: #222; color: #eee}
+.files .button:hover {background-color: #222; color: #eee}
-.files .frame {display: inline-block; width: 250px}
+.files .frame {display: inline-block; width: 250px}
-.files .serverMessage {position: absolute; display: none; width: 450px; bottom: 0; margin-bottom: 30px; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 7px 12px; opacity: 0;
+.files .serverMessage {position: absolute; display: none; width: 450px; bottom: 0; margin-bottom: 30px; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 7px 12px; opacity: 0;
-	-webkit-transition: opacity 0.2s;
+	-webkit-transition: opacity 0.2s;
-	-moz-transition: opacity 0.2s;
+	-moz-transition: opacity 0.2s;
-	transition: opacity 0.2s;
+	transition: opacity 0.2s;
-}
+}
-.files .serverMessage b {font-size: 10px}
+.files .serverMessage b {font-size: 10px}
-
+
-.editor {position: absolute; display: inline-block; top: 0; left: 15px; width: 2400px}
+.editor {position: absolute; display: inline-block; top: 0; left: 15px; width: 2400px}
-.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 40px; padding-left: 41px; background: #ddd}
+.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 40px; padding-left: 41px; background: #ddd}
-.tabsBar .tab {position: absolute; display: none; background: url('../images/nav-bg.jpg') repeat-x 0 0; padding: 5px 8px 2px 8px; font-size: 10px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 1}
+.tabsBar .tab {position: absolute; display: none; background: url('../images/nav-bg.jpg') repeat-x 0 0; padding: 5px 8px 2px 8px; font-size: 10px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 1;
-.tabsBar .tabSlide {
+	-webkit-transition: width 0.15s ease-in-out;
-	-webkit-transition: left 0.15s ease-in-out;
+	-moz-transition: width 0.15s ease-in-out;
-	-moz-transition: left 0.15s ease-in-out;
+	transition: width 0.15s ease-in-out;
-	transition: left 0.15s ease-in-out;
+	-webkit-transition: left 0.15s ease-in-out;
-}
+	-moz-transition: left 0.15s ease-in-out;
-.tabsBar .tabDrag {
+	transition: left 0.15s ease-in-out;
-	-webkit-transition: left 0s ease-in-out;
+}
-	-moz-transition: left 0s ease-in-out;
+.tabsBar .tabSlide {
-	transition: left 0s ease-in-out;
+	-webkit-transition: left 0.15s ease-in-out;
-}
+	-moz-transition: left 0.15s ease-in-out;
-.tabsBar .tab .closeTab, .tabsBar .closeAllTabs {margin: 1px 0 0 5px; border-radius: 6px; cursor: pointer}
+	transition: left 0.15s ease-in-out;
-.tabsBar .tab .closeTab {position: absolute; right: 7px}
+}
-.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -17px; background: #bbb; border-radius: 6px; cursor: pointer}
+.tabsBar .tabDrag {
-.tabsBar .alphaTabs:hover {background: #000}
+	-webkit-transition: left 0s ease-in-out;
-.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -33px; background: #bbb}
+	-moz-transition: left 0s ease-in-out;
-.tabsBar .closeAllTabs:hover {background: #000}
+	transition: left 0s ease-in-out;
-.tabsBar .newTab {position: absolute; display: inline-block; background-image: url('../images/nav-bg.jpg'); background-repeat: repeat-x; background-position: 0 0; padding: 6px 5px 5px 5px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; cursor: pointer; z-index: 1}
+}
-.editor .findBar {display: inline-block; height: 28px; width: 2400px; color: #fff; background-color: #141414}
+.tabsBar .tab .closeTab, .tabsBar .closeAllTabs {margin: 1px 0 0 5px; border-radius: 6px; cursor: pointer}
-.findBar .findReplace {position: absolute; z-index: 1}
+.tabsBar .tab .closeTab {position: absolute; right: 7px}
-.findReplace select {position: relative; font-size: 10px; margin: 8px 2px 0 2px; top: -2px;}
+.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -17px; background: #bbb; border-radius: 6px; cursor: pointer}
-.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 8px 2px 0 2px; margin-left: 43px}
+.tabsBar .alphaTabs:hover {background: #000}
-.findReplace .find {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px; margin-right: 3px}
+.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -33px; background: #bbb}
-.findReplace .replaceAction {margin: 0 2px 0 0; top: -2px}
+.tabsBar .closeAllTabs:hover {background: #000}
-.findReplace .replaceText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
+.tabsBar .newTab {position: absolute; display: inline-block; background-image: url('../images/nav-bg.jpg'); background-repeat: repeat-x; background-position: 0 0; padding: 6px 5px 5px 5px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 4px 4px 0 0; cursor: pointer; z-index: 1;
-.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px}
+	-webkit-transition: left 0.15s ease-in-out;
-.findReplace .targetText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
+	-moz-transition: left 0.15s ease-in-out;
-.findReplace .submit {position: relative; top: -2px; height: 17px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer}
+	transition: left 0.15s ease-in-out;
-.findReplace .submit:hover {background-color: #2187e7; color: #eee}
+}
-.findReplace .results {position: relative; display: inline-block; width: 200px; height: 20px; font-size: 10px; margin: 8px 0 0 20px}
+.editor .findBar {display: inline-block; height: 28px; width: 2400px; color: #fff; background-color: #141414}
-.findBar .codeAssist {position: fixed; display: inline-block; width: 100px; right: 74px; top: 70px; height: 21px; font-size: 10px; z-index: 1}
+.findBar .findReplace {position: absolute; z-index: 1}
-.findBar .codeAssist input {margin-top: -1px}
+.findReplace select {position: relative; font-size: 10px; margin: 8px 2px 0 2px; top: -2px;}
-.findBar .goLine {position: fixed; display: inline-block; width: 100px; right: -10px; top: 70px; height: 21px; font-size: 10px; z-index: 1}
+.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 8px 2px 0 2px; margin-left: 43px}
-.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px}
+.findReplace .find {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px; margin-right: 3px}
-.goLine .goToLine:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
+.findReplace .replaceAction {margin: 0 2px 0 0; top: -2px}
-.editor .code {position: relative; display: inline-block; top: 28px; width: 600px; height: 600px; visibility: hidden}
+.findReplace .replaceText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
-
+.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px}
-.footer {position: fixed; display: inline-block; width: 100%; height: 30px; bottom: 0; background-color: rgba(0,0,0,0.7); left: 0; z-index: 2}
+.findReplace .targetText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
-.footer .nesting {display: inline-block; padding: 5px 8px; margin: 4px 0 0 15px; font-weight: bold; font-size: 10px; color: #fff; background-color: #0b0}
+.findReplace .submit {position: relative; top: -2px; height: 17px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer}
-.footer .nestLoc {position: absolute; display: inline-block; width: 120px; padding: 5px 0 0 8px; margin-top: 2px; left: 112px; font-weight: bold; font-size: 12px; color: #fff; text-align: right}
+.findReplace .submit:hover {background-color: #2187e7; color: #eee}
-.footer .nestDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 0px; left: 255px; font-size: 12px; color: #fff; text-align: right}
+.findReplace .results {position: relative; display: inline-block; width: 200px; height: 20px; font-size: 10px; margin: 8px 0 0 20px}
-.footer .charDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 3px; left: 100%; font-weight: bold; font-size: 12px; color: #fff; text-align: right; width: 200px; text-align: right; margin-left: -220px}
+.findBar .codeAssist {position: fixed; display: inline-block; width: 100px; right: 74px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1}
-
+.findBar .codeAssist input {margin-top: -1px}
-.textbox {box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.4)}
+.findBar .goLine {position: fixed; display: inline-block; width: 100px; right: -10px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1}
-
+.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px}
-.fileMenu {position: absolute; display: none; left: 0; top: 0; background-color: #333; z-index: 10}
+.goLine .goToLine:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
-.fileMenu a {display: block; padding: 2px 5px; background-color: #333; color: #eee; text-decoration: none}
+.editor .code {position: relative; display: inline-block; top: 28px; width: 600px; height: 600px; visibility: hidden}
-.fileMenu a:hover {background-color: #666}
+
-
+.footer {position: fixed; display: inline-block; width: 100%; height: 30px; bottom: 0; background-color: rgba(0,0,0,0.7); left: 0; z-index: 2}
-.screenContainer {position: absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
+.footer .nesting {display: inline-block; padding: 5px 8px; margin: 4px 0 0 15px; font-weight: bold; font-size: 10px; color: #fff; background-color: #0b0; cursor: default}
-.screenContainer .screenVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
+.footer .nestLoc {position: absolute; display: inline-block; width: 120px; padding: 5px 0 0 8px; margin-top: 2px; left: 112px; font-weight: bold; font-size: 12px; color: #fff; text-align: right; cursor: default}
-.screenVCenter .screenCenter {#position: relative; #top: -50%; text-align: center; display: inline}
+.footer .nestDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 0px; left: 255px; font-size: 12px; color: #fff; text-align: right}
-.screenCenter .version {position: relative; display: block; margin: 5px 0 15px 0; font-size: 10px; color: #bbb}
+.footer .charDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 3px; left: 100%; font-weight: bold; font-size: 12px; color: #fff; text-align: right; width: 200px; text-align: right; margin-left: -220px; cursor: default}
-.screenCenter .accountPassword {border: 0; background-color: #333; color: #fff; height: 20px}
+
-.screenCenter .button {border: 0; background: #444; color: #eee; height: 22px; cursor: pointer}
+.textbox {box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.4)}
+
+.fileMenu {position: absolute; display: none; left: 0; top: 0; background-color: #333; z-index: 10}
+.fileMenu a {display: block; padding: 2px 5px; background-color: #333; color: #eee; text-decoration: none}
+.fileMenu a:hover {background-color: #666}
+
+.screenContainer {position: absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
+.screenContainer .screenVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
+.screenVCenter .screenCenter {#position: relative; #top: -50%; text-align: center; display: inline}
+.screenCenter .version {position: relative; display: block; margin: 5px 0 15px 0; font-size: 10px; color: #bbb}
+.screenCenter .text {position: relative; display: block; margin-top: 15px; font-size: 10px; color: #888}
+.screenCenter .text input {margin-top: 1px}
+.screenCenter .accountPassword {border: 0; background-color: #333; color: #fff; height: 20px}
+.screenCenter .button {border: 0; background: #444; color: #eee; height: 22px; cursor: pointer}
 .screenCenter .button:hover {background: #2187e7; color: #eee}

lib/ice-coder.js

@@ -35,7 +35,7 @@ var ICEcoder = {
 
 	// Set our aliases
 	initAliases: function() {
-		var aliasArray = ["header","files","account","fmLock","filesFrame","editor","tabsBar","findBar","content","footer","nestValid","nestDisplay","charDisplay"];
+		var aliasArray = ["header","files","account","fmLock","filesFrame","editor","tabsBar","findBar","content","footer","nestValid","nestDisplayText","nestDisplay","charDisplay"];
 
 		// Create our ID aliases
 		for (var i=0;i<aliasArray.length;i++) {
@@ -284,7 +284,7 @@ var ICEcoder = {
 
 	// Highlight or hide block upon roll over/out of nest positions
 	highlightBlock: function(nestPos,hide) {
-		var cM, searchPos, cursor, startPos, endPos;
+		var cM, searchPos, cursor, cursorTemp, startPos, endPos;
 
 		cM = top.ICEcoder.getcMInstance();
 		// Hiding the block
@@ -309,13 +309,10 @@ var ICEcoder = {
 				cursor.findPrevious();
 				searchPos.ch = cursor.from().ch;
 				searchPos.line = cursor.from().line;
-				if (i==nestPos && 1==2) {
+				if (i==nestPos) {
-					cursorX = cM.getSearchCursor(">",searchPos);
+					cursorTemp = cM.getSearchCursor(">",searchPos);
-					cursorX.findNext();
+					cursorTemp.findNext();
-					searchPosX = new Object();
+					cM.setCursor(cursorTemp.from().line, cursorTemp.from().ch+1);
-					searchPosX.ch = cursorX.from().ch+1;
-					searchPosX.line = cursorX.from().line;
-					cM.setCursor(searchPosX);
 					top.ICEcoder.getNestLocation();
 					if (ICEcoder.htmlTagArray.length-1 != nestPos) {
 						i++;
@@ -393,6 +390,28 @@ var ICEcoder = {
 		cM.setLine(line,cM.getLine(line)+"<br>");
 	},
 
+	// Duplicate line
+	duplicateLine: function(line) {
+		var cM, ch;
+
+		cM = ICEcoder.getcMInstance();
+		if (!line) {line = cM.getCursor().line};
+		ch = cM.getCursor().ch;
+		cM.setLine(line,cM.getLine(line)+"\n"+cM.getLine(line));
+		cM.setCursor(line+1,ch);
+	},
+
+	// Remove line
+	removeLine: function(line) {
+		var cM, ch;
+
+		cM = ICEcoder.getcMInstance();
+		if (!line) {line = cM.getCursor().line};
+		ch = cM.getCursor().ch;
+		cM.removeLine(line);
+		cM.setCursor(line-1,ch);
+	},
+
 // ==============
 // FILES
 // ==============
@@ -562,6 +581,15 @@ var ICEcoder = {
 		}
 	},
 
+	// Show file prompt to open file
+	openPrompt: function() {
+		var fileLink;
+
+		if(fileLink = top.ICEcoder.getInput('Enter relative file path prefixed with /','')) {
+			top.ICEcoder.openFile(fileLink);
+		}
+	},
+
 	// Save a file
 	saveFile: function(saveAs) {
 		var saveType;
@@ -589,7 +617,7 @@ var ICEcoder = {
 			if(i>-1) {
 				// rename array item and the tab
 				top.ICEcoder.openFiles[i] = newName;
-				closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
+				closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'; top.ICEcoder.overCloseLink=true" onMouseOut="this.style.backgroundColor=prevBG; top.ICEcoder.overCloseLink=false"></a>';
 				fileName = top.ICEcoder.openFiles[i];
 				top.document.getElementById('tab'+(i+1)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
 				top.document.getElementById('tab'+(i+1)).title = newName;
@@ -685,7 +713,7 @@ var ICEcoder = {
 		var actionElemType, cssStyle, perms, targetElem, locNest, newText, innerLI, newUL, newLI, elemType, nameLI, shortURL, newMouseOver;
 
 		// Adding files
-		if (action=="add") {
+		if (action=="add" && !document.getElementById('filesFrame').contentWindow.document.getElementById(location.replace(/\/$/, "").replace(/\//g,"|")+"|"+file)) {
 			// Is this is a file or folder and based on that, set the CSS styling & link
 			actionElemType = file.indexOf(".")>-1 ? "file" : "folder";
 			cssStyle = actionElemType=="file" ? "pft-file ext-" + file.substr(file.indexOf(".")+1) : "pft-directory";
@@ -974,43 +1002,51 @@ var ICEcoder = {
 
 	// Work out the nesting depth location on demand and update our display if required
 	getNestLocation: function(updateNestDisplay) {
-		var cM, nestCheck, state, cx, startPos, fileName;
+		var cM, nestCheck, state, cx, startPos, fileName, events;
 
 		cM = ICEcoder.getcMInstance();
-		nestCheck = cM.getValue();
+		if (cM) {
+			nestCheck = cM.getValue();
 
-		// Set up array to store nest data
+			// Set up array to store nest data
-		state = cM.getTokenAt(cM.getCursor()).state;
+			state = cM.getTokenAt(cM.getCursor()).state;
-		if ("undefined" != typeof state.curState) {
+			if ("undefined" != typeof state.curState) {
-			ICEcoder.htmlTagArray = [];
+				ICEcoder.htmlTagArray = [];
-			for (cx = state.curState.context; cx; cx = cx.prev) {
+				for (cx = state.curState.context; cx; cx = cx.prev) {
-				if ("undefined" != typeof cx.tagName) {
+					if ("undefined" != typeof cx.tagName) {
-					ICEcoder.htmlTagArray.unshift(cx.tagName);
+						ICEcoder.htmlTagArray.unshift(cx.tagName);
+					}
 				}
 			}
-		}
+			ICEcoder.tagString = ICEcoder.htmlTagArray[ICEcoder.htmlTagArray.length-1];
-		ICEcoder.tagString = ICEcoder.htmlTagArray[ICEcoder.htmlTagArray.length-1];
+			if (ICEcoder.caretLocType=="JavaScript") {
-		if (ICEcoder.caretLocType=="JavaScript") {
+				ICEcoder.tagString = "script";
-			ICEcoder.tagString = "script";
+			}
-		}
 
-		// Now we've built up our nest depth array, if we're due to show it in the display
+			// Now we've built up our nest depth array, if we're due to show it in the display
-		if (updateNestDisplay && !top.ICEcoder.dontUpdateNest) {
+			if (updateNestDisplay && !top.ICEcoder.dontUpdateNest) {
-			// Clear the display
+				// Clear the display
-			ICEcoder.nestDisplay.innerHTML = "";
+				ICEcoder.nestDisplayText.innerHTML = "";
-			if ("undefined" != typeof ICEcoder.openFiles[ICEcoder.selectedTab-1]) {
+				ICEcoder.nestDisplay.innerHTML = "";
-				fileName = ICEcoder.openFiles[ICEcoder.selectedTab-1];
+				if ("undefined" != typeof ICEcoder.openFiles[ICEcoder.selectedTab-1]) {
-				if (["js","coffee","rb","css","less"].indexOf(fileName.split(".")[1])<0 &&
+					fileName = ICEcoder.openFiles[ICEcoder.selectedTab-1];
-					(nestCheck.indexOf("include(")==-1)&&(nestCheck.indexOf("include_once(")==-1)&&
+					if (["js","coffee","rb","css","less"].indexOf(fileName.split(".")[1])<0 &&
-					(nestCheck.indexOf("<html")>-1||nestCheck.indexOf("<body")>-1)) {
+						(nestCheck.indexOf("include(")==-1)&&(nestCheck.indexOf("include_once(")==-1)&&
+						(nestCheck.indexOf("<html")>-1||nestCheck.indexOf("<body")>-1)) {
 
-					// Then for all the array items, output as the nest display
+						ICEcoder.nestDisplayText.innerHTML = ICEcoder.htmlTagArray.length > 0 ? "Cursor Position" : "";
-					for (var i=0;i<ICEcoder.htmlTagArray.length;i++) {
+						// Then for all the array items, output as the nest display
-						if (i==0) {ICEcoder.nestDisplay.innerHTML += '<div style="display: inline-block; width: 7px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif)"></div>'};
+						for (var i=0;i<ICEcoder.htmlTagArray.length;i++) {
-						ICEcoder.nestDisplay.innerHTML += '<a onMouseover="top.ICEcoder.highlightBlock('+i+')" onMouseout="top.ICEcoder.highlightBlock('+i+',\'hide\')" onClick="top.ICEcoder.setPosition('+i+',top.ICEcoder.startPosLine,\''+ICEcoder.htmlTagArray[i]+'\')" style="display: inline-block; cursor: pointer; background: #333; padding: 7px 2px 7px 7px; margin-top: -5px; height: 30px">'+ICEcoder.htmlTagArray[i]+'</a>';
+							events = 'onMouseover="top.ICEcoder.highlightBlock('+i+')" onMouseout="top.ICEcoder.highlightBlock('+i+',\'hide\')" onClick="top.ICEcoder.setPosition('+i+',top.ICEcoder.startPosLine,\''+ICEcoder.htmlTagArray[i]+'\')"';
-						ICEcoder.nestDisplay.innerHTML += i<ICEcoder.htmlTagArray.length-1
+							if (i==0) {ICEcoder.nestDisplay.innerHTML += '<div '+events+' style="display: inline-block; width: 7px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif)"></div>'};
-						? '<div style="display: inline-block; width: 8px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif); background-position: -7px 0"></div>'
+							ICEcoder.nestDisplay.innerHTML += '<a '+events+' style="display: inline-block; cursor: pointer; background: #333; padding: 7px 2px 7px 7px; margin-top: -5px; height: 30px">'+ICEcoder.htmlTagArray[i]+'</a>';
-						: '<div style="display: inline-block; width: 7px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif); background-position: -15px 0"></div>';
+							ICEcoder.nestDisplay.innerHTML += i<ICEcoder.htmlTagArray.length-1
+							? '<div '+events+' style="display: inline-block; width: 8px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif); background-position: -7px 0; cursor: pointer"></div>'
+							: '<div '+events+' style="display: inline-block; width: 7px; margin-top: -5px; height: 30px; background-image: url(images/nest-tag-bg.gif); background-position: -15px 0; cursor: pointer"></div>';
+						}
+						if ("undefined" != typeof state.curState && ICEcoder.htmlTagArray.length > 0) {
+							ICEcoder.nestDisplay.innerHTML += '<a style="display: inline-block; cursor: default; padding: 7px 2px 7px 7px; margin-top: -5px; height: 30px; color: #666">'+(state.curState.tagName ? state.curState.tagName : 'content')+'</a>';
+						}
 					}
 				}
 			}
@@ -1124,6 +1160,7 @@ var ICEcoder = {
 			top.ICEcoder.mouseX += top.ICEcoder.filesW;
 		}
 		top.ICEcoder.dragCursorTest();
+		if (top.ICEcoder.mouseY>62) {top.ICEcoder.setTabWidths();};
 	},
 
 	// Test if we need to show a drag cursor or not
@@ -1570,7 +1607,7 @@ var ICEcoder = {
 		top.ICEcoder.openFiles.push(top.ICEcoder.shortURL);
 
 		// Setup a new tab
-		closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
+		closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'; top.ICEcoder.overCloseLink=true" onMouseOut="this.style.backgroundColor=prevBG; top.ICEcoder.overCloseLink=false"></a>';
 		top.document.getElementById('tab'+(top.ICEcoder.openFiles.length)).style.display = "inline-block";
 		fileName = top.ICEcoder.openFiles[top.ICEcoder.openFiles.length-1];
 		top.document.getElementById('tab'+(top.ICEcoder.openFiles.length)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
@@ -1613,7 +1650,7 @@ var ICEcoder = {
 		top.ICEcoder.openFiles[tabNum-1] = newName;
 
 		// Setup a new tab
-		closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
+		closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'; top.ICEcoder.overCloseLink=true" onMouseOut="this.style.backgroundColor=prevBG; top.ICEcoder.overCloseLink=false"></a>';
 		fileName = top.ICEcoder.openFiles[tabNum-1];
 		top.document.getElementById('tab'+tabNum).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
 		top.document.getElementById('tab'+tabNum).title = "/" + top.ICEcoder.openFiles[tabNum-1].replace(/\//,"");
@@ -1643,6 +1680,7 @@ var ICEcoder = {
 	// Close the tab upon request
 	closeTab: function(closeTabNum, dontSetPV) {
 		var cM, okToRemove, closeFileName;
+
 		cM = ICEcoder.getcMInstance();
 		okToRemove = true;
 		if (ICEcoder.changedContent[closeTabNum-1]==1) {
@@ -1700,7 +1738,8 @@ var ICEcoder = {
 		// Lastly, stop it from trying to also switch tab
 		top.ICEcoder.canSwitchTabs=false;
 		// and set the widths
-		top.ICEcoder.setTabWidths();
+		top.ICEcoder.setTabWidths('posOnlyNewTab');
+		setTimeout(function() {top.ICEcoder.canSwitchTabs=true;},100);
 	},
 
 	// Close all tabs
@@ -1713,7 +1752,7 @@ var ICEcoder = {
 	},
 
 	// Set the tabs width
-	setTabWidths: function() {
+	setTabWidths: function(posOnlyNewTab) {
 		var availWidth, avgWidth, tabWidth, lastLeft, lastWidth;
 
 		availWidth = parseInt(top.ICEcoder.content.style.width,10)-41-24-10; // - left margin - new tab - right margin
@@ -1722,13 +1761,17 @@ var ICEcoder = {
 		lastLeft = 41;
 		lastWidth = 0;
 		top.ICEcoder.tabLeftPos = [];
-
 		for (var i=0;i<top.ICEcoder.openFiles.length;i++) {
+			if (posOnlyNewTab) {i=top.ICEcoder.openFiles.length};
 			tabWidth = top.ICEcoder.openFiles.length*(150+18) > availWidth ? parseInt(avgWidth*i,10) - parseInt(avgWidth*(i-1),10) : 150;
 			lastLeft = i==0 ? 41 : parseInt(top.document.getElementById('tab'+(i)).style.left,10);
 			lastWidth = i==0 ? 0 : parseInt(top.document.getElementById('tab'+(i)).style.width,10)+18;
-			top.document.getElementById('tab'+(i+1)).style.left = (lastLeft+lastWidth) + "px";
+			if (!posOnlyNewTab) {
-			top.document.getElementById('tab'+(i+1)).style.width = tabWidth + "px";
+				top.document.getElementById('tab'+(i+1)).style.left = (lastLeft+lastWidth) + "px";
+				top.document.getElementById('tab'+(i+1)).style.width = tabWidth + "px";
+			} else {
+				tabWidth = -18;
+			}
 			top.ICEcoder.tabLeftPos.push(lastLeft+lastWidth);
 		}
 		top.document.getElementById('newTab').style.left = (lastLeft+lastWidth+tabWidth+18) + "px";
@@ -1944,11 +1987,15 @@ var ICEcoder = {
 
 			// CTRL+I (Get info)
 			} else if(key==73 && top.ICEcoder.ctrlKeyDown==true && area == "content") {
-				var searchPrefix = "";
+				var searchPrefix = top.ICEcoder.caretLocType.toLowerCase()+" ";
-				if (top.ICEcoder.caretLocType!="Content") {
+				if (top.ICEcoder.caretLocType=="CSS"||top.ICEcoder.caretLocType=="PHP") {
-					searchPrefix = top.ICEcoder.caretLocType.toLowerCase()+" ";
+					window.open("http://voke.fm/"+searchPrefix+top.ICEcoder.getcMInstance().getSelection());
+				} else {
+					if (top.ICEcoder.caretLocType=="Content") {
+						searchPrefix = "";
+					}
+					window.open("http://www.google.com/#output=search&q="+searchPrefix+top.ICEcoder.getcMInstance().getSelection());
 				}
-				window.open("http://www.google.com/#output=search&q="+searchPrefix+top.ICEcoder.getcMInstance().getSelection());
 				top.ICEcoder.ctrlKeyDown = false;
 	        		return false;
 
@@ -1974,12 +2021,16 @@ var ICEcoder = {
 
 			// CTRL+numeric plus (New tab)
 			} else if(key==107 && top.ICEcoder.ctrlKeyDown==true) {
-				top.ICEcoder.newTab();
+				area=="content"
+				? top.ICEcoder.duplicateLine()
+				: top.ICEcoder.newTab();
 	        		return false;
 
 			// CTRL+numeric minus (Close tab)
 			} else if(key==109 && top.ICEcoder.ctrlKeyDown==true) {
-				top.ICEcoder.closeTab(top.ICEcoder.selectedTab);
+				area=="content"
+				? top.ICEcoder.removeLine()
+				: top.ICEcoder.closeTab(top.ICEcoder.selectedTab);
 	        		return false;
 
 			// CTRL+S (Save), CTRL+Shift+S (Save As)
@@ -2003,6 +2054,12 @@ var ICEcoder = {
 				top.ICEcoder.ctrlKeyDown = false;
 	        		return false;
 
+			// CTRL+O (Open Prompt)
+			} else if(key==79 && top.ICEcoder.ctrlKeyDown==true) {
+				top.ICEcoder.openPrompt();
+				top.ICEcoder.ctrlKeyDown = false;
+	        		return false;
+
 			// CTRL+Space (Show snippet)
 			} else if(key==32 && top.ICEcoder.ctrlKeyDown==true && area=="content") {
 				top.ICEcoder.addSnippet();

lib/settings.php

@@ -51,8 +51,8 @@ include(dirname(__FILE__)."/".$settingsFile);
 
 // Add ICEcoder settings to beginning of $ICEcoder array
 $ICEcoder = array(
-	"versionNo"		=> "2.0",
+	"versionNo"		=> "2.1",
-	"codeMirrorDir"		=> "CodeMirror-3.1",
+	"codeMirrorDir"		=> "CodeMirror-3.11",
 	"demoMode"		=> false
 )+$ICEcoder;
 
@@ -261,6 +261,11 @@ if ((!$_SESSION['loggedIn'] || $ICEcoder["accountPassword"] == "") && !strpos($_
 		$settingsContents = file_get_contents($settingsFile);
 		// Replace our empty password with the one submitted by user
 		$settingsContents = str_replace('"accountPassword"	=> "",','"accountPassword"	=> "'.$password.'",',$settingsContents);
+		// Also set the update checker preference
+		$checkUpdates = $_POST['checkUpdates']=="true" ? "true" : "false";
+		// once to cover the true setting, once to cover false
+		$settingsContents = str_replace('"checkUpdates"		=> true,','"checkUpdates"		=> '.$checkUpdates.',',$settingsContents);
+		$settingsContents = str_replace('"checkUpdates"		=> false,','"checkUpdates"		=> '.$checkUpdates.',',$settingsContents);
 		// Now update the config file
 		$fh = fopen($settingsFile, 'w') or die("Can't update config file. Please set public write permissions on ".$settingsFile." and press refresh");
 		fwrite($fh, $settingsContents);
@@ -295,6 +300,11 @@ echo $ICEcoder["accountPassword"] == "" ? "Setup" : "Login";
 		<form name="settingsUpdate" action="settings.php" method="POST">
 		<input type="password" name="<?php echo $ICEcoder["accountPassword"] == "" ? "account" : "login"; ?>Password" class="accountPassword"><br><br>
 		<input type="submit" name="submit" value="<?php echo $ICEcoder["accountPassword"] == "" ? "set password" : "login"; ?>" class="button">
+		<?php
+		if ($ICEcoder["accountPassword"] == "") {
+			echo '<div class="text"><input type="checkbox" name="checkUpdates" value="true" checked> auto-check for updates</div>';
+		}
+		?>
 		</form>
 		</div>
 	</div>