| 65 | } |
| 66 | |
| 67 | function placeMarker(xy, width, height, position, entry, body, url) { |
| 68 | var heat = entry.responseEnd / loaded; |
| 69 | // adjust size of fonts/padding based on width of overlay |
| 70 | if(width < 170){ |
| 71 | var padding = 12; |
| 72 | var size = 12; |
| 73 | }else if(width > 400){ |
| 74 | var padding = 13; |
| 75 | var size = 26; |
| 76 | }else{ |
| 77 | var padding = 9; |
| 78 | var size = 18; |
| 79 | } |
| 80 | // check for overlay that matches viewport and assume it's like a background image on body |
| 81 | if(width == document.documentElement.clientWidth){ |
| 82 | if(height >= document.documentElement.clientHeight){ |
| 83 | body = 1; |
| 84 | } |
| 85 | } |
| 86 | // adjust opacity if it's the body element and position label top right |
| 87 | if(body == 1){ |
| 88 | var opacity = 0.6; |
| 89 | var size = 18; |
| 90 | var align = "right"; |
| 91 | var paddingTop = 10; |
| 92 | var bodyText = "BODY "; |
| 93 | }else{ |
| 94 | var opacity = 0.925; |
| 95 | var align = "center"; |
| 96 | var paddingTop = (height/2)-padding; |
| 97 | var bodyText = ""; |
| 98 | } |
| 99 | var marker = document.createElement("div"); |
| 100 | marker.className = "perfmap"; |
| 101 | marker.setAttribute("data-ms", parseInt(entry.responseEnd)); |
| 102 | marker.setAttribute("data-body", body); |
| 103 | marker.setAttribute("dir", "ltr"); // Force LTR display even if injected on an RTL page |
| 104 | marker.style.cssText = "position:"+ position + "; transition: 0.5s ease-in-out; box-sizing: border-box; color: #fff; padding-left:10px; padding-right:10px; line-height:14px; font-size: " + size + "px; font-weight:800; font-family:\"Helvetica Neue\",sans-serif; text-align:" + align + "; opacity: " + opacity + "; " + heatmap(heat) + " top: " + xy.top + "px; left: " + xy.left + "px; width: " + width + "px; height:" + height + "px; padding-top:" + paddingTop + "px; z-index: 4000;"; |
| 105 | if(width > 50){ |
| 106 | if(height > 15 ){ |
| 107 | marker.innerHTML = bodyText + parseInt(entry.responseEnd) + "ms (" + parseInt(entry.duration) + "ms)"; |
| 108 | } |
| 109 | } |
| 110 | document.body.appendChild(marker); |
| 111 | } |
| 112 | |
| 113 | function heatmap(heat) { |
| 114 | if ( heat < 0.16 ) { |