Upgrade to Bootstrap 3

js/eventMgr.js

@@ -238,16 +238,14 @@ define([
             logger.log("onCreatePreviewButton");
             var onCreatePreviewButtonListenerList = getExtensionListenerList("onCreatePreviewButton");
             var extensionPreviewButtonsFragment = document.createDocumentFragment();
-            var buttonGrpElt = crel('div', {
+            var previewButtonsElt = crel('div', {
-                class: 'btn-group'
+                class: 'extension-preview-buttons'
             });
-            extensionPreviewButtonsFragment.appendChild(buttonGrpElt);
+            extensionPreviewButtonsFragment.appendChild(previewButtonsElt);
-            var buttonGroupInnerHtml = "";
             _.each(onCreatePreviewButtonListenerList, function(listener) {
-                buttonGroupInnerHtml += listener();
+                previewButtonsElt.appendChild(createBtn(listener));
             });
-            buttonGrpElt.innerHTML = buttonGroupInnerHtml;
+            document.querySelector('.ui-layout-resizer-north').appendChild(extensionPreviewButtonsFragment);
-            document.getElementById('extension-preview-buttons').appendChild(extensionPreviewButtonsFragment);
         }
 
         // Call onReady listeners

js/extensions/buttonHtmlCode.js

@@ -27,7 +27,7 @@ define([
     };
 
     buttonHtmlCode.onCreatePreviewButton = function() {
-        return '<button class="btn btn-default dropdown-toggle action-html-code" title="HTML code" data-toggle="dropdown" data-target=".panel-html-code"><i class="icon-code"></i></button>';
+        return buttonHtmlCodeHTML;
     };
 
     var selectedFileDesc = undefined;
@@ -52,7 +52,6 @@ define([
     };
 
     buttonHtmlCode.onReady = function() {
-        $('#extension-preview-buttons').append($(buttonHtmlCodeHTML));
         textareaElt = document.getElementById('input-html-code');
         $(".action-html-code").click(function() {
             _.defer(function() {

js/extensions/buttonMarkdownSyntax.js

@@ -8,11 +8,7 @@ define([
     buttonMarkdownSyntax.settingsBlock = '<p>Adds a "Markdown syntax" button over the preview.</p>';
 
     buttonMarkdownSyntax.onCreatePreviewButton = function() {
-        return '<button class="btn btn-default dropdown-toggle" title="Markdown syntax" data-toggle="dropdown" data-target=".panel-markdown-syntax"><i class="icon-help-circled"></i></button>';
+        return buttonMarkdownSyntaxHTML;
-    };
-    
-    buttonMarkdownSyntax.onReady = function() {
-        $('#extension-preview-buttons').append($(buttonMarkdownSyntaxHTML));
     };
 
     return buttonMarkdownSyntax;

js/html/buttonHtmlCode.html

@@ -1,6 +1,7 @@
-<div class="panel-html-code">
+<button class="btn btn-default dropdown-toggle action-html-code" title="HTML code" data-toggle="dropdown">
+	<i class="icon-code"></i>
+</button>
 <div class="dropdown-menu pull-right">
 	<h3>HTML code</h3>
 	<textarea id="input-html-code" class="form-control"></textarea>
 </div>
-</div>

js/html/buttonMarkdownSyntax.html

@@ -1,4 +1,6 @@
-<div class="panel-markdown-syntax">
+<button class="btn btn-default dropdown-toggle" title="Markdown syntax" data-toggle="dropdown">
+	<i class="icon-help-circled"></i>
+</button>
 <div class="dropdown-menu pull-right">
 	<h3>Markdown syntax</h3>
 	<div class="markdown-syntax">
@@ -140,4 +142,3 @@ Violets are blue.
 <p class="muted">Based on the <a target="_blank" href="https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md">Markdown syntax guide</a>, by Fletcher T. Penney.</p>
     </div>
 </div>
-</div>

js/styles/default.less

@@ -377,11 +377,16 @@ Override Bootstrap
  * Preview extensions buttons
  ********************/
  
-#extension-preview-buttons {
+.ui-layout-resizer-north, .ui-layout-resizer-south {
-    position: fixed;
+	overflow: visible !important;
+}
+ 
+.extension-preview-buttons {
+    position: absolute;
+    top: 15px;
     right: 25px;
-    top: auto;
     z-index: 1;
+    font-size: 14px;
 	.dropdown-menu {
 	    border: 0 !important;
 	    margin-top: 1px;