parameters: (self, parsed_url, head, body)
docstring: Show the previewer frame structure.
  
      Code panes are populated via XHR after links in the nav pane are clicked.
docstring_summary: Show the previewer frame structure.
docstring_tokens: Show the previewer frame structure .
function: def _ShowPanels(self, parsed_url, head, body):
      """Show the previewer frame structure.
  
      Code panes are populated via XHR after links in the nav pane are clicked.
      """
      (head.Append('<style>')
           .Append('body {')
           .Append('  margin: 0;')
           .Append('}')
           .Append('.pane {')
           .Append('  height: 100%;')
           .Append('  overflow-x: auto;')
           .Append('  overflow-y: scroll;')
           .Append('  display: inline-block;')
           .Append('}')
           .Append('#nav_pane {')
           .Append('  width: 20%;')
           .Append('}')
           .Append('#nav_pane ul {')
           .Append('  list-style-type: none;')
           .Append('  padding: 0 0 0 1em;')
           .Append('}')
           .Append('#cc_pane {')
           .Append('  width: 40%;')
           .Append('}')
           .Append('#h_pane {')
           .Append('  width: 40%;')
           .Append('}')
           .Append('</style>')
      )
  
      body.Append(
          '<div class="pane" id="nav_pane">%s</div>'
          '<div class="pane" id="h_pane"></div>'
          '<div class="pane" id="cc_pane"></div>' %
          self._RenderNavPane(parsed_url.path[1:])
      )
  
      # The Javascript that interacts with the nav pane and panes to show the
      # compiled files as the URL or highlighting options change.
      body.Append('''<script type="text/javascript">
  // Calls a function for each highlighter style <select> element.
  function forEachHighlighterStyle(callback) {
    var highlighterStyles =
        document.getElementsByClassName('highlighter_styles');
    for (var i = 0; i < highlighterStyles.length; ++i)
      callback(highlighterStyles[i]);
  }
  
  // Called when anything changes, such as the highlighter or hashtag.
  function updateEverything() {
    var highlighters = document.getElementById('highlighters');
    var highlighterName = highlighters.value;
  
    // Cache in localStorage for when the page loads next.
    localStorage.highlightersValue = highlighterName;
  
    // Show/hide the highlighter styles.
    var highlighterStyleName = '';
    forEachHighlighterStyle(function(highlighterStyle) {
      if (highlighterStyle.id === highlighterName + '_styles') {
        highlighterStyle.removeAttribute('style')
        highlighterStyleName = highlighterStyle.value;
      } else {
        highlighterStyle.setAttribute('style', 'display:none')
      }
  
      // Cache in localStorage for when the page next loads.
      localStorage[highlighterStyle.id + 'Value'] = highlighterStyle.value;
    });
  
    // Populate the code panes.
    function populateViaXHR(elementId, requestPath) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState != 4)
          return;
        if (xhr.status != 200) {
          alert('XHR error to ' + requestPath);
          return;
        }
        document.getElementById(elementId).innerHTML = xhr.responseText;
      };
      xhr.open('GET', requestPath, true);
      xhr.send();
    }
  
    var targetName = window.location.hash;
    targetName = targetName.substring('#'.length);
    targetName = targetName.split('.', 1)[0]
  
    if (targetName !== '') {
      var basePath = window.location.pathname;
      var query = 'highlighter=' + highlighterName + '&' +
                  'style=' + highlighterStyleName;
      populateViaXHR('h_pane',  basePath + '/' + targetName + '.h?'  + query);
      populateViaXHR('cc_pane', basePath + '/' + targetName + '.cc?' + query);
    }
  }
  
  // Initial load: set the values of highlighter and highlighterStyles from
  // localStorage.
  (function() {
  var cachedValue = localStorage.highlightersValue;
  if (cachedValue)
    document.getElementById('highlighters').value = cachedValue;
  
  forEachHighlighterStyle(function(highlighterStyle) {
    var cachedValue = localStorage[highlighterStyle.id + 'Value'];
    if (cachedValue)
      highlighterStyle.value = cachedValue;
  });
  })();
  
  window.addEventListener('hashchange', updateEverything, false);
  updateEverything();
  </script>''')
