add style to every line of decompiled contract

[ayrat555]

A part of #1820

Changelog

• add style to every line of decompiled contract

[coveralls]

Pull Request Test Coverage Report for Build c0e94f08-4902-4c2c-8567-aeffef39510c

• 18 of 19 (94.74%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.5%) to 82.336%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
apps/block_scout_web/lib/block_scout_web/views/address_decompiled_contract_view.ex	18	19	94.74%

Totals
Change from base Build 062f2564-ff6b-4bc7-ba10-283be8df2580:	0.5%
Covered Lines:	4582
Relevant Lines:	5565

---

💛 - Coveralls

[goodsoft]

May I ask you to attach before/after-change screenshots of some contract, which is most affected by this change?

[vbaranov]

I agree to fixate and extend the space for line numbers to support 0 - 999 lines, but I am unsure which problem you are trying to solve in other updates. If it is related to broken span tag please provide an example. I can't find it in the uploaded decompiled code.

[vbaranov]

Btw, I didn't find an example where code tag breaks span tag, that you are trying to solve here. Could you provide an example of a break in the decompiled code?

[ayrat555]

@vbaranov Here is generated HTML from view helper:

"<code>\"</code>\n
<code><span style=\"color:rgb(111, 110, 111)\">#</code>\n
<code>#  eveem.org 6 Feb 2019 </code>\n
<code>#  Decompiled source of </span>0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style=\"color:rgb(111, 110, 111)\"></code>\n
<code># </code>\n
<code>#  Let's make the world open source </code>\n
<code># </span></code>\n

But it's rendered in the master branch as:

<code>"</code>
<code><span style="color:rgb(111, 110, 111)">#</span></code>
<code>#  eveem.org 6 Feb 2019 </code>
<code>#  Decompiled source of 0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style="color:rgb(111, 110, 111)"></span></code>
<code># </code>
<code>#  Let's make the world open source </code>
<code># </code>

Above we can see that span tag is only on the first line.

This PR adds a span tag to every code tags if it's needed:

<code><span style="color:rgb(111, 110, 111)">#</span></code>
<code><span style="color:rgb(111, 110, 111)">#  eveem.org 6 Feb 2019 </span></code>
<code><span style="color:rgb(111, 110, 111)">#  Decompiled source of </span>0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style="color:rgb(111, 110, 111)"></span></code>
<code><span style="color:rgb(111, 110, 111)"># </span></code>
<code><span style="color:rgb(111, 110, 111)">#  Let's make the world open source </span></code>
<code><span style="color:rgb(111, 110, 111)"># </span></code>

[vbaranov]

@ayrat555 I opened this contract https://blockscout.com/eth/goerli/address/0x00bd9e214fab74d6fc21bf1af34261765f57e875/decompiled_contracts and I don't see any breaks. Point me please to the source where I can find breaks of span tag.

[ayrat555]

@vbaranov for example, span tag only in the first comment line

