browser_memory_tree_map-02.js (5370B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 // Test the drag and zooming behavior 6 7 "use strict"; 8 9 const CanvasUtils = require("resource://devtools/client/memory/components/tree-map/canvas-utils.js"); 10 const DragZoom = require("resource://devtools/client/memory/components/tree-map/drag-zoom.js"); 11 12 const TEST_URL = "data:text/html,<html><body></body></html>"; 13 const PIXEL_SCROLL_MODE = 0; 14 const PIXEL_DELTA = 10; 15 const MAX_RAF_LOOP = 1000; 16 17 this.test = makeMemoryTest(TEST_URL, async function ({ panel }) { 18 const panelWin = panel.panelWin; 19 const panelDoc = panelWin.document; 20 const div = panelDoc.createElement("div"); 21 22 Object.assign(div.style, { 23 width: "100px", 24 height: "200px", 25 position: "absolute", 26 left: 0, 27 top: 0, 28 }); 29 30 const rafMock = createRAFMock(); 31 32 panelDoc.body.appendChild(div); 33 34 const canvases = new CanvasUtils(div, 0); 35 const dragZoom = new DragZoom(canvases.container, 0, rafMock.raf); 36 const style = canvases.container.style; 37 38 info("Check initial state of dragZoom"); 39 { 40 is(dragZoom.zoom, 0, "Zooming starts at 0"); 41 is(dragZoom.smoothZoom, 0, "Smoothed zooming starts at 0"); 42 is(rafMock.timesCalled, 0, "No RAFs have been queued"); 43 is( 44 style.transform, 45 "translate(0px) scale(1)", 46 "No transforms have been done." 47 ); 48 49 canvases.container.dispatchEvent( 50 new WheelEvent("wheel", { 51 deltaY: -PIXEL_DELTA, 52 deltaMode: PIXEL_SCROLL_MODE, 53 }) 54 ); 55 56 is( 57 style.transform, 58 "translate(0px) scale(1.05)", 59 "The div has been slightly scaled." 60 ); 61 is( 62 dragZoom.zoom, 63 PIXEL_DELTA * dragZoom.ZOOM_SPEED, 64 "The zoom was increased" 65 ); 66 ok( 67 floatEquality(dragZoom.smoothZoom, 0.05), 68 "The smooth zoom is between the initial value and the target" 69 ); 70 is(rafMock.timesCalled, 1, "A RAF has been queued"); 71 } 72 73 info("RAF will eventually stop once the smooth values approach the target"); 74 { 75 let i; 76 let lastCallCount; 77 for (i = 0; i < MAX_RAF_LOOP; i++) { 78 if (lastCallCount === rafMock.timesCalled) { 79 break; 80 } 81 lastCallCount = rafMock.timesCalled; 82 rafMock.nextFrame(); 83 } 84 is( 85 style.transform, 86 "translate(0px) scale(1.1)", 87 "The scale has been fully applied" 88 ); 89 is( 90 dragZoom.zoom, 91 dragZoom.smoothZoom, 92 "The smooth and target zoom values match" 93 ); 94 isnot(MAX_RAF_LOOP, i, "The RAF loop correctly stopped"); 95 } 96 97 info("Dragging correctly translates the div"); 98 { 99 div.dispatchEvent( 100 new MouseEvent("mousemove", { 101 clientX: 10, 102 clientY: 10, 103 }) 104 ); 105 div.dispatchEvent(new MouseEvent("mousedown")); 106 div.dispatchEvent( 107 new MouseEvent("mousemove", { 108 clientX: 20, 109 clientY: 20, 110 }) 111 ); 112 div.dispatchEvent(new MouseEvent("mouseup")); 113 114 is( 115 style.transform, 116 "translate(2.5px, 5px) scale(1.1)", 117 "The style is correctly translated" 118 ); 119 ok( 120 floatEquality(dragZoom.translateX, 5), 121 "Translate X moved by some pixel amount" 122 ); 123 ok( 124 floatEquality(dragZoom.translateY, 10), 125 "Translate Y moved by some pixel amount" 126 ); 127 } 128 129 info("Zooming centers around the mouse"); 130 { 131 canvases.container.dispatchEvent( 132 new WheelEvent("wheel", { 133 deltaY: -PIXEL_DELTA, 134 deltaMode: PIXEL_SCROLL_MODE, 135 }) 136 ); 137 // Run through the RAF loop to zoom in towards that value. 138 let lastCallCount; 139 for (let i = 0; i < MAX_RAF_LOOP; i++) { 140 if (lastCallCount === rafMock.timesCalled) { 141 break; 142 } 143 lastCallCount = rafMock.timesCalled; 144 rafMock.nextFrame(); 145 } 146 is( 147 style.transform, 148 "translate(8.18182px, 18.1818px) scale(1.2)", 149 "Zooming affects the translation to keep the mouse centered" 150 ); 151 ok( 152 floatEquality(dragZoom.translateX, 8.181818181818185), 153 "Translate X was affected by the mouse position" 154 ); 155 ok( 156 floatEquality(dragZoom.translateY, 18.18181818181817), 157 "Translate Y was affected by the mouse position" 158 ); 159 is(dragZoom.zoom, 0.2, "Zooming starts at 0"); 160 } 161 162 dragZoom.destroy(); 163 164 info("Scroll isn't tracked after destruction"); 165 { 166 const previousZoom = dragZoom.zoom; 167 const previousSmoothZoom = dragZoom.smoothZoom; 168 169 canvases.container.dispatchEvent( 170 new WheelEvent("wheel", { 171 deltaY: -PIXEL_DELTA, 172 deltaMode: PIXEL_SCROLL_MODE, 173 }) 174 ); 175 176 is(dragZoom.zoom, previousZoom, "The zoom stayed the same"); 177 is( 178 dragZoom.smoothZoom, 179 previousSmoothZoom, 180 "The smooth zoom stayed the same" 181 ); 182 } 183 184 info("Translation isn't tracked after destruction"); 185 { 186 const initialX = dragZoom.translateX; 187 const initialY = dragZoom.translateY; 188 189 div.dispatchEvent(new MouseEvent("mousedown")); 190 div.dispatchEvent(new MouseEvent("mousemove"), { 191 clientX: 40, 192 clientY: 40, 193 }); 194 div.dispatchEvent(new MouseEvent("mouseup")); 195 is(dragZoom.translateX, initialX, "The translationX didn't change"); 196 is(dragZoom.translateY, initialY, "The translationY didn't change"); 197 } 198 panelDoc.body.removeChild(div); 199 });