[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-dark-console
   3   * @requires javelin-behavior
   4   *           javelin-stratcom
   5   *           javelin-util
   6   *           javelin-dom
   7   *           javelin-request
   8   *           phabricator-keyboard-shortcut
   9   */
  10  
  11  JX.behavior('dark-console', function(config, statics) {
  12    var root = statics.root || setup_console();
  13  
  14    config.key = config.key || root.getAttribute('data-console-key');
  15  
  16    if (!('color' in config)) {
  17      config.color = root.getAttribute('data-console-color');
  18    }
  19  
  20    add_request(config);
  21  
  22    // Do first-time setup.
  23    function setup_console() {
  24      statics.root = JX.$('darkconsole');
  25      statics.req = {all: {}, current: null};
  26      statics.tab = {all: {}, current: null};
  27  
  28      statics.el = {};
  29  
  30      statics.el.reqs = JX.$N('div', {className: 'dark-console-requests'});
  31      statics.root.appendChild(statics.el.reqs);
  32  
  33      statics.el.tabs = JX.$N('div', {className: 'dark-console-tabs'});
  34      statics.root.appendChild(statics.el.tabs);
  35  
  36      statics.el.panel = JX.$N('div', {className: 'dark-console-panel'});
  37      statics.root.appendChild(statics.el.panel);
  38  
  39      statics.el.load = JX.$N('div', {className: 'dark-console-load'});
  40      statics.root.appendChild(statics.el.load);
  41  
  42      statics.cache = {};
  43  
  44      statics.visible = config.visible;
  45      statics.selected = config.selected;
  46  
  47      install_shortcut();
  48  
  49      if (config.headers) {
  50        // If the main page had profiling enabled, also enable it for any Ajax
  51        // requests.
  52        JX.Request.listen('open', function(r) {
  53          for (var k in config.headers) {
  54            r.getTransport().setRequestHeader(k, config.headers[k]);
  55          }
  56        });
  57      }
  58  
  59      return statics.root;
  60    }
  61  
  62  
  63    // Add a new request to the console (initial page load, or new Ajax response).
  64    function add_request(config) {
  65  
  66      // Ignore DarkConsole data requests.
  67      if (config.uri.match(new RegExp('^/~/data/'))) {
  68        return;
  69      }
  70  
  71      var attr = {
  72        className: 'dark-console-request',
  73        sigil: 'dark-console-request',
  74        title: config.uri,
  75        meta: config,
  76        href: '#'
  77      };
  78  
  79      var link = JX.$N('a', attr, [get_bullet(config.color), ' ', config.uri]);
  80      statics.el.reqs.appendChild(link);
  81      statics.req.all[config.key] = link;
  82  
  83      if (!statics.req.current) {
  84        select_request(config.key);
  85      }
  86    }
  87  
  88  
  89    function get_bullet(color) {
  90      if (!color) {
  91        return null;
  92      }
  93      return JX.$N('span', {style: {color: color}}, '\u2022');
  94    }
  95  
  96  
  97    // Select a request (on load, or when the user clicks one).
  98    function select_request(key) {
  99      var req = statics.req;
 100  
 101      if (req.current) {
 102        JX.DOM.alterClass(req.all[req.current], 'dark-selected', false);
 103      }
 104      statics.req.current = key;
 105      JX.DOM.alterClass(req.all[req.current], 'dark-selected', true);
 106  
 107      if (statics.visible) {
 108        draw_request(key);
 109      }
 110    }
 111  
 112    // When the user clicks a request, select it.
 113    JX.Stratcom.listen('click', 'dark-console-request', function(e) {
 114      e.kill();
 115      select_request(e.getNodeData('dark-console-request').key);
 116    });
 117  
 118  
 119    // After the user selects a request, draw its tabs.
 120    function draw_request(key) {
 121      var cache = statics.cache;
 122  
 123      if (cache[key]) {
 124        render_request(key);
 125        return;
 126      }
 127  
 128      new JX.Request(
 129        '/~/data/' + key + '/',
 130        function(r) {
 131          cache[key] = r;
 132          if (statics.req.current == key) {
 133            render_request(key);
 134          }
 135        })
 136      .send();
 137  
 138      show_loading();
 139    }
 140  
 141    // Show the loading indicator.
 142    function show_loading() {
 143      JX.DOM.hide(statics.el.tabs);
 144      JX.DOM.hide(statics.el.panel);
 145      JX.DOM.show(statics.el.load);
 146    }
 147  
 148    // Hide the loading indicator.
 149    function hide_loading() {
 150      JX.DOM.show(statics.el.tabs);
 151      JX.DOM.show(statics.el.panel);
 152      JX.DOM.hide(statics.el.load);
 153    }
 154  
 155    function render_request(key) {
 156      var data = statics.cache[key];
 157  
 158      statics.tab.all = {};
 159  
 160      var links = [];
 161      var first = null;
 162      for (var ii = 0; ii < data.tabs.length; ii++) {
 163        var tab = data.tabs[ii];
 164        var attr = {
 165          className: 'dark-console-tab',
 166          sigil: 'dark-console-tab',
 167          meta: tab,
 168          href: '#'
 169        };
 170  
 171        var link = JX.$N('a', attr, [get_bullet(tab.color), ' ', tab.name]);
 172        links.push(link);
 173        statics.tab.all[tab['class']] = link;
 174        first = first || tab['class'];
 175      }
 176  
 177      JX.DOM.setContent(statics.el.tabs, links);
 178  
 179      if (statics.tab.current in statics.tab.all) {
 180        select_tab(statics.tab.current);
 181      } else if (statics.selected in statics.tab.all) {
 182        select_tab(statics.selected);
 183      } else {
 184        select_tab(first);
 185      }
 186  
 187      hide_loading();
 188    }
 189  
 190    function select_tab(tclass) {
 191      var tabs = statics.tab;
 192  
 193      if (tabs.current) {
 194        JX.DOM.alterClass(tabs.current, 'dark-selected', false);
 195      }
 196      tabs.current = tabs.all[tclass];
 197      JX.DOM.alterClass(tabs.current, 'dark-selected', true);
 198  
 199      if (tclass != statics.selected) {
 200        // Save user preference.
 201        new JX.Request('/~/', JX.bag)
 202          .setData({ tab : tclass })
 203          .send();
 204        statics.selected = tclass;
 205      }
 206  
 207      draw_panel();
 208    }
 209  
 210    // When the user clicks a tab, select it.
 211    JX.Stratcom.listen('click', 'dark-console-tab', function(e) {
 212      e.kill();
 213      select_tab(e.getNodeData('dark-console-tab')['class']);
 214    });
 215  
 216    function draw_panel() {
 217      var data = statics.cache[statics.req.current];
 218      var tclass = JX.Stratcom.getData(statics.tab.current)['class'];
 219      var html = data.panel[tclass];
 220  
 221      var div = JX.$N('div', {className: 'dark-console-panel-core'}, JX.$H(html));
 222      JX.DOM.setContent(statics.el.panel, div);
 223    }
 224  
 225    function install_shortcut() {
 226      var desc = 'Toggle visibility of DarkConsole.';
 227      new JX.KeyboardShortcut('`', desc)
 228        .setHandler(function() {
 229          statics.visible = !statics.visible;
 230  
 231          if (statics.visible) {
 232            JX.DOM.show(root);
 233            if (statics.req.current) {
 234              draw_request(statics.req.current);
 235            }
 236          } else {
 237            JX.DOM.hide(root);
 238          }
 239  
 240          // Save user preference.
 241          new JX.Request('/~/', JX.bag)
 242            .setData({visible: statics.visible ? 1 : 0})
 243            .send();
 244  
 245          // Force resize listeners to take effect.
 246          JX.Stratcom.invoke('resize');
 247        })
 248        .register();
 249    }
 250  
 251  });