1 var webdeveloper_lineGuideSelected
= null;
3 // Adds a horizontal line guide
4 function webdeveloper_addHorizontalLineGuide()
6 var contentDocument
= webdeveloper_getContentDocument();
7 var contentWindow
= webdeveloper_getContentWindow();
8 var documentHeight
= contentDocument
.height
;
9 var lineGuide
= contentDocument
.createElement("div");
10 var lineGuidePositions
= webdeveloper_getHorizontalLineGuidePositions(contentDocument
);
11 var spacing
= contentWindow
.pageYOffset
+ 100;
13 lineGuide
.style
.backgroundColor
= webdeveloper_getStringPreference("webdeveloper.line.guides.color");
14 lineGuide
.style
.top
= 0;
16 lineGuide
.addEventListener("mousedown", webdeveloper_selectLineGuide
, false);
17 lineGuide
.addEventListener("mouseout", webdeveloper_mouseoutLineGuide
, false);
18 lineGuide
.addEventListener("mouseover", webdeveloper_mouseoverLineGuide
, false);
19 lineGuide
.addEventListener("mouseup", webdeveloper_deselectLineGuide
, false);
21 webdeveloper_sizeHorizontalLineGuide(lineGuide
, contentDocument
);
23 // While the spacing is less than the document height
24 while(spacing
< documentHeight
)
26 // If there is already a line guide at this position
27 if(webdeveloper_contains(lineGuidePositions
, spacing
+ "px"))
33 lineGuide
.style
.top
= spacing
+ "px";
38 lineGuide
.setAttribute("class", "webdeveloper-line-guide webdeveloper-horizontal-line-guide");
39 webdeveloper_getDocumentBodyElement(contentDocument
).appendChild(lineGuide
);
42 // Adds a vertical line guide
43 function webdeveloper_addVerticalLineGuide()
45 var contentDocument
= webdeveloper_getContentDocument();
46 var contentWindow
= webdeveloper_getContentWindow();
47 var documentWidth
= contentDocument
.width
;
48 var lineGuide
= contentDocument
.createElement("div");
49 var lineGuidePositions
= webdeveloper_getVerticalLineGuidePositions(contentDocument
);
50 var spacing
= contentWindow
.pageXOffset
+ 100;
52 lineGuide
.style
.backgroundColor
= webdeveloper_getStringPreference("webdeveloper.line.guides.color");
53 lineGuide
.style
.left
= 0;
55 lineGuide
.addEventListener("mousedown", webdeveloper_selectLineGuide
, false);
56 lineGuide
.addEventListener("mouseout", webdeveloper_mouseoutLineGuide
, false);
57 lineGuide
.addEventListener("mouseover", webdeveloper_mouseoverLineGuide
, false);
58 lineGuide
.addEventListener("mouseup", webdeveloper_deselectLineGuide
, false);
60 webdeveloper_sizeVerticalLineGuide(lineGuide
, contentDocument
);
62 // While the spacing is less than the document width
63 while(spacing
< documentWidth
)
65 // If there is already a line guide at this position
66 if(webdeveloper_contains(lineGuidePositions
, spacing
+ "px"))
72 lineGuide
.style
.left
= spacing
+ "px";
77 lineGuide
.setAttribute("class", "webdeveloper-line-guide webdeveloper-vertical-line-guide");
78 webdeveloper_getDocumentBodyElement(contentDocument
).appendChild(lineGuide
);
81 // Called when a line guide is deselected
82 function webdeveloper_deselectLineGuide(event
)
84 webdeveloper_lineGuideSelected
= null;
87 // Displays line guides
88 function webdeveloper_displayLineGuides(element
)
90 // If the page has frames
91 if(webdeveloper_pageHasFrames())
93 window
.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document
.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported"));
98 var contentDocument
= webdeveloper_getContentDocument();
99 var divElement
= null;
101 // If the element is set
104 checked
= element
.getAttribute("checked");
107 webdeveloper_configureElement(document
.getElementById("webdeveloper-line-guides-toolbar"), "hidden", !checked
);
109 // If displaying line guides
112 divElement
= contentDocument
.createElement("div");
114 document
.getElementById("webdeveloper.line.guides.color").color
= webdeveloper_getStringPreference("webdeveloper.line.guides.color");
116 webdeveloper_addHorizontalLineGuide();
117 webdeveloper_addVerticalLineGuide();
119 divElement
.setAttribute("id", "webdeveloper-line-guide-information");
120 webdeveloper_getDocumentBodyElement(contentDocument
).appendChild(divElement
);
122 contentDocument
.addEventListener("mousemove", webdeveloper_moveLineGuide
, false);
123 window
.addEventListener("resize", webdeveloper_resizeLineGuides
, false);
127 divElement
= contentDocument
.getElementById("webdeveloper-line-guide-information");
129 webdeveloper_removeElement(divElement
);
130 webdeveloper_removeLineGuides(contentDocument
);
132 // Try to remove the event listener
135 contentDocument
.removeEventListener("mousemove", webdeveloper_moveLineGuide
, false);
142 // Try to remove the event listener
145 window
.removeEventListener("resize", webdeveloper_resizeLineGuides
, false);
152 webdeveloper_lineGuideSelected
= null;
155 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/display_line_guides.css", "webdeveloper-display-line-guides");
159 // Returns an array containing the horizontal line guide positions
160 function webdeveloper_getHorizontalLineGuidePositions(contentDocument
)
162 return webdeveloper_getLineGuidePositions(contentDocument
, true);
165 // Returns the line guide position nearest to the given line guide position
166 function webdeveloper_getLineGuidePosition(contentDocument
, horizontal
, lineGuidePosition
, next
)
168 var lineGuidePositions
= webdeveloper_getLineGuidePositions(contentDocument
, horizontal
);
169 var lineGuidesLength
= lineGuidePositions
.length
;
170 var otherLineGuidePosition
= 0;
173 // Loop through the line guide positions
174 for(var i
= 0; i
< lineGuidesLength
; i
++)
176 otherLineGuidePosition
= lineGuidePositions
[i
];
177 otherLineGuidePosition
= otherLineGuidePosition
.substring(0, otherLineGuidePosition
.length
- 2);
179 // If looking for the next line guide position, the other line guide position is greater than the line guide position and the other line guide position is greater than the saved position
180 if(next
&& otherLineGuidePosition
> lineGuidePosition
&& otherLineGuidePosition
> position
)
182 position
= otherLineGuidePosition
;
184 else if(!next
&& otherLineGuidePosition
< lineGuidePosition
&& otherLineGuidePosition
> position
)
186 position
= otherLineGuidePosition
;
193 // Returns an array containing the line guide positions
194 function webdeveloper_getLineGuidePositions(contentDocument
, horizontal
)
196 var divElement
= null;
197 var divElementClass
= null;
198 var divElements
= contentDocument
.getElementsByTagName("div");
199 var divElementsLength
= divElements
.length
;
200 var lineGuidePositions
= new Array();
202 // Loop through the div elements
203 for(var i
= 0; i
< divElementsLength
; i
++)
205 divElement
= divElements
[i
];
207 // If the div element is set
210 divElementClass
= divElement
.getAttribute("class");
212 // If the class exists and contains webdeveloper-line-guide
213 if(divElementClass
&& divElementClass
.indexOf("webdeveloper-line-guide") != -1)
215 // If looking for horizontal line guides and the class contains webdeveloper-horizontal-line-guide
216 if(horizontal
&& divElementClass
.indexOf("webdeveloper-horizontal-line-guide") != -1)
218 lineGuidePositions
.push(divElement
.style
.top
);
220 else if(!horizontal
&& divElementClass
.indexOf("webdeveloper-vertical-line-guide") != -1)
222 lineGuidePositions
.push(divElement
.style
.left
);
228 return lineGuidePositions
;
231 // Returns an array containing the vertical line guide positions
232 function webdeveloper_getVerticalLineGuidePositions(contentDocument
)
234 return webdeveloper_getLineGuidePositions(contentDocument
, false);
237 // Called when the mouse is not over a line guide
238 function webdeveloper_mouseoutLineGuide(event
)
240 var element
= event
.target
;
242 // If the element is set
245 var ownerDocument
= element
.ownerDocument
;
247 // If the element has an owner document
250 var lineGuideInformation
= ownerDocument
.getElementById("webdeveloper-line-guide-information");
252 // If the line guide information is found
253 if(lineGuideInformation
)
255 lineGuideInformation
.style
.display
= "none";
261 // Called when the mouse is over a line guide
262 function webdeveloper_mouseoverLineGuide(event
)
264 var element
= event
.target
;
266 // If the element is set
269 var ownerDocument
= element
.ownerDocument
;
271 // If the element has an owner document
274 var lineGuideInformation
= ownerDocument
.getElementById("webdeveloper-line-guide-information");
276 // If the line guide information is found
277 if(lineGuideInformation
)
279 var headerElement
= ownerDocument
.createElement("h1");
280 var horizontalLineGuide
= true;
281 var lineGuidePositions
= null;
282 var pElement
= ownerDocument
.createElement("p");
284 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
285 var xPosition
= event
.pageX
;
286 var yPosition
= event
.pageY
;
288 // If the line guide has a class attribute and it contains webdeveloper-vertical-line-guide
289 if(element
.hasAttribute("class") && element
.getAttribute("class").indexOf("webdeveloper-vertical-line-guide") != -1)
291 horizontalLineGuide
= false;
294 // If this is a horizontal line guide
295 if(horizontalLineGuide
)
297 position
= yPosition
;
301 position
= xPosition
;
304 webdeveloper_removeAllChildElements(lineGuideInformation
);
306 headerElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_position") + " = " + position
));
307 lineGuideInformation
.appendChild(headerElement
);
309 pElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_previousLineGuide") + " = " + webdeveloper_getLineGuidePosition(ownerDocument
, horizontalLineGuide
, position
, false)));
310 lineGuideInformation
.appendChild(pElement
);
312 pElement
= ownerDocument
.createElement("p");
313 pElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_nextLineGuide") + " = " + webdeveloper_getLineGuidePosition(ownerDocument
, horizontalLineGuide
, position
, true)));
314 lineGuideInformation
.appendChild(pElement
);
316 webdeveloper_adjustElementPosition(lineGuideInformation
, xPosition
, yPosition
, 10);
318 // Show the line guide information
319 lineGuideInformation
.style
.display
= "block";
325 // Called when a line guide is moved
326 function webdeveloper_moveLineGuide(event
)
328 // If a line guide is selected
329 if(webdeveloper_lineGuideSelected
)
331 // If the line guide has a class attribute and it contains webdeveloper-horizontal-line-guide
332 if(webdeveloper_lineGuideSelected
.hasAttribute("class") && webdeveloper_lineGuideSelected
.getAttribute("class").indexOf("webdeveloper-horizontal-line-guide") != -1)
334 webdeveloper_lineGuideSelected
.style
.top
= event
.pageY
+ "px";
338 webdeveloper_lineGuideSelected
.style
.left
= event
.pageX
+ "px";
343 // Remove the line guides from the document
344 function webdeveloper_removeLineGuides(ownerDocument
)
346 var divElement
= null;
347 var divElements
= ownerDocument
.getElementsByTagName("div");
348 var divElementsLength
= divElements
.length
;
350 // Loop through the div elements
351 for(var i
= 0; i
< divElementsLength
; i
++)
353 divElement
= divElements
[i
];
355 // If the div element is set and the class exists and contains webdeveloper-line-guide
356 if(divElement
&& divElement
.hasAttribute("class") && divElement
.getAttribute("class").indexOf("webdeveloper-line-guide") != -1)
358 webdeveloper_removeElement(divElement
);
364 // Resizes the line guides when the window is resized
365 function webdeveloper_resizeLineGuides(event
)
367 var contentDocument
= webdeveloper_getContentDocument();
368 var divElement
= null;
369 var divElementClass
= null;
370 var divElements
= contentDocument
.getElementsByTagName("div");
371 var divElementsLength
= divElements
.length
;
373 // Loop through the div elements
374 for(var i
= 0; i
< divElementsLength
; i
++)
376 divElement
= divElements
[i
];
378 // If the div element is set
381 divElementClass
= divElement
.getAttribute("class");
383 // If the class exists and contains webdeveloper-line-guide
384 if(divElementClass
&& divElementClass
.indexOf("webdeveloper-line-guide") != -1)
386 // If the class contains webdeveloper-horizontal-line-guide
387 if(divElementClass
.indexOf("webdeveloper-horizontal-line-guide") != -1)
389 webdeveloper_sizeHorizontalLineGuide(divElement
, contentDocument
);
393 webdeveloper_sizeVerticalLineGuide(divElement
, contentDocument
);
400 // Called when a line guide is selected
401 function webdeveloper_selectLineGuide(event
)
403 // If the click was not a right click
404 if(event
.button
!= 2)
406 var element
= event
.target
;
408 // If the element is set
411 webdeveloper_lineGuideSelected
= element
;
416 // Sets the size of a horizontal line guide
417 function webdeveloper_sizeHorizontalLineGuide(lineGuide
, contentDocument
)
419 webdeveloper_sizeLineGuide(lineGuide
, contentDocument
, true);
422 // Sets the size of a line guide
423 function webdeveloper_sizeLineGuide(lineGuide
, contentDocument
, horizontal
)
425 // If the line guide and page document are set
426 if(lineGuide
&& contentDocument
)
428 var contentWindow
= webdeveloper_getContentWindow();
430 // If sizing a horizontal line guide
433 var documentWidth
= contentDocument
.width
;
434 var viewportWidth
= contentWindow
.innerWidth
;
436 // If the viewport width is greater than the document width
437 if(viewportWidth
> documentWidth
)
439 lineGuide
.style
.width
= viewportWidth
+ "px";
443 lineGuide
.style
.width
= documentWidth
+ "px";
448 var documentHeight
= contentDocument
.height
;
449 var viewportHeight
= contentWindow
.innerHeight
;
451 // If the viewport height is greater than the document height
452 if(viewportHeight
> documentHeight
)
454 lineGuide
.style
.height
= viewportHeight
+ "px";
458 lineGuide
.style
.height
= documentHeight
+ "px";
464 // Sets the size of a vertical line guide
465 function webdeveloper_sizeVerticalLineGuide(lineGuide
, contentDocument
)
467 webdeveloper_sizeLineGuide(lineGuide
, contentDocument
, false);
470 // Updates the line guides color
471 function webdeveloper_updateLineGuideColor(colorPicker
)
473 // If the color picker is set
476 var color
= colorPicker
.color
;
477 var divElement
= null;
478 var divElements
= webdeveloper_getContentDocument().getElementsByTagName("div");
479 var divElementsLength
= divElements
.length
;
481 webdeveloper_setStringPreference("webdeveloper.line.guides.color", color
);
483 // Loop through the div elements
484 for(var i
= 0; i
< divElementsLength
; i
++)
486 divElement
= divElements
[i
];
488 // If the div element is set and the class exists and contains webdeveloper-line-guide
489 if(divElement
&& divElement
.hasAttribute("class") && divElement
.getAttribute("class").indexOf("webdeveloper-line-guide") != -1)
491 divElement
.style
.backgroundColor
= color
;