├── .gitignore
├── CHANGES
├── LICENSE
├── README.rst
├── assets
    └── cssdiff-icon.ai
├── devtools.html
├── devtools.js
├── icon-128.png
├── icon-48.png
├── make-zip.sh
├── manifest.json
└── panel
    ├── diff.js
    ├── index.html
    ├── mustache.js
    ├── panel.css
    └── panel.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # vim swap files
2 | .*.sw*
3 | 


--------------------------------------------------------------------------------
/CHANGES:
--------------------------------------------------------------------------------
1 | Version 1.0
2 | Released: December 1st, 2013
3 | 
4 |  * Initial release
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2015 Evan Borgstrom
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
 1 | CSS Diff Chrome Extension
 2 | ==========================
 3 | This is a Chrome Devtools Extension that tracks changes you make via the
 4 | inspector and provides a convenient "patch" style listing of the changes so
 5 | that they can be easily shared.
 6 | 
 7 | .. image:: http://i.imgur.com/QNshLFB.png
 8 |    :alt: Money Shot
 9 | 
10 | This grew out of our own frustration with how we worked with designers or art
11 | directors. Typically we'll get a screenshot emailed to you highlighting the
12 | changes they want made so that their layouts are "pixel perfect".
13 | 
14 | Once these design types are introduced to the inspector they find joy in the
15 | ability to endlessly play & tweak values, but we found that there was still no
16 | good way to convey the changes they made back to us. We started getting email
17 | with screenshots of the inspector highlighting the changes, a little better
18 | than just a marked up screenshot but still a pain to merge the changes back
19 | into the code base.
20 | 
21 | We investigated all of the live-edit style CSS systems, but they're all so
22 | much overkill for what we need and require lots of complicated setup. They
23 | just wouldn't work for design types.
24 | 
25 | After discussing the problem around the studio for a couple weeks we figured
26 | that if we could just get a patch style output of the differences emailed to
27 | us, or provided in a ticket, then a developer could easily grok the changes
28 | and manually merge them back into the code base.
29 | 
30 | And voila. This extension was built.
31 | 
32 | Installation
33 | ------------
34 | You can install the extension directly from the Chrom Web Store:
35 | 
36 | https://chrome.google.com/webstore/detail/css-diff/bnkooidmjbobfbgncondmfoajbpafjio?hl=en
37 | 
38 | Development Installation
39 | ~~~~~~~~~~~~~~~~~~~~~~~~
40 | * Clone this repository
41 | * Open the Chrome extensions page by typing the following in your address
42 |   bar::
43 | 
44 |     chrome://extensions
45 | 
46 | * Ensure Developer Mode is enable (top right)
47 | * Choose ``Load Unpacked Extension``
48 | * Select the directory that was created when you cloned the repository
49 | 
50 | Usage
51 | -----
52 | Once the extension is installed just open and use the devtools window as you
53 | normally would. You'll notice that at the top is a new Tab that says ``CSS
54 | Diff``, when you visit it you'll be given the patch style output of your
55 | changes.
56 | 
57 | Caveats
58 | -------
59 | The initial & modified resources are tracked when the devtools panel is opened
60 | and this means that if you make modifications, close the devtools panel, and
61 | then re-open the devtools panel we'll consider the current state the "initial"
62 | resources. Once you start to make changes do not close the devtools panel or
63 | you will most likely need to reload the page and re-start all of your changes.
64 | 
65 | This only works with uncompiled/unminified CSS sources because we're actually
66 | running a diff on the raw source in the inspected window. This shouldn't be a
67 | problem since this tool is meant for development purposes, but needed to be
68 | called out.
69 | 
70 | 3rd party software
71 | ------------------
72 | The CSS Diff extension contains the following software:
73 | 
74 | * **jsdiff**
75 |   https://github.com/kpdecker/jsdiff
76 |   BSD license
77 | 
78 | * **Mustache (Javascript)**
79 |   https://github.com/janl/mustache.js
80 |   MIT license
81 | 
82 | Authors
83 | -------
84 | The following fine individuals have contributed to this software:
85 | 
86 | * @jondavey
87 | * @brentsmyth
88 | * @borgstrom
89 | 


--------------------------------------------------------------------------------
/assets/cssdiff-icon.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/borgstrom/cssdiff-chrome-extension/365fb1f4cdb260f2dcf7fc6afbf8892a87f666b0/assets/cssdiff-icon.ai


--------------------------------------------------------------------------------
/devtools.html:
--------------------------------------------------------------------------------
1 | <html>
2 |     <head>
3 |     </head>
4 | 
5 |     <body>
6 |         <script src="devtools.js"></script>
7 |     </body>
8 | </html>
9 | 


