Add purgeHTML extractor to fix flakiness

- Previously we only used the defaultExtractor which only looks at words. - We can greatly increase the non-determinism of this by using the bon-a-fide HTML extractor. - This will prevent issues like [this][1]. [1]: https://gitlab.com/gitlab-org/gitlab-foss/-/jobs/1316947507

Add purgeHTML extractor to fix flakiness
- Previously we only used the defaultExtractor which only looks at words. - We can greatly increase the non-determinism of this by using the bon-a-fide HTML extractor. - This will prevent issues like [this][1]. [1]: https://gitlab.com/gitlab-org/gitlab-foss/-/jobs/1316947507
7eb984ee · Paul Slaughter · f16fc45c · 7eb984ee · 7eb984ee · 7eb984ee
Commit 7eb984ee authored Jun 03, 2021 by Paul Slaughter
9 changed files
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -5,7 +5,6 @@
 body.gl-dark {
  --gray-50: #303030;
  --gray-100: #404040;
-  --gray-200: #525252;
  --gray-950: #fff;
  --green-100: #0d532a;
  --green-400: #108548;
@@ -28,8 +27,7 @@ html {
  line-height: 1.15;
 }
 aside,
-header,
-nav {
+header {
  display: block;
 }
 body {
@@ -96,35 +94,24 @@ button {
  cursor: pointer;
 }
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+[type="button"]:not(:disabled) {
  cursor: pointer;
 }
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type="button"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
 }
 [type="search"] {
  outline-offset: -2px;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-[hidden] {
-  display: none !important;
-}
-h1,
-.h1 {
+h1 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fafafa;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
 .list-unstyled {
@@ -246,9 +233,6 @@ h1,
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.25rem;
 }
-.dropdown-menu.show {
-  display: block;
-}
 .nav {
  display: flex;
  flex-wrap: wrap;
@@ -322,17 +306,6 @@ h1,
    display: none;
  }
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #333;
-  background-clip: border-box;
-  border: 1px solid #404040;
-  border-radius: 0.25rem;
-}
 .badge {
  display: inline-block;
  padding: 0.25em 0.4em;
@@ -358,20 +331,6 @@ h1,
  padding-left: 0.6em;
  border-radius: 10rem;
 }
-.close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  color: #fff;
-  text-shadow: 0 1px 0 #333;
-  opacity: 0.5;
-}
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
 .rounded-circle {
  border-radius: 50% !important;
 }
@@ -460,12 +419,10 @@ body,
 }
 button,
 html [type="button"],
-[type="submit"],
 [role="button"] {
  cursor: pointer;
 }
-h1,
-.h1 {
+h1 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -546,38 +503,9 @@ body {
  color: #dbdbdb;
  vertical-align: baseline;
 }
-img.emoji {
-  height: 20px;
-  vertical-align: top;
-  width: 20px;
-  margin-top: 1px;
-}
-.chart {
-  overflow: hidden;
-  height: 220px;
-}
 .dropdown {
  position: relative;
 }
-.show.dropdown .dropdown-menu {
-  transform: translateY(0);
-  display: block;
-  min-height: 40px;
-  max-height: 312px;
-  overflow-y: auto;
-}
-@media (max-width: 575.98px) {
-  .show.dropdown .dropdown-menu {
-    width: 100%;
-  }
-}
-.show.dropdown .dropdown-menu-toggle,
-.show.dropdown .dropdown-menu-toggle {
-  border-color: #c4c4c4;
-}
-.show.dropdown [data-toggle="dropdown"] {
-  outline: 0;
-}
 .search-input-container .dropdown-menu {
  margin-top: 11px;
 }
@@ -945,15 +873,6 @@ input {
    float: none;
  }
 }
-.header-user.show .dropdown-menu {
-  margin-top: 4px;
-  color: var(--gl-text-color, #fafafa);
-  left: auto;
-  max-height: 445px;
-}
-.header-user.show .dropdown-menu svg {
-  vertical-align: text-top;
-}
 .header-user-avatar {
  float: left;
  margin-right: 5px;
@@ -984,9 +903,6 @@ input {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 .context-header {
  position: relative;
  margin-right: 2px;
@@ -2008,9 +1924,6 @@ body.sidebar-refactoring
  .avatar.s32 {
  border-radius: 4px;
 }
-#content-body {
-  display: block;
-}
 body.gl-dark .navbar-gitlab {
  background-color: #fafafa;
 }
@@ -2025,12 +1938,8 @@ body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler svg {
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
-body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav > li.active > button,
-body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > button {
+body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
  color: #fafafa;
  background-color: #333;
 }
@@ -2059,13 +1968,11 @@ body.gl-dark
  .header-user-avatar {
  border-color: #fafafa;
 }
-body.gl-dark .navbar-gitlab .nav > li.active > a,
-body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a {
+body.gl-dark .navbar-gitlab .nav > li.active > a {
  color: #fafafa;
  background-color: #333;
 }
-body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot,
-body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a .notification-dot {
+body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
  border-color: #333;
 }
 body.gl-dark
@@ -2073,12 +1980,6 @@ body.gl-dark
  .nav
  > li.active
  > a.header-help-dropdown-toggle
-  .notification-dot,
-body.gl-dark
-  .navbar-gitlab
-  .nav
-  > li.dropdown.show
-  > a.header-help-dropdown-toggle
  .notification-dot {
  background-color: #fafafa;
 }
@@ -2116,12 +2017,8 @@ body.gl-dark .navbar-gitlab {
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button,
-body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button,
 body.gl-dark .navbar-gitlab .navbar-nav li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav li.active > button,
-body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button {
+body.gl-dark .navbar-gitlab .navbar-nav li.active > button {
  color: var(--gl-text-color);
  background-color: var(--gray-200);
 }

--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -12,8 +12,7 @@ html {
  line-height: 1.15;
 }
 aside,
-header,
-nav {
+header {
  display: block;
 }
 body {
@@ -80,35 +79,24 @@ button {
  cursor: pointer;
 }
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+[type="button"]:not(:disabled) {
  cursor: pointer;
 }
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type="button"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
 }
 [type="search"] {
  outline-offset: -2px;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-[hidden] {
-  display: none !important;
-}
-h1,
-.h1 {
+h1 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #303030;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
 .list-unstyled {
@@ -230,9 +218,6 @@ h1,
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
 }
-.dropdown-menu.show {
-  display: block;
-}
 .nav {
  display: flex;
  flex-wrap: wrap;
@@ -306,17 +291,6 @@ h1,
    display: none;
  }
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.25rem;
-}
 .badge {
  display: inline-block;
  padding: 0.25em 0.4em;
@@ -342,20 +316,6 @@ h1,
  padding-left: 0.6em;
  border-radius: 10rem;
 }
-.close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
-  opacity: 0.5;
-}
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
 .rounded-circle {
  border-radius: 50% !important;
 }
@@ -444,12 +404,10 @@ body,
 }
 button,
 html [type="button"],
-[type="submit"],
 [role="button"] {
  cursor: pointer;
 }
-h1,
-.h1 {
+h1 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -530,38 +488,9 @@ body {
  color: #525252;
  vertical-align: baseline;
 }
-img.emoji {
-  height: 20px;
-  vertical-align: top;
-  width: 20px;
-  margin-top: 1px;
-}
-.chart {
-  overflow: hidden;
-  height: 220px;
-}
 .dropdown {
  position: relative;
 }
-.show.dropdown .dropdown-menu {
-  transform: translateY(0);
-  display: block;
-  min-height: 40px;
-  max-height: 312px;
-  overflow-y: auto;
-}
-@media (max-width: 575.98px) {
-  .show.dropdown .dropdown-menu {
-    width: 100%;
-  }
-}
-.show.dropdown .dropdown-menu-toggle,
-.show.dropdown .dropdown-menu-toggle {
-  border-color: #c4c4c4;
-}
-.show.dropdown [data-toggle="dropdown"] {
-  outline: 0;
-}
 .search-input-container .dropdown-menu {
  margin-top: 11px;
 }
@@ -929,15 +858,6 @@ input {
    float: none;
  }
 }
-.header-user.show .dropdown-menu {
-  margin-top: 4px;
-  color: var(--gl-text-color, #303030);
-  left: auto;
-  max-height: 445px;
-}
-.header-user.show .dropdown-menu svg {
-  vertical-align: text-top;
-}
 .header-user-avatar {
  float: left;
  margin-right: 5px;
@@ -968,9 +888,6 @@ input {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 .context-header {
  position: relative;
  margin-right: 2px;
@@ -1969,9 +1886,6 @@ body.sidebar-refactoring
  .avatar.s32 {
  border-radius: 4px;
 }
-#content-body {
-  display: block;
-}

 .tab-width-8 {
  -moz-tab-size: 8;

--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -40,11 +40,6 @@ p {
  margin-top: 0;
  margin-bottom: 1rem;
 }
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
 a {
  color: #007bff;
  text-decoration: none;
@@ -54,11 +49,6 @@ a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
 }
-code {
-  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
-    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-  font-size: 1em;
-}
 img {
  vertical-align: middle;
  border-style: none;
@@ -93,28 +83,20 @@ fieldset {
  margin: 0;
  border: 0;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
 [hidden] {
  display: none !important;
 }
 h1,
-h3,
-.h1,
-.h3 {
+h3 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #303030;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
-h3,
-.h3 {
+h3 {
  font-size: 1.53125rem;
 }
 hr {
@@ -123,14 +105,6 @@ hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-code {
-  font-size: 90%;
-  color: #1f1f1f;
-  word-wrap: break-word;
-}
-a > code {
-  color: inherit;
-}
 .container {
  width: 100%;
  padding-right: 15px;
@@ -245,8 +219,7 @@ a > code {
  margin-right: -5px;
  margin-left: -5px;
 }
-.form-row > .col,
-.form-row > [class*="col-"] {
+.form-row > .col {
  padding-right: 5px;
  padding-left: 5px;
 }
@@ -290,21 +263,6 @@ fieldset:disabled a.btn {
  align-items: center;
  justify-content: space-between;
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.25rem;
-}
-.card > hr {
-  margin-right: 0;
-  margin-left: 0;
-}
 .d-block {
  display: block !important;
 }
@@ -449,9 +407,7 @@ body,
  cursor: pointer;
 }
 h1,
-.h1,
-h3,
-.h3 {
+h3 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -461,16 +417,6 @@ a {
 hr {
  overflow: hidden;
 }
-code {
-  padding: 2px 4px;
-  color: #1f1f1f;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-}
-.code > code {
-  background-color: inherit;
-  padding: unset;
-}
 .hidden {
  display: none !important;
  visibility: hidden !important;
@@ -478,13 +424,6 @@ code {
 .hide {
  display: none;
 }
-.label {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  display: inline-block;
-}
 svg {
  vertical-align: baseline;
 }
@@ -509,11 +448,6 @@ body.navless {
    margin-top: 20px;
  }
 }
-@media (max-width: 575.98px) {
-  .container .container .title {
-    padding-left: 15px !important;
-  }
-}
 .navless-container {
  margin-top: 40px;
  padding-top: 32px;
@@ -627,9 +561,6 @@ label.label-bold {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 input::-moz-placeholder {
  color: #868686;
  opacity: 1;

--- a/ee/app/assets/stylesheets/startup/startup-dark.scss
+++ b/ee/app/assets/stylesheets/startup/startup-dark.scss
@@ -5,7 +5,6 @@
 body.gl-dark {
  --gray-50: #303030;
  --gray-100: #404040;
-  --gray-200: #525252;
  --gray-950: #fff;
  --green-100: #0d532a;
  --green-400: #108548;
@@ -28,8 +27,7 @@ html {
  line-height: 1.15;
 }
 aside,
-header,
-nav {
+header {
  display: block;
 }
 body {
@@ -96,35 +94,24 @@ button {
  cursor: pointer;
 }
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+[type="button"]:not(:disabled) {
  cursor: pointer;
 }
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type="button"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
 }
 [type="search"] {
  outline-offset: -2px;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-[hidden] {
-  display: none !important;
-}
-h1,
-.h1 {
+h1 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fafafa;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
 .list-unstyled {
@@ -246,9 +233,6 @@ h1,
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.25rem;
 }
-.dropdown-menu.show {
-  display: block;
-}
 .nav {
  display: flex;
  flex-wrap: wrap;
@@ -322,17 +306,6 @@ h1,
    display: none;
  }
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #333;
-  background-clip: border-box;
-  border: 1px solid #404040;
-  border-radius: 0.25rem;
-}
 .badge {
  display: inline-block;
  padding: 0.25em 0.4em;
@@ -358,20 +331,6 @@ h1,
  padding-left: 0.6em;
  border-radius: 10rem;
 }
-.close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  color: #fff;
-  text-shadow: 0 1px 0 #333;
-  opacity: 0.5;
-}
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
 .rounded-circle {
  border-radius: 50% !important;
 }
@@ -460,12 +419,10 @@ body,
 }
 button,
 html [type="button"],
-[type="submit"],
 [role="button"] {
  cursor: pointer;
 }
-h1,
-.h1 {
+h1 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -546,38 +503,9 @@ body {
  color: #dbdbdb;
  vertical-align: baseline;
 }
-img.emoji {
-  height: 20px;
-  vertical-align: top;
-  width: 20px;
-  margin-top: 1px;
-}
-.chart {
-  overflow: hidden;
-  height: 220px;
-}
 .dropdown {
  position: relative;
 }
-.show.dropdown .dropdown-menu {
-  transform: translateY(0);
-  display: block;
-  min-height: 40px;
-  max-height: 312px;
-  overflow-y: auto;
-}
-@media (max-width: 575.98px) {
-  .show.dropdown .dropdown-menu {
-    width: 100%;
-  }
-}
-.show.dropdown .dropdown-menu-toggle,
-.show.dropdown .dropdown-menu-toggle {
-  border-color: #c4c4c4;
-}
-.show.dropdown [data-toggle="dropdown"] {
-  outline: 0;
-}
 .search-input-container .dropdown-menu {
  margin-top: 11px;
 }
@@ -945,15 +873,6 @@ input {
    float: none;
  }
 }
-.header-user.show .dropdown-menu {
-  margin-top: 4px;
-  color: var(--gl-text-color, #fafafa);
-  left: auto;
-  max-height: 445px;
-}
-.header-user.show .dropdown-menu svg {
-  vertical-align: text-top;
-}
 .header-user-avatar {
  float: left;
  margin-right: 5px;
@@ -984,9 +903,6 @@ input {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 .context-header {
  position: relative;
  margin-right: 2px;
@@ -2008,9 +1924,6 @@ body.sidebar-refactoring
  .avatar.s32 {
  border-radius: 4px;
 }
-#content-body {
-  display: block;
-}
 body.gl-dark .navbar-gitlab {
  background-color: #fafafa;
 }
@@ -2025,12 +1938,8 @@ body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler svg {
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
-body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav > li.active > button,
-body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > button {
+body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
  color: #fafafa;
  background-color: #333;
 }
@@ -2059,13 +1968,11 @@ body.gl-dark
  .header-user-avatar {
  border-color: #fafafa;
 }
-body.gl-dark .navbar-gitlab .nav > li.active > a,
-body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a {
+body.gl-dark .navbar-gitlab .nav > li.active > a {
  color: #fafafa;
  background-color: #333;
 }
-body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot,
-body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a .notification-dot {
+body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
  border-color: #333;
 }
 body.gl-dark
@@ -2073,12 +1980,6 @@ body.gl-dark
  .nav
  > li.active
  > a.header-help-dropdown-toggle
-  .notification-dot,
-body.gl-dark
-  .navbar-gitlab
-  .nav
-  > li.dropdown.show
-  > a.header-help-dropdown-toggle
  .notification-dot {
  background-color: #fafafa;
 }
@@ -2116,12 +2017,8 @@ body.gl-dark .navbar-gitlab {
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button,
-body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button,
 body.gl-dark .navbar-gitlab .navbar-nav li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav li.active > button,
-body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a,
-body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button {
+body.gl-dark .navbar-gitlab .navbar-nav li.active > button {
  color: var(--gl-text-color);
  background-color: var(--gray-200);
 }

--- a/ee/app/assets/stylesheets/startup/startup-general.scss
+++ b/ee/app/assets/stylesheets/startup/startup-general.scss
@@ -12,8 +12,7 @@ html {
  line-height: 1.15;
 }
 aside,
-header,
-nav {
+header {
  display: block;
 }
 body {
@@ -80,35 +79,24 @@ button {
  cursor: pointer;
 }
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+[type="button"]:not(:disabled) {
  cursor: pointer;
 }
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type="button"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
 }
 [type="search"] {
  outline-offset: -2px;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-[hidden] {
-  display: none !important;
-}
-h1,
-.h1 {
+h1 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #303030;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
 .list-unstyled {
@@ -230,9 +218,6 @@ h1,
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
 }
-.dropdown-menu.show {
-  display: block;
-}
 .nav {
  display: flex;
  flex-wrap: wrap;
@@ -306,17 +291,6 @@ h1,
    display: none;
  }
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.25rem;
-}
 .badge {
  display: inline-block;
  padding: 0.25em 0.4em;
@@ -342,20 +316,6 @@ h1,
  padding-left: 0.6em;
  border-radius: 10rem;
 }
-.close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
-  opacity: 0.5;
-}
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
 .rounded-circle {
  border-radius: 50% !important;
 }
@@ -444,12 +404,10 @@ body,
 }
 button,
 html [type="button"],
-[type="submit"],
 [role="button"] {
  cursor: pointer;
 }
-h1,
-.h1 {
+h1 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -530,38 +488,9 @@ body {
  color: #525252;
  vertical-align: baseline;
 }
-img.emoji {
-  height: 20px;
-  vertical-align: top;
-  width: 20px;
-  margin-top: 1px;
-}
-.chart {
-  overflow: hidden;
-  height: 220px;
-}
 .dropdown {
  position: relative;
 }
-.show.dropdown .dropdown-menu {
-  transform: translateY(0);
-  display: block;
-  min-height: 40px;
-  max-height: 312px;
-  overflow-y: auto;
-}
-@media (max-width: 575.98px) {
-  .show.dropdown .dropdown-menu {
-    width: 100%;
-  }
-}
-.show.dropdown .dropdown-menu-toggle,
-.show.dropdown .dropdown-menu-toggle {
-  border-color: #c4c4c4;
-}
-.show.dropdown [data-toggle="dropdown"] {
-  outline: 0;
-}
 .search-input-container .dropdown-menu {
  margin-top: 11px;
 }
@@ -929,15 +858,6 @@ input {
    float: none;
  }
 }
-.header-user.show .dropdown-menu {
-  margin-top: 4px;
-  color: var(--gl-text-color, #303030);
-  left: auto;
-  max-height: 445px;
-}
-.header-user.show .dropdown-menu svg {
-  vertical-align: text-top;
-}
 .header-user-avatar {
  float: left;
  margin-right: 5px;
@@ -968,9 +888,6 @@ input {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 .context-header {
  position: relative;
  margin-right: 2px;
@@ -1969,9 +1886,6 @@ body.sidebar-refactoring
  .avatar.s32 {
  border-radius: 4px;
 }
-#content-body {
-  display: block;
-}

 .tab-width-8 {
  -moz-tab-size: 8;

--- a/ee/app/assets/stylesheets/startup/startup-signin.scss
+++ b/ee/app/assets/stylesheets/startup/startup-signin.scss
@@ -40,11 +40,6 @@ p {
  margin-top: 0;
  margin-bottom: 1rem;
 }
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
 a {
  color: #007bff;
  text-decoration: none;
@@ -54,11 +49,6 @@ a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
 }
-code {
-  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
-    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-  font-size: 1em;
-}
 img {
  vertical-align: middle;
  border-style: none;
@@ -93,28 +83,20 @@ fieldset {
  margin: 0;
  border: 0;
 }
-summary {
-  display: list-item;
-  cursor: pointer;
-}
 [hidden] {
  display: none !important;
 }
 h1,
-h3,
-.h1,
-.h3 {
+h3 {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #303030;
 }
-h1,
-.h1 {
+h1 {
  font-size: 2.1875rem;
 }
-h3,
-.h3 {
+h3 {
  font-size: 1.53125rem;
 }
 hr {
@@ -123,14 +105,6 @@ hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-code {
-  font-size: 90%;
-  color: #1f1f1f;
-  word-wrap: break-word;
-}
-a > code {
-  color: inherit;
-}
 .container {
  width: 100%;
  padding-right: 15px;
@@ -245,8 +219,7 @@ a > code {
  margin-right: -5px;
  margin-left: -5px;
 }
-.form-row > .col,
-.form-row > [class*="col-"] {
+.form-row > .col {
  padding-right: 5px;
  padding-left: 5px;
 }
@@ -290,21 +263,6 @@ fieldset:disabled a.btn {
  align-items: center;
  justify-content: space-between;
 }
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.25rem;
-}
-.card > hr {
-  margin-right: 0;
-  margin-left: 0;
-}
 .d-block {
  display: block !important;
 }
@@ -449,9 +407,7 @@ body,
  cursor: pointer;
 }
 h1,
-.h1,
-h3,
-.h3 {
+h3 {
  margin-top: 20px;
  margin-bottom: 10px;
 }
@@ -461,16 +417,6 @@ a {
 hr {
  overflow: hidden;
 }
-code {
-  padding: 2px 4px;
-  color: #1f1f1f;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-}
-.code > code {
-  background-color: inherit;
-  padding: unset;
-}
 .hidden {
  display: none !important;
  visibility: hidden !important;
@@ -478,13 +424,6 @@ code {
 .hide {
  display: none;
 }
-.label {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  display: inline-block;
-}
 svg {
  vertical-align: baseline;
 }
@@ -509,11 +448,6 @@ body.navless {
    margin-top: 20px;
  }
 }
-@media (max-width: 575.98px) {
-  .container .container .title {
-    padding-left: 15px !important;
-  }
-}
 .navless-container {
  margin-top: 40px;
  padding-top: 32px;
@@ -627,9 +561,6 @@ label.label-bold {
 .tanuki-logo .tanuki-right-cheek {
  fill: #fca326;
 }
-.card {
-  margin-bottom: 16px;
-}
 input::-moz-placeholder {
  color: #868686;
  opacity: 1;

--- a/package.json
+++ b/package.json
@@ -246,6 +246,7 @@
    "postcss": "^7.0.14",
    "prettier": "2.2.1",
    "purgecss": "^4.0.3",
+    "purgecss-from-html": "^4.0.3",
    "readdir-enhanced": "^2.2.4",
    "sass": "^1.32.12",
    "timezone-mock": "^1.0.8",

--- a/scripts/frontend/startup_css/get_startup_css.js
+++ b/scripts/frontend/startup_css/get_startup_css.js
@@ -2,6 +2,7 @@ const fs = require('fs');
 const cheerio = require('cheerio');
 const { mergeWith, isArray } = require('lodash');
 const { PurgeCSS } = require('purgecss');
+const purgeHtml = require('purgecss-from-html');
 const { cleanCSS } = require('./clean_css');
 const { HTML_TO_REMOVE } = require('./constants');
 const { die } = require('./utils');
@@ -51,6 +52,12 @@ const getStartupCSS = async ({ htmlPaths, cssPaths, purgeOptions }) => {
        },
        // By default, PurgeCSS ignores special characters, but our utilities use "!"
        defaultExtractor: (x) => x.match(/[\w-!]+/g),
+        extractors: [
+          {
+            extractor: purgeHtml,
+            extensions: ['html'],
+          },
+        ],
      },
      purgeOptions,
    ),

--- a/yarn.lock
+++ b/yarn.lock
@@ -9239,14 +9239,14 @@ parse-passwd@^1.0.0:
  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=

-parse5-htmlparser2-tree-adapter@^6.0.1:
+parse5-htmlparser2-tree-adapter@^6.0.0, parse5-htmlparser2-tree-adapter@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
  dependencies:
    parse5 "^6.0.1"

-"parse5@5 - 6", parse5@^6.0.1:
+"parse5@5 - 6", parse5@^6.0.0, parse5@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -9877,6 +9877,14 @@ pupa@^2.0.1:
  dependencies:
    escape-goat "^2.0.0"

+purgecss-from-html@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss-from-html/-/purgecss-from-html-4.0.3.tgz#28d86d3dc8292581c4ab529a77a57daf7c2dd940"
+  integrity sha512-Ipv/kXSDRBlVTWDSRq5PZoiJdFjZjlL6r/3MH42waKM524NiicyvwLlyE9XedBSCPs+Ypek6SaTd8TTeiBgCMg==
+  dependencies:
+    parse5 "^6.0.0"
+    parse5-htmlparser2-tree-adapter "^6.0.0"
+
 purgecss@^4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"