| |
| /* |
| * weinre is available under *either* the terms of the modified BSD license *or* the |
| * MIT License (2008). See http://opensource.org/licenses/alphabetical for full text. |
| * |
| * Copyright (c) 2011 IBM Corporation |
| */ |
| |
| requireClass ../common/Binding |
| requireClass ../common/Weinre |
| |
| //----------------------------------------------------------------------------- |
| class ElementHighlighter |
| this.boxMargin = document.createElement("div") |
| this.boxBorder = document.createElement("div") |
| this.boxPadding = document.createElement("div") |
| this.boxContent = document.createElement("div") |
| |
| this.boxMargin.appendChild(this.boxBorder) |
| this.boxBorder.appendChild(this.boxPadding) |
| this.boxPadding.appendChild(this.boxContent) |
| |
| this.boxMargin.style.backgroundColor = "#FCC" |
| this.boxBorder.style.backgroundColor = "#000" |
| this.boxPadding.style.backgroundColor = "#CFC" |
| this.boxContent.style.backgroundColor = "#CCF" |
| |
| this.boxMargin.style.opacity = |
| this.boxBorder.style.opacity = |
| this.boxPadding.style.opacity = |
| this.boxContent.style.opacity = 0.6 |
| |
| this.boxMargin.style.position = |
| this.boxBorder.style.position = |
| this.boxPadding.style.position = |
| this.boxContent.style.position = "absolute" |
| |
| this.boxMargin.style.borderWidth = |
| this.boxBorder.style.borderWidth = |
| this.boxPadding.style.borderWidth = |
| this.boxContent.style.borderWidth = "thin" |
| |
| this.boxMargin.style.borderStyle = |
| this.boxBorder.style.borderStyle = |
| this.boxPadding.style.borderStyle = |
| this.boxContent.style.borderStyle = "solid" |
| |
| this.boxMargin.__weinreHighlighter = |
| this.boxBorder.__weinreHighlighter = |
| this.boxPadding.__weinreHighlighter = |
| this.boxContent.__weinreHighlighter = true |
| |
| this.boxMargin.style.display = "none" |
| |
| document.body.appendChild(this.boxMargin) |
| |
| //----------------------------------------------------------------------------- |
| method on(element) |
| if (null == element) return |
| if (element.nodeType != Node.ELEMENT_NODE) return |
| |
| this.calculateMetrics(element) |
| this.boxMargin.style.display = "block" |
| |
| //----------------------------------------------------------------------------- |
| method off |
| this.boxMargin.style.display = "none" |
| |
| //----------------------------------------------------------------------------- |
| getter element |
| return this.boxMargin |
| |
| //----------------------------------------------------------------------------- |
| method calculateMetrics(element) |
| |
| var metrics = getMetrics(element) |
| |
| this.boxMargin.style.top = metrics.y + "px" |
| this.boxMargin.style.left = metrics.x + "px" |
| this.boxMargin.style.height = metrics.height + "px" |
| this.boxMargin.style.width = metrics.width + "px" |
| |
| this.boxBorder.style.top = metrics.marginTop + "px" |
| this.boxBorder.style.left = metrics.marginLeft + "px" |
| this.boxBorder.style.bottom = metrics.marginBottom + "px" |
| this.boxBorder.style.right = metrics.marginRight + "px" |
| |
| this.boxPadding.style.top = metrics.borderTop + "px" |
| this.boxPadding.style.left = metrics.borderLeft + "px" |
| this.boxPadding.style.bottom = metrics.borderBottom + "px" |
| this.boxPadding.style.right = metrics.borderRight + "px" |
| |
| this.boxContent.style.top = metrics.paddingTop + "px" |
| this.boxContent.style.left = metrics.paddingLeft + "px" |
| this.boxContent.style.bottom = metrics.paddingBottom + "px" |
| this.boxContent.style.right = metrics.paddingRight + "px" |
| |
| //----------------------------------------------------------------------------- |
| function getMetrics(element) |
| var result = {} |
| |
| // get the x,y position |
| var left = 0 |
| var top = 0 |
| |
| var el = element |
| do { |
| left += el.offsetLeft |
| top += el.offsetTop |
| } while (el = el.offsetParent) |
| |
| result.x = left |
| result.y = top |
| |
| // get the computed style |
| var cStyle = document.defaultView.getComputedStyle(element) |
| |
| result.width = fromPx(cStyle["width"]) |
| result.height = fromPx(cStyle["height"]) |
| |
| result.marginLeft = fromPx(cStyle["margin-left"]) |
| result.marginRight = fromPx(cStyle["margin-right"]) |
| result.marginTop = fromPx(cStyle["margin-top"]) |
| result.marginBottom = fromPx(cStyle["margin-bottom"]) |
| |
| result.borderLeft = fromPx(cStyle["border-left-width"]) |
| result.borderRight = fromPx(cStyle["border-right-width"]) |
| result.borderTop = fromPx(cStyle["border-top-width"]) |
| result.borderBottom = fromPx(cStyle["border-bottom-width"]) |
| |
| result.paddingLeft = fromPx(cStyle["padding-left"]) |
| result.paddingRight = fromPx(cStyle["padding-right"]) |
| result.paddingTop = fromPx(cStyle["padding-top"]) |
| result.paddingBottom = fromPx(cStyle["padding-bottom"]) |
| |
| result.width += |
| result.marginLeft + result.marginRight + |
| result.borderRight + |
| result.paddingLeft + result.paddingRight |
| |
| result.height += |
| result.marginTop + result.marginBottom + |
| result.borderBottom + |
| result.paddingTop + result.paddingBottom |
| |
| result.x -= |
| result.marginLeft |
| |
| result.y -= |
| result.marginTop |
| |
| return result |
| |
| //----------------------------------------------------------------------------- |
| function fromPx(string) |
| return parseInt(string.replace(/px$/,"")) |
