doc/webdeveloper/features/display_page_magnifier.js

   1 // Displays the page magnifier
   2 function webdeveloper_displayPageMagnifier(element)
   3 {
   4     var canvas = document.getElementById("webdeveloper-page-magnifier");
   5
   6     // If the canvas is not set or has no context
   7     if(!canvas || !canvas.getContext)
   8     {
   9         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_firefox15Required"));
  10     }
  11     else
  12     {
  13         var checked       = false;
  14         var container     = document.getElementById("webdeveloper-page-magnifier-container");
  15
  16         // If the element is set
  17         if(element)
  18         {
  19             checked = element.getAttribute("checked");
  20         }
  21
  22         webdeveloper_configureElement(document.getElementById("webdeveloper-page-magnifier-toolbar"), "hidden", !checked);
  23
  24         // If displaying page validation
  25         if(checked)
  26         {
  27             var browserBoxObject = webdeveloper_getSelectedBrowser().boxObject;
  28
  29             document.getElementById("webdeveloper.magnification.level").value = webdeveloper_getStringPreference("webdeveloper.magnification.level", true);
  30             webdeveloper_updatePageMagnifier(0, 0);
  31
  32             container.addEventListener("DOMMouseScroll", webdeveloper_scrollPageMagnifier, false);
  33             window.addEventListener("mousemove", webdeveloper_movePageMagnifier, false);
  34
  35             container.style.left = (browserBoxObject.x + 10) + "px";
  36             container.style.top  = (browserBoxObject.y + 10) + "px";
  37             container.hidden     = false;
  38         }
  39         else
  40         {
  41             // Try to remove the event listener
  42             try
  43             {
  44                 container.removeEventListener("DOMMouseScroll", webdeveloper_scrollPageMagnifier, false);
  45             }
  46             catch(exception)
  47             {
  48                 // Do nothing
  49             }
  50
  51             // Try to remove the event listener
  52             try
  53             {
  54                 window.removeEventListener("mousemove", webdeveloper_movePageMagnifier, false);
  55             }
  56             catch(exception)
  57             {
  58                 // Do nothing
  59             }
  60
  61             container.hidden = true;
  62         }
  63
  64         webdeveloper_toggleAppliedStyle(element, "webdeveloper-display-page-magnifier");
  65     }
  66 }
  67
  68 // Called when the page magnifier is moved
  69 function webdeveloper_movePageMagnifier(event)
  70 {
  71     var canvas      = document.getElementById("webdeveloper-page-magnifier");
  72     var eventTarget = event.target;
  73
  74     // If the canvas and event target are set and the canvas is the event target
  75     if(canvas && eventTarget && canvas == eventTarget)
  76     {
  77         var container = document.getElementById("webdeveloper-page-magnifier-container");
  78
  79         // If the container is set
  80         if(container)
  81         {
  82             var browserBoxObject   = webdeveloper_getSelectedBrowser().boxObject;
  83             var browserXPosition   = browserBoxObject.x;
  84             var browserYPosition   = browserBoxObject.y;
  85             var canvasHalfHeight   = canvas.height / 2;
  86             var canvasHalfWidth    = canvas.width / 2;
  87             var containerXPosition = event.clientX - canvasHalfWidth;
  88             var containerYPosition = event.clientY - canvasHalfHeight;
  89             var documentElement    = webdeveloper_getContentDocument().documentElement;
  90             var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
  91             var magnifierXPosition = event.clientX - browserXPosition - (canvasHalfWidth / magnificationLevel) + documentElement.scrollLeft;
  92             var magnifierYPosition = event.clientY - browserYPosition - (canvasHalfHeight / magnificationLevel) + documentElement.scrollTop;
  93
  94             // If the container X position is less than the browser X position
  95             if(containerXPosition < browserXPosition)
  96             {
  97                 containerXPosition = browserXPosition;
  98             }
  99
 100             // If the container Y position is less than the browser Y position
 101             if(containerYPosition < browserYPosition)
 102             {
 103                 containerYPosition = browserYPosition;
 104             }
 105
 106             // If the magnifier X position is less than 0
 107             if(magnifierXPosition < 0)
 108             {
 109                 magnifierXPosition = 0;
 110             }
 111
 112             // If the magnifier Y position is less than 0
 113             if(magnifierYPosition < 0)
 114             {
 115                 magnifierYPosition = 0;
 116             }
 117
 118             container.style.left = containerXPosition + "px";
 119             container.style.top  = containerYPosition + "px";
 120
 121             webdeveloper_updatePageMagnifier(magnifierXPosition, magnifierYPosition);
 122         }
 123     }
 124 }
 125
 126 // Called when the page magnifier is scrolled with the mouse wheel
 127 function webdeveloper_scrollPageMagnifier(event)
 128 {
 129     var eventDetail = event.detail;
 130
 131     // If the event detail is set
 132     if(eventDetail)
 133     {
 134         var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
 135
 136         // If the event detail is greater than zero (scroll down)
 137         if(eventDetail > 0)
 138         {
 139             // If the magnification level is greater than one
 140             if(magnificationLevel > 1)
 141             {
 142                 magnificationLevel -= 1;
 143             }
 144         }
 145         else
 146         {
 147             magnificationLevel += 1;
 148         }
 149
 150         document.getElementById("webdeveloper.magnification.level").value = magnificationLevel;
 151
 152         webdeveloper_setStringPreference("webdeveloper.magnification.level", magnificationLevel);
 153         webdeveloper_updatePageMagnifier(0, 0);
 154
 155         event.preventDefault();
 156     }
 157 }
 158
 159 // Updates the magnification level
 160 function webdeveloper_updateMagnificationLevel(element)
 161 {
 162     var magnificationLevel = element.value;
 163     var stringBundle       = document.getElementById("webdeveloper-string-bundle");
 164
 165     // If the magnification level is empty or not a number or less than zero
 166     if(!magnificationLevel || parseFloat(magnificationLevel) != magnificationLevel || magnificationLevel <= 0)
 167     {
 168         webdeveloper_error(stringBundle.getString("webdeveloper_invalidWidth"));
 169     }
 170     else
 171     {
 172         webdeveloper_setStringPreference("webdeveloper.magnification.level", magnificationLevel);
 173         webdeveloper_updatePageMagnifier(0, 0);
 174     }
 175 }
 176
 177 // Updates the page magnifier
 178 function webdeveloper_updatePageMagnifier(xPosition, yPosition)
 179 {
 180     var canvas = document.getElementById("webdeveloper-page-magnifier");
 181
 182     // If the canvas was found
 183     if(canvas)
 184     {
 185         var context            = canvas.getContext("2d");
 186         var height             = canvas.height;
 187         var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
 188         var width              = canvas.width;
 189
 190         context.save();
 191         context.scale(magnificationLevel, magnificationLevel);
 192         context.drawWindow(webdeveloper_getContentWindow(), xPosition, yPosition, (xPosition + width) / magnificationLevel, (yPosition + height) / magnificationLevel, "rgb(255, 255, 255)");
 193         context.restore();
 194     }
 195 }