• MozHub
• A former MozDev project now on GitHub

quotecollapse

resources:	Home Installation Customising Source Code Contributors Pull Requests Issues Screenshots

Customising

Key bindings

You can define a key binding for QuoteCollapse by using the Keyconfig extension. The necessary code to execute on a keypress is as follows:

var messageDocument = QuoteCollapse._messagePane.contentDocument;
bq = messageDocument.getElementsByTagName("blockquote").item(0);
if( ! bq ) return;
var newstate= ! QuoteCollapse._getState(bq);
QuoteCollapse._setTree(messageDocument, newstate);

In future versions of QuoteCollapse there will be a special utility function QuoteCollapse.Toggle() which accomplishes the same.

Style

The style that QuoteCollapse applies by default is equivalent to the following:

blockquote[type="cite"] {
  background-image: url("chrome://quotecollapse/skin/twisty-clsd.png");
  background-repeat: no-repeat;
  background-position: top left;
  max-height: 2.25ex;
  padding-bottom: 0px ! important;
  overflow: -moz-hidden-unscrollable;
}

blockquote[type="cite"][qctoggled="true"] {
  background-image: url("chrome://quotecollapse/skin/twisty-open.png");
  max-height: none;
  overflow: visible;
}

Therefore, you can style everything through your userContent.css. You can edit this file by hand or using the ChromeEdit extension. Note that you have to use the "important" flag to override the default settings. Note also the use of BODY.mailview which ensures that the style is applied when viewing mails only (not in the editor).

Note, up to QuoteCollapse v0.9 the default styles used CSS height property instead of max-height. If you upgrade from that version you'll need to adjust old customizations like: height: auto → max-height: none, and replace other height usages for max-height.
Examples:

• Expand all quotes by default:

  BODY.mailview blockquote[type="cite"] {
    background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  BODY.mailview blockquote[type="cite"][qctoggled="false"] {
    background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: 2ex !important;
    padding-bottom: 0px !important;
    overflow: -moz-hidden-unscrollable !important;
  } 
  

• No twisty when expanded:

  BODY.mailview blockquote[type="cite"][qctoggled="true"] {
    background-image: none ! important ;
  }
  

• Minimize collapsed size to the height of the twisty:

  BODY.mailview blockquote[type="cite"]:not([qctoggled="true"]) {
    max-height: 9px !important;
  }
   

• Always keep 1st level expanded:

  /* overwrite quotecollapse default */
  blockquote[type="cite"] {
    background-image: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* reinstate for level 1 and above: */
  BODY.mailview blockquote[type="cite"] blockquote[type="cite"] {
    background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: 2ex !important;
    padding-bottom: 0px !important;
    overflow: -moz-hidden-unscrollable !important;
  }
  
  BODY.mailview blockquote[type="cite"] blockquote[type="cite"][qctoggled="true"] {
    background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: none !important;
    overflow: visible !important;
  }
   

• Always expand the first quote:

  /* overwrite quotecollapse default for first quote */
  DIV > pre:first-child + blockquote[type="cite"] {
    background-image: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  This may need to be tweaked depending on quoting styles. E.g., add the same rule for blockquotes which are first childs instead of adjacent to a first child pre.
• Collapse only the first quote:

  /* overwrite quotecollapse default for first quote */
  blockquote[type="cite"] {
    background-image: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* reinstate for second quote and following: */
  BODY.mailview DIV > pre:first-child + blockquote[type="cite"] {
    background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: 2ex !important;
    padding-bottom: 0px !important;
    overflow: -moz-hidden-unscrollable !important;
  }
  
  BODY.mailview DIV > pre:first-child + blockquote[type="cite"][qctoggled="true"] {
    background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    max-height: none !important;
    overflow: visible !important;
  }

  The same remark as above applies. Also, if you want twisties inside of the first quote, add rules for level 1 and deeper (see the example on expanding 1st level).
• Partially collapse quotes:

  /* partially reveal first level collapsed quotes */
  BODY.mailview blockquote[type="cite"]:not([qctoggled="true"]) {
    max-height: 6.5em !important;
  }
  
  /* always have nested collapsed quotes reveal just one line of text */
  BODY.mailview blockquote[type="cite"]:not([qctoggled="true"]) blockquote[type="cite"] {
    background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
    max-height: 2ex !important;
    overflow: -moz-hidden-unscrollable !important;
  }

• Note that you can specify different defaults for mail and news (thanks to Stanimir Stamenkov for this remark):

  @-moz-document url-prefix("news:"), url-prefix("snews:") {
     /* Newsgroups */
  }
  
  @-moz-document url-prefix("imap:"), url-prefix("mailbox:") {
     /* Mail */
  }