--------------------------------------------------------------------------------
/devtools.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Copyright 2013 FatBox Inc.
 3 |  * 
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  * 
 8 |  *   http://www.apache.org/licenses/LICENSE-2.0
 9 |  * 
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | chrome.devtools.panels.create(
17 |     'CSS Diff',
18 |     'assets/cssdiff-icon.png',
19 |     'panel/index.html',
20 |     function(panel) {
21 |         var initial_resources = {},
22 |             modified_resources = {};
23 | 
24 |         // collect our current resources
25 |         chrome.devtools.inspectedWindow.getResources(function(resources) {
26 |             for (var i = 0, c = resources.length; i < c; i++) {
27 |                 if (resources[i].type == 'stylesheet') {
28 |                     // use a self invoking function here to make sure the correct
29 |                     // instance of `resource` is used in the callback
30 |                     (function(resource) {
31 |                         resource.getContent(function(content, encoding) {
32 |                             initial_resources[resource.url] = content;
33 |                         });
34 |                     })(resources[i]);
35 |                 }
36 |             }
37 |         });
38 | 
39 |         // add a listener to track committed changes to resources
40 |         chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
41 |             modified_resources[resource.url] = content;
42 |         });
43 | 
44 |         panel.onShown.addListener(function(window) {
45 |             window.updateDiff(initial_resources, modified_resources);
46 |         });
47 |     }
48 | );
49 | 


--------------------------------------------------------------------------------
/icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/borgstrom/cssdiff-chrome-extension/365fb1f4cdb260f2dcf7fc6afbf8892a87f666b0/icon-128.png


--------------------------------------------------------------------------------
/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/borgstrom/cssdiff-chrome-extension/365fb1f4cdb260f2dcf7fc6afbf8892a87f666b0/icon-48.png


--------------------------------------------------------------------------------
/make-zip.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | rm -f cssdiff.zip && zip cssdiff.zip -r panel/ manifest.json icon*.png devtools.*
3 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "CSS Diff",
 4 |   "version": "1.0",
 5 |   "author": "Evan Borgstrom",
 6 |   "description": "As you make CSS changes in the DevTools inspector window this will track your changes and provide you with a nicely formatted diff",
 7 |   "icons": {
 8 |       "48": "icon-48.png",
 9 |       "128": "icon-128.png"
10 |   },
11 |   "devtools_page": "devtools.html"
12 | }
13 | 


