Merge branch 'dm-md-css' into 'master'

Untangle Markdown/Diffs/Notes CSS mess

See merge request gitlab-org/gitlab-ce!26493

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -10,10 +10,10 @@ export class CopyAsGFM {
     const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
     if (isIOS) return;
 
-    $(document).on('copy', '.md, .wiki', e => {
+    $(document).on('copy', '.md', e => {
       CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
     });
-    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
+    $(document).on('copy', 'pre.code.highlight, table.code td.line_content', e => {
       CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection);
     });
     $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
@@ -99,7 +99,7 @@ export class CopyAsGFM {
   }
 
   static transformGFMSelection(documentFragment) {
-    const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
+    const gfmElements = documentFragment.querySelectorAll('.md');
     switch (gfmElements.length) {
       case 0: {
         return documentFragment;

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -37,7 +37,7 @@ export default class ShortcutsIssuable extends Shortcuts {
     }
 
     // Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
-    let foundMessage = !!documentFragment.querySelector('.md, .wiki');
+    let foundMessage = !!documentFragment.querySelector('.md');
 
     // ... Or come from a message
     if (!foundMessage) {
@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts {
           let node = e;
           do {
             // Text nodes don't define the `matches` method
-            if (node.matches && node.matches('.md, .wiki')) {
+            if (node.matches && node.matches('.md')) {
               foundMessage = true;
             }
             node = node.parentNode;

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -38,36 +38,34 @@ export default {
 </script>
 
 <template>
-  <div
+  <table
     :class="$options.userColorScheme"
     :data-commit-id="commitId"
     class="code diff-wrap-lines js-syntax-highlight text-file"
   >
-    <table>
+    <tbody>
-      <tbody>
+      <template v-for="(line, index) in diffLines">
-        <template v-for="(line, index) in diffLines">
+        <parallel-diff-table-row
-          <parallel-diff-table-row
+          :key="line.line_code"
-            :key="line.line_code"
+          :file-hash="diffFile.file_hash"
-            :file-hash="diffFile.file_hash"
+          :context-lines-path="diffFile.context_lines_path"
-            :context-lines-path="diffFile.context_lines_path"
+          :line="line"
-            :line="line"
+          :is-bottom="index + 1 === diffLinesLength"
-            :is-bottom="index + 1 === diffLinesLength"
+        />
-          />
+        <parallel-diff-comment-row
-          <parallel-diff-comment-row
+          :key="`dcr-${line.line_code || index}`"
-            :key="`dcr-${line.line_code || index}`"
+          :line="line"
-            :line="line"
+          :diff-file-hash="diffFile.file_hash"
-            :diff-file-hash="diffFile.file_hash"
+          :line-index="index"
-            :line-index="index"
+          :help-page-path="helpPagePath"
-            :help-page-path="helpPagePath"
+        />
-          />
+        <parallel-draft-comment-row
-          <parallel-draft-comment-row
+          v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
-            v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
+          :key="`drafts-${index}`"
-            :key="`drafts-${index}`"
+          :line="line"
-            :line="line"
+          :diff-file-content-sha="diffFile.file_hash"
-            :diff-file-content-sha="diffFile.file_hash"
+        />
-          />
+      </template>
-        </template>
+    </tbody>
-      </tbody>
+  </table>
-    </table>
-  </div>
 </template>

app/assets/javascripts/issue_show/components/description.vue

@@ -140,7 +140,7 @@ export default {
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
       }"
-      class="wiki"
+      class="md"
       v-html="descriptionHtml"
     ></div>
     <textarea

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js

@@ -16,7 +16,7 @@ import utilsMixin from '../mixins/line_conflict_utils';
       },
     },
     template: `
-      <table>
+      <table class="diff-wrap-lines code js-syntax-highlight">
         <tr class="line_holder parallel" v-for="section in file.parallelLines">
           <template v-for="line in section">
             <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>

app/assets/javascripts/notes/components/diff_with_note.vue

@@ -72,8 +72,8 @@ export default {
       :can-current-user-fork="false"
       :expanded="!discussion.diff_file.viewer.collapsed"
     />
-    <div v-if="isTextFile" :class="$options.userColorSchemeClass" class="diff-content code">
+    <div v-if="isTextFile" class="diff-content">
-      <table>
+      <table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
         <template v-if="hasTruncatedDiffLines">
           <tr
             v-for="line in discussion.truncated_diff_lines"
@@ -81,8 +81,8 @@ export default {
             :key="line.line_code"
             class="line_holder"
           >
-            <td class="diff-line-num old_line">{{ line.old_line }}</td>
+            <td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
-            <td class="diff-line-num new_line">{{ line.new_line }}</td>
+            <td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
             <td :class="line.type" class="line_content" v-html="line.rich_text"></td>
           </tr>
         </template>

app/assets/javascripts/notes/components/note_body.vue

@@ -95,7 +95,6 @@ export default {
   <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
     <suggestions
       v-if="hasSuggestion && !isEditing"
-      class="note-text md"
       :suggestions="note.suggestions"
       :note-html="note.note_html"
       :line-type="lineType"

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

@@ -78,8 +78,8 @@ export default {
 </script>
 
 <template>
-  <div ref="markdown-preview" class="md md-previewer">
+  <div ref="markdown-preview" class="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
-    <div v-else v-html="previewContent"></div>
+    <div v-else class="md" v-html="previewContent"></div>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -215,7 +215,7 @@ export default {
       <div
         v-show="previewMarkdown"
         ref="markdown-preview"
-        class="md-preview js-vue-md-preview md md-preview-holder"
+        class="js-vue-md-preview md-preview-holder"
       >
         <suggestions
           v-if="hasSuggestion"
@@ -233,7 +233,7 @@ export default {
       <div
         v-show="previewMarkdown"
         ref="markdown-preview"
-        class="md-preview js-vue-md-preview md md-preview-holder"
+        class="js-vue-md-preview md md-preview-holder"
         v-html="markdownPreview"
       ></div>
     </template>

app/assets/javascripts/vue_shared/components/markdown/suggestions.vue

@@ -130,6 +130,6 @@ export default {
 <template>
   <div>
     <div class="flash-container js-suggestions-flash"></div>
-    <div v-show="isRendered" ref="container" v-html="noteHtml"></div>
+    <div v-show="isRendered" ref="container" class="md" v-html="noteHtml"></div>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue

@@ -57,7 +57,7 @@ export default {
         </div>
       </div>
       <div class="note-body">
-        <div class="note-text">
+        <div class="note-text md">
           <p>{{ note.body }}</p>
         </div>
       </div>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -93,7 +93,7 @@ export default {
             'system-note-commit-list': hasMoreCommits,
             'hide-shade': expanded,
           }"
-          class="note-text"
+          class="note-text md"
           v-html="note.note_html"
         ></div>
         <div v-if="hasMoreCommits" class="flex-list">

app/assets/stylesheets/framework/files.scss

@@ -25,10 +25,6 @@
     }
   }
 
-  table {
-    @extend .table;
-  }
-
   .file-title {
     position: relative;
     background-color: $gray-light;
@@ -123,7 +119,7 @@
       }
     }
 
-    &.wiki {
+    &.md {
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {

app/assets/stylesheets/framework/markdown_area.scss

@@ -135,30 +135,6 @@
   width: 100%;
 }
 
-.md:not(.use-csslab) {
-  &.md-preview-holder {
-    // Reset ul style types since we're nested inside a ul already
-    @include bulleted-list;
-  }
-
-  // On diffs code should wrap nicely and not overflow
-  code {
-    white-space: pre-wrap;
-    word-break: keep-all;
-  }
-
-  hr {
-    // Darken 'whitesmoke' a bit to make it more visible in note bodies
-    border-color: darken($gray-normal, 8%);
-    margin: 10px 0;
-  }
-
-
-  table {
-    @include markdown-table;
-  }
-}
-
 .toolbar-btn {
   float: left;
   padding: 0 7px;

app/assets/stylesheets/framework/mixins.scss

@@ -21,26 +21,6 @@
   margin-right: auto;
 }
 
-/*
- * Mixin for markdown tables
- */
-@mixin markdown-table {
-  width: auto;
-  display: block;
-  overflow-x: auto;
-  border: 0;
-
-  tr {
-    th {
-      border-bottom: solid 2px $gl-gray-200;
-    }
-
-    td {
-      border-color: $gl-gray-200;
-    }
-  }
-}
-
 /*
  * Base mixin for lists in GitLab
  */
@@ -93,20 +73,6 @@
   }
 }
 
-@mixin bulleted-list {
-  > ul {
-    list-style-type: disc;
-
-    ul {
-      list-style-type: circle;
-
-      ul {
-        list-style-type: square;
-      }
-    }
-  }
-}
-
 @mixin webkit-prefix($property, $value) {
   #{'-webkit-' + $property}: $value;
   #{$property}: $value;

app/assets/stylesheets/framework/typography.scss

@@ -1,4 +1,8 @@
-@mixin md-typography {
+/**
+ * Apply Markdown typography
+ *
+ */
+.md:not(.use-csslab) {
   color: $gl-text-color;
   word-wrap: break-word;
 
@@ -6,8 +10,35 @@
     text-align: initial;
   }
 
+  *:first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  p {
+    color: $gl-text-color;
+    margin: 0 0 16px;
+
+    > code {
+      font-weight: inherit;
+    }
+
+    a:not(.no-attachment-icon) img {
+      // Remove bottom padding because
+      // <p> already has $gl-padding bottom
+      margin-bottom: 0;
+    }
+  }
+
   a {
     color: $blue-600;
+
+    > code {
+      color: $blue-600;
+    }
   }
 
   img:not(.emoji) {
@@ -28,18 +59,12 @@
     max-width: 100%;
   }
 
-  p a:not(.no-attachment-icon) img {
+  &:not(.md-file) img:not(.emoji) {
-    // Remove bottom padding because
+    border: 1px solid $white-normal;
-    // <p> already has $gl-padding bottom
+    padding: 5px;
-    margin-bottom: 0;
+    margin: 5px 0;
-  }
+    // Ensure that image does not exceed viewport
-
+    max-height: calc(100vh - 100px);
-  *:first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
   }
 
   // Single code lines should wrap
@@ -47,6 +72,7 @@
     font-family: $monospace-font;
     white-space: pre-wrap;
     word-wrap: normal;
+    word-break: keep-all;
   }
 
   kbd {
@@ -131,17 +157,25 @@
     }
   }
 
-  p {
+  hr {
-    color: $gl-text-color;
+    // Darken 'whitesmoke' a bit to make it more visible in note bodies
-    margin: 0 0 16px;
+    border-color: darken($gray-normal, 8%);
+    margin: 10px 0;
   }
 
-  table {
+  table:not(.code) {
     @extend .table;
     @extend .table-bordered;
     margin: 16px 0;
     color: $gl-text-color;
     border: 0;
+    width: auto;
+    display: block;
+    overflow-x: auto;
+
+    tbody {
+      background-color: $white-light;
+    }
 
     tr {
       th {
@@ -179,14 +213,6 @@
     }
   }
 
-  p > code {
-    font-weight: inherit;
-  }
-
-  a > code {
-    color: $blue-600;
-  }
-
   dd {
     margin-left: $gl-padding;
   }
@@ -202,6 +228,18 @@
     margin: 3px 28px 3px 0 !important;
   }
 
+  > ul {
+    list-style-type: disc;
+
+    ul {
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
+    }
+  }
+
   li {
     line-height: 1.6em;
     margin-left: 25px;
@@ -245,11 +283,11 @@
     &:hover::before {
       text-decoration: none;
     }
-  }
 
-  a.no-attachment-icon {
+    &.no-attachment-icon {
-    &::before {
+      &::before {
-      display: none;
+        display: none;
+      }
     }
   }
 
@@ -367,28 +405,6 @@ code {
   @extend .ref-name;
 }
 
-/**
- * Apply Markdown typography
- *
- */
-.wiki:not(.use-csslab) {
-  @include md-typography;
-}
-
-.md:not(.use-csslab) {
-  @include md-typography;
-
-  &:not(.wiki) {
-    img:not(.emoji) {
-      border: 1px solid $white-normal;
-      padding: 5px;
-      margin: 5px 0;
-      // Ensure that image does not exceed viewport
-      max-height: calc(100vh - 100px);
-    }
-  }
-}
-
 /**
  * Textareas intended for GFM
  *

app/assets/stylesheets/pages/diff.scss

@@ -89,138 +89,6 @@
       }
     }
 
-    .note-text {
-      table {
-        font-family: $font-family-sans-serif;
-      }
-    }
-
-    table {
-      width: 100%;
-      font-family: $monospace-font;
-      border: 0;
-      border-collapse: separate;
-      margin: 0;
-      padding: 0;
-      table-layout: fixed;
-      border-radius: 0 0 $border-radius-default $border-radius-default;
-
-      .diff-line-num {
-        width: 50px;
-        position: relative;
-
-        a {
-          transition: none;
-        }
-      }
-
-      .line_holder td {
-        line-height: $code-line-height;
-        font-size: $code-font-size;
-        vertical-align: top;
-
-        &.noteable_line {
-          position: relative;
-        }
-
-        span {
-          white-space: pre-wrap;
-
-          &.context-cell {
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .line {
-          word-wrap: break-word;
-        }
-      }
-
-      &.left-side-selected {
-        td.line_content.parallel.right-side {
-          user-select: none;
-        }
-      }
-
-      &.right-side-selected {
-        td.line_content.parallel.left-side {
-          user-select: none;
-        }
-      }
-    }
-
-    tr.line_holder.parallel {
-      td.line_content.parallel {
-        width: 46%;
-      }
-
-      .add-diff-note {
-        margin-left: -55px;
-      }
-    }
-
-    .old_line,
-    .new_line {
-      user-select: none;
-      margin: 0;
-      border: 0;
-      padding: 0 5px;
-      border-right: 1px solid;
-      text-align: right;
-      min-width: 35px;
-      max-width: 50px;
-      width: 35px;
-
-      a {
-        float: left;
-        width: 35px;
-        font-weight: $gl-font-weight-normal;
-
-        &[disabled] {
-          cursor: default;
-
-          &:hover,
-          &:active {
-            text-decoration: none;
-          }
-        }
-      }
-    }
-
-    .line_content {
-      display: block;
-      margin: 0;
-      padding: 0 1.5em;
-      border: 0;
-      position: relative;
-
-      &.parallel {
-        display: table-cell;
-
-        span {
-          word-break: break-all;
-        }
-      }
-
-      &.old {
-        &::before {
-          content: '-';
-          position: absolute;
-          left: 0.5em;
-        }
-      }
-
-      &.new {
-        &::before {
-          content: '+';
-          position: absolute;
-          left: 0.5em;
-        }
-      }
-    }
-
     .diff-loading-error-block {
       padding: $gl-padding * 2 $gl-padding;
       text-align: center;
@@ -443,10 +311,6 @@
     }
   }
 
-  .line_content {
-    white-space: pre-wrap;
-  }
-
   .diff-file-container {
     .frame.deleted {
       border: 1px solid $deleted;
@@ -508,6 +372,114 @@
   }
 }
 
+table.code {
+  width: 100%;
+  font-family: $monospace-font;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+
+  tr.line_holder td {
+    line-height: $code-line-height;
+    font-size: $code-font-size;
+    vertical-align: top;
+
+    span {
+      white-space: pre-wrap;
+
+      &.context-cell {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+
+      &.line {
+        word-wrap: break-word;
+      }
+    }
+
+    &.diff-line-num {
+      user-select: none;
+      margin: 0;
+      border: 0;
+      padding: 0 10px 0 5px;
+      border-right: 1px solid;
+      text-align: right;
+      width: 50px;
+      position: relative;
+
+      a {
+        transition: none;
+        float: left;
+        width: 100%;
+        font-weight: $gl-font-weight-normal;
+
+        &[disabled] {
+          cursor: default;
+
+          &:hover,
+          &:active {
+            text-decoration: none;
+          }
+        }
+      }
+
+      &:not(.js-unfold-bottom) a::before {
+        content: attr(data-linenumber);
+      }
+    }
+
+    &.line_content {
+      display: block;
+      margin: 0;
+      padding: 0 1.5em;
+      border: 0;
+      position: relative;
+      white-space: pre-wrap;
+
+      &.parallel {
+        display: table-cell;
+        width: 46%;
+
+        span {
+          word-break: break-all;
+        }
+      }
+
+      &.old {
+        &::before {
+          content: '-';
+          position: absolute;
+          left: 0.5em;
+        }
+      }
+
+      &.new {
+        &::before {
+          content: '+';
+          position: absolute;
+          left: 0.5em;
+        }
+      }
+    }
+  }
+
+  &.left-side-selected {
+    td.line_content.parallel.right-side {
+      user-select: none;
+    }
+  }
+
+  &.right-side-selected {
+    td.line_content.parallel.left-side {
+      user-select: none;
+    }
+  }
+}
+
 .diff-stats {
   align-items: center;
   padding: 0 0.25rem;
@@ -608,16 +580,6 @@
   }
 }
 
-.file-holder {
-  .diff-line-num:not(.js-unfold-bottom) {
-    a {
-      &::before {
-        content: attr(data-linenumber);
-      }
-    }
-  }
-}
-
 .diff-comment-avatar-holders {
   position: absolute;
   height: 19px;

app/assets/stylesheets/pages/help.scss

@@ -37,12 +37,4 @@
 
 .documentation {
   padding: 7px;
-
-  // Border around images in the help pages.
-  img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    margin: 5px;
-    max-height: calc(100vh - 100px);
-  }
 }

app/assets/stylesheets/pages/issuable.scss

@@ -72,14 +72,6 @@
     height: $gl-padding * 2;
   }
 
-  // Border around images in issue and MR descriptions.
-  .description img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    max-height: calc(100vh - 100px);
-    max-width: 100%;
-  }
-
   .emoji-block {
     padding: 10px 0;
   }

app/assets/stylesheets/pages/notes.scss

@@ -225,8 +225,6 @@ $note-form-margin-left: 72px;
       overflow-y: hidden;
 
       .note-text {
-        // Reset ul style types since we're nested inside a ul already
-        @include bulleted-list;
         word-wrap: break-word;
       }
     }
@@ -738,7 +736,7 @@ $note-form-margin-left: 72px;
 .add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
-  margin-left: -55px;
+  margin-left: -50px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

app/assets/stylesheets/pages/wiki.scss

@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list {
     }
   }
 }
-
-.wiki:not(.use-csslab) {
-  table {
-    @include markdown-table;
-  }
-}

app/assets/stylesheets/print.scss

@@ -1,21 +1,21 @@
-.wiki h1,
+.md h1,
-.wiki h2,
+.md h2,
-.wiki h3,
+.md h3,
-.wiki h4,
+.md h4,
-.wiki h5,
+.md h5,
-.wiki h6 {
+.md h6 {
   margin-top: 17px;
 }
 
-.wiki h1 {
+.md h1 {
   font-size: 30px;
 }
 
-.wiki h2 {
+.md h2 {
   font-size: 22px;
 }
 
-.wiki h3 {
+.md h3 {
   font-size: 18px;
   font-weight: 600;
 }

app/views/discussions/_diff_with_notes.html.haml

@@ -11,8 +11,8 @@
       = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
 
   - if diff_file.text?
-    .diff-content.code.js-syntax-highlight
+    .diff-content
-      %table
+      %table.code.js-syntax-highlight
         - if expanded
           - discussions = { discussion.original_line_code => [discussion] }
           = render partial: "projects/diffs/line",

app/views/help/index.html.haml

@@ -29,7 +29,7 @@
 
 .row.prepend-top-default
   .col-md-8
-    .documentation-index.wiki
+    .documentation-index.md
       = markdown(@help_index)
   .col-md-4
     .card

app/views/help/instance_configuration.html.haml

@@ -1,5 +1,5 @@
 - page_title 'Instance Configuration'
-.wiki.documentation
+.documentation.md
   %h1 Instance Configuration
 
   %p

app/views/help/show.html.haml

@@ -1,3 +1,3 @@
 - page_title @path.split("/").reverse.map(&:humanize)
-.documentation.wiki.prepend-top-default
+.documentation.md.prepend-top-default
   = markdown @markdown

app/views/help/ui.html.haml

@@ -513,7 +513,7 @@
 
   %h2#markdown Markdown
   %h4
-    %code .md or .wiki and others
+    %code .md
 
   Markdown rendering has a bit different css and presented in next UI elements:
 

app/views/projects/_md_preview.html.haml

@@ -22,7 +22,7 @@
 
   .md-write-holder
     = yield
-  .md.md-preview-holder.js-md-preview.hide.md-preview{ data: { url: url } }
+  .md.md-preview-holder.js-md-preview.hide{ data: { url: url } }
   .referenced-commands.hide
 
   - if referenced_users

app/views/projects/_wiki.html.haml

@@ -1,8 +1,7 @@
 - if @wiki_home.present?
   %div{ class: container_class }
-    .prepend-top-default.append-bottom-default
+    .md.md-file.prepend-top-default.append-bottom-default
-      .wiki
+      = render_wiki_content(@wiki_home)
-        = render_wiki_content(@wiki_home)
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)
   .landing{ class: [('row-content-block row p-0 align-items-center' if can_create_wiki), ('content-block' unless can_create_wiki)] }

app/views/projects/blob/diff.html.haml

@@ -15,14 +15,14 @@
           %a{ href: "#", data: { linenumber: line_number_old }, disabled: true }
         %td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
           %a{ href: "#", data: { linenumber: line_number_new }, disabled: true }
-        %td.line_content.noteable_line{ class: line_class }= line
+        %td.line_content{ class: line_class }= line
       - when :parallel
         %td.old_line.diff-line-num{ data: { linenumber: line_number_old } }
           %a{ href: "##{line_number_old}", data: { linenumber: line_number_old }, disabled: true }
-        %td.line_content.noteable_line.left-side{ class: line_class }= line
+        %td.line_content.left-side{ class: line_class }= line
         %td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
           %a{ href: "##{line_number_new}", data: { linenumber: line_number_new }, disabled: true }
-        %td.line_content.noteable_line.right-side{ class: line_class }= line
+        %td.line_content.right-side{ class: line_class }= line
 
   - if @form.unfold? && @form.bottom? && @form.to < @blob.lines.size
     %tr.line_holder{ id: @form.to, class: line_class }

app/views/projects/blob/preview.html.haml

@@ -1,21 +1,20 @@
-.diff-file.file-holder
+- if markup?(@blob.name)
-  .diff-content
+  .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
-    - if markup?(@blob.name)
+    = markup(@blob.name, @content)
-      .file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+- else
-        = markup(@blob.name, @content)
+  .diff-file
-    - else
+    .diff-content
-      .file-content.code.js-syntax-highlight
+      - unless @diff_lines.empty?
-        - unless @diff_lines.empty?
+        %table.text-file.code.js-syntax-highlight
-          %table.text-file
+          - @diff_lines.each do |line|
-            - @diff_lines.each do |line|
+            %tr.line_holder{ class: line.type }
-              %tr.line_holder{ class: "#{line.type}" }
+              - if line.type == "match"
-                - if line.type == "match"
+                %td.old_line.diff-line-num.match= "..."
-                  %td.old_line.diff-line-num= "..."
+                %td.new_line.diff-line-num.match= "..."
-                  %td.new_line.diff-line-num= "..."
+                %td.line_content.match= line.text
-                  %td.line_content.match= line.text
+              - else
-                - else
+                %td.old_line.diff-line-num{ class: line.type }
-                  %td.old_line.diff-line-num
+                %td.new_line.diff-line-num{ class: line.type }
-                  %td.new_line.diff-line-num
+                %td.line_content{ class: line.type }= diff_line_content(line.text)
-                  %td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
+      - else
-        - else
+        .nothing-here-block No changes.
-          .nothing-here-block No changes.

app/views/projects/blob/viewers/_markup.html.haml

@@ -1,4 +1,4 @@
 - blob = viewer.blob
 - context = blob.respond_to?(:rendered_markup) ? { rendered: blob.rendered_markup } : {}
-.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+.file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
   = markup(blob.name, blob.data, context)

app/views/projects/diffs/_line.html.haml

@@ -30,7 +30,7 @@
         = link_text
       - else
         %a{ href: "##{line_code}", data: { linenumber: link_text } }
-    %td.line_content.noteable_line{ class: type }<
+    %td.line_content{ class: type }<
       - if email
         %pre= line.rich_text
       - else

app/views/projects/diffs/_parallel_view.html.haml

@@ -1,7 +1,7 @@
 / Side-by-side diff view
 
-.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
+.text-file{ data: diff_view_data }
-  %table
+  %table.diff-wrap-lines.code.js-syntax-highlight
     - diff_file.parallel_diff_lines.each do |line|
       - left = line[:left]
       - right = line[:right]
@@ -23,7 +23,7 @@
               - discussion_left = discussions_left.try(:first)
               - if discussion_left && discussion_left.resolvable?
                 %diff-note-avatars{ "discussion-id" => discussion_left.id }
-            %td.line_content.parallel.noteable_line.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
+            %td.line_content.parallel.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel.left-side
@@ -44,7 +44,7 @@
               - discussion_right = discussions_right.try(:first)
               - if discussion_right && discussion_right.resolvable?
                 %diff-note-avatars{ "discussion-id" => discussion_right.id }
-            %td.line_content.parallel.noteable_line.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
+            %td.line_content.parallel.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel.right-side

app/views/projects/issues/show.html.haml

@@ -72,7 +72,7 @@
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?
         .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
-          .wiki= markdown_field(@issue, :description)
+          .md= markdown_field(@issue, :description)
           %textarea.hidden.js-task-list-field= @issue.description
 
       = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')

app/views/projects/merge_requests/_mr_box.html.haml

@@ -5,7 +5,7 @@
   %div
     - if @merge_request.description.present?
       .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
-        .wiki
+        .md
           = markdown_field(@merge_request, :description)
         %textarea.hidden.js-task-list-field
           = @merge_request.description

app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml

@@ -1,5 +1,5 @@
 %inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
-  %table
+  %table.diff-wrap-lines.code.js-syntax-highlight
     %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}}

app/views/projects/merge_requests/conflicts/show.html.haml

@@ -26,9 +26,9 @@
           %strong {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .file-content{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .file-content{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             %parallel-conflict-lines{ ":file" => "file" }
           %div{ "v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'" }
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"

app/views/projects/milestones/show.html.haml

@@ -54,9 +54,8 @@
 
     %div
       - if @milestone.description.present?
-        .description
+        .description.md
-          .wiki
+          = markdown_field(@milestone, :description)
-            = markdown_field(@milestone, :description)
 
   = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 

app/views/projects/tags/_tag.html.haml

@@ -20,9 +20,8 @@
       %p
         = s_("TagsPage|Can't find HEAD commit for this tag")
     - if release && release.description.present?
-      .description.prepend-top-default
+      .description.md.prepend-top-default
-        .wiki
+        = markdown_field(release, :description)
-          = markdown_field(release, :description)
 
   .row-fixed-content.controls.flex-row
     = render 'projects/buttons/download', project: @project, ref: tag.name, pipeline: @tags_pipelines[tag.name]

app/views/projects/tags/show.html.haml

@@ -39,8 +39,7 @@
 
   .append-bottom-default.prepend-top-default
     - if @release.description.present?
-      .description
+      .description.md
-        .wiki
+        = markdown_field(@release, :description)
-          = markdown_field(@release, :description)
     - else
       = s_('TagsPage|This tag has no release notes.')

app/views/projects/wikis/show.html.haml

@@ -26,7 +26,7 @@
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
 .prepend-top-default.append-bottom-default
-  .wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+  .md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
     = render_wiki_content(@page)
 
 = render 'sidebar'

app/views/search/results/_snippet_blob.html.haml

@@ -18,7 +18,7 @@
         %i.fa.fa-file
         %strong= snippet.file_name
     - if markup?(snippet.file_name)
-      .file-content.wiki
+      .file-content.md.md-file
         - snippet_chunks.each do |chunk|
           - unless chunk[:data].empty?
             = markup(snippet.file_name, chunk[:data])

app/views/shared/milestones/_top.html.haml

@@ -42,9 +42,8 @@
     = markdown_field(milestone, :title)
   - if milestone.group_milestone? && milestone.description.present?
     %div
-      .description
+      .description.md
-        .wiki
+        = markdown_field(milestone, :description)
-          = markdown_field(milestone, :description)
 
 - if milestone.complete?(current_user) && milestone.active?
   .alert.alert-success.prepend-top-default

app/views/shared/snippets/_header.html.haml

@@ -22,7 +22,7 @@
 
   - if @snippet.description.present?
     .description.qa-snippet-description
-      .wiki
+      .md
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field
         = @snippet.description

spec/features/merge_request/user_views_open_merge_request_spec.rb

@@ -13,7 +13,7 @@ describe 'User views an open merge request' do
     end
 
     it 'renders both the title and the description' do
-      node = find('.wiki h1 a#user-content-description-header')
+      node = find('.md h1 a#user-content-description-header')
       expect(node[:href]).to end_with('#description-header')
 
       # Work around a weird Capybara behavior where calling `parent` on a node

spec/features/projects/wiki/user_creates_wiki_page_spec.rb

@@ -136,7 +136,7 @@ describe "User creates wiki page" do
           click_button("Create page")
         end
 
-        page.within ".wiki" do
+        page.within ".md" do
           expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
         end
       end

spec/features/snippets/notes_on_personal_snippets_spec.rb

@@ -70,7 +70,7 @@ describe 'Comments on personal snippets', :js do
       fill_in 'note[note]', with: 'This is **awesome**!'
       find('.js-md-preview-button').click
 
-      page.within('.new-note .md-preview') do
+      page.within('.new-note .md-preview-holder') do
         expect(page).to have_content('This is awesome!')
         expect(page).to have_selector('strong')
       end

spec/features/snippets/user_creates_snippet_spec.rb

@@ -37,7 +37,7 @@ describe 'User creates snippet', :js do
     dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
     find('.js-md-preview-button').click
 
-    page.within('#new_personal_snippet .md-preview') do
+    page.within('#new_personal_snippet .md-preview-holder') do
       expect(page).to have_content('My Snippet')
 
       link = find('a.no-attachment-icon img[alt="banana_sample"]')['src']

spec/features/task_lists_spec.rb

@@ -79,7 +79,7 @@ describe 'Task Lists' do
         visit_issue(project, issue)
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
         expect(page).to have_selector('a.btn-close')
       end
 
@@ -87,14 +87,14 @@ describe 'Task Lists' do
         visit_issue(project, issue)
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
 
         logout(:user)
         login_as(user2)
         visit current_path
         wait_for_requests
 
-        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
       end
 
       it 'provides a summary on Issues#index' do
@@ -231,7 +231,7 @@ describe 'Task Lists' do
         container = '.detail-page-description .description.js-task-list-container'
 
         expect(page).to have_selector(container)
-        expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")
+        expect(page).to have_selector("#{container} .md .task-list .task-list-item .task-list-item-checkbox")
         expect(page).to have_selector("#{container} .js-task-list-field")
         expect(page).to have_selector('form.js-issuable-update')
         expect(page).to have_selector('a.btn-close')

spec/javascripts/diffs/mock_data/diff_discussions.js

@@ -496,7 +496,7 @@ export default {
     {
       text: 'line',
       rich_text:
-        '<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="1">\n1\n</td>\n<td class="line_content new noteable_line"><span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n</td>\n</tr>\n<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="2">\n2\n</td>\n<td class="line_content new noteable_line"><span id="LC2" class="line" lang="plaintext"></span>\n</td>\n</tr>\n',
+        '<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="1">\n1\n</td>\n<td class="line_content new"><span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n</td>\n</tr>\n<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="2">\n2\n</td>\n<td class="line_content new"><span id="LC2" class="line" lang="plaintext"></span>\n</td>\n</tr>\n',
       can_receive_suggestion: true,
       line_code: '6f209374f7e565f771b95720abf46024c41d1885_1_1',
       type: 'new',

spec/javascripts/fixtures/static/merge_requests_show.html

@@ -1,7 +1,7 @@
 <a class="btn-close"></a>
 <div class="detail-page-description">
 <div class="description js-task-list-container">
-<div class="wiki">
+<div class="md">
 <ul class="task-list">
 <li class="task-list-item">
 <input class="task-list-item-checkbox" type="checkbox">

spec/javascripts/issue_show/components/app_spec.js

@@ -75,7 +75,7 @@ describe('Issuable output', () => {
       .then(() => {
         expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
         expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
-        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
+        expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>this is a description!</p>');
         expect(vm.$el.querySelector('.js-task-list-field').value).toContain(
           'this is a description',
         );
@@ -92,7 +92,7 @@ describe('Issuable output', () => {
       .then(() => {
         expect(document.querySelector('title').innerText).toContain('2 (#1)');
         expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
-        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
+        expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>42</p>');
         expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
         expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
         expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(

spec/javascripts/issue_show/components/description_spec.js

@@ -43,12 +43,12 @@ describe('Description component', () => {
 
     Vue.nextTick(() => {
       expect(
-        vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
+        vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
       ).toBeTruthy();
 
       setTimeout(() => {
         expect(
-          vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
+          vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
         ).toBeTruthy();
 
         done();

spec/javascripts/vue_shared/components/markdown/field_spec.js

@@ -5,7 +5,7 @@ import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
   expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
   expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
-  expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
+  expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
 }
 
 describe('Markdown field component', () => {
@@ -80,7 +80,9 @@ describe('Markdown field component', () => {
         previewLink.click();
 
         Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading…');
+          expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
+            'Loading…',
+          );
 
           done();
         });
@@ -90,7 +92,7 @@ describe('Markdown field component', () => {
         previewLink.click();
 
         setTimeout(() => {
-          expect(vm.$el.querySelector('.md-preview').innerHTML).toContain(
+          expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
             '<p>markdown preview</p>',
           );
 

spec/support/matchers/issuable_matchers.rb

@@ -1,4 +1,4 @@
-RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".wiki"|
+RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".md"|
   match do |actual|
     node = find("#{parent} h#{level} a#user-content-#{id}")