Bug 1408100 - Upgrade to Bootstrap 4 (Trickier customizations)

These aren't all THAT tricky.  But this required more than just adding
a class that Bootstrap provided.  All the pixel-peeping to make
things look presentable.

Note: This is not pixel-perfect with Bootstrap 3.x.  I got it to where
I think it looks good, but didn't go through extreme measures to
keep everything identical.

ui/css/logviewer.css

@@ -79,12 +79,10 @@ body {
 }
 
 .lv-line-no {
-    width: 3em;
-}
-
-.lv-line-no.label {
-    border-radius: 0px;
-    margin: 0em 0.6em 0em 0em;
+    width: 4em;
+    padding: 2px 1px 4px 5px;
+    border-radius: 0;
+    margin: 0 0.2em 0 0;
 }
 
 .lv-error-line {
@@ -156,7 +154,7 @@ div.lv-step {
     background-color: #FFF;
 }
 
-.lv-actionbtn span {
+.lv-actionbtn span, .navbar-default li > a {
     color: #777;
 }
 

ui/css/perf.css

@@ -30,6 +30,10 @@ to { opacity: 0; }
     background: #f8f8f8;
 }
 
+login {
+    align-self: center;
+}
+
 #graph-chooser { flex: none; width: 240px; padding: 8px; }
 
 #data-display { flex: auto; }
@@ -143,6 +147,10 @@ to { opacity: 0; }
   font-weight: bold;
 }
 
+.subtest-header th {
+    padding: 5px;
+}
+
 .subtest-improvement {
   background: green;
   color: white;
@@ -195,7 +203,7 @@ to { opacity: 0; }
 .btn-group-vertical {
   flex: none;
   position: relative;
-  top: 310px;
+  top: 115px;
   padding: 3px;
 }
 
@@ -215,7 +223,7 @@ to { opacity: 0; }
 
 .choose-test-list {
   margin-top: 8px;
-  height: 200px;
+  height: 85px;
 }
 
 .test-loading-placeholder {
@@ -225,6 +233,11 @@ to { opacity: 0; }
 
 /* Compare interface stuff */
 
+ph-compare-table hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 .push-information {
     font-size: 18px;
     color: #777;
@@ -245,10 +258,6 @@ to { opacity: 0; }
   flex-flow: row;
 }
 
-.centered-element {
-  flex: none;
-}
-
 .compare-form {
   align: center;
   display: flex;
@@ -275,9 +284,12 @@ to { opacity: 0; }
   left: -5px;
 }
 
-.compare-form .form-group .input-group-btn {
-  flex: none;
-  width: 80px;
+.compare-form .input-group-btn button:hover {
+  background-color: darkgrey;
+}
+
+.compare-form .input-group-btn button:focus {
+  box-shadow: none;
 }
 
 .compare-table td, th {
@@ -386,10 +398,15 @@ span.compare-notsure {
     cursor: pointer;
 }
 
+.alert-summary {
+    margin-bottom: 20px;
+}
+
 .alert-summary-heading {
   display: flex;
   flex-flow: row;
   padding: 0;
+  border-bottom: 1px solid transparent;
 }
 
 .alert-summary-header-element {
@@ -399,20 +416,43 @@ span.compare-notsure {
 
 .alert-summary-title {
     flex: auto;
-    padding: 8px 4px;
+    padding: 9px 4px;
+    line-height: 19px;
 }
 
 .alert-summary-title .anchor {
     color: #333;
     font-weight: bold;
 }
 
+.alert-summary-title .dropdown {
+    vertical-align: text-bottom;
+}
+
 .alert-summary-title .icon-superscript {
   vertical-align: super;
   font-size: 0.625em;
   margin-left: -0.2em;
 }
 
+.alert-summary-title #push-dropdown {
+  padding: 0;
+  margin-bottom: -4px;
+}
+
+.alert-summary .compare-table {
+    margin-bottom: 0;
+}
+
+.alert-summary .card-body {
+    border-top: 1px solid #ddd;
+    padding: 15px;
+}
+
+.alert-summary .card-body p {
+    margin: 0 0 10px;
+}
+
 .dropdown {
     padding: 0;
     vertical-align: inherit;
@@ -430,9 +470,11 @@ span.compare-notsure {
 /* Table widths for alerts */
 td.alert-checkbox {
     width: 30px;
+    padding: 8px;
 }
 td.alert-title {
     text-align: left;
+    padding: 8px;
 }
 td.alert-value {
     width: 140px;
@@ -461,6 +503,10 @@ td.alert-confidence {
     text-decoration: line-through;
 }
 
+.alert-selects .form-group {
+    margin-right: 6px;
+}
+
 .compare-table-tooltip .tooltip-inner {
   max-width: 280px;
 }
@@ -497,3 +543,57 @@ td.alert-confidence {
 .replicate-graph .mg-category-guides line {
     stroke: #ffffff;
 }
+
+/* The paginator in angular1-ui-bootstrap4 always tries to put chevrons
+   for the prev/next buttons, but they look all messed up sizing wise.
+   The paginator SHOULD show the text of Next/Previous, but it's not, so this
+   is a work-around.*/
+li.page-item .material-icons {
+    font-size: 0;
+}
+
+li.pagination-prev .material-icons::before {
+    content: "Previous";
+    font-size: 14px;
+    font-style: normal;
+}
+
+li.pagination-next .material-icons::before {
+    content: "Next";
+    font-size: 14px;
+    font-style: normal;
+}
+
+.pagination {
+    margin: 20px 0;
+}
+
+/* angular1-ui-bootstrap4 doesn't have the little arrow at the bottom of
+   the tooltips, and they removed the element that normally was decorated
+   to show them.  So this adds them back in as an "after" element.
+ */
+[uib-tooltip-popup].tooltip.show::after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  font-size: 7px;
+}
+
+/* Top popups */
+[uib-tooltip-popup].tooltip.top::after {
+  margin-left: 47%;
+  text-align: center !important;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid black;
+}
+
+/* Left popups */
+[uib-tooltip-popup].tooltip.left::after {
+  margin-left: 100%;
+  margin-top: -27%;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid black;
+}

ui/css/treeherder-global.css

@@ -50,11 +50,11 @@ a {
   visibility: hidden;
 }
 
-/* Presently Tier menu, Similar Jobs panel */
+/* Similar Jobs panel */
 .checkbox {
   min-height: 20px;
   padding-left: 4px;
-  padding-top: 4px;
+  padding-top: 2px;
   justify-content: center;
 }
 
@@ -76,21 +76,27 @@ input[type="checkbox"] {
   cursor: not-allowed;
 }
 
-/* Spacing for menus with adjacent checkboxes */
-.checkbox-dropdown-menu {
-  padding-left: 8px;
-.dropdown-menu-right {
+/* For cases where the base Bootstrap 4 equivalent doesn't
+   work, due to our special uses.*/
+.nav-dropdown-menu-right {
     left: auto;
     right: 0;
 }
 
+.form-control:focus {
+    border: 1px solid #ced4da;
+    box-shadow: none;
 }
 
 /* Spacing for menus with adjacent icons */
 .icon-menu li a span {
   width: 20px;
 }
 
+.modal-header .close:hover {
+  cursor: pointer;
+}
+
 /*
  * Icons
  */