################################################################################################### Versions ################################################################################################### Firebug Lite 1.3.1 - 2010-09-07 - Revision: 7759 Firebug Lite 1.3.1b1 - 2010-06-29 - Revision: 7198 Firebug Lite 1.3.1a2 - 2010-06-24 - Revision: 7125 Firebug Lite 1.3.0 - 2009-05-23 - Revision: 6854 Firebug Lite 1.3.0b2 - 2009-05-06 - Revision: 6695 Firebug Lite 1.3.0b1 - 2009-02-05 - Revision: 6012 Firebug Lite 1.3.0a5 - 2009-01-16 - Revision: 5719 Firebug Lite 1.3.0a4 - 2009-12-31 - Revision: 5505 Firebug Lite 1.3.0a3 - 2009-09-13 - Revision: 4882 Firebug Lite 1.3.0a2 - 2009-08-03 - Revision: 3847 Firebug Lite 1.3.0a1 - 2009-05-03 - Revision: 2729 Firebug Lite 1.3.0a0 - 2009-01-24 - Revision: 1765 ################################################################################################### sourceFile dependencies ################################################################################################### Firebug.SourceFile is both a class and a namespace, like Firebug.SourceFile.getSourceFileByScript() Wouldn't be better to have two different files/modules: Firebug.SourceFile class, and Firebug.SourceFileManager namespace? Firebug.SourceFile class properties/methods used by sourceBox.js - href - source (array of lines) - compilation_unit_type - loadScriptLines() Firebug.SourceFile class properties/methods used by debugger.js - scriptTag - outerScript? - dependentURL - getScriptAnalyzer() - toString() - isEval() - isEvent() - isExecutableLine() - loadScriptLines() - getObjectDescription() Firebug.SourceFile namespace methods used by debugger.js - Firebug.SourceFile.getSourceFileByScript() - Firebug.SourceFile.getSourceFileAndLineByScript() ################################################################################################### sourceCache dependencies ################################################################################################### Firebug.SourceCache class properties/methods used by sourceBox.js - addListener() - removeListener() Firebug.SourceCache class properties/methods used by sourceFile.js - load() - getLine() ################################################################################################### New Script Panel ################################################################################################### --------------------------------------------------------------------------------------------------- debugger.js dependencies --------------------------------------------------------------------------------------------------- - jsd - Ci.jsdIScript; - Ci.jsdIStackFrame; - Ci.jsdIExecutionHook; - Ci.nsISupports; - Ci.nsICryptoHash; - Ci.nsIURI --------------------------------------------------------------------------------------------------- debugger.js changes --------------------------------------------------------------------------------------------------- - const --> var - addEventListener --> adEvent - element.getElementsByClassName(name) --> FBL.getElementsByClass(element, name) - named functions --> variables - target = event.target || event.srcElement - Array.indexOf --> (" " + str + " ").indexOf trick --------------------------------------------------------------------------------------------------- debugger.js Lite's missing pieces --------------------------------------------------------------------------------------------------- ................................................................................................... items to port (low to high-level modules) - Chrome - browser (XUL-browser[1] abstraction) - script (jsdIScript[2] abstraction) - tabContext - tabWatcher - sourceBox - sourceFile? - sourceCache? - FBL.getUniqueId - FBL.persistObjects - FBL.sourceFilesAsArray - FBL.appendInnerHTML - Firebug.registerActivableModule - Firebug.ActivableModule - Firebug.ActivablePanel - GUI.ToolButton (panel buttons) - GUI.OptionsMenu (panel options) - GUI.ScrollableMenu (file selection) - GUI.StatusBar (call stack) - UI tabs on top* - commandLine available at all panels* ................................................................................................... items to change - infoTip - Panel create/destroy methods - Panel initialize/shutdown methods - Panel show/hide methods - Panel initializeUI method - Firebug getPref/setPref - SidePanel API - GUI.Menu [1] https://developer.mozilla.org/En/XUL/browser [2] http://dxr.proximity.on.ca/dxr/mozilla-central/js/jsd/idl/jsdIDebuggerService.idl.html#l864 ################################################################################################### Important TODOs ################################################################################################### --------------------------------------------------------------------------------------------------- Migration --------------------------------------------------------------------------------------------------- - link at getfirebug.com/firebuglite - bookmarlet update system - "new beta version available" message in 1.2 - detect new version? --------------------------------------------------------------------------------------------------- Organization --------------------------------------------------------------------------------------------------- - stop using old cache system at reps+html - remove old cache system from lib - move cache system (currently in css2) to lib OK - move reps code to html module OK - remove obsolete modules from repository (moved new stuff to 1.4) - console - chrome.injected - css - maybe reps - maybe html2 --------------------------------------------------------------------------------------------------- Cache --------------------------------------------------------------------------------------------------- - Data Sharing / Cache - remove old cache and the use of element[cacheID] property - refactoring use of cache and inspector highlight detection in the HTML panel --------------------------------------------------------------------------------------------------- Core --------------------------------------------------------------------------------------------------- - Panel Interfaces - initialize / initializeNode / show / hide - Contexts - TabWatcher and TabContext - what exactly are they? - Panel as Controller? --------------------------------------------------------------------------------------------------- Chrome --------------------------------------------------------------------------------------------------- - Use "offline" mode when switching panels (to avoid loose any message)? - one function to get a panel (no matter if it is a sidepanel or not) currently, we must know where the sidepanel is, or look in each main panel. --------------------------------------------------------------------------------------------------- Editor --------------------------------------------------------------------------------------------------- - Slow in IE8? - onInput in Firefox - the behavior is different. Specially when autocompleting font-family --------------------------------------------------------------------------------------------------- New issues --------------------------------------------------------------------------------------------------- - editor.updateLayout() in IE, when element has a "auto" margin - console panel scrollToBottom if was scrolledToBottom - click and onmousemove inspect at Style panel. it isn't highlighting the box model of the element (as shown in the "inherited from" section) - ID conflicts. If you click in the console in a Firebug UI element, it will lead you to a different element in a HTML panel, using the same ID. The ID must be unique across all frames. - content of "Script" and "Dev" panel does not show in Opera 9 (it does on Opera 10). This is a CSS issue. The following changes in the CSS rules fixes the problem: - ".sourceBox" to position relative - "div.lineNo" to position absolute Need to investigate if these changes break the layout in other browsers. - Opera 9 - inline editor does not show (hack is to change its z-index to 9). - Opera 9 and 10 - should ignore the tab event properly in the inline editor OK - missing firebuglite property in the console object OK - nested groups. when you expand a group, all subgroups will be expanded too, due to a bug in the CSS. IE6 does not support the CSS child operator, and the code relies on it. It was changed to descendants operator, and that's the cause of the current bug. --------------------------------------------------------------------------------------------------- Console --------------------------------------------------------------------------------------------------- ok - clickable object links ok - more robust ability to listen offline messages ok - ability to listen offline XHR messages ok - the offline handler should be compatible with the next generation console --------------------------------------------------------------------------------------------------- Offline messages --------------------------------------------------------------------------------------------------- ................................................................................................... - Approach #1: currently being used just lazy the console.log call pro: simple cons: it won't represent the "snapshot" of the object at the point when it was called ................................................................................................... - Approach #2: append to div adoptNode // won't work on IE ................................................................................................... - Approach #3: create OfflineRep class with 2 basic methods: OfflineRep.render() OfflineRep.append() OfflineRep.args // console.log arguments ................................................................................................... - Approach #4: This approach is not possible because when you move the iframe from the documentElement to body, it will loose all children nodes. algorithm: confirm: if you can do this on all browsers: - create an iframe at startup (before main doc load) - append it to the documentElement - create a Fragment - create iframe doc element - attach event to it - append it to fragment - later, when iframe doc is loaded, append all fragment elements to it - check if the event still attached to the element ................................................................................................... --------------------------------------------------------------------------------------------------- Memory leaks --------------------------------------------------------------------------------------------------- - Menu - XHRSpy - extension content script ################################################################################################### Bugs ################################################################################################### --------------------------------------------------------------------------------------------------- Console2 problems --------------------------------------------------------------------------------------------------- - console.profile / console.profileEnd ok - doesn't listen offline log messages ok - console.count ok - lack of "clear" button --------------------------------------------------------------------------------------------------- BUGS --------------------------------------------------------------------------------------------------- - some times (very rare, generally the first time only) when you open a popup, the UI is misplaced (you can't see most of the "console" tab). - getCSSRuleSpecificity is return the wrong value when you have a CSS Rule with multiple Selectors (ex: div,span,p,a {color:red}) - it should return the biggest specificity of the rule that matches the element - rules that does not match the element should be ignored ok - CSS problem with source code inside HTML tree (script tag). The line numbers are positioned at the top of the panel. ok - cookies are not available in XML+XSL documents ok - XHR request made before UI load will fail ok - XHR requests and file:/// URLs - Inspector stays visible after the mouse leave the panel content - When loading the bookmarlet in IE it shows a security warning https://www.google.com/accounts/ServiceLogin?service=adwords&cd=null&hl=en-US<mpl=adwords&passive=true&ifr=false&alwf=true&continue=https%3A%2F%2Fadwords.google.com%2Fselect%2Fgaiaauth%3Fapt%3DNone%26ugl%3Dtrue&sourceid=awo&subid=ww-en-et-ads-0-adsC-all OK - command line API $() makes jQuery's $ not acessible in the command-line OK - Error when trying to parse external stylesheets OK - Inspector and Google Chrome 4.0 OK - Need to use https in the bookmarlet (including images), and also in the live include OK - bookmarlet problem with XML+XSL documents! ----------------------------------------------------------------------------------------------- Bugs in Firefox 2 - Some minor CSS bugs - document.elementFromPoint() is not available (context.js) We *NEED* elementFromPoint in order to Inspect work (we can't rely on attaching mouse events in the document, because it can be cancelled by the user's application) ----------------------------------------------------------------------------------------------- - console should be installed in each Chrome window - "close tag" node () should not be selectable, instead, when clicked it should select the "open tag" node (
). - remove events added in disableTextSelection - window.onerror is being turned off when UI is minimized (and should not) ################################################################################################### Shared Code ################################################################################################### Code needed to be rewritten: - dev - gui - xhr - trace - chrome - context Successfully ported modules: - lib - domplate - reps - console - consoleInjector - dom - css (required a few additions) - editor (required a lot of changes) Partially ported modules: - spy - net (only a few reps) Next modules to port scheduled to 1.3.x version: - insideOutBox - html - infotip Next modules to port scheduled to 1.4 version: - FirebugChrome (will require a lot of changes) - TabContext (will require a lot of changes) - TabWatcher (will require a lot of changes) - Inspector ################################################################################################### 1.4 features ################################################################################################### persistent popups inherited styles live edit cross-iframe live highlight dom changes? unit tests Panel options menu Context menu tooltips (CSS color, images) Layout Ruler code Parser - proxy/plugin (cross-domain issue)? - line number - correct CSS rules 1.4 - divide .css files? so new skins can be easier to write, and changes in UI can be easily ported across skins 1.4 - each skin has in his own folder a file called "firebug.json" (or similar) 1.4 - improve the build skin methods in FBDev 1.4 - loadJSON method 1.4 - loadSkin method - Tests - Unit Tests - Manual Tests - Test generation? ################################################################################################### TODOs ################################################################################################### --------------------------------------------------------------------------------------------------- Domplate/Reps --------------------------------------------------------------------------------------------------- Opera: - native function: "prototype" in fn == true && listed in for..in - user function: "prototype" in fn == true && not listed in for..in --------------------------------------------------------------------------------------------------- Statistics --------------------------------------------------------------------------------------------------- Use Google Analytics to track Firebug Lite statistics. It could run inside the Chrome iframe (no global pollution). Not called when used locally, included when in development mode. --------------------------------------------------------------------------------------------------- XML + XSL --------------------------------------------------------------------------------------------------- Opera doesn't have document.elementFromPoint in XML documents revise the use of createElement and createGlobalElement createElement --> createChromeElement createGlobalElement --> createElement --------------------------------------------------------------------------------------------------- Popup --------------------------------------------------------------------------------------------------- - Frame/Popup settings --------------------------------------------------------------------------------------------------- Loading --------------------------------------------------------------------------------------------------- - Firebug.initialize should create console namespace - window onerror - wrong time? - Check the initializing order. --------------------------------------------------------------------------------------------------- Tool Buttons --------------------------------------------------------------------------------------------------- - button location: Fixed buttons (inspect) and Panel buttons --------------------------------------------------------------------------------------------------- ScrollArea Class --------------------------------------------------------------------------------------------------- - isScrolled - isVerticalScrolled - isHorizontalScrolled - isScrolledToBottom - scrollToElement(el) - isElementVisible(el) - interceptMouseWheel --------------------------------------------------------------------------------------------------- User Interface --------------------------------------------------------------------------------------------------- - Where exactly the errors indicator should be placed in the UI? - Highlighted nodes in HTML tree with round corners (with OS color) - current implementation isn't good (it uses both CSS hack and JS) - Opera round corner SVG trick - best way to go is dynamically create a CSS rule according each browser - UI styling - (?) detect Windows theme (XP or classic?) - (?) detect OS (windows or mac?) - error UI indications (like FB in status bar) --------------------------------------------------------------------------------------------------- Chrome --------------------------------------------------------------------------------------------------- - Panel event delegation? - Opera problem with onunload and popups (context is not being destroyed) --------------------------------------------------------------------------------------------------- Controllers --------------------------------------------------------------------------------------------------- - (?) add option to skip frames --------------------------------------------------------------------------------------------------- Core --------------------------------------------------------------------------------------------------- - (?) how to auto-load FirebugLite + Extension in a single bookmarlet? - custom Errors = throw new FirebugError("message") --------------------------------------------------------------------------------------------------- Core --------------------------------------------------------------------------------------------------- - Problem with id conflits. The same attribute is being used in the document elements and in the HTML Tree, in the user interface. --------------------------------------------------------------------------------------------------- Events --------------------------------------------------------------------------------------------------- - handle disble mouse wheel in Chrome, when in frame mode? ################################################################################################### Fixed ################################################################################################### OK - rename the id "FirebugChrome" to "FirebugUI" OK - put IE6CSS in injected chrome (not necessary anymore) OK - context is not being properly handled in persistent mode, when using the autocomplete function in commandLine. It is using the wrong "window". OK - tabLStyle reference in Chrome OK - commandLine API. Firebug.browser isn't avaiable when the library is initialized OK - Chrome options inheritance (extend) is not working as expected OK - Popup in IE, problem in the draw method OK - when NOT in injected mode, the new application load system doesn't work. OK - when in injected DEVELOPMENT mode, in XHTML documents, Google Chrome is having problems with the loading order of the multiple scripts. OK - IE6 and problem with CSS. Selected element in HTML Tree. OK - bookmarlet fail in getfirebug.com/lite.html OK - reference to wrong URL in var inspectFrameStyle in Inspector module. OK - nodeControl in HTMLTree should not fire the node highlight (include rule in delegation func) 1.4 - The CSS rule of popup hide the "main controls" element, but the search box is inside of it and is getting hidden ################################################################################################### References and notes ################################################################################################### --------------------------------------------------------------------------------------------------- Using YQL as a proxy to read cross-domain CSS and JS files --------------------------------------------------------------------------------------------------- Example: To request the following file: http://getfirebug.com/css/master.css Use the following query: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http://getfirebug.com/css/master.css'%0A&format=xml&diagnostics=false&callback=foo ~~~~~~~~~~ Using YQL as a proxy for cross-domain Ajax http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax Using YQL with JSONP http://james.padolsey.com/javascript/using-yql-with-jsonp/ Cross-domain requests with JSONP? safe? http://james.padolsey.com/javascript/cross-domain-requests-with-jsonp-safe/ --------------------------------------------------------------------------------------------------- Context --------------------------------------------------------------------------------------------------- Panel - document (should link to Firebug.chrome.document) - context (should link to Firebug.chrome) - show - hide - select - rebuild Context - getName() - browser = ex: iterateWindows(context.browser.contentWindow, function(subwin) - window - selectorMap (css) - sourceCache (css) = ex: context.sourceCache.load(sheet.href).join("") - loaded (must be set to true, when the doc is ready) - setTimeout - invalidatePanels --------------------------------------------------------------------------------------------------- Ranges and Selections --------------------------------------------------------------------------------------------------- Creating an Autosuggest Textbox with JavaScript, Part 1 http://www.webreference.com/programming/javascript/ncz/ http://www.webreference.com/programming/javascript/ncz/example.htm Introduction to Range http://www.quirksmode.org/dom/range_intro.html W3C DOM Compatibility - Range http://www.quirksmode.org/dom/w3c_range.html Get/Set Caret Code for IE and Mozilla http://www.webdeveloper.com/forum/showpost.php?s=bfd315ad0f2b3f0e324e60a485611f4e&p=423545&postcount=3 Working with the Cursor Position http://parentnode.org/javascript/working-with-the-cursor-position/ http://pastebin.parentnode.org/78 --------------------------------------------------------------------------------------------------- CSS Cascading and Inheritance --------------------------------------------------------------------------------------------------- Cascading Order and Inheritance in CSS http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css Cascading Order Specification http://www.w3.org/TR/REC-CSS1/#cascading-order Assigning property values, Cascading, and Inheritance http://www.w3.org/TR/CSS21/cascade.html Table of CSS properties with initial values - Appendix F. Full property table http://www.w3.org/TR/CSS21/propidx.html CSS imported styles @import-rule as first rule in the first stylesheet: document.styleSheets[0].cssRules[0].styleSheet.cssRules; IE: document.styleSheets[0].imports[0].rules; --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- Java Applet Vulnerability http://www.cert.org/blogs/vuls/2008/06/signed_java_security_worse_tha.html Mutation Events http://tobiasz123.wordpress.com/2009/01/19/utilizing-mutation-events-for-automatic-and-persistent-event-attaching/#comments Revise FBLite issues http://code.google.com/p/fbug/issues/list?can=1&q=owner:pedrosimonetti&sort=-owner+-status&colspec=ID+Type+Status+Owner+Test+Summary&cells=tiles Reopen issues Console Trace: http://code.google.com/p/fbug/issues/detail?id=394 appendNode IE: http://code.google.com/p/fbug/issues/detail?id=225 Stack Trace improvements http://github.com/lsmith/javascript-stack-trace/blob/master/getStackTrace.js http://eriwen.com/javascript/js-stack-trace/ --------------------------------------------------------------------------------------------------- Major changes between Firebug and Firebug Lite codebase --------------------------------------------------------------------------------------------------- addEvent/removeEvent constants instanceof scope problem (local named functions) "top" scope panel activation same application instance running across all tabs? ################################################################################################### Firebug related ################################################################################################### --------------------------------------------------------------------------------------------------- Firebug --------------------------------------------------------------------------------------------------- Domplate (crossport to FB) Fixed accidental global variable declaration in the compiled string. --------------------------------------------------------------------------------------------------- Firebug bugs --------------------------------------------------------------------------------------------------- Reps - r1088 - Array http://code.google.com/p/fbug/source/browse/branches/firebug1.3/content/firebug/reps.js?spec=svn1222&r=1088 Global: http://code.google.com/p/fbug/issues/detail?id=1017&q=DOM&colspec=ID%20Type%20Status%20Owner%20Test%20Summary Gmail: http://code.google.com/p/fbug/issues/detail?id=1977&q=DOM&colspec=ID%20Type%20Status%20Owner%20Test%20Summary Form freak: http://code.google.com/p/fbug/issues/detail?id=534&q=array&colspec=ID%20Type%20Status%20Owner%20Test%20Summary ################################################################################################### ################################################################################################### ################################################################################################### BRAINSTORMING SECTION ################################################################################################### ################################################################################################### ################################################################################################### --------------------------------------------------------------------------------------------------- getPixelValue --------------------------------------------------------------------------------------------------- Dean Edwards: http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 var PIXEL = /^\d+(px)?$/i; function getPixelValue(element, value) { if (PIXEL.test(value)) return parseInt(value); var style = element.style.left; var runtimeStyle = element.runtimeStyle.left; element.runtimeStyle.left = element.currentStyle.left; element.style.left = value || 0; value = element.style.pixelLeft; element.style.left = style; element.runtimeStyle.left = runtimeStyle; return value; }; window.PIXEL=/^\d+(px)?$/i, window.getPixelValue=function (element, value) {if (PIXEL.test(value)) return parseInt(value);var style = element.style.left;var runtimeStyle = element.runtimeStyle.left;element.runtimeStyle.left = element.currentStyle.left;element.style.left = value || 0;value = element.style.pixelLeft;element.style.left = style;element.runtimeStyle.left = runtimeStyle;return value;}; --------------------------------------------------------------------------------------------------- Library Expose --------------------------------------------------------------------------------------------------- - if a FBLite extension can be dynamically loaded, the FBL namespace should be exposed - if the FBL is exposed inside the iframe, it is less visible, and less conflictable --------------------------------------------------------------------------------------------------- FB vs FBLite --------------------------------------------------------------------------------------------------- FB - Each Panel has its own window - A single Firebug application run across all browser tabs - The Firebug application is persistent, that is, it can live after page change, or reload FBLite - All Chrome Panels runs in the same window, the chrome window - The FirebugLite application run in a single browser tab - The Firebug application isn't persistent --------------------------------------------------------------------------------------------------- Persistent Mode --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- Loading Process --------------------------------------------------------------------------------------------------- 1st Stage - Load the application in "offscreen mode", with only the console functions available. 2nd Stage - Wait the page load, and then create the chrome window (frame or popup, based on preferences). 3rd Stage - Wait the chrome page load, and the install the application in the chrome window context. 4th Stage - Load the full application in chrome window, synchronizes it with the first application loaded, and transfer the console functions to the new "screen mode" application. ---------------------------------- Pros --------------------------------------------------------------------------------------------------- More safe - no global namespace pollution, except for the "console" variable - no internal code exposure Allows persistent popups --------------------------------------------------------------------------------------------------- Cons --------------------------------------------------------------------------------------------------- More complex More difficult to debug low level functions less stable? --------------------------------------------------------------------------------------------------- DOMPLATE --------------------------------------------------------------------------------------------------- IE problems with templates 1 - class name attributes of objects 2 - colon after the last property of a object 3 - event handlers --------------------------------------------------------------------------------------------------- Opera tab --------------------------------------------------------------------------------------------------- http://www.webdeveloper.com/forum/showpost.php?p=806588&postcount=8 function handleBlur(e) { if (this.lastKey == 9) this.focus(); } function handleKeyDown(e) { this.lastKey = e.keyCode; } function handleFocus(e) { this.lastKey = null; } window.onload = function() { var elm = document.getElementById('myTextarea'); elm.onfocus = handleFocus; elm.onblur = handleBlur; elm.onkeydown = handleKeyDown; }; --------------------------------------------------------------------------------------------------- Disable Text Selection --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- XPATH --------------------------------------------------------------------------------------------------- function getXPath(node, path) { path = path || []; if(node.parentNode) { path = getXPath(node.parentNode, path); } if(node.previousSibling) { var count = 1; var sibling = node.previousSibling do { if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {count++;} sibling = sibling.previousSibling; } while(sibling); if(count == 1) {count = null;} } else if(node.nextSibling) { var sibling = node.nextSibling; do { if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) { var count = 1; sibling = null; } else { var count = null; sibling = sibling.previousSibling; } } while(sibling); } if(node.nodeType == 1) { path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count > 0 ? "["+count+"]" : '')); } return path; }; // Getting result document.evaluate("/html/body/div/ul/li[2]", document, null, XPathResult.ANY_TYPE, null ).iterateNext()