UX: Improve git blob oneboxes (#30694)

Rearranges the info at the top of github/gitlab 'blob' oneboxes to make them easier to read

app/assets/stylesheets/common/base/onebox.scss

@@ -368,8 +368,16 @@ pre.onebox code ol.lines li:before {
   counter-increment: li-counter;
 }
 
-.onebox.githubblob h4 {
+.onebox.githubblob,
+.onebox.gitlabblob {
+  .onebox-body h4 {
     word-break: break-all;
+    margin-bottom: 5px;
+    font-size: 1rem;
+  }
+  .git-blob-info {
+    font-size: var(--font-down-1);
+  }
 }
 
 pre.onebox code ol {

lib/onebox/engine/github_blob_onebox.rb

@@ -35,13 +35,15 @@ module Onebox
         "https://raw.githubusercontent.com/#{match[:org]}/#{match[:repo]}/#{match[:sha1]}/#{match[:file]}"
       end
 
-      def title
-        Sanitize.fragment(Onebox::Helpers.uri_unencode(link).sub(%r{^https?\://github\.com/}, ""))
-      end
-
       def auth_headers(match)
         github_auth_header(match[:org])
       end
+
+      private
+
+      def data
+        super.merge({ domain: "github.com/#{match[:org]}/#{match[:repo]}" })
+      end
     end
   end
 end

lib/onebox/engine/gitlab_blob_onebox.rb

@@ -30,13 +30,15 @@ module Onebox
         "https://gitlab.com/#{m[:user]}/#{m[:repo]}/raw/#{m[:sha1]}/#{m[:file]}"
       end
 
-      def title
-        Sanitize.fragment(Onebox::Helpers.uri_unencode(link).sub(%r{^https?\://gitlab\.com/}, ""))
-      end
-
       def auth_headers(_match)
         {}
       end
+
+      private
+
+      def data
+        super.merge({ domain: "gitlab.com/#{match[:user]}/#{match[:repo]}" })
+      end
     end
   end
 end

lib/onebox/mixins/git_blob_onebox.rb

@@ -154,10 +154,30 @@ module Onebox
           { output: output_builder.join(), array: hash_builder }
         end
 
+        def match
+          @match ||= @url.match(self.raw_regexp)
+        end
+
+        def sha1
+          full = match[:sha1]
+
+          # We don't actually know if this is an sha1, or a branch/tag name
+          # So we only truncate if it's exactly 40 characters long, which is fairly unlikely to be a branch/tag name.
+          if full.length == 40
+            full[0..8]
+          else
+            full
+          end
+        end
+
+        def title
+          Sanitize.fragment(match[:file])
+        end
+
         def raw
           return @raw if defined?(@raw)
 
-          m = @url.match(self.raw_regexp)
+          m = match
 
           if m
             from = /\d+/.match(m[:from]) #get numeric should only match a positive interger
@@ -239,6 +259,7 @@ module Onebox
             model_file: @model_file,
             width: 480,
             height: 360,
+            sha1: sha1,
           }
         end
       end

lib/onebox/templates/githubblob.mustache

@@ -1,5 +1,9 @@
 <h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
 
+<div class="git-blob-info">
+  <a href="{{link}}" rel="noopener"><code>{{sha1}}</code></a>
+</div>
+
 {{^binary}}
   {{^has_lines}}
     {{#model_file}}

lib/onebox/templates/gitlabblob.mustache

@@ -1,19 +1,21 @@
 <h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
 
+<div class="git-blob-info">
+  <a href="{{link}}" rel="noopener"><code>{{sha1}}</code></a>
+</div>
+
 {{^has_lines}}
   <pre><code class="{{lang}}">{{content}}</code></pre>
 {{/has_lines}}
 
 {{#has_lines}}
-  <pre class="onebox">
+  <pre class="onebox"><code class="{{lang}}">
-    <code class="{{lang}}">
     <ol class="start lines" start="{{cr_results.from}}" style="counter-reset: li-counter {{cr_results.from_minus_one}} ;">
       {{#lines}}
         <li{{#selected}} class="selected"{{/selected}}>{{data}}</li>
       {{/lines}}
     </ol>
-    </code>
+    </code></pre>
-  </pre>
 {{/has_lines}}
 
 {{#truncated}}