doc/webdeveloper/features/view_style_information.js

   1 var webdeveloper_styleElement = null;
   2
   3 // Output style information for an element
   4 function webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, title)
   5 {
   6     var bodyElement           = null;
   7     var cssElement            = null;
   8     var divElement            = null;
   9     var generatedDocument     = null;
  10     var headElement           = null;
  11     var headerElement         = null;
  12     var linkElement           = null;
  13     var preElement            = null;
  14     var spanElement           = null;
  15     var stringBundle          = document.getElementById("webdeveloper-string-bundle");
  16     var styleInformationFound = false;
  17     var styleSheet            = null;
  18
  19     // If displaying in the dashboard
  20     if(displayInDashboard)
  21     {
  22         var parent = null;
  23
  24         generatedDocument = webdeveloper_getDocumentInDashboard(stringBundle.getString("webdeveloper_styleInformation"));
  25         bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
  26         headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
  27
  28         webdeveloper_removeAllChildElements(bodyElement);
  29         webdeveloper_removeAllChildElements(headElement);
  30     }
  31     else
  32     {
  33         generatedDocument = webdeveloper_generateDocument("");
  34         bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
  35         headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
  36         headerElement     = generatedDocument.createElement("h1");
  37
  38         headerElement.appendChild(generatedDocument.createTextNode(title));
  39         bodyElement.appendChild(headerElement);
  40     }
  41
  42     generatedDocument.title = title;
  43     linkElement             = generatedDocument.createElement("link");
  44
  45     webdeveloper_addGeneratedStyles(generatedDocument);
  46
  47     linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated/view_style_information.css");
  48     linkElement.setAttribute("rel", "stylesheet");
  49     linkElement.setAttribute("type", "text/css");
  50     headElement.appendChild(linkElement);
  51
  52     // Loop through the style sheets
  53     for(styleSheet in styleSheetArray)
  54     {
  55         cssElement            = generatedDocument.createElement("div");
  56         divElement            = generatedDocument.createElement("div");
  57         headerElement         = generatedDocument.createElement("h2");
  58         linkElement           = generatedDocument.createElement("a");
  59         spanElement           = generatedDocument.createElement("span");
  60         styleInformationFound = true;
  61
  62         spanElement.setAttribute("class", "expanded pivot");
  63         headerElement.appendChild(spanElement);
  64         linkElement.setAttribute("href", styleSheet);
  65         linkElement.appendChild(generatedDocument.createTextNode(styleSheet));
  66         headerElement.appendChild(linkElement);
  67         bodyElement.appendChild(headerElement);
  68
  69         cssElement.setAttribute("class", "css");
  70         divElement.setAttribute("class", "output");
  71         divElement.appendChild(cssElement);
  72         bodyElement.appendChild(divElement);
  73
  74         cssElement.innerHTML = styleSheetArray[styleSheet];
  75     }
  76
  77     // If style information was found
  78     if(styleInformationFound)
  79     {
  80         var scriptElement = generatedDocument.createElement("script");
  81
  82         scriptElement.setAttribute("defer", "defer");
  83         scriptElement.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
  84         scriptElement.setAttribute("type", "text/javascript");
  85         headElement.appendChild(scriptElement);
  86
  87         scriptElement = generatedDocument.createElement("script");
  88
  89         scriptElement.setAttribute("defer", "defer");
  90         scriptElement.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
  91         scriptElement.setAttribute("type", "text/javascript");
  92         headElement.appendChild(scriptElement);
  93     }
  94     else
  95     {
  96         var pElement = generatedDocument.createElement("p");
  97
  98         pElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_noStyleInformation")));
  99         bodyElement.appendChild(pElement);
 100     }
 101 }
 102
 103 // View style information
 104 function webdeveloper_viewStyleInformation(element)
 105 {
 106     // If the DOM Inspector is available
 107     if(webdeveloper_isDOMInspectorAvailable())
 108     {
 109         var checked        = true;
 110         var contentWindow  = webdeveloper_getContentWindow();
 111         var documentList   = webdeveloper_getDocuments(contentWindow);
 112         var documentLength = documentList.length;
 113         var pageDocument   = null;
 114
 115         // If the element is set
 116         if(element)
 117         {
 118             checked = element.getAttribute("checked");
 119         }
 120         else
 121         {
 122             var currentDocument = contentWindow.document;
 123
 124             element = document.getElementById("webdeveloper-view-style-information-menu");
 125
 126             // If the view style information element is set
 127             if(currentDocument.getElementById("webdeveloper-view-style-information"))
 128             {
 129                 checked = false;
 130             }
 131
 132             webdeveloper_configureElement(element, "checked", checked);
 133         }
 134
 135         webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
 136
 137         // Loop through the documents
 138         for(var i = 0; i < documentLength; i++)
 139         {
 140             pageDocument = documentList[i];
 141
 142             // If viewing style information
 143             if(checked)
 144             {
 145                 pageDocument.addEventListener("click", webdeveloper_viewStyleInformationForElement, false);
 146                 pageDocument.addEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
 147                 pageDocument.addEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
 148                 pageDocument.addEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
 149             }
 150             else
 151             {
 152                 var title = document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_styleInformation");
 153
 154                 // Try to remove the event listener
 155                 try
 156                 {
 157                     pageDocument.removeEventListener("click", webdeveloper_viewStyleInformationForElement, false);
 158                 }
 159                 catch(exception)
 160                 {
 161                     // Do nothing
 162                 }
 163
 164                 // Try to remove the event listener
 165                 try
 166                 {
 167                     pageDocument.removeEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
 168                 }
 169                 catch(exception)
 170                 {
 171                     // Do nothing
 172                 }
 173
 174                 // Try to remove the event listener
 175                 try
 176                 {
 177                     pageDocument.removeEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
 178                 }
 179                 catch(exception)
 180                 {
 181                     // Do nothing
 182                 }
 183
 184                 // Try to remove the event listener
 185                 try
 186                 {
 187                     pageDocument.removeEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
 188                 }
 189                 catch(exception)
 190                 {
 191                     // Do nothing
 192                 }
 193
 194                 // If view style information is open in the dashboard
 195                 if(webdeveloper_isOpenInDashboard(title))
 196                 {
 197                     webdeveloper_closeInDashboard(title);
 198                 }
 199
 200                 webdeveloper_removeElementOutline(webdeveloper_styleElement);
 201             }
 202         }
 203
 204         // If not viewing style information
 205         if(!checked)
 206         {
 207             webdeveloper_styleElement = null;
 208         }
 209
 210         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/view_style_information.css", "webdeveloper-view-style-information");
 211     }
 212     else
 213     {
 214         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_domInspectorRequired"), "http://chrispederick.com/work/web-developer/documentation/faq/#dom-inspector");
 215     }
 216 }
 217
 218 // View style information for an element
 219 function webdeveloper_viewStyleInformationForElement(event)
 220 {
 221     var eventTarget = event.target;
 222
 223     // If there is an event target and the click was not a right click
 224     if(eventTarget && event.button != 2)
 225     {
 226         var displayInDashboard = webdeveloper_getBooleanPreference("webdeveloper.style.information.dashboard", true);
 227         var domUtils           = Components.classes["@mozilla.org/inspector/dom-utils;1"].getService(Components.interfaces.inIDOMUtils);
 228         var elementRule        = null;
 229         var headerElement      = null;
 230         var line               = null;
 231         var oldURL             = getBrowser().currentURI.spec;
 232         var ruleList           = domUtils.getCSSStyleRules(eventTarget);
 233         var stringBundle       = document.getElementById("webdeveloper-string-bundle");
 234         var styleRule          = null;
 235         var styleRuleLength    = null;
 236         var styleRuleList      = null;
 237         var styleSheet         = null;
 238         var styleSheetArray    = new Array();
 239         var styleSheetHref     = null;
 240         var styleText          = null;
 241
 242         // Loop through the element rules
 243         for(var i = 0; i < ruleList.Count(); i++)
 244         {
 245             elementRule = ruleList.GetElementAt(i).QueryInterface(Components.interfaces.nsIDOMCSSStyleRule);
 246             line        = domUtils.getRuleLine(elementRule);
 247
 248             // If there is a parent style sheet
 249             if(elementRule.parentStyleSheet)
 250             {
 251                 styleSheet = elementRule.parentStyleSheet;
 252             }
 253
 254             // If this is a valid style sheet
 255             if(webdeveloper_isValidStyleSheet(styleSheet))
 256             {
 257                 styleRuleList   = elementRule.style;
 258                 styleRuleLength = styleRuleList.length;
 259                 styleSheetHref  = styleSheet.href;
 260                 styleText       = '<p class="selector">' + elementRule.selectorText + ' <span>(' + stringBundle.getString("webdeveloper_line").toLowerCase() + " " + line + ")</span></p>";
 261
 262                 styleText += "<p>{</p>";
 263
 264                 // Loop through the style rules
 265                 for(var j = 0; j < styleRuleLength; j++)
 266                 {
 267                     styleRule  = styleRuleList[j];
 268
 269                     // If this is a valid style rule
 270                     if(webdeveloper_isValidStyleRule(styleRuleList, styleRule))
 271                     {
 272                         styleText += '<p class="rule"><span class="property">' + webdeveloper_formatStyleRuleProperty(styleRule) + '</span>: <span class="value">' + webdeveloper_formatStyleRuleValue(styleRuleList.getPropertyValue(styleRule)) + "</span>;</p>";
 273                     }
 274                 }
 275
 276                 styleText += "<p>}</p>";
 277
 278                 // If this style sheet has rules already stored
 279                 if(styleSheetArray[styleSheetHref])
 280                 {
 281                     styleSheetArray[styleSheetHref] += styleText;
 282                 }
 283                 else
 284                 {
 285                     styleSheetArray[styleSheetHref] = styleText;
 286                 }
 287             }
 288         }
 289
 290         // If displaying in the dashboard
 291         if(displayInDashboard)
 292         {
 293             var title = stringBundle.getString("webdeveloper_styleInformation");
 294
 295             // If view style information is already open in the dashboard
 296             if(webdeveloper_isOpenInDashboard(title))
 297             {
 298                 webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
 299                 webdeveloper_selectInDashboard(title);
 300             }
 301             else
 302             {
 303                 webdeveloper_openInDashboard(title, "");
 304
 305                 // This sets a small timeout to guarantee the dashboard is open
 306                 window.setTimeout(webdeveloper_outputStyleInformationForElement, 500, displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
 307             }
 308         }
 309         else
 310         {
 311             var oldTab = getBrowser().selectedTab;
 312
 313             webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
 314
 315             // If the open tabs in background preference is set to true
 316             if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
 317             {
 318                 getBrowser().selectedTab = oldTab;
 319             }
 320         }
 321
 322         event.preventDefault();
 323     }
 324 }
 325
 326 // Keypress event for view style information
 327 function webdeveloper_viewStyleInformationKeyPress(event)
 328 {
 329     webdeveloper_copyElementAncestors(event);
 330 }
 331
 332 // Move event for view style information
 333 function webdeveloper_viewStyleInformationMouseMove(event)
 334 {
 335     var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_styleElement);
 336
 337     // If the outline element is set
 338     if(outlineElement)
 339     {
 340         webdeveloper_styleElement = outlineElement;
 341     }
 342 }
 343
 344 // Mouseover event for view style information
 345 function webdeveloper_viewStyleInformationMouseOver(event)
 346 {
 347     webdeveloper_displayElementAncestors(event);
 348 }