doc/webdeveloper/resize.js

   1 // Resizes the window to a custom size
   2 function webdeveloper_customResizeWindow()
   3 {
   4     var contentWindow = webdeveloper_getContentWindow();
   5
   6     window.openDialog("chrome://webdeveloper/content/dialogs/resize.xul", "webdeveloper-resize-dialog", "centerscreen,chrome,modal", contentWindow.outerWidth, contentWindow.outerHeight, contentWindow.innerWidth, contentWindow.innerHeight);
   7 }
   8
   9 // Displays the current window size
  10 function webdeveloper_displayWindowSize()
  11 {
  12     var contentWindow = webdeveloper_getContentWindow();
  13     var stringBundle  = document.getElementById("webdeveloper-string-bundle");
  14
  15     webdeveloper_message(stringBundle.getString("webdeveloper_windowSize"), stringBundle.getFormattedString("webdeveloper_displayWindowSizeResult", [contentWindow.outerWidth, contentWindow.outerHeight, contentWindow.innerWidth, contentWindow.innerHeight]));
  16 }
  17
  18 // Displays the current window size in the title bar
  19 function webdeveloper_displayWindowSizeInTitle(element)
  20 {
  21     var contentDocument = webdeveloper_getContentDocument();
  22
  23     // If the menu is checked
  24     if(element.getAttribute("checked"))
  25     {
  26         var contentWindow = webdeveloper_getContentWindow();
  27
  28         contentDocument.title += " - " + contentWindow.outerWidth + "x" + contentWindow.outerHeight + " [" + contentWindow.innerWidth + "x" + contentWindow.innerHeight + "]";
  29
  30         window.addEventListener("resize", webdeveloper_updateWindowSizeInTitle, false);
  31     }
  32     else
  33     {
  34         var title = contentDocument.title;
  35
  36         contentDocument.title = title.substring(0, title.lastIndexOf(" - "));
  37
  38         // Try to remove the event listener
  39         try
  40         {
  41             window.removeEventListener("resize", webdeveloper_updateWindowSizeInTitle, false);
  42         }
  43         catch(exception)
  44         {
  45             // Do nothing
  46         }
  47     }
  48
  49     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-display-window-size-title");
  50 }
  51
  52 // Resizes the window or viewport to the given width and height
  53 function webdeveloper_resizeWindow(width, height, viewport)
  54 {
  55     var windowX = window.screenX;
  56     var windowY = window.screenY;
  57
  58     // If resizing the viewport
  59     if(viewport)
  60     {
  61         var contentWindow = webdeveloper_getContentWindow();
  62
  63         contentWindow.innerHeight = height;
  64         contentWindow.innerWidth  = width;
  65     }
  66     else
  67     {
  68         window.resizeTo(width, height);
  69     }
  70
  71     window.screenX = windowX;
  72     window.screenY = windowY;
  73 }
  74
  75 // Updates the resize menu
  76 function webdeveloper_updateResizeMenu(menu, suffix)
  77 {
  78     var contentWindow         = webdeveloper_getContentWindow();
  79     var description           = null;
  80     var descriptionPreference = null;
  81     var height                = null;
  82     var heightPreference      = null;
  83     var menuItem              = document.createElement("menuitem");
  84     var resizeCount           = webdeveloper_getIntegerPreference("webdeveloper.resize.count", true);
  85     var resizeSeparator       = menu.getElementsByAttribute("id", "webdeveloper-resize-separator3-" + suffix)[0];
  86     var viewport              = null;
  87     var viewportHeight        = contentWindow.innerHeight;
  88     var viewportPreference    = false;
  89     var viewportWidth         = contentWindow.innerWidth;
  90     var width                 = null;
  91     var widthPreference       = null;
  92     var windowHeight          = contentWindow.outerHeight;
  93     var windowWidth           = contentWindow.outerWidth;
  94
  95     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-window-size-title-" + suffix), "checked", "webdeveloper-display-window-size-title");
  96     webdeveloper_removeGeneratedMenuItems(menu);
  97
  98     // Loop through the possible resize options
  99         for(var i = 1; i <= resizeCount; i++)
 100         {
 101         description = "webdeveloper.resize." + i + ".description";
 102         height      = "webdeveloper.resize." + i + ".height";
 103         viewport    = "webdeveloper.resize." + i + ".viewport";
 104         width       = "webdeveloper.resize." + i + ".width";
 105
 106         // If the description, width and height are set
 107         if(webdeveloper_isPreferenceSet(description) && webdeveloper_isPreferenceSet(width) && webdeveloper_isPreferenceSet(height))
 108         {
 109             descriptionPreference = webdeveloper_getStringPreference(description, true);
 110
 111             // If the description is not blank
 112             if(descriptionPreference != "")
 113             {
 114                 heightPreference   = webdeveloper_getIntegerPreference(height, true);
 115                 menuItem           = document.createElement("menuitem");
 116                 viewportPreference = webdeveloper_getBooleanPreference(viewport, true);
 117                 widthPreference    = webdeveloper_getIntegerPreference(width, true);
 118
 119                 // If the resize attributes match the current size
 120                 if((viewportPreference && viewportWidth == widthPreference && viewportHeight == heightPreference) || (!viewportPreference && windowWidth == widthPreference && windowHeight == heightPreference))
 121                 {
 122                     menuItem.setAttribute("checked", true);
 123                 }
 124
 125                 menuItem.setAttribute("class", "webdeveloper-generated-menu");
 126                 menuItem.setAttribute("label", descriptionPreference);
 127                 menuItem.setAttribute("oncommand", "webdeveloper_resizeWindow(" + widthPreference + ", " + heightPreference + ", " + viewportPreference + ")");
 128                 menuItem.setAttribute("type", "radio");
 129
 130                 menu.insertBefore(menuItem, resizeSeparator);
 131             }
 132         }
 133         }
 134 }
 135
 136 // Updates the window size in the title bar
 137 function webdeveloper_updateWindowSizeInTitle()
 138 {
 139     var contentDocument = webdeveloper_getContentDocument();
 140     var contentWindow   = webdeveloper_getContentWindow();
 141     var title           = contentDocument.title;
 142
 143     contentDocument.title = title.substring(0, title.lastIndexOf(" - ")) + " - " + contentWindow.outerWidth + "x" + contentWindow.outerHeight + " [" + contentWindow.innerWidth + "x" + contentWindow.innerHeight + "]";
 144 }
 145
 146 // Zooms the content
 147 function webdeveloper_zoom(zoomIn)
 148 {
 149     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 150     var documentLength = documentList.length;
 151     var factor         = 1.5;
 152     var imageList      = null;
 153     var pageDocument   = null;
 154
 155     // Loop through the documents
 156     for(var i = 0; i < documentLength; i++)
 157     {
 158         pageDocument = documentList[i];
 159         imageList    = pageDocument.images;
 160
 161         webdeveloper_zoomText(pageDocument.documentElement, zoomIn, factor);
 162         webdeveloper_zoomImages(imageList, zoomIn, factor);
 163     }
 164 }
 165
 166 // Zooms the images
 167 function webdeveloper_zoomImages(imageList, zoomIn, factor)
 168 {
 169     var height      = null;
 170     var image       = null;
 171     var imageLength = imageList.length;
 172     var width       = null;
 173
 174     // Loop through the images
 175     for(var i = 0; i < imageLength; i++)
 176     {
 177         image  = imageList[i];
 178         height = image.height;
 179         width  = image.width;
 180
 181         // If the width and height are set
 182         if(width && height)
 183         {
 184             // If zooming in
 185             if(zoomIn)
 186             {
 187                 image.setAttribute("width", (width * factor));
 188                 image.setAttribute("height", (height * factor));
 189             }
 190             else
 191             {
 192                 image.setAttribute("width", (width / factor));
 193                 image.setAttribute("height", (height / factor));
 194             }
 195         }
 196
 197         height = null;
 198         width  = null;
 199     }
 200 }
 201
 202 // Zooms the text
 203 function webdeveloper_zoomText(node, zoomIn, factor)
 204 {
 205     var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node, null);
 206
 207     // If the computed style is set
 208     if(computedStyle)
 209     {
 210         var childNode       = null;
 211         var childNodeList   = node.childNodes;
 212         var childNodeLength = childNodeList.length;
 213         var fontSize        = computedStyle.getPropertyCSSValue("font-size");
 214         var lineHeight      = computedStyle.getPropertyCSSValue("line-height");
 215
 216         // Loop through the child nodes
 217         for(var i = 0; i < childNodeLength; i++)
 218         {
 219             childNode = childNodeList[i];
 220
 221             // If this is an element
 222             if(childNode.nodeType == Node.ELEMENT_NODE)
 223             {
 224                 webdeveloper_zoomText(childNode, zoomIn, factor);
 225             }
 226         }
 227
 228         // If the font size is set and is in pixels
 229         if(fontSize && fontSize.primitiveType == CSSPrimitiveValue.CSS_PX)
 230         {
 231             // If zooming in
 232             if(zoomIn)
 233             {
 234                 node.style.fontSize = (fontSize.getFloatValue(CSSPrimitiveValue.CSS_PX) * factor) + "px";
 235             }
 236             else
 237             {
 238                 node.style.fontSize = (fontSize.getFloatValue(CSSPrimitiveValue.CSS_PX) / factor) + "px";
 239             }
 240         }
 241
 242         // If the line height is set and is in pixels
 243         if(lineHeight && lineHeight.primitiveType == CSSPrimitiveValue.CSS_PX)
 244         {
 245             // If zooming in
 246             if(zoomIn)
 247             {
 248                 node.style.lineHeight = (lineHeight.getFloatValue(CSSPrimitiveValue.CSS_PX) * factor) + "px";
 249             }
 250             else
 251             {
 252                 node.style.lineHeight = (lineHeight.getFloatValue(CSSPrimitiveValue.CSS_PX) / factor) + "px";
 253             }
 254         }
 255     }
 256 }