Merge pull request #61 from mkroehnert/bs3

Upgrade from Bootstrap 2 to Bootstrap 3

README.md

@@ -6,17 +6,38 @@ Helios IDE for Amber Smalltalk
 How to contribute
 ====
 
-There are two ways how to contribute. In both way you need to fork this repo first.
+Prerequisites
+===
 
-First way is by cloning your fork and setting it up (have `node` and `npm` installed,
-have `bower`, `grunt-cli` and `amber-cli` npm packages installed globally,
-then run `npm install`, `bower install` and `grunt devel` in the project directory,
-after what you can go the classical Amber project way of running `amber serve` from CLI
-and go to `http://localhost:4000/` in the browser). This way you can only contribute
-to Helios itself.
+The following packages need to be installed globally:
+
+* `node` (NodeJS)
+* `npm` (NodeJS package manager)
+* `bower` (JavaScript package manager)
+* `grunt-cli` (build packages on the commandline)
+* `amber-cli` (for serving and creating Amber applications)
+
+Helios development setup
+===
+
+There are two ways how to contribute. Both ways require forking this repo first and fetching all required packages via NPM and Bower.
+
+# `git clone https://github.com/amber-smalltalk/helios.git`
+# `cd helios`
+# `npm install`
+# `bower install`
+# `grunt devel`
+
+If you only want to contribute to Helios itself you can now run Helios as a regular Amber application by executing
+
+* `amber serve`
+
+and visiting `http://localhost:4000/` in the browser.
 
 As Helios is still coupled with Amber, you need occasionally make change to Amber itself,
-not just to Helios code. Thus, recommended way is to fork and clone Amber repository itself
-for development (see https://github.com/amber-smalltalk/amber/blob/master/CONTRIBUTING.md,
+not just to Helios code.
+The recommended way is to fork and clone Amber repository itself for development
+(see https://github.com/amber-smalltalk/amber/blob/master/CONTRIBUTING.md,
 "Setup your Amber clone" part and use your own fork in the "clone Helios" step).
-This allows you to develop Amber itself, `amber-cli` and Helios at once.
+This allows you to develop Amber itself, `amber-cli` and Helios simultaneously.
+

app.js

@@ -8,11 +8,13 @@ define([
     'css!codemirror/theme/ambiance',
     'css!codemirror/lib/codemirror',
     'css!codemirror/addon/hint/show-hint',
+    'typeahead',
     'jquery-ui',
-    'bootstrap2.3.2/js/bootstrap',
+    'bootstrap/dist/js/bootstrap',
+    'css!bootstrap/dist/css/bootstrap',
     './showdown',
     './all',
     'css!./resources/helios',
-	'css!./resources/helios-niflheim',
+    'css!./resources/helios-niflheim',
     'css!./resources/niflheim'
 ], function (amber) { return amber; });

bootstrap.amd.json

@@ -0,0 +1,10 @@
+{
+    "paths": {
+        "bootstrap": "."
+    },
+    "shim": {
+        "bootstrap/dist/js/bootstrap": {
+            "deps": [ "jquery", "css!bootstrap/dist/css/bootstrap" ]
+        }
+    }
+}

bootstrap2.3.2.amd.json

@@ -1,10 +0,0 @@
-{
-    "paths": {
-        "bootstrap2.3.2": "bootstrap"
-    },
-    "shim": {
-        "bootstrap2.3.2/js/bootstrap": {
-            "deps": [ "jquery", "css!bootstrap2.3.2/css/bootstrap" ]
-        }
-    }
-}

bower.json

@@ -13,9 +13,10 @@
     "amber-contrib-web": ">=0.1.0",
     "jquery": ">=1.7.0",
     "jquery-ui": ">=1.9.2",
-    "bootstrap2.3.2": "^2.3.2",
+    "bootstrap": "^3.3.4",
     "codemirror": "^4.7.0",
     "showdown": "^0.5.0",
-    "require-css": "^0.1.2"
+    "require-css": "^0.1.2",
+    "typeahead.js": "~0.10.5"
   }
 }

resources/helios.css

@@ -102,14 +102,35 @@ body[id="helios"] .buttons_bar .button {
   font-size: 12px;
   min-width: 0;
 }
