Fix visibility of removed lines

DigiLive · DigiLive · commit ec0918bca72c · 2020-11-17T13:10:40.000+01:00
* Lines which are removed from version 2 where indicated by an asterisk
  in front of the line number. This was easy to overlook. The indicator
  is a class now so it can by styled by css.
* Block bodies of removed lines where still rendered even though they
  had no content.
diff --git a/example/dark-theme.css b/example/dark-theme.css
@@ -1,6 +1,6 @@
 body {
     background:  #3A3B46;
-    color: #F8F8F2;
+    color:       #F8F8F2;
     font-family: Arial, serif;
     font-size:   12px;
 }
@@ -36,7 +36,7 @@ a, a:visited {
 .Differences tbody th {
     text-align:     right;
     background:     #AAAAAA;
-    color: #272822;
+    color:          #272822;
     width:          4em;
     padding:        1px 2px;
     border-right:   1px solid #000000;
@@ -52,7 +52,7 @@ a, a:visited {
 
 .Differences .Skipped {
     background: #F7F7F7;
-    color: #000000;
+    color:      #000000;
 }
 
 .Differences ins,
@@ -73,22 +73,22 @@ a, a:visited {
 
 .DifferencesSideBySide .ChangeDelete td.Left {
     background: #FF8888;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesSideBySide .ChangeDelete td.Right {
     background: #FFAAAA;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesSideBySide .ChangeReplace .Left {
     background: #FFEE99;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesSideBySide .ChangeReplace .Right {
     background: #FFDD88;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesSideBySide .ChangeReplace ins,
@@ -107,7 +107,7 @@ a, a:visited {
 .DifferencesInline .ChangeReplace .Left,
 .DifferencesInline .ChangeDelete .Left {
     background: #FFDDDD;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesInline .ChangeReplace .Right,
@@ -121,7 +121,7 @@ a, a:visited {
 
 .DifferencesInline .ChangeReplace del {
     background: #EE9999;
-    color: #272822;
+    color:      #272822;
 }
 
 /*
@@ -130,23 +130,27 @@ a, a:visited {
 .DifferencesMerged .ChangeReplace .Left,
 .DifferencesMerged .ChangeDelete {
     background: #FFDDDD;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesMerged .ChangeReplace .Right,
 .DifferencesMerged .ChangeInsert {
     background: #DDFFDD;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesMerged .ChangeReplace ins {
     background: #008000;
-    color: #272822;
+    color:      #272822;
 }
 
 .DifferencesMerged .ChangeReplace del {
     background: #EE9999;
-    color: #272822;
+    color:      #272822;
+}
+
+.DifferencesMerged th.ChangeDelete {
+    background-image: linear-gradient(-45deg, #AAAAAA 0%, #EE9999 100%);
 }
 
 /*
@@ -160,13 +164,13 @@ a, a:visited {
 
 .DifferencesUnified .ChangeDelete .Left {
     background: #EE9999;
-    color: #272822;
+    color:      #272822;
 }
 
 /* Line modified in old and new */
 .DifferencesUnified .ChangeReplace {
     background: #FFEE99;
-    color: #272822;
+    color:      #272822;
     display:    table;
 }
 
diff --git a/example/styles.css b/example/styles.css
@@ -1,6 +1,6 @@
 body {
     background:  #FFFFFF;
-    color: #000000;
+    color:       #000000;
     font-family: Arial, serif;
     font-size:   12px;
 }
@@ -128,6 +128,10 @@ pre {
     background: #EE9999;
 }
 
+.DifferencesMerged th.ChangeDelete {
+    background-image: linear-gradient(-45deg, #CCCCCC 0%, #EE9999 100%);
+}
+
 /*
  * HTML Unified Diff
  */
diff --git a/lib/jblond/Diff/Renderer/Html/Merged.php b/lib/jblond/Diff/Renderer/Html/Merged.php
@@ -87,24 +87,26 @@ public function generateDiffHeader(): string
      */
     public function generateBlockHeader(array $changes): string
     {
-        return '<tbody class="Change' . ucfirst($changes['tag']) . '">';
+        return $changes['tag'] != 'delete' ? '<tbody class="Change' . ucfirst($changes['tag']) . '">' : '';
     }
 
     /**
      * @inheritDoc
      */
     public function generateSkippedLines(): string
     {
-        $marker = '&hellip;';
+        $marker      = '&hellip;';
+        $headerClass = '';
+
         if ($this->lastDeleted !== null) {
-            $marker = "*$marker";
+            $headerClass = 'ChangeDelete';
         }
 
         $this->lastDeleted = null;
 
         return <<<HTML
 <tr>
-    <th title="{$this->lastDeleted}">$marker</th>
+    <th class="$headerClass" title="{$this->lastDeleted}">$marker</th>
     <td class="Skipped">&hellip;</td>
 </tr>
 HTML;
@@ -115,17 +117,18 @@ public function generateSkippedLines(): string
      */
     public function generateLinesEqual(array $changes): string
     {
-        $html = '';
+        $html        = '';
+        $headerClass = '';
 
         foreach ($changes['base']['lines'] as $lineNo => $line) {
             $fromLine = $changes['base']['offset'] + $lineNo + 1 + $this->lineOffset;
             if (!$lineNo && $this->lastDeleted !== null) {
-                $fromLine = "*$fromLine";
+                $headerClass = 'ChangeDelete';
             }
 
             $html              .= <<<HTML
 <tr>
-    <th title="{$this->lastDeleted}">$fromLine</th>
+    <th class="$headerClass" title="{$this->lastDeleted}">$fromLine</th>
     <td>$line</td>
 </tr>
 HTML;
@@ -140,18 +143,19 @@ public function generateLinesEqual(array $changes): string
      */
     public function generateLinesInsert(array $changes): string
     {
-        $html = '';
+        $html        = '';
+        $headerClass = '';
 
         foreach ($changes['changed']['lines'] as $lineNo => $line) {
             $this->lineOffset++;
             $toLine = $changes['base']['offset'] + $this->lineOffset;
             if (!$lineNo && $this->lastDeleted !== null) {
-                $toLine = "*$toLine";
+                $headerClass = 'ChangeDelete';
             }
 
             $html              .= <<<HTML
 <tr>
-    <th title="{$this->lastDeleted}">$toLine</th>
+    <th class="$headerClass" title="{$this->lastDeleted}">$toLine</th>
     <td><ins>$line</ins></td>
 </tr>
 HTML;
@@ -190,12 +194,13 @@ public function generateLinesDelete(array $changes): string
      */
     public function generateLinesReplace(array $changes): string
     {
-        $html = '';
+        $html        = '';
+        $headerClass = '';
 
         foreach ($changes['base']['lines'] as $lineNo => $line) {
             $fromLine = $changes['base']['offset'] + $lineNo + 1 + $this->lineOffset;
             if (!$lineNo && $this->lastDeleted !== null) {
-                $fromLine = "*$fromLine";
+                $headerClass = 'ChangeDelete';
             }
 
             // Capture added parts.
@@ -217,7 +222,7 @@ function ($removedParts) use ($addedParts) {
 
             $html              .= <<<HTML
 <tr>
-    <th title="{$this->lastDeleted}">$fromLine</th>
+    <th class="$headerClass" title="{$this->lastDeleted}">$fromLine</th>
     <td>$line</td>
 </tr>
 HTML;
diff --git a/tests/resources/htmlMerged.txt b/tests/resources/htmlMerged.txt
@@ -4,101 +4,101 @@
             <th colspan="2">Merge of Version1 &amp; Version2</th>
         </tr>
     </thead><tbody class="ChangeEqual"><tr>
-    <th title="">1</th>
+    <th class="" title="">1</th>
     <td>&lt;html&gt;</td>
 </tr><tr>
-    <th title="">2</th>
+    <th class="" title="">2</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;</td>
 </tr><tr>
-    <th title="">3</th>
+    <th class="" title="">3</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">4</th>
+    <th class="" title="">4</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello <del>World</del><ins>You</ins>!&lt;/title&gt;</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">5</th>
+    <th class="" title="">5</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;</td>
 </tr><tr>
-    <th title="">6</th>
+    <th class="" title="">6</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;</td>
 </tr><tr>
-    <th title="">7</th>
+    <th class="" title="">7</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;This is demo content to show features of the php-diff package.&lt;/h1&gt;</td>
-</tr></tbody><tbody class="ChangeDelete"></tbody><tbody class="ChangeEqual"><tr>
-    <th title="Lines deleted at Version2:
+</tr></tbody></tbody><tbody class="ChangeEqual"><tr>
+    <th class="ChangeDelete" title="Lines deleted at Version2:
 8: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is removed from version2.&lt;/h2&gt;
-">*8</th>
+">8</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">9</th>
+    <th class="" title="">9</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line has <del>inline </del><ins></ins>differences between both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">10</th>
+    <th class="" title="">10</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">11</th>
+    <th class="" title="">11</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has <del>inl</del><ins>InL</ins>ine differences between both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">12</th>
+    <th class="" title="">12</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeInsert"><tr>
-    <th title="">13</th>
+    <th class="" title="">13</th>
     <td><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is added to version2.&lt;/h2&gt;</ins></td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">14</th>
+    <th class="" title="">14</th>
     <td></td>
 </tr><tr>
-    <th title="">15</th>
+    <th class="" title="">15</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;</td>
 </tr><tr>
-    <th title="">16</th>
+    <th class="" title="">16</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It's also compatible with multibyte characters (like Chinese and emoji) as shown below:</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">17</th>
+    <th class="" title="">17</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另外我覺得那個評<del>價</del><ins>鑑</ins>的白色櫃子有點沒有必要欸。外觀我就不說了 ，怎麼連空間都那麼狹隘。不過倒是從這個地方看出所謂的“改革”</td>
 </tr><tr>
-    <th title="">18</th>
+    <th class="" title="">18</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do you know what "<del>金槍魚罐頭</del><ins>魚の缶詰</ins>" means in Chinese?</td>
 </tr><tr>
-    <th title="">19</th>
+    <th class="" title="">19</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<del>🍏🍎</del><ins>🍎🍏</ins>🙂</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">20</th>
+    <th class="" title="">20</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;</td>
 </tr><tr>
-    <th title="">21</th>
+    <th class="" title="">21</th>
     <td></td>
 </tr><tr>
-    <th title="">22</th>
+    <th class="" title="">22</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</td>
 </tr></tbody><tr>
-    <th title="">&hellip;</th>
+    <th class="" title="">&hellip;</th>
     <td class="Skipped">&hellip;</td>
 </tr><tbody class="ChangeEqual"><tr>
-    <th title="">25</th>
+    <th class="" title="">25</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</td>
 </tr><tr>
-    <th title="">26</th>
+    <th class="" title="">26</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</td>
 </tr><tr>
-    <th title="">27</th>
+    <th class="" title="">27</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">28</th>
+    <th class="" title="">28</th>
     <td><del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</del><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ins>&lt;h2&gt;This line also has inline differences between both versions. It's the whitespace in front.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">29</th>
+    <th class="" title="">29</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeReplace"><tr>
-    <th title="">30</th>
+    <th class="" title="">30</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has inline differences between both versions<del>.</del><ins>!</ins>&lt;/h2&gt;</td>
 </tr></tbody><tbody class="ChangeEqual"><tr>
-    <th title="">31</th>
+    <th class="" title="">31</th>
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;</td>
 </tr><tr>
-    <th title="">32</th>
+    <th class="" title="">32</th>
     <td>&lt;/html&gt;</td>
 </tr><tr>
-    <th title="">33</th>
+    <th class="" title="">33</th>
     <td></td>
 </tr></tbody></table>
