Bug 1572521 - Improve click target size of job actions ellipses

ui/css/treeherder-details-panel.css

@@ -41,44 +41,13 @@ div#tabs-panel .tab-headers {
   margin-left: 5px;
 }
 
-div#details-panel-content .navbar-nav > ul {
-  height: 32px;
-}
-
-div#details-panel-content .navbar-nav.actionbar-nav > li > a,
-div#details-panel-content .navbar-nav.actionbar-nav > li > button {
-  padding: 8px 15px;
-  line-height: 16px;
-}
-
-div#details-panel-content .navbar-nav.tab-headers > li > a,
-div#details-panel-content .navbar-nav.tab-headers > li > button {
-  padding: 8px 15px;
-  line-height: 30px;
-}
-
-div#details-panel-content .navbar-nav > li > button {
-  border: none;
-  background: transparent;
-}
-/* Use a loaded image, rather than an icon, so it needs to be slightly shorter */
-div#details-panel-content .navbar-nav > li > a#logviewer-btn {
-  line-height: 18px;
-}
-
-div#details-panel-content .navbar-nav > li > a.disabled,
-div#details-panel-content .navbar-nav > li > button.disabled,
-ul.actionbar-menu > li.disabled {
+div#details-panel-content .actionbar-nav > li > a.disabled,
+div#details-panel-content .actionbar-nav > li > button.disabled,
+ul.actionbar-menu > li > .disabled {
   cursor: not-allowed;
   text-decoration: none;
 }
 
-div#details-panel-content .navbar-nav > li.active a,
-div#details-panel-content .navbar-nav > li.active a:hover,
-div#details-panel-content .navbar-nav > li.active a:focus {
-  outline: 0;
-}
-
 div#details-panel-content .details-panel-navbar > ul.tab-headers > li {
   border-right: 1px solid #42484f;
 }
@@ -133,57 +102,24 @@ div#details-panel-content .details-panel-navbar > ul.tab-headers > li {
   min-width: 646px !important;
 }
 
-.details-panel-navbar-controls {
-  flex-wrap: nowrap;
-}
-
-.details-panel-navbar .navbar-nav {
-  display: flex;
-  flex-direction: row;
-}
-
-.details-panel-navbar .navbar-nav > li {
-  white-space: nowrap;
-}
-
-.details-panel-navbar .navbar-nav > li > a,
-.details-panel-navbar .navbar-nav > li > .btn {
+.details-panel-navbar .actionbar-nav > li > a,
+.details-panel-navbar .actionbar-nav > li > .btn {
   color: #9fa3a5;
   padding: 4px 15px;
 }
 
-div#details-panel-content .navbar-nav > li > a:hover,
-div#details-panel-content .navbar-nav > li > a:focus,
-div#details-panel-content .navbar-nav > li > button:hover,
-div#details-panel-content .navbar-nav > li > button:focus {
+div#details-panel-content .actionbar-nav > li > a:hover,
+div#details-panel-content .actionbar-nav > li > a:focus,
+div#details-panel-content .actionbar-nav > li > button:hover,
+div#details-panel-content .actionbar-nav > li > button:focus {
   background-color: #1e252b;
   color: #d3d8da;
 }
 
-div#details-panel-content .navbar-nav > li > a:active,
-div#details-panel-content .navbar-nav > li > button:active {
-  background-color: #000;
-}
-
-div#details-panel-content .navbar-nav > li > a.disabled:active,
-div#details-panel-content .navbar-nav > li > button.disabled:active {
-  background-color: #1e252b;
-}
-
 .details-panel-navbar .actionbar-nav {
   flex: auto;
 }
 
-div#details-panel-content .details-panel-navbar .navbar-nav > li.active a,
-div#details-panel-content .details-panel-navbar .navbar-nav > li.active a:hover,
-div#details-panel-content .details-panel-navbar .navbar-nav > li.active a:focus,
-div#details-panel-content .details-panel-navbar > li.active a,
-div#details-panel-content .details-panel-navbar > li.active a:hover,
-div#details-panel-content .details-panel-navbar > li.active a:focus {
-  background-color: #1a4666;
-  color: #eef0f2;
-}
-
 .tab-header-tabs > li.selected-tab {
   background-color: #1a4666;
   color: #eef0f2;
@@ -219,12 +155,6 @@ div#details-panel-content .details-panel-navbar > li.active a:focus {
   flex-flow: row;
 }
 
-#summary-panel {
-  background-color: #fff;
-  display: flex;
-  flex-flow: column;
-}
-
 #job-details-actionbar {
   min-height: 33px;
 }
@@ -233,6 +163,16 @@ div#details-panel-content .details-panel-navbar > li.active a:focus {
  * action bar
  */
 
+.actionbar-nav-btn {
+  cursor: pointer;
+  padding: 5px 15px;
+  color: #9fa3a5;
+}
+
+.actionbar-nav-btn.disabled {
+  cursor: not-allowed;
+}
+
 .action-bar-spin {
   animation: action-bar-spin 0.7s;
 }
