MozAfterPaint

  • Revision slug: DOM/Mozilla_event_reference/MozAfterPaint
  • Revision title: MozAfterPaint
  • Revision id: 366587
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment Moved From Mozilla_event_reference/MozAfterPaint to DOM/Mozilla_event_reference/MozAfterPaint

Revision Content

The MozAfterPaint event is triggered when content is repainted on the screen and provides information about what has been repainted. It is mainly used to investigate performance optimization.

Note:
  • This event isn't available to web pages by default since Firefox 4. It is available to addons and can be made available to web pages by setting the preference dom.send_after_paint_to_content to true.
    • Since Bug 539356, all the MozAfterPaint events are sent to web pages when this preference is true. See Bug 829330 for more information.
  • If the handler for this event does anything that triggers repainting (such as changing the style of an element), an infinite loop will probably be triggered.
  • Repainting of areas scrolled outside the viewport is reported, but repainting of areas scrolled outside overflow:auto elements and the like is not.
  • Repainting in windowed plugins (which is most plugins on Windows and GTK) is not reported.

General info

Specification
Addons specific
Interface
Event
Bubbles
Yes
Cancelable
Yes
Target
window
Default Action
None

Properties

{{OpenEventProperties()}}{{AfterPaintEventProperties()}}{{CloseEventProperties()}}

Example

This example highlights elements that get repainted while hovering the document with a cursor.

(function(){
  var store = [];
 
  // every repaint will be logged in store
  window.addEventListener("MozAfterPaint", log, false);
 
  if ( document.body )
    bind();
  else
    window.addEventListener("load", bind, false);
 
  function log(e){
    store.push( [(new Date).getTime(), e.clientRects] );
  }
 
  function bind(){
    // clicking anywhere on the document will prevent other repaint to be logged
    // as well as display the visual "repaint heatmap"
    document.body.addEventListener("click", function(){
      window.removeEventListener("MozAfterPaint", log, false);
 
      for ( var pos = 0; pos < store.length; pos++ ) {
        var rects = store[pos][1];
 
        for ( var i = 0; i < rects.length; i++ ) {
          // will simply "draw" semi-transparent red divs where
          // repaints where recorded
          var rect = rects[i];
          var div = document.createElement("div");
 
          with (div.style) {
            background = "red";
            opacity = "0.1";
            position = "absolute";
            top = rect.top + "px";
            left = rect.left + "px";
            width = (rect.right - rect.left) + "px";
            height = (rect.bottom - rect.top) + "px";
          }
 
          document.body.appendChild( div );
        }
      }
 
      document.body.removeEventListener("click", arguments.callee, false);
    }, false);
  }
})();

Revision Source

<p>The <code>MozAfterPaint</code> event is triggered when content is repainted on the screen and provides information about what has been repainted. It is mainly used to investigate performance optimization.</p>
<div class="note">
  <strong>Note:</strong>
  <ul>
    <li class="note">This event isn't available to web pages by default since Firefox 4. It is available to addons and can be made available to web pages by setting the preference <code>dom.send_after_paint_to_content</code> to <code>true</code>.
      <ul>
        <li class="note">Since<b> </b><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=539356"><b>Bug&nbsp;539356</b></a>, all the <code>MozAfterPaint</code> events are sent to web pages when this preference is <code>true</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=829330"><b>Bug&nbsp;829330</b></a> for more information.</li>
      </ul>
    </li>
    <li>If the handler for this event does anything that triggers repainting (such as changing the style of an element), an infinite loop will probably be triggered.</li>
    <li>Repainting of areas scrolled outside the viewport is reported, but repainting of areas scrolled outside <code>overflow:auto</code> elements and the like is not.</li>
    <li>Repainting in windowed plugins (which is most plugins on Windows and GTK) is not reported.</li>
  </ul>
</div>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <i>Addons specific</i></dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    Event</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    window</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{AfterPaintEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<p>This example highlights elements that get repainted while hovering the document with a cursor.</p>
<pre class="brush: js">
(function(){
  var store = [];
 
  // every repaint will be logged in store
  window.addEventListener("MozAfterPaint", log, false);
 
  if ( document.body )
    bind();
  else
    window.addEventListener("load", bind, false);
 
  function log(e){
    store.push( [(new Date).getTime(), e.clientRects] );
  }
 
  function bind(){
    // clicking anywhere on the document will prevent other repaint to be logged
    // as well as display the visual "repaint heatmap"
    document.body.addEventListener("click", function(){
      window.removeEventListener("MozAfterPaint", log, false);
 
      for ( var pos = 0; pos &lt; store.length; pos++ ) {
        var rects = store[pos][1];
 
        for ( var i = 0; i &lt; rects.length; i++ ) {
          // will simply "draw" semi-transparent red divs where
          // repaints where recorded
          var rect = rects[i];
          var div = document.createElement("div");
 
          with (div.style) {
            background = "red";
            opacity = "0.1";
            position = "absolute";
            top = rect.top + "px";
            left = rect.left + "px";
            width = (rect.right - rect.left) + "px";
            height = (rect.bottom - rect.top) + "px";
          }
 
          document.body.appendChild( div );
        }
      }
 
      document.body.removeEventListener("click", arguments.callee, false);
    }, false);
  }
})();
</pre>
Revert to this revision