Improve components for PhantomJs compatibility

8 files changed, 39 insertions, 50 deletions

diff --git a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
index 7222b8ae4d3..5ab3cd96163 100644
--- a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
@@ -1,13 +1,9 @@
 .content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
   .inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"}
     .btn-group
-      %a.btn{ |
-        ":class" => "{'active': !isParallel}", |
-        "@click" => "handleViewTypeChange('inline')"}
+      %button.btn{":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')"}
         Inline
-      %a.btn{ |
-        ":class" => "{'active': isParallel}", |
-        "@click" => "handleViewTypeChange('parallel')"}
+      %button.btn{":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')"}
         Side-by-side
 
   .js-toggle-container
diff --git a/app/views/projects/merge_requests/conflicts/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/_diff_file_editor.html.haml
deleted file mode 100644
index 497db7e3f9b..00000000000
--- a/app/views/projects/merge_requests/conflicts/_diff_file_editor.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-.diff-editor-wrap{ "v-show" => "file.showEditor" }
-  .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
-    .discard-changes-alert
-      Are you sure to discard your changes?
-      .discard-actions
-        %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
-        %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
-  %diff-file-editor{":file" => "file"}
diff --git a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml
deleted file mode 100644
index b1d7a90eb74..00000000000
--- a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-.diff-wrap-lines.code.file-content.js-syntax-highlight
-  %table
-    %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
-      %template{"v-if" => "!line.isHeader"}
-        %td.diff-line-num.new_line{":class" => class_bindings}
-          %a {{line.new_line}}
-        %td.diff-line-num.old_line{":class" => class_bindings}
-          %a {{line.old_line}}
-        %td.line_content{":class" => class_bindings}
-          {{{line.richText}}}
-      %template{"v-if" => "line.isHeader"}
-        %td.diff-line-num.header{":class" => class_bindings}
-        %td.diff-line-num.header{":class" => class_bindings}
-        %td.line_content.header{":class" => class_bindings}
-          %strong {{{line.richText}}}
-          %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
-            {{line.buttonTitle}}
diff --git a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml
deleted file mode 100644
index f5af347f59b..00000000000
--- a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-.diff-wrap-lines.code.file-content.js-syntax-highlight
-  %table
-    %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
-      %template{"v-for" => "line in section"}
-
-        %template{"v-if" => "line.isHeader"}
-          %td.diff-line-num.header{":class" => class_bindings}
-          %td.line_content.header{":class" => class_bindings}
-            %strong {{line.richText}}
-            %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-              {{line.buttonTitle}}
-
-        %template{"v-if" => "!line.isHeader"}
-          %td.diff-line-num.old_line{":class" => class_bindings}
-            {{line.lineNumber}}
-          %td.line_content.parallel{":class" => class_bindings}
-            {{{line.richText}}}
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 9965bdf9028..943ae6ee129 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -1,5 +1,11 @@
-%template{ id: "diff-file-editor" }
-  %div
+%diff-file-editor{"inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation"}
+  .diff-editor-wrap{ "v-show" => "file.showEditor" }
+    .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
+      .discard-changes-alert
+        Are you sure to discard your changes?
+        .discard-actions
+          %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
+          %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
     .editor-wrap{ ":class" => "classObject" }
       .loading
         %i.fa.fa-spinner.fa-spin
diff --git a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
new file mode 100644
index 00000000000..f094df7fcaa
--- /dev/null
+++ b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
@@ -0,0 +1,15 @@
+%inline-conflict-lines{ "inline-template" => "true", ":file" => "file"}
+  %table
+    %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
+      %td.diff-line-num.new_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+        %a {{line.new_line}}
+      %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+        %a {{line.old_line}}
+      %td.line_content{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+        {{{line.richText}}}
+      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
+      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
+      %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
+        %strong {{{line.richText}}}
+        %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
+          {{line.buttonTitle}}
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
new file mode 100644
index 00000000000..5690bf7419c
--- /dev/null
+++ b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
@@ -0,0 +1,10 @@
+%script{"id" => 'parallel-conflict-line', "type" => "text/x-template"}
+  %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
+  %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
+    %strong {{line.richText}}
+    %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
+      {{line.buttonTitle}}
+  %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+    {{line.lineNumber}}
+  %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+    {{{line.richText}}}
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
new file mode 100644
index 00000000000..a8ecdf59393
--- /dev/null
+++ b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
@@ -0,0 +1,4 @@
+%parallel-conflict-lines{"inline-template" => "true", ":file" => "file"}
+  %table
+    %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
+      %td{"is"=>"parallel-conflict-line", "v-for" => "line in section", ":line" => "line", ":file" => "file"}