From 448be04e596eb1c1b4c0f3ea33c0490f1a50907d Mon Sep 17 00:00:00 2001
From: Neil Fraser <fraser@google.com>
Date: Wed, 29 Oct 2014 23:38:02 -0700
Subject: [PATCH] Add help button to Block Factory.

---
 demos/blockfactory/factory.js |  5 +++++
 demos/blockfactory/index.html | 24 +++++++++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/demos/blockfactory/factory.js b/demos/blockfactory/factory.js
index cb2bbca0d..129048b6c 100644
--- a/demos/blockfactory/factory.js
+++ b/demos/blockfactory/factory.js
@@ -433,6 +433,11 @@ function init() {
     linkButton.addEventListener('click', BlocklyStorage.link);
   }
 
+  document.getElementById('helpButton').addEventListener('click', function() {
+      open('https://developers.google.com/blockly/custom-blocks/block-factory',
+           'BlockFactoryHelp');
+    });
+
   var expandList = [
     document.getElementById('blockly'),
     document.getElementById('previewFrame'),
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index 5a6fbf0b8..8e04ed09f 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -54,24 +54,28 @@
       overflow: scroll;
     }
 
-    #linkButton {
+    button {
       border-radius: 4px;
       border: 1px solid #ddd;
       background-color: #eee;
       color: #000;
-      padding: 1px 10px;
-      margin: 1px 5px;
-      display: none;
+      padding: 10px;
+      margin: 0 5px;
+      font-size: large;
     }
-    #linkButton:hover {
+    button:hover {
       box-shadow: 2px 2px 5px #888;
     }
-    #linkButton>img {
+    button>* {
       opacity: 0.6;
+      vertical-align: text-bottom;
     }
-    #linkButton:hover>img {
+    button:hover>* {
       opacity: 1;
     }
+    #linkButton {
+      display: none;
+    }
   </style>
   <link rel="stylesheet" type="text/css" href="../prettify.css">
   <script type="text/javascript" src="../prettify.js"></script>
@@ -98,6 +102,12 @@
               <button id="linkButton" title="Save and link to blocks.">
                 <img src="link.png" height="21" width="21">
               </button>
+              <button id="linkButton" title="Save and link to blocks.">
+                <img src="link.png" height="21" width="21">
+              </button>
+              <button id="helpButton" title="View documentation in new window.">
+                <span>Help</span>
+              </button>
             </td>
           </tr>
         </table>