--------------------------------------------------------------------------------
/panel/diff.js:
--------------------------------------------------------------------------------
  1 | /* See LICENSE file for terms of use */
  2 | 
  3 | /*
  4 |  * Text diff implementation.
  5 |  *
  6 |  * This library supports the following APIS:
  7 |  * JsDiff.diffChars: Character by character diff
  8 |  * JsDiff.diffWords: Word (as defined by \b regex) diff which ignores whitespace
  9 |  * JsDiff.diffLines: Line based diff
 10 |  *
 11 |  * JsDiff.diffCss: Diff targeted at CSS content
 12 |  *
 13 |  * These methods are based on the implementation proposed in
 14 |  * "An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
 15 |  * http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
 16 |  */
 17 | var JsDiff = (function() {
 18 |   /*jshint maxparams: 5*/
 19 |   function clonePath(path) {
 20 |     return { newPos: path.newPos, components: path.components.slice(0) };
 21 |   }
 22 |   function removeEmpty(array) {
 23 |     var ret = [];
 24 |     for (var i = 0; i < array.length; i++) {
 25 |       if (array[i]) {
 26 |         ret.push(array[i]);
 27 |       }
 28 |     }
 29 |     return ret;
 30 |   }
 31 |   function escapeHTML(s) {
 32 |     var n = s;
 33 |     n = n.replace(/&/g, '&amp;');
 34 |     n = n.replace(/</g, '&lt;');
 35 |     n = n.replace(/>/g, '&gt;');
 36 |     n = n.replace(/"/g, '&quot;');
 37 | 
 38 |     return n;
 39 |   }
 40 | 
 41 |   var Diff = function(ignoreWhitespace) {
 42 |     this.ignoreWhitespace = ignoreWhitespace;
 43 |   };
 44 |   Diff.prototype = {
 45 |       diff: function(oldString, newString) {
 46 |         // Handle the identity case (this is due to unrolling editLength == 0
 47 |         if (newString === oldString) {
 48 |           return [{ value: newString }];
 49 |         }
 50 |         if (!newString) {
 51 |           return [{ value: oldString, removed: true }];
 52 |         }
 53 |         if (!oldString) {
 54 |           return [{ value: newString, added: true }];
 55 |         }
 56 | 
 57 |         newString = this.tokenize(newString);
 58 |         oldString = this.tokenize(oldString);
 59 | 
 60 |         var newLen = newString.length, oldLen = oldString.length;
 61 |         var maxEditLength = newLen + oldLen;
 62 |         var bestPath = [{ newPos: -1, components: [] }];
 63 | 
 64 |         // Seed editLength = 0
 65 |         var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
 66 |         if (bestPath[0].newPos+1 >= newLen && oldPos+1 >= oldLen) {
 67 |           return bestPath[0].components;
 68 |         }
 69 | 
 70 |         for (var editLength = 1; editLength <= maxEditLength; editLength++) {
 71 |           for (var diagonalPath = -1*editLength; diagonalPath <= editLength; diagonalPath+=2) {
 72 |             var basePath;
 73 |             var addPath = bestPath[diagonalPath-1],
 74 |                 removePath = bestPath[diagonalPath+1];
 75 |             oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
 76 |             if (addPath) {
 77 |               // No one else is going to attempt to use this value, clear it
 78 |               bestPath[diagonalPath-1] = undefined;
 79 |             }
 80 | 
 81 |             var canAdd = addPath && addPath.newPos+1 < newLen;
 82 |             var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
 83 |             if (!canAdd && !canRemove) {
 84 |               bestPath[diagonalPath] = undefined;
 85 |               continue;
 86 |             }
 87 | 
 88 |             // Select the diagonal that we want to branch from. We select the prior
 89 |             // path whose position in the new string is the farthest from the origin
 90 |             // and does not pass the bounds of the diff graph
 91 |             if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) {
 92 |               basePath = clonePath(removePath);
 93 |               this.pushComponent(basePath.components, oldString[oldPos], undefined, true);
 94 |             } else {
 95 |               basePath = clonePath(addPath);
 96 |               basePath.newPos++;
 97 |               this.pushComponent(basePath.components, newString[basePath.newPos], true, undefined);
 98 |             }
 99 | 
100 |             var oldPos = this.extractCommon(basePath, newString, oldString, diagonalPath);
101 | 
102 |             if (basePath.newPos+1 >= newLen && oldPos+1 >= oldLen) {
103 |               return basePath.components;
104 |             } else {
105 |               bestPath[diagonalPath] = basePath;
106 |             }
107 |           }
108 |         }
109 |       },
110 | 
111 |       pushComponent: function(components, value, added, removed) {
112 |         var last = components[components.length-1];
113 |         if (last && last.added === added && last.removed === removed) {
114 |           // We need to clone here as the component clone operation is just
115 |           // as shallow array clone
116 |           components[components.length-1] =
117 |             {value: this.join(last.value, value), added: added, removed: removed };
118 |         } else {
119 |           components.push({value: value, added: added, removed: removed });
120 |         }
121 |       },
122 |       extractCommon: function(basePath, newString, oldString, diagonalPath) {
123 |         var newLen = newString.length,
124 |             oldLen = oldString.length,
125 |             newPos = basePath.newPos,
126 |             oldPos = newPos - diagonalPath;
127 |         while (newPos+1 < newLen && oldPos+1 < oldLen && this.equals(newString[newPos+1], oldString[oldPos+1])) {
128 |           newPos++;
129 |           oldPos++;
130 | 
131 |           this.pushComponent(basePath.components, newString[newPos], undefined, undefined);
132 |         }
133 |         basePath.newPos = newPos;
134 |         return oldPos;
135 |       },
136 | 
137 |       equals: function(left, right) {
138 |         var reWhitespace = /\S/;
139 |         if (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right)) {
140 |           return true;
141 |         } else {
142 |           return left === right;
143 |         }
144 |       },
145 |       join: function(left, right) {
146 |         return left + right;
147 |       },
148 |       tokenize: function(value) {
149 |         return value;
150 |       }
151 |   };
152 | 
153 |   var CharDiff = new Diff();
154 | 
155 |   var WordDiff = new Diff(true);
156 |   var WordWithSpaceDiff = new Diff();
157 |   WordDiff.tokenize = WordWithSpaceDiff.tokenize = function(value) {
158 |     return removeEmpty(value.split(/(\s+|\b)/));
159 |   };
160 | 
161 |   var CssDiff = new Diff(true);
162 |   CssDiff.tokenize = function(value) {
163 |     return removeEmpty(value.split(/([{}:;,]|\s+)/));
164 |   };
165 | 
166 |   var LineDiff = new Diff();
167 |   LineDiff.tokenize = function(value) {
168 |     return value.split(/^/m);
169 |   };
170 | 
171 |   return {
172 |     Diff: Diff,
173 | 
174 |     diffChars: function(oldStr, newStr) { return CharDiff.diff(oldStr, newStr); },
175 |     diffWords: function(oldStr, newStr) { return WordDiff.diff(oldStr, newStr); },
176 |     diffWordsWithSpace: function(oldStr, newStr) { return WordWithSpaceDiff.diff(oldStr, newStr); },
177 |     diffLines: function(oldStr, newStr) { return LineDiff.diff(oldStr, newStr); },
178 | 
179 |     diffCss: function(oldStr, newStr) { return CssDiff.diff(oldStr, newStr); },
180 | 
181 |     createPatch: function(fileName, oldStr, newStr, oldHeader, newHeader) {
182 |       var ret = [];
183 | 
184 |       ret.push('Index: ' + fileName);
185 |       ret.push('===================================================================');
186 |       ret.push('--- ' + fileName + (typeof oldHeader === 'undefined' ? '' : '\t' + oldHeader));
187 |       ret.push('+++ ' + fileName + (typeof newHeader === 'undefined' ? '' : '\t' + newHeader));
188 | 
189 |       var diff = LineDiff.diff(oldStr, newStr);
190 |       if (!diff[diff.length-1].value) {
191 |         diff.pop();   // Remove trailing newline add
192 |       }
193 |       diff.push({value: '', lines: []});   // Append an empty value to make cleanup easier
194 | 
195 |       function contextLines(lines) {
196 |         return lines.map(function(entry) { return ' ' + entry; });
197 |       }
198 |       function eofNL(curRange, i, current) {
199 |         var last = diff[diff.length-2],
200 |             isLast = i === diff.length-2,
201 |             isLastOfType = i === diff.length-3 && (current.added !== last.added || current.removed !== last.removed);
202 | 
203 |         // Figure out if this is the last line for the given file and missing NL
204 |         if (!/\n$/.test(current.value) && (isLast || isLastOfType)) {
205 |           curRange.push('\\ No newline at end of file');
206 |         }
207 |       }
208 | 
209 |       var oldRangeStart = 0, newRangeStart = 0, curRange = [],
210 |           oldLine = 1, newLine = 1;
211 |       for (var i = 0; i < diff.length; i++) {
212 |         var current = diff[i],
213 |             lines = current.lines || current.value.replace(/\n$/, '').split('\n');
214 |         current.lines = lines;
215 | 
216 |         if (current.added || current.removed) {
217 |           if (!oldRangeStart) {
218 |             var prev = diff[i-1];
219 |             oldRangeStart = oldLine;
220 |             newRangeStart = newLine;
221 | 
222 |             if (prev) {
223 |               curRange = contextLines(prev.lines.slice(-4));
224 |               oldRangeStart -= curRange.length;
225 |               newRangeStart -= curRange.length;
226 |             }
227 |           }
228 |           curRange.push.apply(curRange, lines.map(function(entry) { return (current.added?'+':'-') + entry; }));
229 |           eofNL(curRange, i, current);
230 | 
231 |           if (current.added) {
232 |             newLine += lines.length;
233 |           } else {
234 |             oldLine += lines.length;
235 |           }
236 |         } else {
237 |           if (oldRangeStart) {
238 |             // Close out any changes that have been output (or join overlapping)
239 |             if (lines.length <= 8 && i < diff.length-2) {
240 |               // Overlapping
241 |               curRange.push.apply(curRange, contextLines(lines));
242 |             } else {
243 |               // end the range and output
244 |               var contextSize = Math.min(lines.length, 4);
245 |               ret.push(
246 |                   '@@ -' + oldRangeStart + ',' + (oldLine-oldRangeStart+contextSize)
247 |                   + ' +' + newRangeStart + ',' + (newLine-newRangeStart+contextSize)
248 |                   + ' @@');
249 |               ret.push.apply(ret, curRange);
250 |               ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));
251 |               if (lines.length <= 4) {
252 |                 eofNL(ret, i, current);
253 |               }
254 | 
255 |               oldRangeStart = 0;  newRangeStart = 0; curRange = [];
256 |             }
257 |           }
258 |           oldLine += lines.length;
259 |           newLine += lines.length;
260 |         }
261 |       }
262 | 
263 |       return ret.join('\n') + '\n';
264 |     },
265 | 
266 |     applyPatch: function(oldStr, uniDiff) {
267 |       var diffstr = uniDiff.split('\n');
268 |       var diff = [];
269 |       var remEOFNL = false,
270 |           addEOFNL = false;
271 | 
272 |       for (var i = (diffstr[0][0]==='I'?4:0); i < diffstr.length; i++) {
273 |         if(diffstr[i][0] === '@') {
274 |           var meh = diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);
275 |           diff.unshift({
276 |             start:meh[3],
277 |             oldlength:meh[2],
278 |             oldlines:[],
279 |             newlength:meh[4],
280 |             newlines:[]
281 |           });
282 |         } else if(diffstr[i][0] === '+') {
283 |           diff[0].newlines.push(diffstr[i].substr(1));
284 |         } else if(diffstr[i][0] === '-') {
285 |           diff[0].oldlines.push(diffstr[i].substr(1));
286 |         } else if(diffstr[i][0] === ' ') {
287 |           diff[0].newlines.push(diffstr[i].substr(1));
288 |           diff[0].oldlines.push(diffstr[i].substr(1));
289 |         } else if(diffstr[i][0] === '\\') {
290 |           if (diffstr[i-1][0] === '+') {
291 |             remEOFNL = true;
292 |           } else if(diffstr[i-1][0] === '-') {
293 |             addEOFNL = true;
294 |           }
295 |         }
296 |       }
297 | 
298 |       var str = oldStr.split('\n');
299 |       for (var i = diff.length - 1; i >= 0; i--) {
300 |         var d = diff[i];
301 |         for (var j = 0; j < d.oldlength; j++) {
302 |           if(str[d.start-1+j] !== d.oldlines[j]) {
303 |             return false;
304 |           }
305 |         }
306 |         Array.prototype.splice.apply(str,[d.start-1,+d.oldlength].concat(d.newlines));
307 |       }
308 | 
309 |       if (remEOFNL) {
310 |         while (!str[str.length-1]) {
311 |           str.pop();
312 |         }
313 |       } else if (addEOFNL) {
314 |         str.push('');
315 |       }
316 |       return str.join('\n');
317 |     },
318 | 
319 |     convertChangesToXML: function(changes){
320 |       var ret = [];
321 |       for ( var i = 0; i < changes.length; i++) {
322 |         var change = changes[i];
323 |         if (change.added) {
324 |           ret.push('<ins>');
325 |         } else if (change.removed) {
326 |           ret.push('<del>');
327 |         }
328 | 
329 |         ret.push(escapeHTML(change.value));
330 | 
331 |         if (change.added) {
332 |           ret.push('</ins>');
333 |         } else if (change.removed) {
334 |           ret.push('</del>');
335 |         }
336 |       }
337 |       return ret.join('');
338 |     },
339 | 
340 |     // See: http://code.google.com/p/google-diff-match-patch/wiki/API
341 |     convertChangesToDMP: function(changes){
342 |       var ret = [], change;
343 |       for ( var i = 0; i < changes.length; i++) {
344 |         change = changes[i];
345 |         ret.push([(change.added ? 1 : change.removed ? -1 : 0), change.value]);
346 |       }
347 |       return ret;
348 |     }
349 |   };
350 | })();
351 | 
352 | if (typeof module !== 'undefined') {
353 |     module.exports = JsDiff;
354 | }
355 | 


