Bug 1408100 - Upgrade to Bootstrap 4

This adds the upgrade to Bootstrap 4, and some basic changes and some CSS tweaks we needed to keep out UI consistent. The simpler changes are things like: * Classes that were renamed * Adding classes that are now needed (dropdown-item, etc) * Change an item from a button to a span * Changing order of items (modal header close button, etc) * CSS class syntax changes The other changes are lots of CSS padding, margin, font and other spacing tweaks.
mozilla · Nov 9, 2017 · 51dc3cc · 51dc3cc
1 parent 008cf0e
commit 51dc3cc
Show file tree

Hide file tree

Showing 53 changed files with 742 additions and 573 deletions.
diff --git a/neutrino-custom/base.js b/neutrino-custom/base.js
@@ -33,7 +33,7 @@ module.exports = neutrino => {
         // Include files from node_modules in the separate, more-cacheable vendor chunk:
         const jsDeps = [
             'angular', 'angular-cookies', 'angular-local-storage', 'angular-resource',
-            'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular-ui-bootstrap',
+            'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular1-ui-bootstrap4',
             'angular-ui-router', 'bootstrap/dist/js/bootstrap', 'hawk', 'jquery', 'jquery.scrollto',
             'js-yaml', 'mousetrap', 'react', 'react-dom', 'taskcluster-client', 'numeral', 'metrics-graphics'];
         jsDeps.map(dep =>
@@ -166,6 +166,8 @@ module.exports = neutrino => {
             jQuery: require.resolve('jquery'),
             'window.$': require.resolve('jquery'),
             'window.jQuery': require.resolve('jquery'),
+            // Required by Bootstrap 4: https://getbootstrap.com/docs/4.0/getting-started/webpack/
+            Popper: ['popper.js', 'default'],
             React: require.resolve('react'),
             _: require.resolve('lodash'),
             treeherder: require.resolve(path.join(UI, 'js/treeherder.js')),

diff --git a/package.json b/package.json
@@ -20,9 +20,9 @@
     "angular-route": "1.5.11",
     "angular-sanitize": "1.5.11",
     "angular-toarrayfilter": "1.0.2",
-    "angular-ui-bootstrap": "1.3.3",
     "angular-ui-router": "0.4.3",
-    "bootstrap": "3.3.7",
+    "angular1-ui-bootstrap4": "2.4.22",
+    "bootstrap": "4.0.0-beta.2",
     "deepmerge": "1.5.2",
     "font-awesome": "4.7.0",
     "hawk": "6.0.2",
@@ -39,6 +39,7 @@
     "neutrino-preset-react": "4.2.3",
     "ngreact": "0.5.0",
     "numeral": "2.0.6",
+    "popper.js": "1.12.6",
     "raw-loader": "0.5.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",

diff --git a/tests/ui/unit/init.js b/tests/ui/unit/init.js
@@ -21,7 +21,7 @@ require('angular-toarrayfilter');
 require('mousetrap');
 require('js-yaml');
 require('ngreact');
-require('angular-ui-bootstrap');
+require('angular1-ui-bootstrap4');
 require('angular-marked');
 require('../../../ui/vendor/resizer.js');
 

diff --git a/ui/css/failureviewer.css b/ui/css/failureviewer.css
@@ -17,13 +17,17 @@ body {
     margin-bottom: 10px; /* Breathing space for run-data */
 }
 
-.navbar > li > a, .navbar-default > li > a, .navbar-nav > li > a {
+.nav li {
+    padding-right: 20px;
+}
+
+.navbar > li > a, .navbar-light > li > a, .navbar-nav > li > a {
     padding: 0;
     line-height: inherit;
 }
 
 #fv-logo {
-    padding: 14px 15px 0 15px;
+    padding: 6px 15px 0 10px;
     border: none;
     background: #f8f8f8;
 }

diff --git a/ui/css/logviewer.css b/ui/css/logviewer.css
@@ -24,17 +24,31 @@ body {
     padding-bottom: 8px;
 }
 
-.navbar-nav > li > a {
+.navbar-light {
+    background-color: #f8f8f8;
+    border-color: #e7e7e7;
+    padding: 0;
+}
+
+.navbar-row {
+    flex-direction: row;
+}
+
+.navbar-row li {
+    align-self: center;
+}
+
+.navbar-row > li > a {
     padding: 10px 15px;
     font-size: 12px;
 }
 
-.navbar-nav > li > div {
+.navbar-row > li > div {
     padding: 10px 15px;
     line-height: 20px;
 }
 
-.navbar-nav > li > span {
+.navbar-row > li > span {
     line-height: 20px;
 }
 
@@ -65,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 {
@@ -142,7 +154,7 @@ div.lv-step {
     background-color: #FFF;
 }
 
-.lv-actionbtn span {
+.lv-actionbtn span, .navbar-default li > a {
     color: #777;
 }
 

diff --git a/ui/css/perf.css b/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;
@@ -261,7 +270,7 @@ to { opacity: 0; }
   flex: none;
 }
 
-.compare-form .form-group .panel {
+.compare-form .form-group .card {
   flex: none;
   width: 360px;
   height: 250px;
@@ -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,27 @@ 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;
+}