Merge pull request mozilla#4424 from pmac/improve-mfsa-yml-formatting

Some small improvements to MFSA YAML styling and function
craigcook · Oct 20, 2016 · f327812 · f327812
2 parents c2ec303 + df42b4e
commit f327812
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 119 deletions.
diff --git a/bedrock/security/templates/security/partials/cve.html b/bedrock/security/templates/security/partials/cve.html
@@ -1,19 +1,21 @@
-<h4 id="{{ id }}" class="level-heading cve">
-  <a href="#{{ id }}"><span class="anchor">#</span>{{ id }}: {{ title }}</a>
-</h4>
-<dl class="summary">
-  <dt>Reporter</dt>
-  <dd>{{ reporter|safe }}</dd>
-  <dt>Impact</dt>
-  <dd><span class="level {{ impact_class }}">{{ impact }}</span></dd>
-</dl>
-<h5>Description</h5>
-{{ description|markdown }}
-{% if bugs %}
-  <h5>References</h5>
-  <ul>
-    {% for bug in bugs -%}
-      <li><a href="{{ bug.url }}">{{ bug.desc|safe }}</a></li>
-    {%- endfor %}
-  </ul>
-{% endif %}
+<section class="cve">
+  <h4 id="{{ id }}" class="level-heading">
+    <a href="#{{ id }}"><span class="anchor">#</span>{{ id }}: {{ title }}</a>
+  </h4>
+  <dl class="summary">
+    <dt>Reporter</dt>
+    <dd>{{ reporter|safe }}</dd>
+    <dt>Impact</dt>
+    <dd><span class="level {{ impact_class }}">{{ impact }}</span></dd>
+  </dl>
+  <h5>Description</h5>
+  {{ description|markdown }}
+  {% if bugs %}
+    <h5>References</h5>
+    <ul>
+      {% for bug in bugs -%}
+        <li><a href="{{ bug.url }}">{{ bug.desc|safe }}</a></li>
+      {%- endfor %}
+    </ul>
+  {% endif %}
+</section>
diff --git a/bedrock/security/tests/test_utils.py b/bedrock/security/tests/test_utils.py
@@ -86,9 +86,9 @@ def test_generate_yml_advisories_html(rts_mock):
                            'Can also have full breaks and ***markdown***!\n',
             'bugs': [
                 {'url': 'https://bugzilla.mozilla.org/show_bug.cgi?id=1289085',
-                 'desc': 'stuff about the bugs'},
+                 'desc': 'Bug 1289085'},
                 {'url': 'https://bugzilla.mozilla.org/buglist.cgi?bug_id=1289085%2C1289087',
-                 'desc': 'other stuff about the bugs'},
+                 'desc': 'stuff about the bugs'},
             ]
         }),
         call('security/partials/cve.html', {
@@ -123,9 +123,8 @@ def test_generate_yml_advisories_html(rts_mock):
           Can also have full breaks and ***markdown***!
         bugs:
           - url: 1289085
-            desc: stuff about the bugs
           - url: 1289085, 1289087
-            desc: other stuff about the bugs
+            desc: stuff about the bugs
       CVE-2016-5270:
         title: Another sampile title, this time with more length!
         impact: High

diff --git a/bedrock/security/utils.py b/bedrock/security/utils.py
@@ -84,6 +84,8 @@ def generate_yml_advisories_html(data):
         advisory['id'] = cve
         advisory['impact_class'] = advisory['impact'].lower().split(None, 1)[0]
         for bug in advisory['bugs']:
+            if 'desc' not in bug:
+                bug['desc'] = 'Bug %s' % bug['url']
             bug['url'] = parse_bug_url(bug['url'])
         html.append(render_to_string('security/partials/cve.html', advisory))
 

diff --git a/media/css/security/security.less b/media/css/security/security.less
@@ -30,7 +30,7 @@
     .font-size(11px);
     font-style: normal;
     font-weight: bold;
-    line-height: 14px;
+    line-height: 1;
     padding: 4px 2px 4px 4px;
     top: .714rem;
     left: 0;
@@ -57,6 +57,27 @@
         .font-size(32px);
         letter-spacing: normal;
     }
+    .cve {
+        margin: 1.5em 0 0 1.5em;
+        float: none;
+        width: inherit;
+
+        .summary {
+            dt {
+                .font-size(@baseFontSize);
+                padding: 6px;
+            }
+            dd {
+                .font-size(@smallFontSize);
+                padding: 6px 6px 6px 120px;
+                .level {
+                    font-size: inherit;
+                    padding: 3px;
+                    width: 80px;
+                }
+            }
+        }
+    }
 }
 
 li:target {
@@ -105,7 +126,10 @@ p.note {
 }
 
 .level-heading {
+    padding-top: 6px;
     position: relative;
+    word-wrap: break-word;
+    .font-size(20px);
 
     a {
         color: inherit;
@@ -115,7 +139,7 @@ p.note {
         &:focus,
         &:active {
             .anchor {
-                visibility: visible;
+                color: @linkBlue;
             }
         }
     }
@@ -124,15 +148,14 @@ p.note {
         position: absolute;
         left: -1em;
         width: 1em;
-        visibility: hidden;
-        .font-size(@baseFontSize);
+        .font-size(@largeFontSize);
         color: @textColorLight;
         vertical-align: middle;
     }
 }
 
 #outer-wrapper {
-  overflow: hidden; /* Fix the layout on IE */
+    overflow: hidden; /* Fix the layout on IE */
 }
 
 #masthead {
@@ -157,35 +180,34 @@ p.note {
 
     article {
         header {
-       .logo {
-           position: relative;
-           float: right;
-           margin: -80px -20px 0 0;
-           vertical-align: top;
-       }
-       p {
-           clear: both;
-           margin: 1em 0;
-       }
-       .meta {
-           color: @textColorTertiary;
-           font-style: italic;
-       }
-       & + * {
-         clear: both;
-       }
-    }
+            .logo {
+                position: relative;
+                float: right;
+                margin: -80px -20px 0 0;
+                vertical-align: top;
+            }
+            p {
+                clear: both;
+                margin: 1em 0;
+            }
+            .meta {
+                color: @textColorTertiary;
+                font-style: italic;
+            }
+            & + * {
+                clear: both;
+            }
+        }
 
-    section {
-      margin-top: 2.5em;
-      padding: 0;
+        section {
+            margin-top: 2.5em;
+            padding: 0;
 
-      section {
-        margin-top: 1.5em;
-      }
+            section {
+                margin-top: 1.5em;
+            }
+        }
     }
-
-  }
 }
 
 
