1 var webdeveloper_rulerDrag
= false;
2 var webdeveloper_rulerEndX
= 0;
3 var webdeveloper_rulerEndY
= 0;
4 var webdeveloper_rulerMove
= false;
5 var webdeveloper_rulerMoveX
= 0;
6 var webdeveloper_rulerMoveY
= 0;
7 var webdeveloper_rulerResize
= false;
8 var webdeveloper_rulerStartX
= 0;
9 var webdeveloper_rulerStartY
= 0;
11 // Creates the ruler block
12 function webdeveloper_createRuler(ownerDocument
)
14 var containerElement
= ownerDocument
.createElement("div");
15 var resizeElement
= ownerDocument
.createElement("div");
16 var rulerElement
= ownerDocument
.createElement("div");
18 resizeElement
.setAttribute("id", "webdeveloper-ruler-north-west");
19 containerElement
.appendChild(resizeElement
);
21 resizeElement
= ownerDocument
.createElement("div");
22 resizeElement
.setAttribute("id", "webdeveloper-ruler-north-east");
23 containerElement
.appendChild(resizeElement
);
25 resizeElement
= ownerDocument
.createElement("div");
26 resizeElement
.setAttribute("id", "webdeveloper-ruler-south-east");
27 containerElement
.appendChild(resizeElement
);
29 resizeElement
= ownerDocument
.createElement("div");
30 resizeElement
.setAttribute("id", "webdeveloper-ruler-south-west");
31 containerElement
.appendChild(resizeElement
);
33 containerElement
.setAttribute("id", "webdeveloper-ruler-container");
34 rulerElement
.appendChild(containerElement
);
36 rulerElement
.setAttribute("id", "webdeveloper-ruler");
37 webdeveloper_getDocumentBodyElement(ownerDocument
).appendChild(rulerElement
);
40 // Called when the ruler is deselected
41 function webdeveloper_deselectRuler(event
)
43 // If not moving the ruler
44 if(!webdeveloper_rulerMove
)
46 var xPosition
= event
.pageX
;
47 var yPosition
= event
.pageY
;
49 // If the X position is greater than the start X position
50 if(xPosition
> webdeveloper_rulerStartX
)
52 webdeveloper_rulerEndX
= xPosition
;
56 webdeveloper_rulerEndX
= webdeveloper_rulerStartX
;
57 webdeveloper_rulerStartX
= xPosition
;
60 // If the Y position is greater than the start Y position
61 if(yPosition
> webdeveloper_rulerStartY
)
63 webdeveloper_rulerEndY
= yPosition
;
67 webdeveloper_rulerEndY
= webdeveloper_rulerStartY
;
68 webdeveloper_rulerStartY
= yPosition
;
72 webdeveloper_rulerDrag
= false;
73 webdeveloper_rulerMove
= false;
74 webdeveloper_rulerMoveX
= 0;
75 webdeveloper_rulerMoveY
= 0;
76 webdeveloper_rulerResize
= false;
78 webdeveloper_updateRulerEnd();
79 webdeveloper_updateRulerStart();
83 function webdeveloper_displayRuler(element
)
85 // If the page has frames
86 if(webdeveloper_pageHasFrames())
88 window
.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document
.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported"));
93 var contentDocument
= webdeveloper_getContentDocument();
94 var divElement
= null;
96 // If the element is set
99 checked
= element
.getAttribute("checked");
102 webdeveloper_configureElement(document
.getElementById("webdeveloper-ruler-toolbar"), "hidden", !checked
);
104 // If displaying a ruler
107 webdeveloper_updateRulerEnd();
108 webdeveloper_updateRulerStart();
109 webdeveloper_createRuler(contentDocument
);
111 contentDocument
.addEventListener("mousedown", webdeveloper_selectRuler
, false);
112 contentDocument
.addEventListener("mousemove", webdeveloper_moveRuler
, false);
113 contentDocument
.addEventListener("mouseup", webdeveloper_deselectRuler
, false);
117 var rulerHeightElement
= document
.getElementById("webdeveloper-ruler-height");
118 var rulerWidthElement
= document
.getElementById("webdeveloper-ruler-width");
120 webdeveloper_removeRuler(contentDocument
);
122 // Try to remove the event listener
125 contentDocument
.removeEventListener("mousedown", webdeveloper_selectRuler
, false);
132 // Try to remove the event listener
135 contentDocument
.removeEventListener("mousemove", webdeveloper_moveRuler
, false);
142 // Try to remove the event listener
145 contentDocument
.removeEventListener("mouseup", webdeveloper_deselectRuler
, false);
152 // If the ruler height element is set
153 if(rulerHeightElement
)
155 rulerHeightElement
.value
= "";
158 // If the ruler width element is set
159 if(rulerWidthElement
)
161 rulerWidthElement
.value
= "";
164 webdeveloper_rulerDrag
= false;
165 webdeveloper_rulerEndX
= 0;
166 webdeveloper_rulerEndY
= 0;
167 webdeveloper_rulerMove
= false;
168 webdeveloper_rulerMoveX
= 0;
169 webdeveloper_rulerMoveY
= 0;
170 webdeveloper_rulerResize
= false;
171 webdeveloper_rulerStartX
= 0;
172 webdeveloper_rulerStartY
= 0;
175 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/display_ruler.css", "webdeveloper-display-ruler");
179 // Called when the ruler is moved
180 function webdeveloper_moveRuler(event
)
182 var element
= event
.target
;
184 // If the element is set
187 var ownerDocument
= element
.ownerDocument
;
189 // If the element has an owner document
192 var rulerElement
= ownerDocument
.getElementById("webdeveloper-ruler");
194 // If the ruler element is set
197 var xPosition
= event
.pageX
;
198 var yPosition
= event
.pageY
;
200 // If the ruler is being dragged or resized
201 if(webdeveloper_rulerDrag
|| webdeveloper_rulerResize
)
204 var rulerHeightElement
= document
.getElementById("webdeveloper-ruler-height");
205 var rulerWidthElement
= document
.getElementById("webdeveloper-ruler-width");
208 webdeveloper_rulerEndX
= xPosition
;
209 webdeveloper_rulerEndY
= yPosition
;
211 // If the start x position is greater than the end x position
212 if(webdeveloper_rulerStartX
> webdeveloper_rulerEndX
)
214 width
= webdeveloper_rulerStartX
- webdeveloper_rulerEndX
;
216 rulerElement
.style
.left
= xPosition
+ "px";
220 width
= webdeveloper_rulerEndX
- webdeveloper_rulerStartX
;
222 rulerElement
.style
.left
= webdeveloper_rulerStartX
+ "px";
225 // If the start y position is greater than the end y position
226 if(webdeveloper_rulerStartY
> webdeveloper_rulerEndY
)
228 height
= webdeveloper_rulerStartY
- webdeveloper_rulerEndY
;
230 rulerElement
.style
.top
= webdeveloper_rulerEndY
+ "px";
234 height
= webdeveloper_rulerEndY
- webdeveloper_rulerStartY
;
236 rulerElement
.style
.top
= webdeveloper_rulerStartY
+ "px";
239 rulerElement
.style
.height
= height
+ "px";
240 rulerElement
.style
.width
= width
+ "px";
242 // If the ruler height element is set
243 if(rulerHeightElement
)
245 rulerHeightElement
.value
= height
;
248 // If the ruler width element is set
249 if(rulerWidthElement
)
251 rulerWidthElement
.value
= width
;
254 else if(webdeveloper_rulerMove
)
256 var newXPosition
= xPosition
- webdeveloper_rulerMoveX
;
257 var newYPosition
= yPosition
- webdeveloper_rulerMoveY
;
259 rulerElement
.style
.left
= newXPosition
+ "px";
260 rulerElement
.style
.top
= newYPosition
+ "px";
262 webdeveloper_rulerEndX
= newXPosition
+ rulerElement
.clientWidth
;
263 webdeveloper_rulerEndY
= newYPosition
+ rulerElement
.clientHeight
;
264 webdeveloper_rulerStartX
= newXPosition
;
265 webdeveloper_rulerStartY
= newYPosition
;
268 webdeveloper_updateRulerEnd();
269 webdeveloper_updateRulerStart();
275 // Remove the ruler from the document
276 function webdeveloper_removeRuler(ownerDocument
)
278 webdeveloper_removeElement(ownerDocument
.getElementById("webdeveloper-ruler"));
281 // Called when the ruler is selected
282 function webdeveloper_selectRuler(event
)
284 // If the click was not a right click
285 if(event
.button
!= 2)
287 var element
= event
.target
;
289 // If the element is set
292 var elementName
= element
.tagName
;
293 var ownerDocument
= element
.ownerDocument
;
295 // If the element has a name and it is not scrollbar and it has an owner document
296 if(elementName
&& elementName
!= "scrollbar" && ownerDocument
)
298 var rulerElement
= ownerDocument
.getElementById("webdeveloper-ruler");
299 var xPosition
= event
.pageX
;
300 var yPosition
= event
.pageY
;
302 // If the ruler element is set
305 // If element is the container element
306 if(element
== ownerDocument
.getElementById("webdeveloper-ruler-container"))
308 webdeveloper_rulerMove
= true;
309 webdeveloper_rulerMoveX
= xPosition
- rulerElement
.offsetLeft
;
310 webdeveloper_rulerMoveY
= yPosition
- rulerElement
.offsetTop
;
312 else if(element
== ownerDocument
.getElementById("webdeveloper-ruler-north-east"))
314 webdeveloper_rulerResize
= true;
315 webdeveloper_rulerStartX
= rulerElement
.offsetLeft
;
316 webdeveloper_rulerStartY
= rulerElement
.offsetTop
+ rulerElement
.clientHeight
;
318 else if(element
== ownerDocument
.getElementById("webdeveloper-ruler-north-west"))
320 webdeveloper_rulerResize
= true;
321 webdeveloper_rulerStartX
= rulerElement
.offsetLeft
+ rulerElement
.clientWidth
;
322 webdeveloper_rulerStartY
= rulerElement
.offsetTop
+ rulerElement
.clientHeight
;
324 else if(element
== ownerDocument
.getElementById("webdeveloper-ruler-south-east"))
326 webdeveloper_rulerResize
= true;
327 webdeveloper_rulerStartX
= rulerElement
.offsetLeft
;
328 webdeveloper_rulerStartY
= rulerElement
.offsetTop
;
330 else if(element
== ownerDocument
.getElementById("webdeveloper-ruler-south-west"))
332 webdeveloper_rulerResize
= true;
333 webdeveloper_rulerStartX
= rulerElement
.offsetLeft
+ rulerElement
.clientWidth
;
334 webdeveloper_rulerStartY
= rulerElement
.offsetTop
;
338 webdeveloper_rulerDrag
= true;
339 webdeveloper_rulerEndX
= 0;
340 webdeveloper_rulerEndY
= 0;
341 webdeveloper_rulerStartX
= xPosition
;
342 webdeveloper_rulerStartY
= yPosition
;
344 webdeveloper_updateRulerEnd();
345 webdeveloper_updateRulerStart();
351 event
.preventDefault();
355 // Update the ruler end information
356 function webdeveloper_updateRulerEnd()
358 var endXElement
= document
.getElementById("webdeveloper-ruler-end-x");
359 var endYElement
= document
.getElementById("webdeveloper-ruler-end-y");
361 // If the end X element is set
364 endXElement
.value
= webdeveloper_rulerEndX
;
367 // If the end Y element is set
370 endYElement
.value
= webdeveloper_rulerEndY
;
374 // Update the ruler height
375 function webdeveloper_updateRulerHeight(element
)
377 var height
= element
.value
;
378 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
380 // If the height is empty or not a number or less than zero
381 if(!height
|| parseInt(height
) != height
|| height
<= 0)
383 webdeveloper_error(stringBundle
.getString("webdeveloper_invalidHeight"));
387 var rulerElement
= webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
389 // If the ruler element is set
392 height
= parseInt(height
);
393 rulerElement
.style
.height
= height
+ "px";
394 webdeveloper_rulerEndY
= webdeveloper_rulerStartY
+ height
;
396 webdeveloper_updateRulerEnd();
401 // Update the ruler start information
402 function webdeveloper_updateRulerStart()
404 var startXElement
= document
.getElementById("webdeveloper-ruler-start-x");
405 var startYElement
= document
.getElementById("webdeveloper-ruler-start-y");
407 // If the start X element is set
410 startXElement
.value
= webdeveloper_rulerStartX
;
413 // If the start Y element is set
416 startYElement
.value
= webdeveloper_rulerStartY
;
420 // Update the ruler width
421 function webdeveloper_updateRulerWidth(element
)
423 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
424 var width
= element
.value
;
426 // If the width is empty or not a number or less than zero
427 if(!width
|| parseInt(width
) != width
|| width
<= 0)
429 webdeveloper_error(stringBundle
.getString("webdeveloper_invalidWidth"));
433 var rulerElement
= webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
435 // If the ruler element is set
438 width
= parseInt(width
);
439 rulerElement
.style
.width
= width
+ "px";
440 webdeveloper_rulerEndX
= webdeveloper_rulerStartX
+ width
;
442 webdeveloper_updateRulerEnd();