Merge pull request #7515 from jhamrick/fix-tour

Fix user interface tour

closes  #5570 
closes  #7418

IPython/html/static/components

@@ -1,1 +1,1 b''
-Subproject commit dd9fdeecf092f3a17c60e7cd6a289909d4fc1797
+Subproject commit e822a87ad30af5f907a9e742711ff1e52dbb853f

IPython/html/static/notebook/js/tour.js

@@ -1,173 +1,168 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'bootstraptour',
 ], function(IPython, $, Tour) {
     "use strict";
 
     var tour_style = "<div class='popover tour'>\n" +
         "<div class='arrow'></div>\n" +
         "<div style='position:absolute; top:7px; right:7px'>\n" +
             "<button class='btn btn-default btn-sm fa fa-times' data-role='end'></button>\n" +
         "</div><h3 class='popover-title'></h3>\n" +
         "<div class='popover-content'></div>\n" +
         "<div class='popover-navigation'>\n" +
             "<button class='btn btn-default fa fa-step-backward' data-role='prev'></button>\n" +
             "<button class='btn btn-default fa fa-step-forward pull-right' data-role='next'></button>\n" +
             "<button id='tour-pause' class='btn btn-sm btn-default fa fa-pause' data-resume-text='' data-pause-text='' data-role='pause-resume'></button>\n" +
         "</div>\n" +
     "</div>";
 
     var NotebookTour = function (notebook, events) {
         var that = this;
         this.notebook = notebook;
         this.step_duration = 0;
         this.events = events;
         this.tour_steps = [
             { 
                 title: "Welcome to the Notebook Tour",
                 placement: 'bottom',
                 orphan: true,
                 content: "You can use the left and right arrow keys to go backwards and forwards."
             }, {
                 element: "#notebook_name",
                 title: "Filename",
                 placement: 'bottom',
                 content: "Click here to change the filename for this notebook."
             }, {
                 element: $("#menus").parent(),
                 placement: 'bottom',
-                backdrop: true,
                 title: "Notebook Menubar",
                 content: "The menubar has menus for actions on the notebook, its cells, and the kernel it communicates with."
             }, {
                 element: "#maintoolbar",
                 placement: 'bottom',
-                backdrop: true,
                 title: "Notebook Toolbar",
                 content: "The toolbar has buttons for the most common actions. Hover your mouse over each button for more information."
             }, {
                 element: "#modal_indicator",
                 title: "Mode Indicator",
                 placement: 'bottom',
                 content: "The Notebook has two modes: Edit Mode and Command Mode. In this area, an indicator can appear to tell you which mode you are in.",
                 onShow: function(tour) { that.command_icon_hack(); }
             }, {
                 element: "#modal_indicator",
                 title: "Command Mode",
                 placement: 'bottom',
                 onShow: function(tour) { notebook.command_mode(); that.command_icon_hack(); },
                 onNext: function(tour) { that.edit_mode(); },
                 content: "Right now you are in Command Mode, and many keyboard shortcuts are available. In this mode, no icon is displayed in the indicator area."
             }, {
                 element: "#modal_indicator",
                 title: "Edit Mode",
                 placement: 'bottom',
                 onShow: function(tour) { that.edit_mode(); },
                 content: "Pressing <code>Enter</code> or clicking in the input text area of the cell switches to Edit Mode."
             }, {
                 element: '.selected',
                 title: "Edit Mode",
                 placement: 'bottom',
                 onShow: function(tour) { that.edit_mode(); },
                 content: "Notice that the border around the currently active cell changed color. Typing will insert text into the currently active cell."
             }, {
                 element: '.selected',
                 title: "Back to Command Mode",
                 placement: 'bottom',
                 onShow: function(tour) { notebook.command_mode(); },
                 onHide: function(tour) { $('#help_menu').parent().children('a').click(); },
                 content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode."
             }, {
                 element: '#keyboard_shortcuts',
                 title: "Keyboard Shortcuts",
                 placement: 'bottom',
                 onHide: function(tour) { $('#help_menu').parent().children('a').click(); },
                 content: "You can click here to get a list of all of the keyboard shortcuts."
             }, {
-                element: "#kernel_indicator",
+                element: "#kernel_indicator_icon",
                 title: "Kernel Indicator",
                 placement: 'bottom',
                 onShow: function(tour) { events.trigger('kernel_idle.Kernel');},
                 content: "This is the Kernel indicator. It looks like this when the Kernel is idle."
             }, {
-                element: "#kernel_indicator",
+                element: "#kernel_indicator_icon",
                 title: "Kernel Indicator",
                 placement: 'bottom',
                 onShow: function(tour) { events.trigger('kernel_busy.Kernel'); },
                 content: "The Kernel indicator looks like this when the Kernel is busy."
             }, {
                 element: ".fa-stop",
                 placement: 'bottom',
                 title: "Interrupting the Kernel",
                 onHide: function(tour) { events.trigger('kernel_idle.Kernel'); },
                 content: "To cancel a computation in progress, you can click here."
             }, {
                 element: "#notification_kernel",
                 placement: 'bottom',
                 onShow: function(tour) { $('.fa-stop').click(); },
                 title: "Notification Area",
                 content: "Messages in response to user actions (Save, Interrupt, etc) appear here."
             }, {
                 title: "Fin.",
                 placement: 'bottom',
                 orphan: true,
                 content: "This concludes the IPython Notebook User Interface Tour. Happy hacking!"
             }
         ];
 
         this.tour = new Tour({
-            //orphan: true,
             storage: false, // start tour from beginning every time
-            //element: $("#ipython_notebook"),
             debug: true,
             reflex: true, // click on element to continue tour
-            //backdrop: true, // show dark behind popover
             animation: false,
             duration: this.step_duration,
             onStart: function() { console.log('tour started'); },
             // TODO: remove the onPause/onResume logic once pi's patch has been
             // merged upstream to make this work via data-resume-class and 
             // data-resume-text attributes.
             onPause: this.toggle_pause_play,
             onResume: this.toggle_pause_play,
             steps: this.tour_steps,
             template: tour_style,
             orphan: true
         });
         
     };
 
     NotebookTour.prototype.start = function () {
         console.log("let's start the tour");
         this.tour.init();
         this.tour.start();
         if (this.tour.ended())
         {
             this.tour.restart();
         }
     };
 
     NotebookTour.prototype.command_icon_hack =  function() {
         $('#modal_indicator').css('min-height', 20);
     };
     
     NotebookTour.prototype.toggle_pause_play = function () { 
         $('#tour-pause').toggleClass('fa-pause fa-play'); 
     };
     
     NotebookTour.prototype.edit_mode = function() { 
         this.notebook.focus_cell(); 
         this.notebook.edit_mode();
     };
 
     // For backwards compatability.
     IPython.NotebookTour = NotebookTour;
 
     return {'Tour': NotebookTour};
 
 });
 