<pre class="pre-decompiled pre-scrollable"><code></code>
<code><span style="color:rgb(111, 110, 111)">#</span></code>
<code>#  eveem.org 6 Feb 2019 </code>
<code>#  Decompiled source of 0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style="color:rgb(111, 110, 111)"></span></code>
<code># </code>
<code>#  Let's make the world open source </code>
<code># </code>
<code><span style="color:rgb(111, 110, 111)">#</span></code>
<code>#  I failed with these: </code>
<code><span style="color:rgb(111, 110, 111)">#  - </span><span style="color:rgb(236, 89, 58)">unknowne77c646d(?)</span><span style="color:rgb(111, 110, 111)"></span></code>
<code><span style="color:rgb(111, 110, 111)">#  - </span><span style="color:rgb(236, 89, 58)">transferFromWithData(address _from, address _to, uint256 _value, bytes _data)</span><span style="color:rgb(111, 110, 111)"></span></code>
<code>#  All the rest is below.</code>
<code>#</code>
<code></code>
<code></code>
<code><span style="color:rgb(111, 110, 111)">#  Storage definitions and getters</span></code>
<code></code>
<code><span style="color:rgb(57, 115, 0)">def</span> storage:</code>
<code>  <span style="color:rgb(57, 115, 0)">allowance</span> is uint256 =&gt; uint256 <span style="color:rgb(111, 110, 111)"># mask(256, 0) at storage #2</span></code>
<code>  <span style="color:rgb(57, 115, 0)">stor4</span> is uint256 =&gt; uint8 <span style="color:rgb(111, 110, 111)"># mask(8, 0) at storage #4</span></code>
<code></code>
<code><span style="color:rgb(136, 0, 0)">def </span>allowance(address <span style="color:rgb(57, 115, 0)">_owner</span>, address <span style="color:rgb(57, 115, 0)">_spender</span>) <span style="color:rgb(136, 0, 0)">payable</span>: <span style="color:rgb(111, 110, 111)"></span></code>
<code>  require (calldata.size - 4)<span style="font-weight:bold"> &gt;= </span>64</code>
<code>  return <span style="color:rgb(57, 115, 0)">allowance</span><span style="color:rgb(57, 115, 0)">[</span>sha3(((320 - 1)<span style="font-weight:bold"> and </span>(320 - 1)<span style="font-weight:bold"> and </span><span style="color:rgb(57, 115, 0)">_owner</span>), 1), ((320 - 1)<span style="font-weight:bold"> and </span><span style="color:rgb(57, 115, 0)">_spender</span><span style="font-weight:bold"> and </span>(320 - 1))<span style="color:rgb(57, 115, 0)">]</span></code>
<code></code>
<code></code>
<code><span style="color:rgb(111, 110, 111)">#</span></code>
<code>#  Regular functions - see Tutorial for understanding quirks of the code</code>
<code>#</code>
<code></code>
<code></code>
<code><span style="color:rgb(111, 110, 111)"># folder failed in this function - may be terribly long, sorry</span></code>
<code><span style="color:rgb(136, 0, 0)">def </span>unknownc47d033b(?) <span style="color:rgb(136, 0, 0)">payable</span>: <span style="color:rgb(111, 110, 111)"></span></code>
<code>  if (calldata.size - 4)<span style="font-weight:bold"> &lt; </span>32:</code>
<code>      revert</code>
<code>  else:</code>
<code>      if not (320 - 1)<span style="font-weight:bold"> or </span>not cd[4]:</code>
<code>          revert</code>
<code>      else:</code>
<code>          <span style="color:rgb(136, 0, 0)">mem[</span>0<span style="color:rgb(136, 0, 0)">]</span> = (320 - 1)<span style="font-weight:bold"> and </span>(320 - 1)<span style="font-weight:bold"> and </span>cd[4]</code>
<code>          <span style="color:rgb(136, 0, 0)">mem[</span>32<span style="color:rgb(136, 0, 0)">]</span> = 4</code>
<code>          <span style="color:rgb(136, 0, 0)">mem[</span>96<span style="color:rgb(136, 0, 0)">]</span> = bool(<span style="color:rgb(57, 115, 0)">stor4</span><span style="color:rgb(57, 115, 0)">[</span>((320 - 1)<span style="font-weight:bold"> and </span>(320 - 1)<span style="font-weight:bold"> and </span>cd[4])<span style="color:rgb(57, 115, 0)">]</span>)</code>
<code>          return bool(<span style="color:rgb(57, 115, 0)">stor4</span><span style="color:rgb(57, 115, 0)">[</span>((320 - 1)<span style="font-weight:bold"> and </span>(320 - 1)<span style="font-weight:bold"> and </span>cd[4])<span style="color:rgb(57, 115, 0)">]</span>)</code>
<code></code>
<code><span style="color:rgb(136, 0, 0)">def </span>_fallback() <span style="color:rgb(136, 0, 0)">payable</span>: <span style="color:rgb(111, 110, 111)"># default function</span></code>
<code>  revert</code>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
</pre>

Originally we closed it after Let's make the world open source from server. But browser left it only on the first line. Because out html is invalide

[ayrat555]

@vbaranov you can try running blockscout on goerli and you will see that this PR highlights comments correctly

[vbaranov]

Ah, ok, I see now missing highlighting of some comment lines. Actually, I was trying to find breaks in span tag, but there are whole lines without needed span tag. Thanks for the clarification.