--------------------------------------------------------------------------------
/panel/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <link rel="stylesheet" type="text/css" href="panel.css">
 4 |     </head>
 5 | 
 6 |     <body>
 7 |         <div id="output"></div>
 8 | 
 9 |         <script id="output-template" type="text/x-template">
10 |             {{#resources}}
11 |             <pre class="prettyprint">{{&diff}}</pre>
12 |             {{/resources}}
13 |         </script>
14 | 
15 |         <script type="text/javascript" src="mustache.js"></script>
16 |         <script type="text/javascript" src="diff.js"></script>
17 |         <script type="text/javascript" src="panel.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/panel/mustache.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * mustache.js - Logic-less {{mustache}} templates with JavaScript
  3 |  * http://github.com/janl/mustache.js
  4 |  */
  5 | 
  6 | /*global define: false*/
  7 | 
  8 | (function (root, factory) {
  9 |   if (typeof exports === "object" && exports) {
 10 |     factory(exports); // CommonJS
 11 |   } else {
 12 |     var mustache = {};
 13 |     factory(mustache);
 14 |     if (typeof define === "function" && define.amd) {
 15 |       define(mustache); // AMD
 16 |     } else {
 17 |       root.Mustache = mustache; // <script>
 18 |     }
 19 |   }
 20 | }(this, function (mustache) {
 21 | 
 22 |   var whiteRe = /\s*/;
 23 |   var spaceRe = /\s+/;
 24 |   var nonSpaceRe = /\S/;
 25 |   var eqRe = /\s*=/;
 26 |   var curlyRe = /\s*\}/;
 27 |   var tagRe = /#|\^|\/|>|\{|&|=|!/;
 28 | 
 29 |   // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
 30 |   // See https://github.com/janl/mustache.js/issues/189
 31 |   var RegExp_test = RegExp.prototype.test;
 32 |   function testRegExp(re, string) {
 33 |     return RegExp_test.call(re, string);
 34 |   }
 35 | 
 36 |   function isWhitespace(string) {
 37 |     return !testRegExp(nonSpaceRe, string);
 38 |   }
 39 | 
 40 |   var Object_toString = Object.prototype.toString;
 41 |   var isArray = Array.isArray || function (object) {
 42 |     return Object_toString.call(object) === '[object Array]';
 43 |   };
 44 | 
 45 |   function isFunction(object) {
 46 |     return typeof object === 'function';
 47 |   }
 48 | 
 49 |   function escapeRegExp(string) {
 50 |     return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
 51 |   }
 52 | 
 53 |   var entityMap = {
 54 |     "&": "&amp;",
 55 |     "<": "&lt;",
 56 |     ">": "&gt;",
 57 |     '"': '&quot;',
 58 |     "'": '&#39;',
 59 |     "/": '&#x2F;'
 60 |   };
 61 | 
 62 |   function escapeHtml(string) {
 63 |     return String(string).replace(/[&<>"'\/]/g, function (s) {
 64 |       return entityMap[s];
 65 |     });
 66 |   }
 67 | 
 68 |   function Scanner(string) {
 69 |     this.string = string;
 70 |     this.tail = string;
 71 |     this.pos = 0;
 72 |   }
 73 | 
 74 |   /**
 75 |    * Returns `true` if the tail is empty (end of string).
 76 |    */
 77 |   Scanner.prototype.eos = function () {
 78 |     return this.tail === "";
 79 |   };
 80 | 
 81 |   /**
 82 |    * Tries to match the given regular expression at the current position.
 83 |    * Returns the matched text if it can match, the empty string otherwise.
 84 |    */
 85 |   Scanner.prototype.scan = function (re) {
 86 |     var match = this.tail.match(re);
 87 | 
 88 |     if (match && match.index === 0) {
 89 |       var string = match[0];
 90 |       this.tail = this.tail.substring(string.length);
 91 |       this.pos += string.length;
 92 |       return string;
 93 |     }
 94 | 
 95 |     return "";
 96 |   };
 97 | 
 98 |   /**
 99 |    * Skips all text until the given regular expression can be matched. Returns
100 |    * the skipped string, which is the entire tail if no match can be made.
101 |    */
102 |   Scanner.prototype.scanUntil = function (re) {
103 |     var index = this.tail.search(re), match;
104 | 
105 |     switch (index) {
106 |     case -1:
107 |       match = this.tail;
108 |       this.tail = "";
109 |       break;
110 |     case 0:
111 |       match = "";
112 |       break;
113 |     default:
114 |       match = this.tail.substring(0, index);
115 |       this.tail = this.tail.substring(index);
116 |     }
117 | 
118 |     this.pos += match.length;
119 | 
120 |     return match;
121 |   };
122 | 
123 |   function Context(view, parent) {
124 |     this.view = view == null ? {} : view;
125 |     this.parent = parent;
126 |     this._cache = { '.': this.view };
127 |   }
128 | 
129 |   Context.make = function (view) {
130 |     return (view instanceof Context) ? view : new Context(view);
131 |   };
132 | 
133 |   Context.prototype.push = function (view) {
134 |     return new Context(view, this);
135 |   };
136 | 
137 |   Context.prototype.lookup = function (name) {
138 |     var value;
139 |     if (name in this._cache) {
140 |       value = this._cache[name];
141 |     } else {
142 |       var context = this;
143 | 
144 |       while (context) {
145 |         if (name.indexOf('.') > 0) {
146 |           value = context.view;
147 | 
148 |           var names = name.split('.'), i = 0;
149 |           while (value != null && i < names.length) {
150 |             value = value[names[i++]];
151 |           }
152 |         } else {
153 |           value = context.view[name];
154 |         }
155 | 
156 |         if (value != null) break;
157 | 
158 |         context = context.parent;
159 |       }
160 | 
161 |       this._cache[name] = value;
162 |     }
163 | 
164 |     if (isFunction(value)) {
165 |       value = value.call(this.view);
166 |     }
167 | 
168 |     return value;
169 |   };
170 | 
171 |   function Writer() {
172 |     this.clearCache();
173 |   }
174 | 
175 |   Writer.prototype.clearCache = function () {
176 |     this._cache = {};
177 |     this._partialCache = {};
178 |   };
179 | 
180 |   Writer.prototype.compile = function (template, tags) {
181 |     var fn = this._cache[template];
182 | 
183 |     if (!fn) {
184 |       var tokens = mustache.parse(template, tags);
185 |       fn = this._cache[template] = this.compileTokens(tokens, template);
186 |     }
187 | 
188 |     return fn;
189 |   };
190 | 
191 |   Writer.prototype.compilePartial = function (name, template, tags) {
192 |     var fn = this.compile(template, tags);
193 |     this._partialCache[name] = fn;
194 |     return fn;
195 |   };
196 | 
197 |   Writer.prototype.getPartial = function (name) {
198 |     if (!(name in this._partialCache) && this._loadPartial) {
199 |       this.compilePartial(name, this._loadPartial(name));
200 |     }
201 | 
202 |     return this._partialCache[name];
203 |   };
204 | 
205 |   Writer.prototype.compileTokens = function (tokens, template) {
206 |     var self = this;
207 |     return function (view, partials) {
208 |       if (partials) {
209 |         if (isFunction(partials)) {
210 |           self._loadPartial = partials;
211 |         } else {
212 |           for (var name in partials) {
213 |             self.compilePartial(name, partials[name]);
214 |           }
215 |         }
216 |       }
217 | 
218 |       return renderTokens(tokens, self, Context.make(view), template);
219 |     };
220 |   };
221 | 
222 |   Writer.prototype.render = function (template, view, partials) {
223 |     return this.compile(template)(view, partials);
224 |   };
225 | 
226 |   /**
227 |    * Low-level function that renders the given `tokens` using the given `writer`
228 |    * and `context`. The `template` string is only needed for templates that use
229 |    * higher-order sections to extract the portion of the original template that
230 |    * was contained in that section.
231 |    */
232 |   function renderTokens(tokens, writer, context, template) {
233 |     var buffer = '';
234 | 
235 |     // This function is used to render an artbitrary template
236 |     // in the current context by higher-order functions.
237 |     function subRender(template) {
238 |       return writer.render(template, context);
239 |     }
240 | 
241 |     var token, tokenValue, value;
242 |     for (var i = 0, len = tokens.length; i < len; ++i) {
243 |       token = tokens[i];
244 |       tokenValue = token[1];
245 | 
246 |       switch (token[0]) {
247 |       case '#':
248 |         value = context.lookup(tokenValue);
249 | 
250 |         if (typeof value === 'object' || typeof value === 'string') {
251 |           if (isArray(value)) {
252 |             for (var j = 0, jlen = value.length; j < jlen; ++j) {
253 |               buffer += renderTokens(token[4], writer, context.push(value[j]), template);
254 |             }
255 |           } else if (value) {
256 |             buffer += renderTokens(token[4], writer, context.push(value), template);
257 |           }
258 |         } else if (isFunction(value)) {
259 |           var text = template == null ? null : template.slice(token[3], token[5]);
260 |           value = value.call(context.view, text, subRender);
261 |           if (value != null) buffer += value;
262 |         } else if (value) {
263 |           buffer += renderTokens(token[4], writer, context, template);
264 |         }
265 | 
266 |         break;
267 |       case '^':
268 |         value = context.lookup(tokenValue);
269 | 
270 |         // Use JavaScript's definition of falsy. Include empty arrays.
271 |         // See https://github.com/janl/mustache.js/issues/186
272 |         if (!value || (isArray(value) && value.length === 0)) {
273 |           buffer += renderTokens(token[4], writer, context, template);
274 |         }
275 | 
276 |         break;
277 |       case '>':
278 |         value = writer.getPartial(tokenValue);
279 |         if (isFunction(value)) buffer += value(context);
280 |         break;
281 |       case '&':
282 |         value = context.lookup(tokenValue);
283 |         if (value != null) buffer += value;
284 |         break;
285 |       case 'name':
286 |         value = context.lookup(tokenValue);
287 |         if (value != null) buffer += mustache.escape(value);
288 |         break;
289 |       case 'text':
290 |         buffer += tokenValue;
291 |         break;
292 |       }
293 |     }
294 | 
295 |     return buffer;
296 |   }
297 | 
298 |   /**
299 |    * Forms the given array of `tokens` into a nested tree structure where
300 |    * tokens that represent a section have two additional items: 1) an array of
301 |    * all tokens that appear in that section and 2) the index in the original
302 |    * template that represents the end of that section.
303 |    */
304 |   function nestTokens(tokens) {
305 |     var tree = [];
306 |     var collector = tree;
307 |     var sections = [];
308 | 
309 |     var token;
310 |     for (var i = 0, len = tokens.length; i < len; ++i) {
311 |       token = tokens[i];
312 |       switch (token[0]) {
313 |       case '#':
314 |       case '^':
315 |         sections.push(token);
316 |         collector.push(token);
317 |         collector = token[4] = [];
318 |         break;
319 |       case '/':
320 |         var section = sections.pop();
321 |         section[5] = token[2];
322 |         collector = sections.length > 0 ? sections[sections.length - 1][4] : tree;
323 |         break;
324 |       default:
325 |         collector.push(token);
326 |       }
327 |     }
328 | 
329 |     return tree;
330 |   }
331 | 
332 |   /**
333 |    * Combines the values of consecutive text tokens in the given `tokens` array
334 |    * to a single token.
335 |    */
336 |   function squashTokens(tokens) {
337 |     var squashedTokens = [];
338 | 
339 |     var token, lastToken;
340 |     for (var i = 0, len = tokens.length; i < len; ++i) {
341 |       token = tokens[i];
342 |       if (token) {
343 |         if (token[0] === 'text' && lastToken && lastToken[0] === 'text') {
344 |           lastToken[1] += token[1];
345 |           lastToken[3] = token[3];
346 |         } else {
347 |           lastToken = token;
348 |           squashedTokens.push(token);
349 |         }
350 |       }
351 |     }
352 | 
353 |     return squashedTokens;
354 |   }
355 | 
356 |   function escapeTags(tags) {
357 |     return [
358 |       new RegExp(escapeRegExp(tags[0]) + "\\s*"),
359 |       new RegExp("\\s*" + escapeRegExp(tags[1]))
360 |     ];
361 |   }
362 | 
363 |   /**
364 |    * Breaks up the given `template` string into a tree of token objects. If
365 |    * `tags` is given here it must be an array with two string values: the
366 |    * opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
367 |    * course, the default is to use mustaches (i.e. Mustache.tags).
368 |    */
369 |   function parseTemplate(template, tags) {
370 |     template = template || '';
371 |     tags = tags || mustache.tags;
372 | 
373 |     if (typeof tags === 'string') tags = tags.split(spaceRe);
374 |     if (tags.length !== 2) throw new Error('Invalid tags: ' + tags.join(', '));
375 | 
376 |     var tagRes = escapeTags(tags);
377 |     var scanner = new Scanner(template);
378 | 
379 |     var sections = [];     // Stack to hold section tokens
380 |     var tokens = [];       // Buffer to hold the tokens
381 |     var spaces = [];       // Indices of whitespace tokens on the current line
382 |     var hasTag = false;    // Is there a {{tag}} on the current line?
383 |     var nonSpace = false;  // Is there a non-space char on the current line?
384 | 
385 |     // Strips all whitespace tokens array for the current line
386 |     // if there was a {{#tag}} on it and otherwise only space.
387 |     function stripSpace() {
388 |       if (hasTag && !nonSpace) {
389 |         while (spaces.length) {
390 |           delete tokens[spaces.pop()];
391 |         }
392 |       } else {
393 |         spaces = [];
394 |       }
395 | 
396 |       hasTag = false;
397 |       nonSpace = false;
398 |     }
399 | 
400 |     var start, type, value, chr, token, openSection;
401 |     while (!scanner.eos()) {
402 |       start = scanner.pos;
403 | 
404 |       // Match any text between tags.
405 |       value = scanner.scanUntil(tagRes[0]);
406 |       if (value) {
407 |         for (var i = 0, len = value.length; i < len; ++i) {
408 |           chr = value.charAt(i);
409 | 
410 |           if (isWhitespace(chr)) {
411 |             spaces.push(tokens.length);
412 |           } else {
413 |             nonSpace = true;
414 |           }
415 | 
416 |           tokens.push(['text', chr, start, start + 1]);
417 |           start += 1;
418 | 
419 |           // Check for whitespace on the current line.
420 |           if (chr == '\n') stripSpace();
421 |         }
422 |       }
423 | 
424 |       // Match the opening tag.
425 |       if (!scanner.scan(tagRes[0])) break;
426 |       hasTag = true;
427 | 
428 |       // Get the tag type.
429 |       type = scanner.scan(tagRe) || 'name';
430 |       scanner.scan(whiteRe);
431 | 
432 |       // Get the tag value.
433 |       if (type === '=') {
434 |         value = scanner.scanUntil(eqRe);
435 |         scanner.scan(eqRe);
436 |         scanner.scanUntil(tagRes[1]);
437 |       } else if (type === '{') {
438 |         value = scanner.scanUntil(new RegExp('\\s*' + escapeRegExp('}' + tags[1])));
439 |         scanner.scan(curlyRe);
440 |         scanner.scanUntil(tagRes[1]);
441 |         type = '&';
442 |       } else {
443 |         value = scanner.scanUntil(tagRes[1]);
444 |       }
445 | 
446 |       // Match the closing tag.
447 |       if (!scanner.scan(tagRes[1])) throw new Error('Unclosed tag at ' + scanner.pos);
448 | 
449 |       token = [type, value, start, scanner.pos];
450 |       tokens.push(token);
451 | 
452 |       if (type === '#' || type === '^') {
453 |         sections.push(token);
454 |       } else if (type === '/') {
455 |         // Check section nesting.
456 |         openSection = sections.pop();
457 |         if (!openSection) {
458 |           throw new Error('Unopened section "' + value + '" at ' + start);
459 |         }
460 |         if (openSection[1] !== value) {
461 |           throw new Error('Unclosed section "' + openSection[1] + '" at ' + start);
462 |         }
463 |       } else if (type === 'name' || type === '{' || type === '&') {
464 |         nonSpace = true;
465 |       } else if (type === '=') {
466 |         // Set the tags for the next time around.
467 |         tags = value.split(spaceRe);
468 |         if (tags.length !== 2) {
469 |           throw new Error('Invalid tags at ' + start + ': ' + tags.join(', '));
470 |         }
471 |         tagRes = escapeTags(tags);
472 |       }
473 |     }
474 | 
475 |     // Make sure there are no open sections when we're done.
476 |     openSection = sections.pop();
477 |     if (openSection) {
478 |       throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
479 |     }
480 | 
481 |     return nestTokens(squashTokens(tokens));
482 |   }
483 | 
484 |   mustache.name = "mustache.js";
485 |   mustache.version = "0.7.3";
486 |   mustache.tags = ["{{", "}}"];
487 | 
488 |   mustache.Scanner = Scanner;
489 |   mustache.Context = Context;
490 |   mustache.Writer = Writer;
491 | 
492 |   mustache.parse = parseTemplate;
493 | 
494 |   // Export the escaping function so that the user may override it.
495 |   // See https://github.com/janl/mustache.js/issues/244
496 |   mustache.escape = escapeHtml;
497 | 
498 |   // All Mustache.* functions use this writer.
499 |   var defaultWriter = new Writer();
500 | 
501 |   /**
502 |    * Clears all cached templates and partials in the default writer.
503 |    */
504 |   mustache.clearCache = function () {
505 |     return defaultWriter.clearCache();
506 |   };
507 | 
508 |   /**
509 |    * Compiles the given `template` to a reusable function using the default
510 |    * writer.
511 |    */
512 |   mustache.compile = function (template, tags) {
513 |     return defaultWriter.compile(template, tags);
514 |   };
515 | 
516 |   /**
517 |    * Compiles the partial with the given `name` and `template` to a reusable
518 |    * function using the default writer.
519 |    */
520 |   mustache.compilePartial = function (name, template, tags) {
521 |     return defaultWriter.compilePartial(name, template, tags);
522 |   };
523 | 
524 |   /**
525 |    * Compiles the given array of tokens (the output of a parse) to a reusable
526 |    * function using the default writer.
527 |    */
528 |   mustache.compileTokens = function (tokens, template) {
529 |     return defaultWriter.compileTokens(tokens, template);
530 |   };
531 | 
532 |   /**
533 |    * Renders the `template` with the given `view` and `partials` using the
534 |    * default writer.
535 |    */
536 |   mustache.render = function (template, view, partials) {
537 |     return defaultWriter.render(template, view, partials);
538 |   };
539 | 
540 |   // This is here for backwards compatibility with 0.4.x.
541 |   mustache.to_html = function (template, view, partials, send) {
542 |     var result = mustache.render(template, view, partials);
543 | 
544 |     if (isFunction(send)) {
545 |       send(result);
546 |     } else {
547 |       return result;
548 |     }
549 |   };
550 | 
551 | }));
552 | 


--------------------------------------------------------------------------------
/panel/panel.css:
--------------------------------------------------------------------------------
1 | *, html, body {
2 |     font-family: 'Inconsolata', 'Monaco', 'Courier New', 'Courier', monospace;
3 |     font-size: 14px;
4 | }
5 | 


--------------------------------------------------------------------------------
/panel/panel.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Copyright 2013 FatBox Inc.
 3 |  * 
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  * 
 8 |  *   http://www.apache.org/licenses/LICENSE-2.0
 9 |  * 
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 
17 | function byId(id) {
18 |     return document.getElementById(id);
19 | }
20 | 
21 | (function() {
22 |     var output = byId('output'),
23 |         template_source = byId('output-template').innerHTML;
24 | 
25 |     // we attach a function to our window object that will be called whenever
26 |     // our panel is shown (see devtools.js)
27 |     window.updateDiff = function(initial_resources, modified_resources) {
28 |         var context = {
29 |                 'resources': []
30 |             };
31 | 
32 |         for (url in modified_resources) {
33 |             context['resources'].push({
34 |                 'diff': JsDiff.createPatch(
35 |                     url,
36 |                     initial_resources[url],
37 |                     modified_resources[url]
38 |                 )
39 |             });
40 |         }
41 | 
42 |         output.innerHTML = Mustache.render(template_source, context);
43 |     }
44 | 
45 | })();
46 | 


--------------------------------------------------------------------------------