@@ -246,38 +186,6 @@ div#details-panel-content .details-panel-navbar > li.active a:focus {
   }
 }
 
-.actionbar-nav {
-  flex-direction: row;
-}
-
-.actionbar-nav .btn {
-  cursor: pointer;
-}
-
-.actionbar-nav > li {
-  /* Override padding on all icons to keep compact */
-  padding: 0 !important;
-}
-
-.actionbar-menu {
-  margin-top: 23px;
-  margin-left: 6px;
-  border-radius: 4px;
-  top: 0;
-  right: 0;
-  left: auto;
-}
-
-#actionbar-menu-btn {
-  padding: 8px 13px;
-  margin-right: 1px;
-}
-
-#actionbar-menu-btn:hover {
-  background-color: #262626;
-  cursor: pointer;
-}
-
 #actionbar-menu-btn:focus {
   box-shadow: none;
   border: none;
@@ -297,31 +205,9 @@ div#details-panel-content .details-panel-navbar > li.active a:focus {
  * Job details panel (left side)
  */
 
-#summary-panel-content {
-  overflow-y: auto;
-}
-
 #summary-panel {
   width: 260px;
   min-width: 260px;
-  height: 100%;
-}
-
-#summary-panel .content-spacer {
-  padding-top: 2px;
-  padding-bottom: 4px;
-}
-
-#summary-panel ul li {
-  padding: 0 0 0 5px;
-  line-height: 15px;
-  word-wrap: break-word;
-}
-
-#summary-panel ul li label {
-  padding: 0 3px 0 0;
-  margin: 2px 0;
-  font-weight: bold;
 }
 
 /*

ui/job-view/details/summary/ActionBar.jsx

@@ -401,7 +401,7 @@ class ActionBar extends React.PureComponent {
     return (
       <div id="job-details-actionbar">
         <nav className="navbar navbar-dark details-panel-navbar">
-          <ul className="nav navbar-nav actionbar-nav">
+          <ul className="nav actionbar-nav">
             <LogUrls
               logUrls={jobLogUrls}
               logViewerUrl={logViewerUrl}
@@ -411,7 +411,7 @@ class ActionBar extends React.PureComponent {
               <Button
                 id="pin-job-btn"
                 title="Add this job to the pinboard"
-                className="btn icon-blue"
+                className="actionbar-nav-btn btn icon-blue bg-transparent border-0"
                 onClick={() => pinJob(selectedJobFull)}
               >
                 <FontAwesomeIcon icon={faThumbtack} title="Pin job" />
@@ -425,7 +425,9 @@ class ActionBar extends React.PureComponent {
                     ? 'Repeat the selected job'
                     : 'Must be logged in to retrigger a job'
                 }
-                className={`btn ${user.isLoggedIn ? 'icon-green' : 'disabled'}`}
+                className={`actionbar-nav-btn btn bg-transparent border-0 ${
+                  user.isLoggedIn ? 'icon-green' : 'disabled'
+                }`}
                 disabled={!user.isLoggedIn}
                 onClick={() => this.retriggerJob([selectedJobFull])}
               >
@@ -437,6 +439,7 @@ class ActionBar extends React.PureComponent {
                 <li key={`reftest-${jobLogUrl.id}`}>
                   <a
                     title="Launch the Reftest Analyzer in a new window"
+                    className="actionbar-nav-btn"
                     target="_blank"
                     rel="noopener noreferrer"
                     href={getReftestUrl(jobLogUrl.url)}
@@ -456,27 +459,30 @@ class ActionBar extends React.PureComponent {
                       ? 'Cancel this job'
                       : 'Must be logged in to cancel a job'
                   }
-                  className={user.isLoggedIn ? 'hover-warning' : 'disabled'}
+                  className={`actionbar-nav-btn ${
+                    user.isLoggedIn ? 'hover-warning' : 'disabled'
+                  }`}
                   onClick={() => this.cancelJob()}
                 >
                   <FontAwesomeIcon icon={faTimesCircle} title="Cancel job" />
                 </Button>
               </li>
             )}
-          </ul>
-          <ul className="nav navbar-right">
-            <li className="dropdown">
+            <li className="dropdown ml-auto">
               <Button
                 id="actionbar-menu-btn"
                 title="Other job actions"
                 aria-haspopup="true"
                 aria-expanded="false"
-                className="btn btn-sm dropdown-toggle bg-transparent border-0 pr-2 py-0 m-0"
+                className="btn actionbar-nav-btn btn-sm dropdown-toggle bg-transparent text-light border-0 pr-2 py-2 m-0"
                 data-toggle="dropdown"
               >
                 <FontAwesomeIcon icon={faEllipsisH} title="Other job actions" />
               </Button>
-              <ul className="dropdown-menu actionbar-menu" role="menu">
+              <ul
+                className="dropdown-menu actionbar-menu dropdown-menu-right"
+                role="menu"
+              >
                 <li>
                   <span
                     id="backfill-btn"
@@ -495,7 +501,7 @@ class ActionBar extends React.PureComponent {
                       <a
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="dropdown-item"
+                        className="dropdown-item pl-4"
                         href={getInspectTaskUrl(
                           selectedJobFull.taskcluster_metadata.task_id,
                         )}

ui/job-view/details/summary/ClassificationsPanel.jsx

@@ -18,7 +18,7 @@ export default function ClassificationsPanel(props) {
 
   return (
     <React.Fragment>
-      <li>
+      <li className="ml-1">
         <span title={classificationName.name}>
           <FontAwesomeIcon
             icon={icon}
@@ -39,7 +39,7 @@ export default function ClassificationsPanel(props) {
         )}
       </li>
       {classification.text.length > 0 && (
-        <li>
+        <li className="ml-1">
           <em>
             <RevisionLinkify repo={currentRepo}>
               {classification.text}
@@ -47,13 +47,13 @@ export default function ClassificationsPanel(props) {
           </em>
         </li>
       )}
-      <li className="revision-comment">
+      <li className="revision-comment ml-1">
         {new Date(classification.created).toLocaleString(
           'en-US',
           longDateFormat,
         )}
       </li>
-      <li className="revision-comment">{classification.who}</li>
+      <li className="revision-comment ml-1">{classification.who}</li>
     </React.Fragment>
   );
 }

ui/job-view/details/summary/LogUrls.jsx

@@ -53,10 +53,10 @@ export default function LogUrls(props) {
           </a>
         </li>
       ))}
-      <li>
-        {!logUrls.length && (
+      {!logUrls.length && (
+        <li>
           <Button
-            className="logviewer-btn disabled"
+            className="logviewer-btn disabled bg-transparent border-0"
             title="No logs available for this job"
             aria-label="No logs available for this job"
           >
@@ -66,8 +66,8 @@ export default function LogUrls(props) {
               className="logviewer-icon"
             />
           </Button>
-        )}
-      </li>
+        </li>
+      )}
 
       {logUrls.map(jobLogUrl => (
         <li key={`raw-${jobLogUrl.id}`}>
@@ -85,7 +85,7 @@ export default function LogUrls(props) {
       {!logUrls.length && (
         <li>
           <Button
-            className="disabled raw-log-icon text-white-50"
+            className="disabled raw-log-icon text-white-50 bg-transparent border-0"
             title="No logs available for this job"
             aria-label="No logs available for this job"
           >

ui/job-view/details/summary/StatusPanel.jsx

@@ -6,8 +6,8 @@ function StatusPanel(props) {
   const shadingClass = `result-status-shading-${selectedJobFull.resultStatus}`;
 
   return (
-    <li id="result-status-pane" className={`small ${shadingClass}`}>
-      <div>
+    <li id="result-status-pane" className={`small ${shadingClass} p-0`}>
+      <div className="ml-1">
         <strong>Result:</strong>
         <span> {selectedJobFull.result}</span>
       </div>

ui/job-view/details/summary/SummaryPanel.jsx

@@ -48,34 +48,32 @@ class SummaryPanel extends React.PureComponent {
           user={user}
         />
         <div id="summary-panel-content">
-          <div>
-            {jobDetailLoading && (
-              <div className="overlay">
-                <div>
-                  <FontAwesomeIcon
-                    icon={faSpinner}
-                    pulse
-                    className="th-spinner-lg"
-                    title="Loading..."
-                  />
-                </div>
-              </div>
-            )}
-
-            <ul className="list-unstyled">
-              {latestClassification && (
-                <ClassificationsPanel
-                  job={selectedJobFull}
-                  classification={latestClassification}
-                  classificationMap={classificationMap}
-                  bugs={bugs}
-                  currentRepo={currentRepo}
+          {jobDetailLoading && (
+            <div className="overlay">
+              <div>
+                <FontAwesomeIcon
+                  icon={faSpinner}
+                  pulse
+                  className="th-spinner-lg"
+                  title="Loading..."
                 />
-              )}
-              <StatusPanel selectedJobFull={selectedJobFull} />
-              <JobInfo job={selectedJobFull} extraFields={logStatus} />
-            </ul>
-          </div>
+              </div>
+            </div>
+          )}
+
+          <ul className="list-unstyled">
+            {latestClassification && (
+              <ClassificationsPanel
+                job={selectedJobFull}
+                classification={latestClassification}
+                classificationMap={classificationMap}
+                bugs={bugs}
+                currentRepo={currentRepo}
+              />
+            )}
+            <StatusPanel selectedJobFull={selectedJobFull} />
+            <JobInfo job={selectedJobFull} extraFields={logStatus} />
+          </ul>
         </div>
       </div>
     );

ui/shared/JobInfo.jsx

@@ -44,7 +44,7 @@ export default class JobInfo extends React.PureComponent {
     const timeFields = getTimeFields(job);
 
     return (
-      <ul id="job-info" className="list-unstyled">
+      <ul id="job-info" className="list-unstyled ml-1">
         <li className="small">
           <strong>Job: </strong>
           {showJobFilters ? (