Permalink
Browse files

initial implementation of Selection side panel for stylesheet (CSS) p…

…anel.

includes copy of sizzle.js under BSD license terms.

http://code.google.com/p/fbug/source/detail?r=7616
  • Loading branch information...
johnjbarton committed Aug 23, 2010
0 parents commit 5aababf04a7ef0c588bc9e14e00c58d9708d81b1
Showing with 33,251 additions and 0 deletions.
  1. +2 −0 ant.properties
  2. +63 −0 build.xml
  3. +7 −0 chrome.manifest
  4. +254 −0 content/selectbug.js
  5. +10 −0 content/selectbug.xul
  6. +3 −0 content/sizzle/.gitmodules
  7. +148 −0 content/sizzle/LICENSE
  8. +3 −0 content/sizzle/Makefile
  9. +14 −0 content/sizzle/README
  10. +1,068 −0 content/sizzle/sizzle.js
  11. +31 −0 content/sizzle/speed/config.ini
  12. +3 −0 content/sizzle/speed/footer.html
  13. +8,458 −0 content/sizzle/speed/frameworks/dojo.js
  14. +1,402 −0 content/sizzle/speed/frameworks/domass.js
  15. +3,549 −0 content/sizzle/speed/frameworks/jquery.js
  16. +3,946 −0 content/sizzle/speed/frameworks/mootools.js
  17. +4,320 −0 content/sizzle/speed/frameworks/prototype.js
  18. +6 −0 content/sizzle/speed/header.html
  19. +1 −0 content/sizzle/speed/index.php
  20. +4 −0 content/sizzle/speed/instructions.txt
  21. BIN content/sizzle/speed/logo.png
  22. +40 −0 content/sizzle/speed/selectors.list
  23. +189 −0 content/sizzle/speed/style.css
  24. +112 −0 content/sizzle/speed/system/index.php
  25. +147 −0 content/sizzle/speed/system/slickspeed.js
  26. +50 −0 content/sizzle/speed/system/template.php
  27. +2,865 −0 content/sizzle/speed/template.html
  28. +4 −0 content/sizzle/test/data/sizzle-jquery.js
  29. +42 −0 content/sizzle/test/data/testinit.js
  30. +25 −0 content/sizzle/test/data/with_fries.xml
  31. +223 −0 content/sizzle/test/index.html
  32. +5,714 −0 content/sizzle/test/jquery.js
  33. +438 −0 content/sizzle/test/unit/selector.js
  34. +28 −0 install.rdf
  35. +30 −0 license.txt
  36. +3 −0 locale/en-US/selectbug.properties
  37. +26 −0 skin/classic/selectbug.css
  38. +23 −0 update.rdf