function_tokens: def _ShowPanels ( self , parsed_url , head , body ) : ( head . Append ( '<style>' ) . Append ( 'body {' ) . Append ( '  margin: 0;' ) . Append ( '}' ) . Append ( '.pane {' ) . Append ( '  height: 100%;' ) . Append ( '  overflow-x: auto;' ) . Append ( '  overflow-y: scroll;' ) . Append ( '  display: inline-block;' ) . Append ( '}' ) . Append ( '#nav_pane {' ) . Append ( '  width: 20%;' ) . Append ( '}' ) . Append ( '#nav_pane ul {' ) . Append ( '  list-style-type: none;' ) . Append ( '  padding: 0 0 0 1em;' ) . Append ( '}' ) . Append ( '#cc_pane {' ) . Append ( '  width: 40%;' ) . Append ( '}' ) . Append ( '#h_pane {' ) . Append ( '  width: 40%;' ) . Append ( '}' ) . Append ( '</style>' ) ) body . Append ( '<div class="pane" id="nav_pane">%s</div>' '<div class="pane" id="h_pane"></div>' '<div class="pane" id="cc_pane"></div>' % self . _RenderNavPane ( parsed_url . path [ 1 : ] ) ) # The Javascript that interacts with the nav pane and panes to show the # compiled files as the URL or highlighting options change. body . Append ( '''<script type="text/javascript">
  // Calls a function for each highlighter style <select> element.
  function forEachHighlighterStyle(callback) {
    var highlighterStyles =
        document.getElementsByClassName('highlighter_styles');
    for (var i = 0; i < highlighterStyles.length; ++i)
      callback(highlighterStyles[i]);
  }
  
  // Called when anything changes, such as the highlighter or hashtag.
  function updateEverything() {
    var highlighters = document.getElementById('highlighters');
    var highlighterName = highlighters.value;
  
    // Cache in localStorage for when the page loads next.
    localStorage.highlightersValue = highlighterName;
  
    // Show/hide the highlighter styles.
    var highlighterStyleName = '';
    forEachHighlighterStyle(function(highlighterStyle) {
      if (highlighterStyle.id === highlighterName + '_styles') {
        highlighterStyle.removeAttribute('style')
        highlighterStyleName = highlighterStyle.value;
      } else {
        highlighterStyle.setAttribute('style', 'display:none')
      }
  
      // Cache in localStorage for when the page next loads.
      localStorage[highlighterStyle.id + 'Value'] = highlighterStyle.value;
    });
  
    // Populate the code panes.
    function populateViaXHR(elementId, requestPath) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState != 4)
          return;
        if (xhr.status != 200) {
          alert('XHR error to ' + requestPath);
          return;
        }
        document.getElementById(elementId).innerHTML = xhr.responseText;
      };
      xhr.open('GET', requestPath, true);
      xhr.send();
    }
  
    var targetName = window.location.hash;
    targetName = targetName.substring('#'.length);
    targetName = targetName.split('.', 1)[0]
  
    if (targetName !== '') {
      var basePath = window.location.pathname;
      var query = 'highlighter=' + highlighterName + '&' +
                  'style=' + highlighterStyleName;
      populateViaXHR('h_pane',  basePath + '/' + targetName + '.h?'  + query);
      populateViaXHR('cc_pane', basePath + '/' + targetName + '.cc?' + query);
    }
  }
  
  // Initial load: set the values of highlighter and highlighterStyles from
  // localStorage.
  (function() {
  var cachedValue = localStorage.highlightersValue;
  if (cachedValue)
    document.getElementById('highlighters').value = cachedValue;
  
  forEachHighlighterStyle(function(highlighterStyle) {
    var cachedValue = localStorage[highlighterStyle.id + 'Value'];
    if (cachedValue)
      highlighterStyle.value = cachedValue;
  });
  })();
  
  window.addEventListener('hashchange', updateEverything, false);
  updateEverything();
  </script>''' )