x

CmdUtils.CreateCommand({ 
  name: "flasher",
  description: "Finds a selector that will match element currently hovered, and highlights all matches",
  execute: function ubiquityHighlightExecute() {
    var d = CmdUtils.getDocumentInsecure();
    myId = function(me){ return me.id ? '#' + me.id : '' }
    myTag = function(me){ return me.tagName ? me.tagName.toLowerCase() : '' }
    myClass = function(me){ return me.className ? '.' + me.className.split(' ').join('.') : '' }

    breadcrumbs = function breadcrumbs(me){
      var path = [myTag(me) + myId(me) + myClass(me)];
      jQuery(me, d).parents().each(function() {
              path[path.length] = myTag(this) + myId(this) + myClass(this);
      });
      path.reverse();
      return path.join(' > ');
    }
    var flasher = Components.classes["@mozilla.org/inspector/flasher;1"]
                            .getService(Components.interfaces.inIFlasher);
    flasher.color = "#CC0000";
    flasher.thickness = 2;
    flasher.invert = false;
    var dirty = [];
    jQuery("html *", d).each(function ubiquityHighlight(){
      jQuery(this).mouseover(function ubiquityHighlightMouseOver(e){
        dirty.forEach(function ubiquityHighlightCleaner(node) {
          flasher.repaintElement(node);
        });
        dirty = [];
        var path = breadcrumbs(this);
        var nodes = jQuery(path, d);
        nodes.each(function ubiquityHighlightFlasher() {
          if(this.nodeType != Components.interfaces.nsIDOMNode.ELEMENT_NODE)
            return;
          if(this == this.ownerDocument.documentElement)
            return;
      
          flasher.drawElementOutline(this);
          dirty.push(this);
        });
        e.stopPropagation();
      });
      jQuery(this).mouseout(function ubiquityHighlightMouseOut(e){
        flasher.repaintElement(this);
      });
      jQuery(this).click(function ubiquityHighlightClick(e){
        displayMessage(breadcrumbs(this));
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
    });
  }
});

CmdUtils.CreateCommand({
  name: "selector",
  description: "Finds a selector that will match element currently hovered, and highlights all matches",
  execute: function() {
    var d = CmdUtils.getDocumentInsecure();
    myId = function(me){ return me.id ? '#' + me.id : '' }
    myTag = function(me){ return me.tagName ? me.tagName.toLowerCase() : '' }
    myClass = function(me){ return me.className ? '.' + me.className.split(' ').join('.') : '' }

    breadcrumbs = function breadcrumbs(me){
      var path = [myTag(me) + myId(me) + myClass(me)];
      jQuery(me,d).parents().each(function() {
              path[path.length] = myTag(this) + myId(this) + myClass(this);
      });
      path.reverse();
      return path.join(' > ').replace(/.ubiquityHighlight/g,"");
    }
    if (!d.getElementById("ubiquityCss"))
      jQuery('head',d).append('<style id="ubiquityCss" type="text/css">.ubiquityHighlight {outline: 1px blue solid !important;}</style>');
    jQuery("*",d).each(function ubiquityHighlight(){
      jQuery(this).mouseover(function ubiquityHighlightMouseOver(e){
        jQuery("*",d).removeClass("ubiquityHighlight");
        var path = breadcrumbs(this);
        jQuery(path,d).addClass("ubiquityHighlight");
        e.stopPropagation();
      });
      jQuery(this).mouseout(function ubiquityHighlightMouseOut(e){
        jQuery(this).removeClass("ubiquityHighlight");
      });
      jQuery(this).click(function ubiquityHighlightClick(e){
        displayMessage(breadcrumbs(this));
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
    });
  }
});