☰

Highlight differences in Launchpad bug history

Highlights differences between two columns in the Launchpad bug activity log

  1. // ==UserScript==
  2. // @name         Highlight differences in Launchpad bug history
  3. // @namespace    http://anthonywong.net
  4. // @version      1.1
  5. // @description  Highlights differences between two columns in the Launchpad bug activity log
  6. // @match        https://bugs.launchpad.net/*/+bug/*/+activity
  7. // @grant        none
  8. // @require      https://cdnjs.cloudflare.com/ajax/libs/jsdiff/7.0.0/diff.min.js
  9. // @author       Anthony Wong <anthony.wong@canonical.com>
  10. // @license      GPLv2
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     function getStyledDiff(oldText, newText) {
  17.         // Get the diff using jsdiff
  18.         const diff = Diff.diffWordsWithSpace(oldText, newText);
  19.  
  20.         // Prepare styled results for both old and new texts
  21.         let oldStyled = '';
  22.         let newStyled = '';
  23.  
  24.         diff.forEach((part) => {
  25.             if (part.added) {
  26.                 // New text added in 5th column: make it bold and red
  27.                 newStyled += `<span style="color:red; font-weight:bold">${part.value}</span>`;
  28.             } else if (part.removed) {
  29.                 // Text removed in 5th column: highlight in yellow in 4th column, and strike-through in 5th column
  30.                 oldStyled += `<span style="background-color:yellow">${part.value}</span>`;
  31.                 newStyled += `<span style="text-decoration:line-through; color:gray">${part.value}</span>`;
  32.             } else {
  33.                 // Unchanged text remains as is
  34.                 oldStyled += part.value;
  35.                 newStyled += part.value;
  36.             }
  37.         });
  38.  
  39.         return { oldStyled, newStyled };
  40.     }
  41.  
  42.     document.querySelectorAll('table.listing tbody tr').forEach(row => {
  43.         const oldColumn = row.cells[3]; // 4th column (Old value)
  44.         const newColumn = row.cells[4]; // 5th column (New value)
  45.  
  46.         if (oldColumn && newColumn) {
  47.             const oldText = oldColumn.innerText.trim();
  48.             const newText = newColumn.innerText.trim();
  49.  
  50.             if (oldText !== newText) {
  51.                 const { oldStyled, newStyled } = getStyledDiff(oldText, newText);
  52.                 oldColumn.innerHTML = oldStyled;
  53.                 newColumn.innerHTML = newStyled;
  54.             }
  55.         }
  56.     });
  57. })();