Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add style to every line of decompiled contract #1822

Merged
merged 7 commits into from May 3, 2019
Merged

add style to every line of decompiled contract #1822

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4404645
add style to every line of decompiled contract
ayrat555 Apr 23, 2019
326ea32
fix credo
ayrat555 Apr 23, 2019
718c141
fix line numbers
ayrat555 Apr 24, 2019
3d75d9e
Merge branch 'master' into ab-fix-decompiled-code-style
ayrat555 Apr 24, 2019
230e53e
Merge branch 'master' into ab-fix-decompiled-code-style
vbaranov Apr 30, 2019
4659e70
Merge branch 'master' into ab-fix-decompiled-code-style
ayrat555 May 3, 2019
9a480f8
add CHANGELOG entry
ayrat555 May 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/block_scout_web/assets/css/_code.scss
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ pre {
.pre-decompiled code::before {
content: counter(line);
display: inline-block;
width: flex;
width: 3em;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
Expand Down
61 changes: 55 additions & 6 deletions apps/block_scout_web/lib/block_scout_web/views/address_decompiled_contract_view.ex
View file
Open in desktop
Expand Up @@ -18,13 +18,32 @@ defmodule BlockScoutWeb.AddressDecompiledContractView do
}

def highlight_decompiled_code(code) do
@colors
|> Enum.reduce(code, fn {symbol, rgb}, acc ->
String.replace(acc, symbol, "<span style=\"color:rgb(#{rgb})\">")
{_, result} =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Contributor Author

@ayrat555 ayrat555 May 3, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@colors
|> Enum.reduce(code, fn {symbol, rgb}, acc ->
String.replace(acc, symbol, "<span style=\"color:rgb(#{rgb})\">")
end)
|> String.replace("\e[1m", "<span style=\"font-weight:bold\">")
|> String.replace("»", "&raquo;")
|> String.replace("\e[0m", "</span>")
|> String.split(~r/\<span style=.*?\)"\>|\<\/span\>/, include_captures: true, trim: true)
|> Enum.reduce({"", []}, fn part, {style, acc} ->
new_style =
cond do
String.contains?(part, "<span style") -> part
part == "</span>" -> ""
true -> style
end

new_part = new_part(part, new_style)

{new_style, [new_part | acc]}
end)

result
|> Enum.reduce("", fn part, acc ->
part <> acc
end)
|> String.replace("\e[1m", "<span style=\"font-weight:bold\">")
|> String.replace("»", "&raquo;")
|> String.replace("\e[0m", "</span>")
|> add_line_numbers()
end

Expand All @@ -41,4 +60,34 @@ defmodule BlockScoutWeb.AddressDecompiledContractView do
acc <> "<code>#{line}</code>\n"
end)
end

defp new_part(part, new_style) do
cond do
part == "" ->
""

part == "</span>" ->
""

part == new_style ->
""

new_style == "" ->
part

true ->
result =
part
|> String.split("\n")
|> Enum.reduce("", fn p, a ->
a <> new_style <> p <> "</span>\n"
end)

if String.ends_with?(part, "\n") do
result
else
String.slice(result, 0..-2)
end
end
end
end
16 changes: 15 additions & 1 deletion apps/block_scout_web/test/block_scout_web/views/address_decompiled_contract_view_test.exs
View file
Open in desktop
Expand Up @@ -56,7 +56,21 @@ defmodule BlockScoutWeb.AddressDecompiledContractViewTest do
result = AddressDecompiledContractView.highlight_decompiled_code(code)

assert result ==
"<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<code> <span style=\"color:rgb(111, 110, 111)\">#</code>\n<code> # I failed with these:</code>\n<code> </span><span style=\"color:rgb(111, 110, 111)\"># - </span><span style=\"color:rgb(236, 89, 58)\">unknowne77c646d(?)</span><span style=\"color:rgb(111, 110, 111)\"></code>\n<code> </span><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)\"></code>\n<code> # All the rest is below.</code>\n<code> #</span></code>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\"># Storage definitions and getters</span></code>\n<code></code>\n<code> <span style=\"color:rgb(57, 115, 0)\">def</span> storage:</code>\n<code> <span style=\"color:rgb(57, 115, 0)\">allowance</span> is uint256 => uint256 <span style=\"color:rgb(111, 110, 111)\"># mask(256, 0) at storage #2</span></code>\n<code> <span style=\"color:rgb(57, 115, 0)\">stor4</span> is uint256 => uint8 <span style=\"color:rgb(111, 110, 111)\"># mask(8, 0) at storage #4</span></code>\n<code></code>\n<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>\n<code> require (calldata.size - 4)<span style=\"font-weight:bold\"> >= </span>64</code>\n<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>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\">#</code>\n<code> # Regular functions - see Tutorial for understanding quirks of the code</code>\n<code> #</span></code>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\"># folder failed in this function - may be terribly long, sorry</span></code>\n<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>\n<code> if (calldata.size - 4)<span style=\"font-weight:bold\"> < </span>32:</code>\n<code> revert</code>\n<code> else:</code>\n<code> if not (320 - 1)<span style=\"font-weight:bold\"> or </span>not cd[4]:</code>\n<code> revert</code>\n<code> else:</code>\n<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>\n<code> <span style=\"color:rgb(136, 0, 0)\">mem[</span>32<span style=\"color:rgb(136, 0, 0)\">]</span> = 4</code>\n<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>\n<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>\n<code></code>\n<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>\n<code> revert</code>\n<code></code>\n"
"<code> <span style=\"color:rgb(111, 110, 111)\">#</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # eveem.org 6 Feb 2019</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # Decompiled source of </span>0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style=\"color:rgb(111, 110, 111)\"></span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> #</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # Let's make the world open source</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # </span></code>\n<code> <span style=\"color:rgb(111, 110, 111)\">#</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # I failed with these:</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> </span><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>\n<code><span style=\"color:rgb(111, 110, 111)\"> </span><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>\n<code><span style=\"color:rgb(111, 110, 111)\"> # All the rest is below.</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> #</span></code>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\"># Storage definitions and getters</span></code>\n<code></code>\n<code> <span style=\"color:rgb(57, 115, 0)\">def</span> storage:</code>\n<code> <span style=\"color:rgb(57, 115, 0)\">allowance</span> is uint256 => uint256 <span style=\"color:rgb(111, 110, 111)\"># mask(256, 0) at storage #2</span></code>\n<code> <span style=\"color:rgb(57, 115, 0)\">stor4</span> is uint256 => uint8 <span style=\"color:rgb(111, 110, 111)\"># mask(8, 0) at storage #4</span></code>\n<code></code>\n<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>: 64</code>\n<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>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\">#</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> # Regular functions - see Tutorial for understanding quirks of the code</span></code>\n<code><span style=\"color:rgb(111, 110, 111)\"> #</span></code>\n<code></code>\n<code></code>\n<code> <span style=\"color:rgb(111, 110, 111)\"># folder failed in this function - may be terribly long, sorry</span></code>\n<code> <span style=\"color:rgb(136, 0, 0)\">def </span>unknownc47d033b(?) <span style=\"color:rgb(136, 0, 0)\">payable</span>: not cd[4]:</code>\n<code> revert</code>\n<code> else:</code>\n<code> <span style=\"color:rgb(136, 0, 0)\">mem[</span>0<span style=\"color:rgb(136, 0, 0)\">]</span>cd[4]</code>\n<code> <span style=\"color:rgb(136, 0, 0)\">mem[</span>32<span style=\"color:rgb(136, 0, 0)\">]</span> = 4</code>\n<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>\n<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>\n<code></code>\n<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>\n<code> revert</code>\n<code></code>\n"
end

test "adds style span to every line" do
code = """
#
# eveem.org 6 Feb 2019
# Decompiled source of 0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875
#
# Let's make the world open source
# 
"""

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

Expand Down