[JS tool] format to display diff text on mailman

The company uses mailman to show that the changes shown in Patch,mailman are only a bunch of black and white words that are illegible. Sometimes the patch as a file and git add again after the generation of a new patch, this time for the original patch code changes, the entire patch is new code, it is more difficult to see where the change, to review patch caused unnecessary inconvenience.

One day I would like to be made like GitHub, at least adding and removing have different colors to mark out. However, you cannot change the code of the mailman server without touching it.

Inspired by the Chrome plugin's JS file injection, I made such a tabbed plug-in. Simply drag the link to the browser bookmarks bar to generate a label and click on the tag to take effect.

I think there are several advantages to this approach at least:

1. No installation, simple server, no need to modify the original page code

2. Seamless iteration of the script version, if it is an incompatible iteration, the big deal to regenerate a link to let the user drag on it

3. Whether to insert the script process is controllable, for the web pages that do not need conversions, do not load the script just

<class= "Bookmark-link"  onclick= "Handleclick (); return false;" href = "javascript:void (function () {var element = document.createelement (' script '); element.charset = ' Utf-8 ', Element.setattribute (' src ', ' http://127.0.0.1:5120/pretty.js ');d ocument.body.appendChild (element);}) ()) "><span>pretty-patch</span>< /a>

Tag Code

function Handleclick () {        alert ("Drag me to the Bookmarks Bar");         return false ;    }

If the user clicks on a link instead of dragging, prompt him/her

void (function  () {    var element = document.createelement (' script ');     = ' Utf-8 ';    Element.setattribute (' src ', ' http://127.0.0.1:5120/pretty.js ');    Document.body.appendChild (Element); })())

Drag the link to the bookmark bar on the browser to form a bookmark that executes the above code. Javascript:void () is the execution of an expression that does not require a return value, which is a self-executing anonymous function. The script tag is created in this anonymous function, and the SRC attribute is set to the location of the script, so that the current page is inserted into our scripts.

I put the jquery code in Pretty.js, and one of the most important open source Library "diff2html" JS code, copy its CSS file content as a string to the Prettystyle variable.

var extralstyle = '. d2h-file-wrapper{margin-top:30px; margin-bottom:30px;} body{margin:30px}. copyright{ width:100%; Text-align:center; margin-top:10px; Font-size:0.9em; Color:gray;} '  + = Extralstyle;

The custom CSS content is attached to the Prettystyle variable

Then all of your own JS code is put into a self-executing anonymous function (functions () {...}) () Prevent contamination of global variables. Although it is not necessary, because this injected JS file changed the page destructively, but it is a habit of it.

var diffoption = {inputformat: ' diff ', showfiles:true, matching: ' Lines '};

if ($ ("#defeng-is-a-nice-person"). Length!== 0) {        top.document.location.reload ();         return ;    }

This ID is injected into the JS file settings, here to determine whether there is this ID, if there is, the description page and is formatted, then the user click on the label, then reload the page, let the user see the original page

var data = $ ("Pre"). Text (); if (data = = = undefined)     return  = Data.replace (/\r\n/g, "\ n" = removefooter (data);

Get Patch Content

if(Data.indexof ("\n+diff--git") = = = 1 && data.indexof ("\[email protected]@-") = = = 1) {prettypatch (data); }    Else {        $("Body"). empty (); varSplitstr = "\ndiff--git"; varFilesarr = []; varHeadend =Data.indexof (SPLITSTR); if(headend = = =-1)            return; Data=Data.slice (headend); vareach =Data.split (SPLITSTR);        Each.shift (); if(Each.length = = 0)            return; varLen =each.length; Splitstr= Splitstr.slice (1);  for(vari=0; i<len; i++) {Each[i]= Splitstr + each[i] + "\ n";    } prettypatchplus (each); }

Because there are several situations:

• Patches are generated using diff.
• Patches are generated using Git format-patch.
• Patches are used as files and git add to generate new patches, and also contain diff patches or git format-patch patches

For the first two cases, it is possible to generate the result directly with the Prettypatch function.

For cases where the content contains patches, use "\ndiff--git" as a delimiter to separate each file and generate results with the Prettypatchplus function

function Removefooter (str) {        return Str.trim (). replace (/.*?--\s*\n\s*\d+ (. \d+) +$/, "");    }

This function is used to remove the most later git version number

function Prettypatch (str) {        varnew  diff2htmlui ({diff:str});        Diff2htmlui.draw (' body ', diffoption);    }

As soon as you give the diff text directly to the Diff2html library, you can generate a result to replace the body content.

functionPrettypatchplus (each) {varLen =each.length; varFound =false;  for(vari=0; i<len; i++) {        varOneFile =Each[i]; varLines = Onefile.split ("\ n"); varLinelen =lines.length; if(Onefile.indexof ("\n++++")!==-1) {            varRmheader =-1;  for(vari=0; i<linelen; i++) {                varline =Lines[i]; if(Line.slice (0, 3) = = = + + + && line.slice ( -6) = = = ". Patch") {Rmheader= i + 1; Continue; }                if(Rmheader = = =-1) {                    Continue; }                if(Line.slice (0, 1) = = = "+") {Lines[i]= Line.slice (1); }} onefile= Lines.slice (Rmheader). Join ("\ n"); OneFile=Removefooter (OneFile); }        varid = "path-plus-list-" +i; $("<div id=" + ID + "></div>"). AppendTo ("Body")); varDiff2htmllist =NewDiff2htmlui ({diff:onefile}); Diff2htmllist.draw (' # ' +ID, diffoption); }}

The Prettypatchplus function determines whether a file is a diff text or patch by judging if there is a "\n++++", and if it is a patch, remove the top + number from each line.

Replace the resulting result with the DIV tag under body

$ ("<style>" + Prettystyle + "</style>"). AppendTo ("Head");

CSS styles and custom styles for attaching diff2html

$ ("Body"). attr ("id", "Defeng-is-a-nice-person");

Mark this page is a script-converted

var = "Publish";     var current = (new  Date ()). getFullYear ();     var copyright = "copyright©2017" + (current = = publish?) "": "-" + current) + "DNI-XM";     + = "\[email protected]";    $ ("
Additional copyright
[JS tool] format to display diff text on mailman