results.webkit.org: Fix drawer style

JonWBedard · JonWBedard · commit 5110efe2d627 · 2019-08-22T05:33:33.000Z
https://bugs.webkit.org/show_bug.cgi?id=200988 Rubber-stamped by Aakash Jain. * resultsdbpy/resultsdbpy/view/static/js/drawer.js: (Drawer): Nothing in the drawer should be selectable. (ConfigurationSelectors): Standardize text size, remove underscore from expanders. * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css: (.action:hover): Disable underline on 'links' which are actually actions (.unselectable): Make a div unselectable. * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js: (Timeline.ExpandableSeriesWithHeaderExpanderComponent): Remove underscore from expanders. Canonical link: https://commits.webkit.org/214733@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248995 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Tools/ChangeLog b/Tools/ChangeLog
@@ -1,3 +1,19 @@
+2019-08-21  Jonathan Bedard  <jbedard@apple.com>
+
+        results.webkit.org: Fix drawer style
+        https://bugs.webkit.org/show_bug.cgi?id=200988
+
+        Rubber-stamped by Aakash Jain.
+
+        * resultsdbpy/resultsdbpy/view/static/js/drawer.js:
+        (Drawer): Nothing in the drawer should be selectable.
+        (ConfigurationSelectors): Standardize text size, remove underscore from expanders.
+        * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+        (.action:hover): Disable underline on 'links' which are actually actions
+        (.unselectable): Make a div unselectable.
+        * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+        (Timeline.ExpandableSeriesWithHeaderExpanderComponent): Remove underscore from expanders.
+
 2019-08-21  Fujii Hironori  <Hironori.Fujii@sony.com>
 
         [Win][MiniBrowser] Add a progress indicator to the main window
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js b/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js
@@ -59,7 +59,7 @@ function Drawer(controls = []) {
         }
     });
 
-    return `<div class="drawer left under-topbar-with-actions" ref="${drawerRef}">
+    return `<div class="drawer left under-topbar-with-actions unselectable" ref="${drawerRef}">
             ${controls.map(control => {
                 return `<div class="list">
                         <div class="item">${control}</div>
@@ -226,7 +226,7 @@ function ConfigurationSelectors(callback) {
                     }
                 });
 
-                DOM.inject(element, `<a style="cursor: pointer;" class="text medium" ref="${expander}">+</a>
+                DOM.inject(element, `<a class="link-button text medium" ref="${expander}">+</a>
                     ${details.name} <br>
                     ${options.map(option => {
                         let isChecked = false;
@@ -275,7 +275,7 @@ function ConfigurationSelectors(callback) {
             ref.setState(configurations);
         });
 
-        return `<div ref="${ref}"></div>`;
+        return `<div style="font-size: var(--smallSize);" ref="${ref}"></div>`;
     }).join('')
 }
 
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
@@ -194,6 +194,11 @@ a:hover {
   text-decoration: underline;
 }
 
+.link-button:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .divider, hr {
   margin-block-start: 0.5em;
   margin-block-end: 0.5em;
@@ -2555,3 +2560,9 @@ pre {
 .progress-bar-container .progress-bar.error {
   background: var(--orange);
 }
+
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js b/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js
@@ -535,7 +535,7 @@ Timeline.ExpandableSeriesWithHeaderExpanderComponent = (mainSeriesWithLable, ...
         })
     }));
     return {
-        header: Timeline.ExpandableHeaderComponent(`<a href="javascript:void(0)" ref="${ref}">+</a>` + mainLabel, subLabels, composer),
+        header: Timeline.ExpandableHeaderComponent(`<a class="link-button" href="javascript:void(0)" ref="${ref}">+</a>` + mainLabel, subLabels, composer),
         series: Timeline.ExpandableSeriesComponent(mainSeries, subSerieses, composer),
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -535,7 +535,7 @@ Timeline.ExpandableSeriesWithHeaderExpanderComponent = (mainSeriesWithLable, ...`
`535`	`535`	`})`
`536`	`536`	`}));`
`537`	`537`	`return {`
`538`		- header: Timeline.ExpandableHeaderComponent(`<a href="javascript:void(0)" ref="${ref}">+</a>` + mainLabel, subLabels, composer),
	`538`	+ header: Timeline.ExpandableHeaderComponent(`<a class="link-button" href="javascript:void(0)" ref="${ref}">+</a>` + mainLabel, subLabels, composer),
`539`	`539`	`series: Timeline.ExpandableSeriesComponent(mainSeries, subSerieses, composer),`
`540`	`540`	`}`
`541`	`541`	`}`