convert from bootstrap 2.3.2 to bootstrap 3.3.4

app.js

@@ -8,11 +8,14 @@ define([
     'css!codemirror/theme/ambiance',
     'css!codemirror/lib/codemirror',
     'css!codemirror/addon/hint/show-hint',
+    'jquery',
+    '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,24 @@ 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: 24px;
+  margin: 0;
+  border: 0;
+}
+body[id="helios"] .navbar-fixed-top .navbar-header {
+  border: 0;
+  height: 100%;
+  width: 100%;
+  box-shadow: inset 0px 2px 2px #aaa;
+  background: #bababa;
 }
 body[id="helios"] .navbar-fixed-top ul {
   width: 100%;
@@ -123,6 +133,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 +175,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 +195,25 @@ 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 {
+  border: 0;
+}
+body[id="helios"] .navbar-nav > li > a {
   line-height: 22px;
   padding: 0px 8px;
   font-size: 11px;
@@ -200,14 +221,14 @@ 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 > li > a:hover {
   color: #333;
   background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
   background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
@@ -216,10 +237,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 +249,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"] .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 +271,13 @@ body[id="helios"] .dropdown-menu {
   padding: 0;
   margin: 3px;
 }
+body[id="helios"] .twitter-typeahead {
+  float: right;
+  right: 26px;
+}
 body[id="helios"] .spotlight {
   position: fixed;
   top: 1px;
-  right: 26px;
   z-index: 1100;
   border: 1px solid #999;
   font-size: 11px;
@@ -287,7 +302,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 +527,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 +576,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 +585,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 +598,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;
@@ -632,7 +653,7 @@ body[id="helios"] .key_helper #binding-helper-main {
   padding: 5px;
   background: #eee;
 }
-body[id="helios"] .key_helper .label {
+body[id="helios"] .key_helper .label.label-default {
   padding: 1px 4px;
   font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
   background: transparent;
@@ -681,7 +702,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 +791,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 +834,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,32 @@ 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: 24px;
+		margin: 0;
+		border: 0;
+
+		.navbar-header {
+			border: 0;
+			height: 100%;
+			width: 100%;
+			//border-bottom: 1px solid #666;
+			box-shadow: inset 0px 2px 2px #aaa;
+			background: #bababa;
+		}
+
 		ul {
 			width: 100%;
 		}
 	}
 
+	// content of top navigation tabs
 	.navbar-fixed-top a span,
 	.dialog .nav a span {
 		padding: 1px;
@@ -148,6 +161,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 +183,7 @@ body[id="helios"] {
 		margin-top: 4px;
 	}
 
+	// images for top navigation tabs
 	.navbar-fixed-top a,
 	.dialog .nav a {
 
@@ -185,21 +211,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 +233,8 @@ body[id="helios"] {
 			left: auto;
 			float: right;
 			right: 0;
+			margin: 0;
+			border: 0;
 		}
 	}
 
@@ -230,7 +243,19 @@ 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 {
+			border: 0;
+		}
+	}
+
+	.navbar-nav > li > a {
 		line-height: 22px;
 		padding: 0px 8px;
 		font-size: 11px;
@@ -248,7 +273,7 @@ body[id="helios"] {
 		background: transparent;
 	}
 
-	.navbar .nav > li > 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 +283,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 +296,11 @@ body[id="helios"] {
 		box-shadow: 0 0 0;
 	}
 
-	.navbar .nav .ui-sortable-helper a {
+	.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 +322,15 @@ body[id="helios"] {
 		margin: 3px;
 	}
 
+	// this is the spotlight searchbox
+	.twitter-typeahead {
+		float: right;
+		right: 26px;
+	}
+
         .spotlight {
 		position: fixed;
 		top: 1px;
-		right: 26px;
 		z-index: 1100;
 		border: 1px solid #999;
 		font-size: 11px;
@@ -339,7 +359,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 +617,7 @@ body[id="helios"] {
 
 	.tool_container .list-label .btn-group > .dropdown-menu {
 		padding: 0;
+		margin: 0;
 		font-size: 11px;
 	}
 
@@ -605,7 +625,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 +672,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 +683,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 +697,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;
@@ -736,7 +761,7 @@ body[id="helios"] {
 			background: #eee;
 		}
 
-		.label {
+		.label.label-default {
 			padding: 1px 4px;
 			font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
 			background: transparent;
@@ -791,7 +816,8 @@ body[id="helios"] {
 			line-height: 1em;
 		}
 
-		.error .help-inline,
+		// similar but not equivalent
+		.error .help-block,
 		.error input {
 			color: #B91010;
 			font-weight: bold;
@@ -895,8 +921,7 @@ body[id="helios"] {
 		}
 
 		.hl_widget {
-
-			.form-actions {
+			.form-group {
 				padding: 0;
 				border: 0;
 			}
@@ -939,7 +964,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:"]
@@ -10010,7 +10010,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 +10041,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 +10058,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 +10081,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 +10102,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 +10119,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 +10131,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 +10140,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 +10149,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 +10168,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 +10228,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 +10443,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 +10459,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: [ 
@@ -2267,7 +2267,7 @@ removeTabForWidget: aWidget
 !
 
 updateTabsOrder
-	tabs := '.main-tabs li' asJQuery toArray 
+	tabs := '.nav-tabs li' asJQuery toArray
 		collect: [ :each | each at: 'tab-data' ]
 ! !
 
@@ -2313,7 +2313,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 +2334,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 +2344,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 ]
 !

typeahead.js.amd.json

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