constructor(elementRef:ElementRef, private dom:BrowserDomAdapter) {
    this.$element = elementRef.nativeElement;

    // initial styling
    this.dom.setStyle(this.$element, 'position', 'absolute');
    this.dom.setStyle(this.$element, 'top', '0');
    this.dom.setStyle(this.$element, 'bottom', '0');
    this.dom.setStyle(this.$element, 'max-height', '100%');
  }

  function init() {
    BrowserDomAdapter.makeCurrent();
    const tree = document.createElement('tree');
    document.querySelector('baseline').appendChild(tree);
    app = new BaseLineTreeComponent(tree);

    bindAction('#destroyDom', destroyDom);
    bindAction('#createDom', createDom);

    bindAction('#updateDomProfile', profile(createDom, noop, 'baseline-update'));
    bindAction('#createDomProfile', profile(createDom, destroyDom, 'baseline-create'));
  }

export function main() {
  BrowserDomAdapter.makeCurrent();
  var count = getIntParameter('selectors');

  var fixedMatcher;
  var fixedSelectorStrings = [];
  var fixedSelectors = [];
  for (var i = 0; i < count; i++) {
    fixedSelectorStrings.push(randomSelector());
  }
  for (var i = 0; i < count; i++) {
    fixedSelectors.push(CssSelector.parse(fixedSelectorStrings[i]));
  }
  fixedMatcher = new SelectorMatcher();
  for (var i = 0; i < count; i++) {
    fixedMatcher.addSelectables(fixedSelectors[i], i);
  }

  function parse() {
    var result = [];
    for (var i = 0; i < count; i++) {
      result.push(CssSelector.parse(fixedSelectorStrings[i]));
    }
    return result;
  }

  function addSelectable() {
    var matcher = new SelectorMatcher();
    for (var i = 0; i < count; i++) {
      matcher.addSelectables(fixedSelectors[i], i);
    }
    return matcher;
  }

  function match() {
    var matchCount = 0;
    for (var i = 0; i < count; i++) {
      fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; });
    }
    return matchCount;
  }

  bindAction('#parse', parse);
  bindAction('#addSelectable', addSelectable);
  bindAction('#match', match);
}

 static autoInit() {
   const specUrlAttributeName = 'spec-url';
   let redocEl = dom.query('redoc');
   if (!redocEl) return;
   if (dom.hasAttribute(redocEl, specUrlAttributeName)) {
     let url = dom.getAttribute(redocEl, specUrlAttributeName);
     Redoc.init(url);
   }
 }

 static hideLoadingAnimation() {
   let redocEl = dom.query('redoc');
   if (!redocEl) return;
   dom.addClass(redocEl, 'loading-remove');
   setTimeout(() => {
     dom.removeClass(redocEl, 'loading-remove');
     dom.removeClass(redocEl, 'loading');
   }, 400);
 }

  init() {
    this.categories = this.menuService.categories;

    this.$mobileNav = this.dom.querySelector(this.$element, '.mobile-nav');
    this.$resourcesNav = this.dom.querySelector(this.$element, '#resources-nav');

    //decorate scrollYOffset to account mobile nav
    this.scrollService.scrollYOffset = () => {
      let mobileNavOffset = this.$mobileNav.clientHeight;
      return this.options.scrollYOffset() + mobileNavOffset;
    };
  }

  setupToggleAria() {
    let toggleTypes = ['md-switch', 'md-checkbox'];
    let toggle;
    let el = this._element.nativeElement;

    for (var i = 0, toggleType; toggleType = toggleTypes[i]; ++i) {
      if (toggle = this.dom.querySelector(el, toggleType)) {
        if (!toggle.hasAttribute('aria-label')) {
          var p = this.dom.querySelector(el, 'p');
          if (!p) return;
          toggle.setAttribute('aria-label', 'Toggle ' + p.textContent);
        }
      }
    }
  }

 static displayError(err) {
   let redocEl = dom.query('redoc');
   if (!redocEl) return;
   let heading = 'Oops... ReDoc failed to render this spec';
   let details = err.message;
   let erroHtml = `<div class="redoc-error">
     <h1>${heading}</h1>
     <div class='redoc-error-details'>${details}</div>`;
   redocEl.innerHTML = erroHtml;
 }

  parseOptions(el) {
    let parsedOpts;
    let attributesMap = this.dom.attributeMap(el);
    parsedOpts = {};
    Array.from(attributesMap.keys())
      //camelCasify
      .map(k => ({
        attrName: k,
        name: k.replace(/-(.)/g,  (m, $1) => $1.toUpperCase())
        })
      )
      .filter(option => OPTION_NAMES.has(option.name))
      .forEach(option => {
        parsedOpts[option.name] = attributesMap.get(option.attrName);
      });

    this.options = parsedOpts;
    this._normalizeOptions();
  }

 toggleMobileNav() {
   let dom = this.dom;
   let $overflowParent = (this.options.$scrollParent === global) ? dom.defaultDoc().body
     : this.$scrollParent;
   if (dom.hasStyle(this.$resourcesNav, 'height')) {
     dom.removeStyle(this.$resourcesNav, 'height');
     dom.removeStyle($overflowParent, 'overflow-y');
   } else {
     let viewportHeight = this.options.$scrollParent.innerHeight
      || this.options.$scrollParent.clientHeight;
     let height = viewportHeight - this.$mobileNav.getBoundingClientRect().bottom;
     dom.setStyle($overflowParent, 'overflow-y', 'hidden');
     dom.setStyle(this.$resourcesNav, 'height', height + 'px');
   }
 }