@@ -0,0 +1,2 @@
+VERSION=0.1
+RELEASE=a1
@@ -0,0 +1,63 @@
+<?xml version="1.0" ?>
+
+<!-- In order to build eventbug extension run: $ant build
+ The final xpi file should be located in release directory -->
+<project name="selectbug" basedir="." default="build">
+
+ <!-- Directories -->
+ <property name="build.dir" value="release"/>
+
+ <!-- Properties -->
+ <property file="ant.properties"/>
+
+ <!-- Clean -->
+ <target name="clean">
+ <delete dir="${build.dir}"/>
+ </target>
+
+ <!-- Build -->
+ <target name="build" depends="clean">
+
+ <!-- Copy defaults directory -->
+ <copy todir="${build.dir}/defaults">
+ <fileset dir="defaults">
+ <include name="**/*.js"/>
+ </fileset>
+ </copy>
+
+ <!-- Copy chrome directory -->
+ <copy todir="${build.dir}/chrome">
+ <fileset dir="chrome">
+ <include name="**/*.js"/>
+ <include name="**/*.xul"/>
+ <include name="**/*.properties"/>
+ <include name="**/*.css"/>
+ </fileset>
+ </copy>
+
+ <!-- Copy extension installation files and licence.txt -->
+ <copy file="chrome.manifest" todir="${build.dir}"/>
+ <copy file="install.rdf" todir="${build.dir}"/>
+ <copy file="update.rdf" todir="${build.dir}"/>
+
+ <!-- Update release version from ant.properties file -->
+ <replace file="${build.dir}/install.rdf" propertyFile="ant.properties">
+ <replacefilter token="@VERSION@" property="VERSION"/>
+ <replacefilter token="@RELEASE@" property="RELEASE"/>
+ </replace>
+
+ <!-- Create final selectbug.xpi file -->
+ <zip destfile="${build.dir}/eventbug-${VERSION}${RELEASE}.xpi"
+ basedir="${build.dir}" update="true" />
+
+ <!-- Generate update.rdf file -->
+ <replace file="${build.dir}/update.rdf" propertyFile="ant.properties">
+ <replacefilter token="@VERSION@" property="VERSION"/>
+ <replacefilter token="@RELEASE@" property="RELEASE"/>
+ </replace>
+
+ <!-- Final version message -->
+ <echo message="EventBug version: ${VERSION}${RELEASE}"/>
+ </target>
+
+</project>
@@ -0,0 +1,7 @@
+content selectbug content/
+skin selectbug classic/1.0 skin/classic/
+locale selectbug en-US locale/en-US/
+
+overlay chrome://firebug/content/firebugOverlay.xul chrome://selectbug/content/selectbug.xul
+# Also useful in chromebug
+overlay chrome://fb4cb/content/firebugOverlay.xul chrome://selectbug/content/selectbug.xul
@@ -0,0 +1,254 @@
+/* See license.txt for terms of usage */
+FBL.ns(function() { with (FBL) {
+
+// ************************************************************************************************
+// Constants
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+const prefs = Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch2);
+
+// ************************************************************************************************
+
+// Register string bundle of this extension so, $STR method (implemented by Firebug)
+// can be used. Also, perform the registration here so, localized strings used
+// in template definitions can be resolved.
+Firebug.registerStringBundle("chrome://selectbug/locale/selectbug.properties");
+
+// ************************************************************************************************
+
+
+/**
+ * @panel Selector side panel displaying HTML elements for the current selector, either from the CSS main panel or user entry
+ */
+function SelectorPanel() {}
+SelectorPanel.prototype = extend(Firebug.Panel,
+/** @lends SelectorPanel */
+{
+ name: 'selection',
+ parentPanel: 'stylesheet',
+ title: $STR("selectbug.Selection"),
+
+ initialize: function(context, doc)
+ {
+ Firebug.Panel.initialize.apply(this, arguments);
+ },
+
+ initializeNode: function(oldPanelNode)
+ {
+ Firebug.Panel.initializeNode.apply(this, arguments);
+ appendStylesheet(this.panelNode.ownerDocument, "chrome://selectbug/skin/selectbug.css");
+ appendStylesheet(this.mainPanel.panelNode.ownerDocument, "chrome://selectbug/skin/selectbug.css");
+ this.setSelection = bind(this.setSelection, this);
+ this.clearSelection = bind(this.clearSelection, this);
+ this.lockSelection = bind(this.lockSelection, this);
+ this.mainPanel.panelNode.addEventListener("mouseover", this.setSelection, false);
+ this.mainPanel.panelNode.addEventListener("mouseout", this.clearSelection, false);
+ this.mainPanel.panelNode.addEventListener("mousedown", this.lockSelection, false);
+ },
+
+ destroyNode: function()
+ {
+ this.mainPanel.panelNode.removeEventListener("mouseover", this.setSelection, false);
+ this.mainPanel.panelNode.removeEventListener("mouseout", this.clearSelection, false);
+ this.mainPanel.panelNode.removeEventListener("mousedown", this.lockSelection, false);
+ Firebug.Panel.destroyNode.apply(this, arguments);
+ },
+
+ show: function(state)
+ {
+ Firebug.Panel.show.apply(this, arguments);
+ this.refresh();
+ },
+
+ getCSSStyleRule: function(event)
+ {
+ var object = Firebug.getRepObject(event.target);
+ if(object && (object instanceof CSSStyleRule))
+ return object;
+ },
+
+ getCSSRuleElement: function(element)
+ {
+ while(element && !element.classList.contains("cssRule"))
+ element = element.parentNode;
+
+ return element;
+ },
+
+ setSelection: function(event)
+ {
+ var rule = this.getCSSStyleRule(event);
+ if (rule) // then we have entered a rule element
+ {
+ var ruleElement = this.getCSSRuleElement(event.target);
+ if (ruleElement && ruleElement !== this.lockedElement)
+ ruleElement.classList.add("selectedSelectorRule");
+
+ this.selection = rule;
+ this.rebuild();
+ }
+ },
+
+ clearSelection: function(event)
+ {
+ if (this.selection !== this.lockedSelection)
+ {
+ this.selection = this.lockedSelection;
+ this.rebuild();
+ }
+
+ var rule = this.getCSSStyleRule(event);
+ if (rule) // then we are leaving a rule element that we may have highlighted.
+ {
+ var ruleElement = this.getCSSRuleElement(event.target);
+ if (ruleElement)
+ ruleElement.classList.remove("selectedSelectorRule");
+ }
+ },
+
+ lockSelection: function(event)
+ {
+ var rule = this.getCSSStyleRule(event);
+ if (rule)
+ {
+ if (this.lockedElement)
+ this.lockedElement.classList.remove("lockedSelectorRule");
+
+ this.lockedElement = this.getCSSRuleElement(event.target);
+
+ if (this.lockedElement)
+ {
+ this.lockedElement.classList.add("lockedSelectorRule");
+ this.lockedElement.classList.remove("selectedSelectorRule");
+ }
+
+ this.lockedSelection = rule;
+ }
+ },
+
+ hide: function()
+ {
+ Firebug.Panel.hide.apply(this, arguments);
+ },
+
+ refresh: function()
+ {
+ var root = this.context.window.document.documentElement;
+ this.selection = this.mainPanel.selection;
+ this.rebuild(true);
+ },
+
+ /*
+ * returns an array of Elements matched from selector
+ */
+ getSelectedElements: function(rule)
+ {
+ var selections = Sizzle( rule.selectorText, Firebug.currentContext.window.document.documentElement );
+ if (selections instanceof Array)
+ return selections;
+ else
+ throw new Error("Selection Failed: "+e);
+ },
+
+ /**
+ * Build content of the panel. The basic layout of the panel is generated by
+ * {@link SelectorTemplate} template.
+ */
+ rebuild: function()
+ {
+ if (this.selection)
+ {
+ try
+ {
+ var elements = this.getSelectedElements(this.selection);
+ if (elements && elements.length)
+ {
+ SelectorTemplate.tag.replace({object: elements}, this.panelNode);
+ return;
+ }
+ }
+ catch(e)
+ {
+ WarningTemplate.sizzleErrorTag.replace({object: e}, this.panelNode);
+ return;
+ }
+ }
+
+ WarningTemplate.noSelectionTag.replace({object: this.selection}, this.panelNode);
+ },
+
+ getObjectPath: function(object)
+ {
+ if (FBTrace.DBG_SELECTBUG)
+ FBTrace.sysout("selectbug.getObjectPath NOOP", object);
+ },
+
+ supportsObject: function(object)
+ {
+ return 0;
+ },
+});
+
+// ************************************************************************************************
+
+// ************************************************************************************************
+
+var BaseRep = domplate(Firebug.Rep,
+{
+ // xxxHonza: shouldn't this be in Firebug.Rep?
+ getNaturalTag: function(value)
+ {
+ var rep = Firebug.getRep(value);
+ var tag = rep.shortTag ? rep.shortTag : rep.tag;
+ return tag;
+ }
+});
+
+// ************************************************************************************************
+
+/**
+ * @domplate: Template for basic layout of the {@link SelectorPanel} panel.
+ */
+var SelectorTemplate = domplate(BaseRep,
+{
+ // object will be array of elements CSSStyleRule
+ tag:
+ TABLE({"class": "cssSelectionTable", cellpadding: 0, cellspacing: 0},
+ TBODY({"class": "cssSelectionTBody"},
+ FOR("element", "$object",
+ TR({"class": "elementRow", _repObject:"$element"},
+ TD({"class": "selectionElement"},
+ TAG( "$element|getNaturalTag", {object: "$element"})
+ )
+ )
+ )
+ )
+ ),
+
+});
+
+var WarningTemplate = domplate(Firebug.Rep,
+{
+ noSelectionTag: DIV({"class":"selectbugWarning "},
+ SPAN($STR("selectbug.noSelection"))
+ ),
+
+ sizzleErrorTag: DIV({"class":"selectbugWarning"},
+ DIV($STR("selectbug.sizzleError")),
+ DIV({"class":"selectionErrorText"}, SPAN("$object"))
+ ),
+});
+
+// ************************************************************************************************
+// ************************************************************************************************
+// Registration
+
+// xxxHonza: what if the stylesheet registration would be as follows:
+//Firebug.registerStylesheet("chrome://selectbug/skin/selectbug.css");
+
+Firebug.registerPanel(SelectorPanel);
+
+// ************************************************************************************************
+}});
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!-- See license.txt for terms of usage -->
+
+<?xml-stylesheet href="chrome://selectbug/skin/selectbug.css"?>
+
+<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <script src="chrome://selectbug/content/selectbug.js" type="application/x-javascript"/>
+ <script src="chrome://selectbug/content/sizzle/sizzle.js" type="application/x-javascript"/>
+
+</overlay>
@@ -0,0 +1,3 @@
+[submodule "test/qunit"]
+ path = test/qunit
+ url = git://github.com/jquery/qunit.git
Oops, something went wrong.

0 comments on commit 5aababf

Please sign in to comment.