IPython/html/templates/notebook.html

@@ -1,320 +1,320 b''
 {% extends "page.html" %}
 
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>
 {% endif %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("components/bootstrap-tour/build/css/bootstrap-tour.min.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("components/codemirror/lib/codemirror.css") }}">
 
 {{super()}}
 
 <link rel="stylesheet" href="{{ static_url("notebook/css/override.css") }}" type="text/css" />
 <link rel="stylesheet" href=""  id='kernel-css'                             type="text/css" />
 
 {% endblock %}
 
 {% block bodyclasses %}notebook_app {{super()}}{% endblock %}
 
 {% block params %}
 
 data-project="{{project}}"
 data-base-url="{{base_url}}"
 data-ws-url="{{ws_url}}"
 data-notebook-name="{{notebook_name}}"
 data-notebook-path="{{notebook_path}}"
 
 {% endblock %}
 
 
 {% block headercontainer %}
 
 
 <span id="save_widget" class="pull-left save_widget">
-    <span class="filename"></span>
+    <span id="notebook_name" class="filename"></span>
     <span class="checkpoint_status"></span>
     <span class="autosave_status"></span>
 </span>
 
 <span id="kernel_logo_widget">
   <img class="current_kernel_logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
 </span>
 
 {% endblock headercontainer %}
 
 {% block header %}
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
             <button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <i class="fa fa-bars"></i>
               <span class="navbar-text">Menu</span>
             </button>
             <p id="kernel_indicator" class="navbar-text">
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
             <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
                     <ul id="file_menu" class="dropdown-menu">
                         <li id="new_notebook" class="dropdown-submenu">
                             <a href="#">New Notebook</a>
                             <ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
                         </li>
                         <li id="open_notebook"
                             title="Opens a new window with the Dashboard view">
                             <a href="#">Open...</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="copy_notebook"
                             title="Open a copy of this notebook's contents and start a new kernel">
                             <a href="#">Make a Copy...</a></li>
                         <li id="rename_notebook"><a href="#">Rename...</a></li>
                         <li id="save_checkpoint"><a href="#">Save and Checkpoint</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="restore_checkpoint" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
                           <ul class="dropdown-menu">
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                           </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="print_preview"><a href="#">Print Preview</a></li>
                         <li class="dropdown-submenu"><a href="#">Download as</a>
                             <ul class="dropdown-menu">
                                 <li id="download_ipynb"><a href="#">IPython Notebook (.ipynb)</a></li>
                                 <li id="download_script"><a href="#">Script</a></li>
                                 <li id="download_html"><a href="#">HTML (.html)</a></li>
                                 <li id="download_rst"><a href="#">reST (.rst)</a></li>
                                 <li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="trust_notebook"
                             title="Trust the output of this notebook">
                             <a href="#" >Trust Notebook</a></li>
                         <li class="divider"></li>
                         <li id="kill_and_exit"
                             title="Shutdown this notebook's kernel, and close this window">
                             <a href="#" >Close and halt</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                     <ul id="edit_menu" class="dropdown-menu">
                         <li id="cut_cell"><a href="#">Cut Cell</a></li>
                         <li id="copy_cell"><a href="#">Copy Cell</a></li>
                         <li id="paste_cell_above" class="disabled"><a href="#">Paste Cell Above</a></li>
                         <li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
                         <li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                         <li id="delete_cell"><a href="#">Delete Cell</a></li>
                         <li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
                         <li class="divider"></li>
                         <li id="split_cell"><a href="#">Split Cell</a></li>
                         <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                         <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                         <li class="divider"></li>
                         <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                         <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                         <li class="divider"></li>
                         <li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
                     <ul id="view_menu" class="dropdown-menu">
                         <li id="toggle_header"
                             title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
                             <a href="#">Toggle Header</a></li>
                         <li id="toggle_toolbar"
                             title="Show/Hide the action icons (below menu bar)">
                             <a href="#">Toggle Toolbar</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
                     <ul id="insert_menu" class="dropdown-menu">
                         <li id="insert_cell_above"
                             title="Insert an empty Code cell above the currently active cell">
                             <a href="#">Insert Cell Above</a></li>
                         <li id="insert_cell_below"
                             title="Insert an empty Code cell below the currently active cell">
                             <a href="#">Insert Cell Below</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
                     <ul id="cell_menu" class="dropdown-menu">
                         <li id="run_cell" title="Run this cell, and move cursor to the next one">
                             <a href="#">Run</a></li>
                         <li id="run_cell_select_below" title="Run this cell, select below">
                             <a href="#">Run and Select Below</a></li>
                         <li id="run_cell_insert_below" title="Run this cell, insert below">
                             <a href="#">Run and Insert Below</a></li>
                         <li id="run_all_cells" title="Run all cells in the notebook">
                             <a href="#">Run All</a></li>
                         <li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
                             <a href="#">Run All Above</a></li>
                         <li id="run_all_cells_below" title="Run this cell and all cells below it">
                             <a href="#">Run All Below</a></li>
                         <li class="divider"></li>
                         <li id="change_cell_type" class="dropdown-submenu"
                             title="All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells">
                             <a href="#">Cell Type</a>
                             <ul class="dropdown-menu">
                               <li id="to_code"
                                   title="Contents will be sent to the kernel for execution, and output will display in the footer of cell">
                                   <a href="#">Code</a></li>
                               <li id="to_markdown"
                                   title="Contents will be rendered as HTML and serve as explanatory text">
                                   <a href="#">Markdown</a></li>
                               <li id="to_raw"
                                   title="Contents will pass through nbconvert unmodified">
                                   <a href="#">Raw NBConvert</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="current_outputs" class="dropdown-submenu"><a href="#">Current Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_current_output"
                                     title="Hide/Show the output of the current cell">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_current_output_scroll"
                                     title="Scroll the output of the current cell">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_current_output"
                                     title="Clear the output of the current cell">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                         <li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_all_output"
                                     title="Hide/Show the output of all cells">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_all_output_scroll"
                                     title="Scroll the output of all cells">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_all_output"
                                     title="Clear the output of all cells">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
                     <ul id="kernel_menu" class="dropdown-menu">
                         <li id="int_kernel"
                             title="Send KeyboardInterrupt (CTRL-C) to the Kernel">
                             <a href="#">Interrupt</a>
                         </li>
                         <li id="restart_kernel"
                             title="Restart the Kernel">
                             <a href="#">Restart</a>
                         </li>
                         <li id="reconnect_kernel"
                             title="Reconnect to the Kernel">
                             <a href="#">Reconnect</a>
                         </li>
                         <li class="divider"></li>
                         <li id="menu-change-kernel" class="dropdown-submenu">
                             <a href="#">Change kernel</a>
                             <ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
                         </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
                     <ul  id="help_menu" class="dropdown-menu">
                         <li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
                         <li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                         <li class="divider"></li>
                         {% set
                             sections = (
                                 (
                                     ("http://nbviewer.ipython.org/github/ipython/ipython/blob/3.x/examples/Notebook/Index.ipynb", "Notebook Help", True),
                                     ("https://help.github.com/articles/markdown-basics/","Markdown",True),
                                 ),
                             )
                         %}
 
                         {% for helplinks in sections %}
                             {% for link in helplinks %}
                                 <li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
                                 {{'<i class="fa fa-external-link menu-icon pull-right"></i>' if link[2]}}
                                 {{link[1]}}
                                 </a></li>
                             {% endfor %}
                             {% if not loop.last %}
                                 <li class="divider"></li>
                             {% endif %}
                         {% endfor %}
                         <li class="divider"></li>
                         <li title="About IPython Notebook"><a id="notebook_about" href="#">About</a></li>
                     </ul>
                 </li>
               </ul>
             </div>
         </div>
     </div>
 </div>
 
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">
     <div id="maintoolbar-container" class="container"></div>
   </div>
 </div>
 </div>
 
 <div class="lower-header-bar"></div>
 {% endblock header %}
 
 {% block site %}
 
 
 <div id="ipython-main-app">
     <div id="notebook_panel">
         <div id="notebook"></div>
     </div>
 </div>
 
 <div id="pager">
     <div id="pager-contents">
         <div id="pager-container" class="container"></div>
     </div>
     <div id='pager-button-area'></div>
 </div>
 
 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 
 {% endblock %}
 
 
 {% block script %}
 {{super()}}
 <script type="text/javascript">
     sys_info = {{sys_info}};
 </script>
 
 <script src="{{ static_url("components/text-encoding/lib/encoding.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
 
 {% endblock %}