@@ -227,14 +249,14 @@ p.note {
     }
 }
 .sidebar {
-  float: left;
-  margin: 0;
-  padding: 0;
-  width: (@gridColumnWidth * 3) + (@gridGutterWidth * 5);
+    float: left;
+    margin: 0;
+    padding: 0;
+    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 5);
 
-  section, nav {
-    padding: 25px 25px 0;
-  }
+    section, nav {
+        padding: 25px 25px 0;
+    }
 
 }
 
@@ -258,21 +280,21 @@ p.note {
 /* Tablet & Mobile */
 
 @media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
-  #main-content {
-    width: @breakTablet;
-  }
+    #main-content {
+        width: @breakTablet;
+    }
 
-  .main-column {
-    .span_narrow(8);
-    margin: 0;
-    width: (@gridColumnWidthNarrow * 8) + (@gridGutterWidth * 8);
-  }
+    .main-column {
+        .span_narrow(8);
+        margin: 0;
+        width: (@gridColumnWidthNarrow * 8) + (@gridGutterWidth * 8);
+    }
 
-  .sidebar {
-    .span_narrow(4);
-    margin: 0;
-    width: (@gridColumnWidthNarrow * 4) + (@gridGutterWidth * 6);
-  }
+    .sidebar {
+        .span_narrow(4);
+        margin: 0;
+        width: (@gridColumnWidthNarrow * 4) + (@gridGutterWidth * 6);
+    }
 
     #older-vulnerabilities .main-column {
         .span-all();
@@ -281,56 +303,56 @@ p.note {
 }
 
 @media only screen and (max-width: @breakTablet) {
-  #masthead {
-    h2, .breadcrumbs {
-      display: none;
+    #masthead {
+        h2, .breadcrumbs {
+            display: none;
+        }
     }
-  }
 
-  #main-content {
-    margin-top: 25px;
-  }
+    #main-content {
+        margin-top: 25px;
+    }
 
-  .main-column,
-  .sidebar {
-    .span-all();
-    margin: 0;
-  }
-
-  .main-column article header {
-    .logo {
-      float: left;
-      margin: -10px 0 0 -10px;
-      width: 80px;
-
-      & + h1,
-      & + h1 + .meta {
-        margin: 0 0 12px 80px;
-      }
+    .main-column,
+    .sidebar {
+        .span-all();
+        margin: 0;
     }
 
-    .title-shadow-box {
-      margin-top: -50px;
+    .main-column article header {
+        .logo {
+            float: left;
+            margin: -10px 0 0 -10px;
+            width: 80px;
+
+            & + h1,
+            & + h1 + .meta {
+                margin: 0 0 12px 80px;
+            }
+        }
+
+        .title-shadow-box {
+            margin-top: -50px;
+        }
     }
-  }
 
-  .main-column article .highlight {
-    margin: 15px -15px;
-  }
+    .main-column article .highlight {
+        margin: 15px -15px;
+    }
 
-  html[dir="rtl"] {
-    .main-column article header {
-      .logo {
-        float: right;
-        margin: -10px -10px 0 0;
+    html[dir="rtl"] {
+        .main-column article header {
+            .logo {
+                float: right;
+                margin: -10px -10px 0 0;
 
-        & + h1,
-        & + h1 + .meta {
-          margin: 0 80px 12px 0;
+                & + h1,
+                & + h1 + .meta {
+                    margin: 0 80px 12px 0;
+                }
+            }
         }
-      }
     }
-  }
 
 }
 
@@ -346,11 +368,11 @@ p.note {
 }
 
 @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
-  #wrapper {
-    width: @breakMobileLandscape - @gridGutterWidth;
-  }
+    #wrapper {
+        width: @breakMobileLandscape - @gridGutterWidth;
+    }
 
-  #masthead {
-    width: @breakMobileLandscape - (@gridGutterWidth * 3);
-  }
+    #masthead {
+        width: @breakMobileLandscape - (@gridGutterWidth * 3);
+    }
 }