Your Search Results

    MozAfterPaint Redirect 2

    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

    Property Type Description
    target Read only EventTarget The event target (the topmost target in the DOM tree).
    type Read only DOMString The type of event.
    bubbles Read only boolean Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?
    boundingClientRect clientRect The equivalent of getBoundingClientRect() for the repainted zone. Read only.
    clientRects clientRectList The equivalent of getClientRects() for the repainted zone. Read only.

    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 onClick(){
          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", onClick, false);
        }, false);
      }
    })();
    

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,