-body[id="helios"] .btn,
-body[id="helios"] .btn-group > .btn,
+body[id="helios"] .btn.btn-default,
+body[id="helios"] .btn-group > .btn.btn-default,
 body[id="helios"] .btn-group > .dropdown-menu {
   padding: 2px 8px;
 }
 body[id="helios"] .navbar-fixed-top {
   font-size: 11px;
   line-height: 16px;
+  min-height: 25px;
+  margin: 0;
+  border: 0;
+}
+body[id="helios"] .navbar-fixed-top .navbar-header {
+  border: 0;
+  height: 25px;
+  width: 100%;
+  border-bottom: 1px solid #666;
+  box-shadow: inset 0px 2px 2px #aaa;
+  background: #bababa;
+}
+body[id="helios"] .navbar-fixed-top .navbar-header .nav-tabs {
+  height: 24px;
+}
+body[id="helios"] .navbar-fixed-top .navbar-header .nav-tabs > li > a {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  margin: 0;
+  height: 24px;
 }
 body[id="helios"] .navbar-fixed-top ul {
   width: 100%;
@@ -123,6 +144,15 @@ body[id="helios"] .dialog .nav a span {
   background-position: 0px center;
   height: 22px;
 }
+body[id="helios"] .navbar-fixed-top i {
+  opacity: 0.4;
+  margin-right: 5px;
+  height: 12px;
+  margin-top: 0;
+}
+body[id="helios"] .navbar-fixed-top .active i {
+  opacity: 0.6;
+}
 body[id="helios"] .navbar-fixed-top i.close {
   width: 14px;
   height: 16px;
@@ -156,17 +186,6 @@ body[id="helios"] .navbar-fixed-top a span.inspector,
 body[id="helios"] .dialog .nav a span.inspector {
   background-image: url('inspector.png');
 }
-body[id="helios"] .navbar-fixed-top .navbar-inner {
-  min-height: 24px;
-  border-bottom: 1px solid #666;
-  box-shadow: inset 0px 2px 2px #aaa;
-  background: #bababa;
-}
-body[id="helios"] .navbar .nav > li {
-  line-height: 16px;
-  text-align: center;
-  max-width: 300px;
-}
 body[id="helios"] .new_tab {
   width: 20px;
   height: 24px;
@@ -187,12 +206,27 @@ body[id="helios"] .new_tab .dropdown-menu {
   left: auto;
   float: right;
   right: 0;
+  margin: 0;
+  border: 0;
 }
 body[id="helios"] .dropdown-menu {
   min-width: 0;
   text-align: left;
 }
-body[id="helios"] .navbar .nav > li > a {
+body[id="helios"] .navbar-nav {
+  border: 0;
+}
+body[id="helios"] .navbar-nav > li {
+  line-height: 16px;
+  text-align: center;
+  max-width: 300px;
+}
+body[id="helios"] .navbar-nav .ui-sortable-handle a {
+  height: 24px;
+  border: 0;
+  border-left: 1px solid #777;
+}
+body[id="helios"] .navbar-nav > li > a {
   line-height: 22px;
   padding: 0px 8px;
   font-size: 11px;
@@ -200,14 +234,24 @@ body[id="helios"] .navbar .nav > li > a {
   text-shadow: #ddd 0px 1px 0px;
   color: #222;
 }
-body[id="helios"] .navbar .nav > li > a span {
+body[id="helios"] .navbar-nav > li > a span {
   display: block;
   overflow: hidden;
 }
 body[id="helios"] .nav > li > a:hover {
   background: transparent;
 }
-body[id="helios"] .navbar .nav > li > a:hover {
+body[id="helios"] .navbar-nav .ui-sortable-handle.inactive a {
+  color: #222;
+  background-image: linear-gradient(top, #bfbfbf, #b0b0b0);
+  background-image: -webkit-linear-gradient(top, #bfbfbf, #b0b0b0);
+  background-image: -moz-linear-gradient(top, #bfbfbf, #b0b0b0);
+  background-image: -o-linear-gradient(top, #bfbfbf, #b0b0b0);
+  text-shadow: 0 1px 0 #ddd;
+  box-shadow: 0 0 0;
+}
+body[id="helios"] .navbar-nav > .inactive > a:hover,
+body[id="helios"] .navbar-nav > li > a:hover {
   color: #333;
   background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
   background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
@@ -216,10 +260,10 @@ body[id="helios"] .navbar .nav > li > a:hover {
   text-shadow: 0 1px 0 #ddd;
   box-shadow: 0 0 0;
 }
-body[id="helios"] .navbar .nav > .active > a,
-body[id="helios"] .navbar .nav > .active > a:hover,
-body[id="helios"] .navbar .nav > .active > a:focus,
-body[id="helios"] .navbar .nav .ui-sortable-helper a {
+body[id="helios"] .navbar-nav > .active > a,
+body[id="helios"] .navbar-nav > .active > a:hover,
+body[id="helios"] .navbar-nav > .active > a:focus,
+body[id="helios"] .navbar-nav .ui-sortable-handle a {
   color: #444;
   background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
   background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
@@ -228,18 +272,9 @@ body[id="helios"] .navbar .nav .ui-sortable-helper a {
   text-shadow: 0 1px 0 #ddd;
   box-shadow: 0 0 0;
 }
-body[id="helios"] .navbar .nav .ui-sortable-helper a {
+body[id="helios"] .nav.navbar-nav .ui-sortable-handle a {
   border-left: 1px solid #777;
 }
-body[id="helios"] .navbar-fixed-top i {
-  opacity: 0.4;
-  margin-right: 5px;
-  height: 12px;
-  margin-top: 0;
-}
-body[id="helios"] .navbar-fixed-top .active i {
-  opacity: 0.6;
-}
 body[id="helios"] .nav-pills.nav-stacked > li > a {
   border-radius: 0;
   -webkit-border-radius: 0;
@@ -259,10 +294,18 @@ body[id="helios"] .dropdown-menu {
   padding: 0;
   margin: 3px;
 }
-body[id="helios"] .spotlight {
-  position: fixed;
+body[id="helios"] .twitter-typeahead {
+  float: right;
   top: 1px;
   right: 26px;
+  height: 22px;
+}
+body[id="helios"] .typeahead {
+  position: fixed;
+  top: 0px;
+  float: right;
+  right: 0px;
+  height: 100%;
   z-index: 1100;
   border: 1px solid #999;
   font-size: 11px;
@@ -271,10 +314,27 @@ body[id="helios"] .spotlight {
   width: 200px;
   box-shadow: inset 0 0 2px 0 #ddd;
 }
-body[id="helios"] .spotlight:focus {
+body[id="helios"] .typeahead:focus {
   box-shadow: inset 0 0 2px 0 #08c;
   border-color: #08c;
 }
+body[id="helios"] .tt-dropdown-menu {
+  background-color: #ddd;
+  width: 300px;
+  max-height: 350px;
+  overflow-y: auto;
+}
+body[id="helios"] .tt-hint {
+  color: #999;
+}
+body[id="helios"] .tt-suggestion p {
+  margin: 2px;
+  font-size: 11px;
+}
+body[id="helios"] .tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+}
 body[id="helios"] .nav-pills > .active > a {
   background-color: #ddd;
   color: #fff;
@@ -287,7 +347,6 @@ body[id="helios"] .focused .nav-pills > .active > a,
 body[id="helios"] .nav-pills > .active > a:hover,
 body[id="helios"] .dropdown-menu li > a:hover,
 body[id="helios"] .dropdown-menu li > a:focus,
-body[id="helios"] .dropdown-submenu:hover > a,
 body[id="helios"] .dropdown-menu .active > a,
 body[id="helios"] .dropdown-menu .active > a:hover,
 body[id="helios"] .CodeMirror-hint-active {
@@ -513,12 +572,13 @@ body[id="helios"] .tool_container .list-label .btn-group.open .dropdown-toggle {
 }
 body[id="helios"] .tool_container .list-label .btn-group > .dropdown-menu {
   padding: 0;
+  margin: 0;
   font-size: 11px;
 }
 body[id="helios"] .tool_container .list-label .btn-group.cog i {
   margin-top: 1px;
 }
-body[id="helios"] .tool_container .list-label .cog .btn.dropdown-toggle {
+body[id="helios"] .tool_container .list-label .cog .btn.btn-default.dropdown-toggle {
   padding: 0;
   margin: 0;
   line-height: 12px;
@@ -561,6 +621,8 @@ body[id="helios"] .tool_container .panes .pane .pane_actions label {
   vertical-align: top;
   text-shadow: #ddd 0px 1px 0px;
   color: #222;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 body[id="helios"] .tool_container .panes .pane .pane_actions label input {
   float: none;
@@ -568,7 +630,8 @@ body[id="helios"] .tool_container .panes .pane .pane_actions label input {
   margin-top: 2px;
   margin-right: 5px;
 }
-body[id="helios"] .tool_container .panes .pane .pane_actions .btn {
+body[id="helios"] .tool_container .panes .pane .pane_actions .btn-group .btn.btn-default,
+body[id="helios"] .pane_actions.form-group .btn.btn-default {
   background: transparent;
   border: 0;
   font-size: 11px;
@@ -580,13 +643,16 @@ body[id="helios"] .tool_container .panes .pane .pane_actions .btn {
   vertical-align: top;
   /* min-width: 50px; */
 }
-body[id="helios"] .tool_container .panes .pane .pane_actions .btn:hover {
+body[id="helios"] .tool_container .panes .pane .pane_actions .btn.btn-default:hover,
+body[id="helios"] .pane_actions.form-group .btn.btn-default:hover {
   background-color: #bbb;
 }
-body[id="helios"] .tool_container .panes .pane .pane_actions .btn-group .btn:hover {
+body[id="helios"] .tool_container .panes .pane .pane_actions .btn-group .btn.btn-default:hover,
+body[id="helios"] .pane_actions.form-group .btn.btn-default:hover {
   background-color: transparent;
 }
-body[id="helios"] .tool_container .panes .pane .pane_actions .btn-group .btn.active {
+body[id="helios"] .tool_container .panes .pane .pane_actions .btn-group .btn.btn-default.active,
+body[id="helios"] .pane_actions.form-group .btn.btn-default {
   text-shadow: #ddd 0px 1px 0px;
   color: #222;
   background: #bbb;
@@ -621,6 +687,7 @@ body[id="helios"] .key_helper .command {
   padding: 0;
   display: inline-block;
   width: 50%;
+  height: 20px;
 }
 body[id="helios"] .key_helper .command strong {
   display: inline-block;
@@ -635,6 +702,8 @@ body[id="helios"] .key_helper #binding-helper-main {
 body[id="helios"] .key_helper .label {
   padding: 1px 4px;
   font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+  font-size: 100%;
+  line-height: 14px;
   background: transparent;
   color: #0E4561;
   text-shadow: none;
@@ -681,7 +750,7 @@ body[id="helios"] .key_helper input {
   margin: 2px 4px;
   line-height: 1em;
 }
-body[id="helios"] .key_helper .error .help-inline,
+body[id="helios"] .key_helper .error .help-block,
 body[id="helios"] .key_helper .error input {
   color: #B91010;
   font-weight: bold;
@@ -770,8 +839,8 @@ body[id="helios"] .confirmation .head,
 body[id="helios"] .dialog .head {
   display: block;
 }
-body[id="helios"] .confirmation .hl_widget .form-actions,
-body[id="helios"] .dialog .hl_widget .form-actions {
+body[id="helios"] .confirmation .hl_widget .form-group,
+body[id="helios"] .dialog .hl_widget .form-group {
   padding: 0;
   border: 0;
 }
@@ -813,8 +882,8 @@ body[id="helios"] .confirmation .progress,
 body[id="helios"] .dialog .progress {
   height: 5px;
 }
-body[id="helios"] .confirmation .progress .bar,
-body[id="helios"] .dialog .progress .bar {
+body[id="helios"] .confirmation .progress .progress-bar,
+body[id="helios"] .dialog .progress .progress-bar {
   background-color: #e9eaf5;
   background-image: -webkit-linear-gradient(top, #b1bdd5, #8999b8);
   background-image: -moz-linear-gradient(top, #b1bdd5, #8999b8);

resources/helios.less

@@ -125,19 +125,43 @@ body[id="helios"] {
 		}
 	}
 
-	.btn, .btn-group > .btn, .btn-group > .dropdown-menu {
+	.btn.btn-default, .btn-group > .btn.btn-default, .btn-group > .dropdown-menu {
 		padding: 2px 8px;
 	}
 
 	.navbar-fixed-top {
 		font-size: 11px;
 		line-height: 16px;
-		
+		min-height: 25px;
+		margin: 0;
+		border: 0;
+
+		.navbar-header {
+			border: 0;
+			height: 25px;
+			width: 100%;
+			border-bottom: 1px solid #666;
+			box-shadow: inset 0px 2px 2px #aaa;
+			background: #bababa;
+			.nav-tabs {
+				height: 24px;
+			}
+			.nav-tabs > li > a {
+				-webkit-border-radius: 0;
+				-moz-border-radius: 0;
+				border-radius: 0;
+				//border: 0;
+				margin: 0;
+				height: 24px;
+			}
+		}
+
 		ul {
 			width: 100%;
 		}
 	}
 
+	// content of top navigation tabs
 	.navbar-fixed-top a span,
 	.dialog .nav a span {
 		padding: 1px;
@@ -148,6 +172,18 @@ body[id="helios"] {
 		height: 22px;
 	}
 
+	.navbar-fixed-top i {
+		opacity: 0.4;
+		margin-right: 5px;
+		height: 12px;
+		margin-top: 0;
+	}
+
+	.navbar-fixed-top .active i {
+		opacity: 0.6;
+	}
+
+	// close icon on top navigation tabs
 	.navbar-fixed-top i.close {
 		width: 14px;
 		height: 16px;
@@ -158,6 +194,7 @@ body[id="helios"] {
 		margin-top: 4px;
 	}
 
+	// images for top navigation tabs
 	.navbar-fixed-top a,
 	.dialog .nav a {
 
@@ -185,21 +222,6 @@ body[id="helios"] {
 		}
 	}
 
-	.navbar-fixed-top .navbar-inner {
-		min-height: 24px;
-		border-bottom: 1px solid #666;
-		box-shadow: inset 0px 2px 2px #aaa;
-		background: #bababa;
-	}
-
-	.navbar .nav {
-		> li {
-			line-height: 16px;
-			text-align: center;
-			max-width: 300px;
-		}
-	}
-
 	.new_tab {
 		width: 20px;
 		height: 24px;
@@ -222,6 +244,8 @@ body[id="helios"] {
 			left: auto;
 			float: right;
 			right: 0;
+			margin: 0;
+			border: 0;
 		}
 	}
 
@@ -230,7 +254,21 @@ body[id="helios"] {
 		text-align: left;
 	}
 
-	.navbar .nav > li > a {
+	.navbar-nav {
+		border: 0;
+		> li {
+			line-height: 16px;
+			text-align: center;
+			max-width: 300px;
+		}
+		.ui-sortable-handle a {
+			height: 24px;
+			border: 0;
+			border-left: 1px solid #777;
+		}
+	}
+
+	.navbar-nav > li > a {
 		line-height: 22px;
 		padding: 0px 8px;
 		font-size: 11px;
@@ -248,7 +286,18 @@ body[id="helios"] {
 		background: transparent;
 	}
 
-	.navbar .nav > li > a:hover {
+	.navbar-nav .ui-sortable-handle.inactive a {
+		color: #222;
+		background-image: linear-gradient(top, #bfbfbf, #b0b0b0);
+		background-image: -webkit-linear-gradient(top, #bfbfbf, #b0b0b0);
+		background-image: -moz-linear-gradient(top, #bfbfbf, #b0b0b0);
+		background-image: -o-linear-gradient(top, #bfbfbf, #b0b0b0);
+		text-shadow: 0 1px 0 #ddd;
+		box-shadow: 0 0 0;
+	}
+
+	.navbar-nav > .inactive > a:hover,
+	.navbar-nav > li > a:hover {
 		color: #333;
 		background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
 		background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
@@ -258,10 +307,10 @@ body[id="helios"] {
 		box-shadow: 0 0 0;
 	}
 
-	.navbar .nav > .active > a,
-	.navbar .nav > .active > a:hover,
-	.navbar .nav > .active > a:focus,
-	.navbar .nav .ui-sortable-helper a {
+	.navbar-nav > .active > a,
+	.navbar-nav > .active > a:hover,
+	.navbar-nav > .active > a:focus,
+	.navbar-nav .ui-sortable-handle a {
 		color: #444;
 		background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
 		background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
@@ -271,21 +320,11 @@ body[id="helios"] {
 		box-shadow: 0 0 0;
 	}
 
-	.navbar .nav .ui-sortable-helper a {
+	.nav.navbar-nav .ui-sortable-handle a {
 		border-left: 1px solid #777;
 	}
 
-	.navbar-fixed-top i {
-		opacity: 0.4;
-		margin-right: 5px;
-		height: 12px;
-		margin-top: 0;
-	}
-
-	.navbar-fixed-top .active i {
-		opacity: 0.6;
-	}
-
+	// package/class/category/methods lists
 	.nav-pills.nav-stacked > li > a {
 		border-radius: 0;
 		-webkit-border-radius: 0;
@@ -307,10 +346,22 @@ body[id="helios"] {
 		margin: 3px;
 	}
 
-        .spotlight {
-		position: fixed;
+	// this is the spotlight searchbox
+	// it is a span created around the actual
+	// typahead inputs
+	.twitter-typeahead {
+		float: right;
 		top: 1px;
 		right: 26px;
+		height: 22px;
+	}
+
+	.typeahead {
+		position: fixed;
+		top: 0px;
+		float: right;
+		right: 0px;
+		height: 100%;
 		z-index: 1100;
 		border: 1px solid #999;
 		font-size: 11px;
@@ -325,6 +376,24 @@ body[id="helios"] {
                 }
         }
 
+	.tt-dropdown-menu {
+		background-color: #ddd;
+		width: 300px;
+		max-height: 350px;
+		overflow-y: auto;
+	}
+	.tt-hint {
+		color: #999;
+	}
+	.tt-suggestion p {
+		margin: 2px;
+		font-size: 11px;
+	}
+	.tt-suggestion.tt-cursor {
+		color: #fff;
+		background-color: #0097cf;
+	}
+
 	.nav-pills > .active > a {
 		background-color: #ddd;
 		color: #fff;
@@ -339,7 +408,6 @@ body[id="helios"] {
 	.nav-pills > .active > a:hover,
 	.dropdown-menu li > a:hover,
 	.dropdown-menu li > a:focus,
-	.dropdown-submenu:hover > a,
 	.dropdown-menu .active > a,
 	.dropdown-menu .active > a:hover,
 	.CodeMirror-hint-active {
@@ -598,6 +666,7 @@ body[id="helios"] {
 
 	.tool_container .list-label .btn-group > .dropdown-menu {
 		padding: 0;
+		margin: 0;
 		font-size: 11px;
 	}
 
@@ -605,7 +674,7 @@ body[id="helios"] {
 		margin-top: 1px;
 	}
 
-	.tool_container .list-label .cog .btn.dropdown-toggle {
+	.tool_container .list-label .cog .btn.btn-default.dropdown-toggle {
 		padding: 0;
 		margin: 0;
 		line-height: 12px;
@@ -652,7 +721,8 @@ body[id="helios"] {
 		vertical-align: top;
 		text-shadow: #ddd 0px 1px 0px;
 		color: #222;
-
+		margin-top: 0px;
+		margin-bottom: 0px;
 	}
 
 	.tool_container .panes .pane .pane_actions label input {
@@ -662,7 +732,8 @@ body[id="helios"] {
 		margin-right: 5px;
 	}
 
-	.tool_container .panes .pane .pane_actions .btn {
+	.tool_container .panes .pane .pane_actions .btn-group .btn.btn-default,
+	.pane_actions.form-group .btn.btn-default {
 		background: transparent;
 		border: 0;
 		font-size: 11px;
@@ -675,15 +746,18 @@ body[id="helios"] {
 		/* min-width: 50px; */
 	}
 
-	.tool_container .panes .pane .pane_actions .btn:hover {
+	.tool_container .panes .pane .pane_actions .btn.btn-default:hover,
+	.pane_actions.form-group .btn.btn-default:hover {
 		background-color: #bbb;
 	}
 
-	.tool_container .panes .pane .pane_actions .btn-group .btn:hover {
+	.tool_container .panes .pane .pane_actions .btn-group .btn.btn-default:hover,
+	.pane_actions.form-group .btn.btn-default:hover {
 		background-color: transparent;
 	}
 
-	.tool_container .panes .pane .pane_actions .btn-group .btn.active {
+	.tool_container .panes .pane .pane_actions .btn-group .btn.btn-default.active,
+	.pane_actions.form-group .btn.btn-default {
 		text-shadow: #ddd 0px 1px 0px;
 		color: #222;
 		background: #bbb;
@@ -722,6 +796,7 @@ body[id="helios"] {
 			padding: 0;
 			display: inline-block;
 			width: 50%;
+			height: 20px;
 
 			strong {
 				display: inline-block;
@@ -739,6 +814,8 @@ body[id="helios"] {
 		.label {
 			padding: 1px 4px;
 			font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+			font-size: 100%;
+			line-height: 14px;
 			background: transparent;
 			color: #0E4561;
 			text-shadow: none;
@@ -791,18 +868,13 @@ body[id="helios"] {
 			line-height: 1em;
 		}
 
-		.error .help-inline,
+		// similar but not equivalent
+		.error .help-block,
 		.error input {
 			color: #B91010;
 			font-weight: bold;
 		}
 
-		// .typeahead.dropdown-menu {
-		// 	position: fixed !important;
-		// 	top: auto !important;
-		// 	bottom: 30px !important;
-		// }
-
 		#cog-helper {
 			position: fixed;
 			bottom: 2px;
@@ -895,8 +967,7 @@ body[id="helios"] {
 		}
 
 		.hl_widget {
-
-			.form-actions {
+			.form-group {
 				padding: 0;
 				border: 0;
 			}
@@ -939,7 +1010,7 @@ body[id="helios"] {
 		.progress {
 			height: 5px;
 
-			.bar {
+			.progress-bar {
 				background-color: #e9eaf5;
 				background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
 				background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);

src/Helios-Browser.js

@@ -2614,6 +2614,10 @@ $recv($1)._class_("btn-group");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx1.sendIdx["class:"]=1;
 //>>excludeEnd("ctx");
+$recv($1)._at_put_("role","group");
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["at:put:"]=1;
+//>>excludeEnd("ctx");
 $2=$recv($1)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
@@ -2627,7 +2631,7 @@ $5=$recv($String())._streamContents_((function(str){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
 //>>excludeEnd("ctx");
-$recv(str)._nextPutAll_("btn");
+$recv(str)._nextPutAll_("btn btn-default");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["nextPutAll:"]=1;
 //>>excludeEnd("ctx");
@@ -2674,7 +2678,7 @@ $recv($8)._class_($recv($String())._streamContents_((function(str){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
 //>>excludeEnd("ctx");
-$recv(str)._nextPutAll_("btn");
+$recv(str)._nextPutAll_("btn btn-default");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["nextPutAll:"]=3;
 //>>excludeEnd("ctx");
@@ -2751,10 +2755,10 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderButtonsOn: html\x0a\x09| checkbox |\x0a\x09\x0a\x09html div \x0a        class: 'btn-group';\x0a\x09\x09with: [ \x0a           \x09html button \x0a                class: (String streamContents: [ :str |\x0a                \x09str nextPutAll: 'btn'.\x0a                    self showInstance ifTrue: [ \x0a                    \x09str nextPutAll: ' active' ] ]);\x0a  \x09\x09\x09\x09with: 'Instance';\x0a                onClick: [ self showInstance: true ].\x0a  \x09\x09\x09html button\x0a  \x09\x09\x09\x09class: (String streamContents: [ :str |\x0a                \x09str nextPutAll: 'btn'.\x0a                    self showClass ifTrue: [ \x0a                    \x09str nextPutAll: ' active' ] ]);\x0a  \x09\x09\x09\x09with: 'Class';\x0a\x09\x09\x09\x09onClick: [ self showInstance: false ] ].\x0a\x09\x09html label \x0a\x09\x09\x09class: 'checkbox';\x0a\x09\x09\x09with: [\x0a\x09\x09\x09\x09checkbox := html input\x0a\x09\x09\x09\x09\x09type: 'checkbox';\x0a\x09\x09\x09\x09\x09onClick: [ self toggleShowComment ].\x0a\x09\x09\x09\x09html with: 'Doc' ].\x0a\x09\x09\x09\x09\x0a\x09\x09self showComment ifTrue: [\x0a\x09\x09\x09checkbox at: 'checked' put: 'checked' ]",
+source: "renderButtonsOn: html\x0a\x09| checkbox |\x0a\x09\x0a\x09html div \x0a        class: 'btn-group';\x0a\x09\x09at: 'role' put: 'group';\x0a\x09\x09with: [\x0a           \x09html button \x0a                class: (String streamContents: [ :str |\x0a                \x09str nextPutAll: 'btn btn-default'.\x0a                    self showInstance ifTrue: [ \x0a                    \x09str nextPutAll: ' active' ] ]);\x0a  \x09\x09\x09\x09with: 'Instance';\x0a                onClick: [ self showInstance: true ].\x0a  \x09\x09\x09html button\x0a  \x09\x09\x09\x09class: (String streamContents: [ :str |\x0a                \x09str nextPutAll: 'btn btn-default'.\x0a                    self showClass ifTrue: [ \x0a                    \x09str nextPutAll: ' active' ] ]);\x0a  \x09\x09\x09\x09with: 'Class';\x0a\x09\x09\x09\x09onClick: [ self showInstance: false ] ].\x0a\x09\x09html label \x0a\x09\x09\x09class: 'checkbox';\x0a\x09\x09\x09with: [\x0a\x09\x09\x09\x09checkbox := html input\x0a\x09\x09\x09\x09\x09type: 'checkbox';\x0a\x09\x09\x09\x09\x09onClick: [ self toggleShowComment ].\x0a\x09\x09\x09\x09html with: 'Doc' ].\x0a\x09\x09\x09\x09\x0a\x09\x09self showComment ifTrue: [\x0a\x09\x09\x09checkbox at: 'checked' put: 'checked' ]",
 referencedClasses: ["String"],
 //>>excludeEnd("ide");
-messageSends: ["class:", "div", "with:", "button", "streamContents:", "nextPutAll:", "ifTrue:", "showInstance", "onClick:", "showInstance:", "showClass", "label", "type:", "input", "toggleShowComment", "showComment", "at:put:"]
+messageSends: ["class:", "div", "at:put:", "with:", "button", "streamContents:", "nextPutAll:", "ifTrue:", "showInstance", "onClick:", "showInstance:", "showClass", "label", "type:", "input", "toggleShowComment", "showComment"]
 }),
 $globals.HLClassesListWidget);
 

src/Helios-Browser.st

@@ -703,17 +703,18 @@ renderButtonsOn: html
 	
 	html div 
         class: 'btn-group';
-		with: [ 
+		at: 'role' put: 'group';
+		with: [
            	html button 
                 class: (String streamContents: [ :str |
-                	str nextPutAll: 'btn'.
+                	str nextPutAll: 'btn btn-default'.
                     self showInstance ifTrue: [ 
                     	str nextPutAll: ' active' ] ]);
   				with: 'Instance';
                 onClick: [ self showInstance: true ].
   			html button
   				class: (String streamContents: [ :str |
-                	str nextPutAll: 'btn'.
+                	str nextPutAll: 'btn btn-default'.
                     self showClass ifTrue: [ 
                     	str nextPutAll: ' active' ] ]);
   				with: 'Class';

src/Helios-Core.js

@@ -3162,12 +3162,12 @@ selector: "buttonsDivCssClass",
 protocol: 'accessing',
 fn: function (){
 var self=this;
-return "pane_actions form-actions";
+return "pane_actions form-group";
 
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: [],
-source: "buttonsDivCssClass\x0a\x09^ 'pane_actions form-actions'",
+source: "buttonsDivCssClass\x0a\x09^ 'pane_actions form-group'",
 referencedClasses: [],
 //>>excludeEnd("ide");
 messageSends: []
@@ -4634,7 +4634,7 @@ $4=$recv(html)._a();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["a"]=1;
 //>>excludeEnd("ctx");
-$recv($4)._class_("btn dropdown-toggle");
+$recv($4)._class_("btn btn-default dropdown-toggle");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["class:"]=2;
 //>>excludeEnd("ctx");
@@ -4643,7 +4643,7 @@ $5=$recv($4)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
 //>>excludeEnd("ctx");
-return $recv($recv(html)._tag_("i"))._class_("icon-chevron-down");
+return $recv($recv(html)._tag_("i"))._class_("glyphicon glyphicon-chevron-down");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["class:"]=3;
 //>>excludeEnd("ctx");
@@ -4714,7 +4714,7 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderMenuOn: html\x0a\x09| commands |\x0a\x09\x0a\x09commands := self menuCommands.\x0a\x09commands isEmpty ifTrue: [ ^ self ].\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'btn-group cog';\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09\x09class: 'btn dropdown-toggle';\x0a\x09\x09\x09\x09at: 'data-toggle' put: 'dropdown';\x0a\x09\x09\x09\x09with: [ (html tag: 'i') class: 'icon-chevron-down' ].\x0a\x09\x09html ul \x0a\x09\x09\x09class: 'dropdown-menu pull-right';\x0a\x09\x09\x09with: [ \x0a\x09\x09\x09\x09self menuCommands do: [ :each | \x0a\x09\x09\x09\x09\x09html li with: [ html a \x0a\x09\x09\x09\x09\x09\x09with: each menuLabel;\x0a\x09\x09\x09\x09\x09\x09onClick: [ self execute: each ] ] ] ] ]",
+source: "renderMenuOn: html\x0a\x09| commands |\x0a\x09\x0a\x09commands := self menuCommands.\x0a\x09commands isEmpty ifTrue: [ ^ self ].\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'btn-group cog';\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09\x09class: 'btn btn-default dropdown-toggle';\x0a\x09\x09\x09\x09at: 'data-toggle' put: 'dropdown';\x0a\x09\x09\x09\x09with: [ (html tag: 'i') class: 'glyphicon glyphicon-chevron-down' ].\x0a\x09\x09html ul \x0a\x09\x09\x09class: 'dropdown-menu pull-right';\x0a\x09\x09\x09with: [ \x0a\x09\x09\x09\x09self menuCommands do: [ :each | \x0a\x09\x09\x09\x09\x09html li with: [ html a \x0a\x09\x09\x09\x09\x09\x09with: each menuLabel;\x0a\x09\x09\x09\x09\x09\x09onClick: [ self execute: each ] ] ] ] ]",
 referencedClasses: [],
 //>>excludeEnd("ide");
 messageSends: ["menuCommands", "ifTrue:", "isEmpty", "class:", "div", "with:", "a", "at:put:", "tag:", "ul", "do:", "li", "menuLabel", "onClick:", "execute:"]
@@ -8668,6 +8668,40 @@ $globals.HLProgressBarWidget.klass);
 
 
 $core.addClass('HLSpotlightWidget', $globals.HLWidget, ['input'], 'Helios-Core');
+$core.addMethod(
+$core.method({
+selector: "findMatches:andRender:",
+protocol: 'actions',
+fn: function (aQueryString,aRenderCallback){
+var self=this;
+var matches;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+matches=$recv(self._inputCompletion())._select_((function(each){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return $recv(each)._match_(aQueryString);
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({each:each},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+$recv(aRenderCallback)._value_(matches);
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"findMatches:andRender:",{aQueryString:aQueryString,aRenderCallback:aRenderCallback,matches:matches},$globals.HLSpotlightWidget)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: ["aQueryString", "aRenderCallback"],
+source: "findMatches: aQueryString andRender: aRenderCallback\x0a\x09| matches |\x0a\x09matches := self inputCompletion select: [ :each | each match: aQueryString ].\x0a\x09aRenderCallback value: matches",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["select:", "inputCompletion", "match:", "value:"]
+}),
+$globals.HLSpotlightWidget);
+
 $core.addMethod(
 $core.method({
 selector: "ghostText",
@@ -8731,7 +8765,7 @@ return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
 var $1,$3,$5,$4,$2;
 $1=$recv(html)._input();
-$recv($1)._class_("spotlight");
+$recv($1)._class_("spotlight typeahead");
 $recv($1)._placeholder_(self._ghostText());
 $2=$recv($1)._onKeyDown_($recv((function(event){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -8751,7 +8785,23 @@ return self._search_($4);
 //>>excludeEnd("ctx");
 }))._yourself());
 self["@input"]=$2;
-$recv($recv(self["@input"])._asJQuery())._typeahead_($globals.HashedCollection._newFromPairs_(["source",self._inputCompletion()]));
+$recv($recv(self["@input"])._asJQuery())._typeahead_value_($globals.HashedCollection._newFromPairs_(["hint",true]),$globals.HashedCollection._newFromPairs_(["name","classesAndSelectors","displayKey",(function(suggestion){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return $recv(suggestion)._asString();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({suggestion:suggestion},$ctx1,3)});
+//>>excludeEnd("ctx");
+}),"source",(function(query,callback){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._findMatches_andRender_(query,callback);
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({query:query,callback:callback},$ctx1,4)});
+//>>excludeEnd("ctx");
+})]));
 return self;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 }, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},$globals.HLSpotlightWidget)});
@@ -8759,10 +8809,10 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderContentOn: html\x0a\x09input := html input\x0a\x09\x09class: 'spotlight';\x0a\x09\x09placeholder: self ghostText;\x0a\x09\x09onKeyDown: [ :event | \x0a\x09\x09\x09event which = 13 ifTrue: [\x0a\x09\x09\x09\x09self search: input asJQuery val ] ]\x0a\x09\x09yourself.\x0a\x09\x09\x09\x0a\x09input asJQuery \x0a\x09\x09typeahead: #{ 'source' -> self inputCompletion }.",
+source: "renderContentOn: html\x0a\x09input := html input\x0a\x09\x09class: 'spotlight typeahead';\x0a\x09\x09placeholder: self ghostText;\x0a\x09\x09onKeyDown: [ :event | \x0a\x09\x09\x09event which = 13 ifTrue: [\x0a\x09\x09\x09\x09self search: input asJQuery val ] ]\x0a\x09\x09yourself.\x0a\x09\x09\x09\x0a\x09input asJQuery \x0a\x09\x09typeahead: #{ 'hint' -> true }\x0a\x09\x09value: #{ 'name' -> 'classesAndSelectors'.\x0a\x09\x09\x09'displayKey' -> [ :suggestion | suggestion asString ].\x0a\x09\x09\x09'source' -> [ :query :callback | self findMatches: query andRender: callback ]}.\x0a\x09\x09\x22use additional datasets for grouping into classes and selectors\x22",
 referencedClasses: [],
 //>>excludeEnd("ide");
-messageSends: ["class:", "input", "placeholder:", "ghostText", "onKeyDown:", "yourself", "ifTrue:", "=", "which", "search:", "val", "asJQuery", "typeahead:", "inputCompletion"]
+messageSends: ["class:", "input", "placeholder:", "ghostText", "onKeyDown:", "yourself", "ifTrue:", "=", "which", "search:", "val", "asJQuery", "typeahead:value:", "asString", "findMatches:andRender:"]
 }),
 $globals.HLSpotlightWidget);
 
@@ -8792,7 +8842,7 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["aString"],
-source: "search: aString\x0a\x09aString ifNotEmpty: [\x0a\x09\x09Finder findString: aString ]",
+source: "search: aString\x0a\x09\x22open a new Browser pointing to aString\x22\x0a\x09aString ifNotEmpty: [\x0a\x09\x09Finder findString: aString ]",
 referencedClasses: ["Finder"],
 //>>excludeEnd("ide");
 messageSends: ["ifNotEmpty:", "findString:"]
@@ -10010,7 +10060,8 @@ $2=$recv($1)._with_((function(){
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
 $3=$recv(html)._div();
-$recv($3)._class_("navbar-inner");
+$recv($3)._class_("navbar-header");
+$recv($3)._at_put_("role","tabpanel");
 $4=$recv($3)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
@@ -10040,10 +10091,10 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09class: 'navbar navbar-fixed-top';\x0a\x09\x09with: [ html div \x0a\x09\x09\x09class: 'navbar-inner';\x0a\x09\x09\x09with: [ self renderTabsOn: html ] ].\x0a\x09\x09\x09\x0a\x09html with: self spotlight.\x0a\x09self renderAddOn: html",
+source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09class: 'navbar navbar-fixed-top';\x0a\x09\x09with: [ html div \x0a\x09\x09\x09class: 'navbar-header';\x0a\x09\x09\x09at: 'role' put: 'tabpanel';\x0a\x09\x09\x09with: [ self renderTabsOn: html ] ].\x0a\x09\x09\x09\x0a\x09html with: self spotlight.\x0a\x09self renderAddOn: html",
 referencedClasses: [],
 //>>excludeEnd("ide");
-messageSends: ["class:", "div", "with:", "renderTabsOn:", "spotlight", "renderAddOn:"]
+messageSends: ["class:", "div", "with:", "at:put:", "renderTabsOn:", "spotlight", "renderAddOn:"]
 }),
 $globals.HLTabsWidget);
 
@@ -10057,7 +10108,7 @@ var li;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
-var $1,$2,$3,$4,$6,$5,$7,$8,$9,$10,$11,$12;
+var $1,$2,$3,$4,$6,$5,$7,$8,$9,$10,$11,$12,$13,$14;
 $1=$recv(html)._li();
 $2=$1;
 $3=$recv("width: ".__comma($recv(self._tabWidth())._asString())).__comma("px");
@@ -10080,15 +10131,16 @@ $recv($1)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
-return $recv($recv(html)._a())._with_((function(){
+$7=$recv(html)._a();
+$recv($7)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
 //>>excludeEnd("ctx");
-$7=$recv($recv(html)._tag_("i"))._class_("close");
+$8=$recv($recv(html)._tag_("i"))._class_("close");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["class:"]=2;
 //>>excludeEnd("ctx");
-$recv($7)._onClick_((function(){
+$recv($8)._onClick_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx4) {
 //>>excludeEnd("ctx");
@@ -10100,16 +10152,16 @@ return self._removeTab_(aTab);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["onClick:"]=1;
 //>>excludeEnd("ctx");
-$8=$recv(html)._span();
-$recv($8)._class_($recv(aTab)._cssClass());
-$9=$8;
-$10=$recv(aTab)._label();
+$9=$recv(html)._span();
+$recv($9)._class_($recv(aTab)._cssClass());
+$10=$9;
+$11=$recv(aTab)._label();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx3.sendIdx["label"]=1;
 //>>excludeEnd("ctx");
-$recv($9)._title_($10);
-$11=$recv($8)._with_($recv(aTab)._label());
-return $11;
+$recv($10)._title_($11);
+$12=$recv($9)._with_($recv(aTab)._label());
+return $12;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 }, function($ctx3) {$ctx3.fillBlock({},$ctx2,4)});
 //>>excludeEnd("ctx");
@@ -10117,6 +10169,11 @@ return $11;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["with:"]=2;
 //>>excludeEnd("ctx");
+$13=$recv($7)._at_put_("role","tab");
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx2.sendIdx["at:put:"]=1;
+//>>excludeEnd("ctx");
+return $13;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,3)});
 //>>excludeEnd("ctx");
@@ -10124,7 +10181,7 @@ $ctx2.sendIdx["with:"]=2;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx1.sendIdx["with:"]=1;
 //>>excludeEnd("ctx");
-$12=$recv($1)._onClick_((function(){
+$14=$recv($1)._onClick_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
@@ -10133,7 +10190,7 @@ return $recv(aTab)._activate();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,6)});
 //>>excludeEnd("ctx");
 }));
-li=$12;
+li=$14;
 $recv($recv($recv(li)._asJQuery())._get_((0)))._at_put_("tab-data",aTab);
 return self;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -10142,10 +10199,10 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["aTab", "html"],
-source: "renderTab: aTab on: html\x0a\x09| li |\x0a\x09li := html li \x0a\x09\x09style: 'width: ', self tabWidth asString, 'px';\x0a\x09\x09class: (aTab isActive ifTrue: [ 'tab active' ] ifFalse: [ 'tab inactive' ]);\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09with: [\x0a\x09\x09\x09\x09((html tag: 'i') class: 'close')\x0a\x09\x09\x09\x09\x09onClick: [ self removeTab: aTab ].\x0a\x09\x09\x09\x09html span \x0a\x09\x09\x09\x09\x09class: aTab cssClass;\x0a\x09\x09\x09\x09\x09title: aTab label;\x0a\x09\x09\x09\x09\x09with: aTab label ] ];\x0a\x09\x09onClick: [ aTab activate ].\x0a\x09\x0a\x09(li asJQuery get: 0) at: 'tab-data' put: aTab",
+source: "renderTab: aTab on: html\x0a\x09| li |\x0a\x09li := html li \x0a\x09\x09style: 'width: ', self tabWidth asString, 'px';\x0a\x09\x09class: (aTab isActive ifTrue: [ 'tab active' ] ifFalse: [ 'tab inactive' ]);\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09with: [\x0a\x09\x09\x09\x09((html tag: 'i') class: 'close')\x0a\x09\x09\x09\x09\x09onClick: [ self removeTab: aTab ].\x0a\x09\x09\x09\x09html span \x0a\x09\x09\x09\x09\x09class: aTab cssClass;\x0a\x09\x09\x09\x09\x09title: aTab label;\x0a\x09\x09\x09\x09\x09with: aTab label ];\x0a\x09\x09\x09at: 'role' put: 'tab'];\x0a\x09\x09onClick: [ aTab activate ].\x0a\x09\x0a\x09(li asJQuery get: 0) at: 'tab-data' put: aTab",
 referencedClasses: [],
 //>>excludeEnd("ide");
-messageSends: ["style:", "li", ",", "asString", "tabWidth", "class:", "ifTrue:ifFalse:", "isActive", "with:", "a", "onClick:", "tag:", "removeTab:", "span", "cssClass", "title:", "label", "activate", "at:put:", "get:", "asJQuery"]
+messageSends: ["style:", "li", ",", "asString", "tabWidth", "class:", "ifTrue:ifFalse:", "isActive", "with:", "a", "onClick:", "tag:", "removeTab:", "span", "cssClass", "title:", "label", "at:put:", "activate", "get:", "asJQuery"]
 }),
 $globals.HLTabsWidget);
 
@@ -10161,7 +10218,8 @@ return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
 var $1,$2;
 $1=$recv(html)._ul();
-$recv($1)._class_("nav main-tabs");
+$recv($1)._class_("nav navbar-nav nav-tabs");
+$recv($1)._at_put_("role","tablist");
 $2=$recv($1)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
@@ -10220,10 +10278,10 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderTabsOn: html\x0a\x09| ul |\x0a\x09ul := html ul \x0a\x09\x09class: 'nav main-tabs';\x0a\x09\x09with: [ \x0a        \x09self tabs do: [ :each |\x0a\x09\x09\x09\x09self renderTab: each on: html ] ].\x0a\x09\x09\x0a\x09ul asJQuery sortable: #{\x0a\x09\x09'containment' -> 'parent'.\x0a\x09\x09'start' -> [ self disableSelection ].\x0a\x09\x09'stop' -> [ [ self enableSelection] valueWithTimeout: 300 ].\x0a\x09\x09'update' -> [ self updateTabsOrder ]\x0a\x09}",
+source: "renderTabsOn: html\x0a\x09| ul |\x0a\x09ul := html ul \x0a\x09\x09class: 'nav navbar-nav nav-tabs';\x0a\x09\x09at: 'role' put: 'tablist';\x0a\x09\x09with: [ \x0a        \x09self tabs do: [ :each |\x0a\x09\x09\x09\x09self renderTab: each on: html ] ].\x0a\x09\x09\x0a\x09ul asJQuery sortable: #{\x0a\x09\x09'containment' -> 'parent'.\x0a\x09\x09'start' -> [ self disableSelection ].\x0a\x09\x09'stop' -> [ [ self enableSelection] valueWithTimeout: 300 ].\x0a\x09\x09'update' -> [ self updateTabsOrder ]\x0a\x09}",
 referencedClasses: [],
 //>>excludeEnd("ide");
-messageSends: ["class:", "ul", "with:", "do:", "tabs", "renderTab:on:", "sortable:", "asJQuery", "disableSelection", "valueWithTimeout:", "enableSelection", "updateTabsOrder"]
+messageSends: ["class:", "ul", "at:put:", "with:", "do:", "tabs", "renderTab:on:", "sortable:", "asJQuery", "disableSelection", "valueWithTimeout:", "enableSelection", "updateTabsOrder"]
 }),
 $globals.HLTabsWidget);
 
@@ -10435,7 +10493,7 @@ var self=this;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
-self["@tabs"]=$recv($recv(".main-tabs li"._asJQuery())._toArray())._collect_((function(each){
+self["@tabs"]=$recv($recv(".nav-tabs li"._asJQuery())._toArray())._collect_((function(each){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
@@ -10451,7 +10509,7 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: [],
-source: "updateTabsOrder\x0a\x09tabs := '.main-tabs li' asJQuery toArray \x0a\x09\x09collect: [ :each | each at: 'tab-data' ]",
+source: "updateTabsOrder\x0a\x09tabs := '.nav-tabs li' asJQuery toArray\x0a\x09\x09collect: [ :each | each at: 'tab-data' ]",
 referencedClasses: [],
 //>>excludeEnd("ide");
 messageSends: ["collect:", "toArray", "asJQuery", "at:"]

src/Helios-Core.st

@@ -755,7 +755,7 @@ activeItemCssClass
 !
 
 buttonsDivCssClass
-	^ 'pane_actions form-actions'
+	^ 'pane_actions form-group'
 !
 
 cssClassForItem: anObject
@@ -1079,9 +1079,9 @@ renderMenuOn: html
 		class: 'btn-group cog';
 		with: [
 			html a
-				class: 'btn dropdown-toggle';
+				class: 'btn btn-default dropdown-toggle';
 				at: 'data-toggle' put: 'dropdown';
-				with: [ (html tag: 'i') class: 'icon-chevron-down' ].
+				with: [ (html tag: 'i') class: 'glyphicon glyphicon-chevron-down' ].
 		html ul 
 			class: 'dropdown-menu pull-right';
 			with: [ 
@@ -2008,7 +2008,14 @@ inputCompletion
 
 !HLSpotlightWidget methodsFor: 'actions'!
 
+findMatches: aQueryString andRender: aRenderCallback
+	| matches |
+	matches := self inputCompletion select: [ :each | each match: aQueryString ].
+	aRenderCallback value: matches
+!
+
 search: aString
+	"open a new Browser pointing to aString"
 	aString ifNotEmpty: [
 		Finder findString: aString ]
 ! !
@@ -2017,7 +2024,7 @@ search: aString
 
 renderContentOn: html
 	input := html input
-		class: 'spotlight';
+		class: 'spotlight typeahead';
 		placeholder: self ghostText;
 		onKeyDown: [ :event | 
 			event which = 13 ifTrue: [
@@ -2025,7 +2032,11 @@ renderContentOn: html
 		yourself.
 			
 	input asJQuery 
-		typeahead: #{ 'source' -> self inputCompletion }.
+		typeahead: #{ 'hint' -> true }
+		value: #{ 'name' -> 'classesAndSelectors'.
+			'displayKey' -> [ :suggestion | suggestion asString ].
+			'source' -> [ :query :callback | self findMatches: query andRender: callback ]}.
+		"use additional datasets for grouping into classes and selectors"
 ! !
 
 HLWidget subclass: #HLTabWidget
@@ -2267,7 +2278,7 @@ removeTabForWidget: aWidget
 !
 
 updateTabsOrder
-	tabs := '.main-tabs li' asJQuery toArray 
+	tabs := '.nav-tabs li' asJQuery toArray
 		collect: [ :each | each at: 'tab-data' ]
 ! !
 
@@ -2313,7 +2324,8 @@ renderContentOn: html
 	html div 
 		class: 'navbar navbar-fixed-top';
 		with: [ html div 
-			class: 'navbar-inner';
+			class: 'navbar-header';
+			at: 'role' put: 'tabpanel';
 			with: [ self renderTabsOn: html ] ].
 			
 	html with: self spotlight.
@@ -2333,7 +2345,8 @@ renderTab: aTab on: html
 				html span 
 					class: aTab cssClass;
 					title: aTab label;
-					with: aTab label ] ];
+					with: aTab label ];
+			at: 'role' put: 'tab'];
 		onClick: [ aTab activate ].
 	
 	(li asJQuery get: 0) at: 'tab-data' put: aTab
@@ -2342,7 +2355,8 @@ renderTab: aTab on: html
 renderTabsOn: html
 	| ul |
 	ul := html ul 
-		class: 'nav main-tabs';
+		class: 'nav navbar-nav nav-tabs';
+		at: 'role' put: 'tablist';
 		with: [ 
         	self tabs do: [ :each |
 				self renderTab: each on: html ] ].

src/Helios-Debugger.js

@@ -1946,7 +1946,7 @@ $3=$recv(html)._button();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["button"]=1;
 //>>excludeEnd("ctx");
-$recv($3)._class_("btn restart");
+$recv($3)._class_("btn btn-default restart");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["class:"]=2;
 //>>excludeEnd("ctx");
@@ -1971,7 +1971,7 @@ $5=$recv(html)._button();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["button"]=2;
 //>>excludeEnd("ctx");
-$recv($5)._class_("btn where");
+$recv($5)._class_("btn btn-default where");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["class:"]=3;
 //>>excludeEnd("ctx");
@@ -1996,7 +1996,7 @@ $7=$recv(html)._button();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["button"]=3;
 //>>excludeEnd("ctx");
-$recv($7)._class_("btn stepOver");
+$recv($7)._class_("btn btn-default stepOver");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx2.sendIdx["class:"]=4;
 //>>excludeEnd("ctx");
@@ -2018,7 +2018,7 @@ $ctx2.sendIdx["onClick:"]=3;
 //>>excludeEnd("ctx");
 $8;
 $9=$recv(html)._button();
-$recv($9)._class_("btn proceed");
+$recv($9)._class_("btn btn-default proceed");
 $recv($9)._with_("Proceed");
 $10=$recv($9)._onClick_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -2044,7 +2044,7 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderButtonsOn: html\x0a\x09html div \x0a\x09\x09class: 'debugger_bar'; \x0a\x09\x09with: [\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn restart';\x0a\x09\x09\x09\x09with: 'Restart';\x0a\x09\x09\x09\x09onClick: [ self restart ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn where';\x0a\x09\x09\x09\x09with: 'Where';\x0a\x09\x09\x09\x09onClick: [ self where ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn stepOver';\x0a\x09\x09\x09\x09with: 'Step over';\x0a\x09\x09\x09\x09onClick: [ self stepOver ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn proceed';\x0a\x09\x09\x09\x09with: 'Proceed';\x0a\x09\x09\x09\x09onClick: [ self proceed ] ]",
+source: "renderButtonsOn: html\x0a\x09html div \x0a\x09\x09class: 'debugger_bar'; \x0a\x09\x09with: [\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn btn-default restart';\x0a\x09\x09\x09\x09with: 'Restart';\x0a\x09\x09\x09\x09onClick: [ self restart ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn btn-default where';\x0a\x09\x09\x09\x09with: 'Where';\x0a\x09\x09\x09\x09onClick: [ self where ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn btn-default stepOver';\x0a\x09\x09\x09\x09with: 'Step over';\x0a\x09\x09\x09\x09onClick: [ self stepOver ].\x0a\x09\x09\x09html button \x0a\x09\x09\x09\x09class: 'btn btn-default proceed';\x0a\x09\x09\x09\x09with: 'Proceed';\x0a\x09\x09\x09\x09onClick: [ self proceed ] ]",
 referencedClasses: [],
 //>>excludeEnd("ide");
 messageSends: ["class:", "div", "with:", "button", "onClick:", "restart", "where", "stepOver", "proceed"]

src/Helios-Debugger.st

@@ -524,19 +524,19 @@ renderButtonsOn: html
 		class: 'debugger_bar'; 
 		with: [
 			html button 
-				class: 'btn restart';
+				class: 'btn btn-default restart';
 				with: 'Restart';
 				onClick: [ self restart ].
 			html button 
-				class: 'btn where';
+				class: 'btn btn-default where';
 				with: 'Where';
 				onClick: [ self where ].
 			html button 
-				class: 'btn stepOver';
+				class: 'btn btn-default stepOver';
 				with: 'Step over';
 				onClick: [ self stepOver ].
 			html button 
-				class: 'btn proceed';
+				class: 'btn btn-default proceed';
 				with: 'Proceed';
 				onClick: [ self proceed ] ]
 ! !

src/Helios-Inspector.js

@@ -739,7 +739,7 @@ return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
 var $1,$2;
 $1=$recv(html)._button();
-$recv($1)._class_("btn");
+$recv($1)._class_("btn btn-default");
 $recv($1)._with_("Dive");
 $2=$recv($1)._onClick_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -758,7 +758,7 @@ return self;
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderButtonsOn: html\x0a\x09diveButton := html button \x0a\x09\x09class: 'btn';\x0a\x09\x09with: 'Dive'; \x0a\x09\x09onClick: [ self dive ]",
+source: "renderButtonsOn: html\x0a\x09diveButton := html button \x0a\x09\x09class: 'btn btn-default';\x0a\x09\x09with: 'Dive'; \x0a\x09\x09onClick: [ self dive ]",
 referencedClasses: [],
 //>>excludeEnd("ide");
 messageSends: ["class:", "button", "with:", "onClick:", "dive"]

src/Helios-Inspector.st

@@ -184,7 +184,7 @@ selectItem: anObject
 
 renderButtonsOn: html
 	diveButton := html button 
-		class: 'btn';
+		class: 'btn btn-default';
 		with: 'Dive'; 
 		onClick: [ self dive ]
 !

src/Helios-KeyBindings.js

@@ -2490,7 +2490,7 @@ $recv($1)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
-return $recv($recv(html)._tag_("i"))._class_("icon-remove");
+return $recv($recv(html)._tag_("i"))._class_("glyphicon glyphicon-remove");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)});
 //>>excludeEnd("ctx");

src/Helios-KeyBindings.st

@@ -599,7 +599,7 @@ renderBindingGroup: aBindingGroup on: html
 renderCloseOn: html
 	html a
 		class: 'close';
-		with: [ (html tag: 'i') class: 'icon-remove' ];
+		with: [ (html tag: 'i') class: 'glyphicon glyphicon-remove' ];
 		onClick: [ self keyBinder deactivate ]
 !
 

typeahead.js.amd.json

@@ -0,0 +1,11 @@
+{
+    "paths": {
+        "typeahead": "dist/typeahead.jquery"
+    },
+    "shim": {
+        "typeahead": {
+            "deps": [ "jquery" ],
+            "exports": "jQuery.fn.typeahead"
+        }
+    }
+}