results.webkit.org: Move drawer to the right, open by default
https://bugs.webkit.org/show_bug.cgi?id=200977
Rubber-stamped by Aakash Jain.
The drawer was both unpopular and not discoverable. After feedback from bot watchers,
moving the drawer to the right side of the screen, opening it by default and have it displace
instead of hide the main content.
* resultsdbpy/resultsdbpy/view/commit_view_unittest.py:
(CommitViewUnittest.test_drawer): Support new drawer style.
(CommitViewUnittest.test_range_slider): Ditto.
(CommitViewUnittest.test_one_line_switch): Ditto.
(CommitViewUnittest.test_branch_selection): Ditto.
* resultsdbpy/resultsdbpy/view/static/css/drawer.css: Removed.
* resultsdbpy/resultsdbpy/view/static/js/drawer.js:
(setEnableRecursive): Disable all elements underneath this one
(Drawer): Make drawer a sidebar.
* resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
(.header>.title, .topbar>.title): Overflow of titles should be hidden.
(:root): Move boldInverseColor into webkit.css.
(@media (prefers-color-scheme: dark)):
(.sidebar): Sidebars on mobile should behave like drawers.
(.sidebar.hidden): Add concept of hidden sidebar.
(.mobile-sidebar-control): Add a control to collapse sidebar that only exists on mobile.
(.mobile-sidebar-control.display):
(.main.under-topbar-with-actions):
(@media screen and (min-width: 600px) and (orientation: landscape)):
(.sidebar.left.hidden):
(.sidebar.right.hidden):
(.main.right.hidden):
(.main.left.hidden):
(@media screen and (min-width: 768px) and (orientation: landscape)):
(.sidebar.right):
(a.disabled): Add ability to disable a link.
(.desktop-control): Add a control which only exists on desktop.
* resultsdbpy/resultsdbpy/view/templates/base.html: Add hamburger drawer-button for mobile.
* resultsdbpy/resultsdbpy/view/templates/commits.html: Use main since Drawer is now a sidebar.
* resultsdbpy/resultsdbpy/view/templates/documentation.html: Ditto.
* resultsdbpy/resultsdbpy/view/templates/search.html: Ditto.
* resultsdbpy/resultsdbpy/view/templates/suite_results.html: Ditto.
* resultsdbpy/resultsdbpy/view/view_routes_unittest.py:
(WebSiteTestCase.toggle_drawer): Support new drawer style.
(WebSiteTestCase.find_input_with_name): Ditto.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@249213 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Tools/ChangeLog b/Tools/ChangeLog
index 9d80603..438ad22 100644
--- a/Tools/ChangeLog
+++ b/Tools/ChangeLog
@@ -1,3 +1,50 @@
+2019-08-28 Jonathan Bedard <jbedard@apple.com>
+
+ results.webkit.org: Move drawer to the right, open by default
+ https://bugs.webkit.org/show_bug.cgi?id=200977
+
+ Rubber-stamped by Aakash Jain.
+
+ The drawer was both unpopular and not discoverable. After feedback from bot watchers,
+ moving the drawer to the right side of the screen, opening it by default and have it displace
+ instead of hide the main content.
+
+ * resultsdbpy/resultsdbpy/view/commit_view_unittest.py:
+ (CommitViewUnittest.test_drawer): Support new drawer style.
+ (CommitViewUnittest.test_range_slider): Ditto.
+ (CommitViewUnittest.test_one_line_switch): Ditto.
+ (CommitViewUnittest.test_branch_selection): Ditto.
+ * resultsdbpy/resultsdbpy/view/static/css/drawer.css: Removed.
+ * resultsdbpy/resultsdbpy/view/static/js/drawer.js:
+ (setEnableRecursive): Disable all elements underneath this one
+ (Drawer): Make drawer a sidebar.
+ * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+ (.header>.title, .topbar>.title): Overflow of titles should be hidden.
+ (:root): Move boldInverseColor into webkit.css.
+ (@media (prefers-color-scheme: dark)):
+ (.sidebar): Sidebars on mobile should behave like drawers.
+ (.sidebar.hidden): Add concept of hidden sidebar.
+ (.mobile-sidebar-control): Add a control to collapse sidebar that only exists on mobile.
+ (.mobile-sidebar-control.display):
+ (.main.under-topbar-with-actions):
+ (@media screen and (min-width: 600px) and (orientation: landscape)):
+ (.sidebar.left.hidden):
+ (.sidebar.right.hidden):
+ (.main.right.hidden):
+ (.main.left.hidden):
+ (@media screen and (min-width: 768px) and (orientation: landscape)):
+ (.sidebar.right):
+ (a.disabled): Add ability to disable a link.
+ (.desktop-control): Add a control which only exists on desktop.
+ * resultsdbpy/resultsdbpy/view/templates/base.html: Add hamburger drawer-button for mobile.
+ * resultsdbpy/resultsdbpy/view/templates/commits.html: Use main since Drawer is now a sidebar.
+ * resultsdbpy/resultsdbpy/view/templates/documentation.html: Ditto.
+ * resultsdbpy/resultsdbpy/view/templates/search.html: Ditto.
+ * resultsdbpy/resultsdbpy/view/templates/suite_results.html: Ditto.
+ * resultsdbpy/resultsdbpy/view/view_routes_unittest.py:
+ (WebSiteTestCase.toggle_drawer): Support new drawer style.
+ (WebSiteTestCase.find_input_with_name): Ditto.
+
2019-08-28 Keith Rollin <krollin@apple.com>
Remove support for macOS < 10.13 (part 2)
diff --git a/Tools/resultsdbpy/resultsdbpy/view/commit_view_unittest.py b/Tools/resultsdbpy/resultsdbpy/view/commit_view_unittest.py
index 7ce3e49..5a1a0f0 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/commit_view_unittest.py
+++ b/Tools/resultsdbpy/resultsdbpy/view/commit_view_unittest.py
@@ -64,10 +64,10 @@
def test_drawer(self, driver, **kwargs):
driver.get(self.URL + '/commits')
time.sleep(.2)
- self.assertNotIn('display', driver.find_element_by_class_name('drawer').get_attribute('class'))
+ self.assertNotIn('hidden', driver.find_element_by_class_name('sidebar').get_attribute('class'))
- self.toggle_drawer(driver, assert_displayed=True)
self.toggle_drawer(driver, assert_displayed=False)
+ self.toggle_drawer(driver, assert_displayed=True)
@WaitForDockerTestCase.mock_if_no_docker(mock_redis=FakeStrictRedis, mock_cassandra=MockCassandraContext)
@WebSiteTestCase.decorator()
@@ -158,8 +158,6 @@
self.assertEqual(5, len(commits['safari']))
self.assertEqual(5, len(commits['webkit']))
- self.toggle_drawer(driver, assert_displayed=True)
-
controls = self.find_input_with_name(driver, 'Limit:').find_elements_by_tag_name('input')
self.assertEqual(3, len(controls))
input = [control for control in controls if control.get_attribute('type') == 'number'][0]
@@ -199,8 +197,6 @@
changelog = commits['safari'][0].find_element_by_tag_name('div')
self.assertEqual(line_1, changelog.text)
- self.toggle_drawer(driver, assert_displayed=True)
-
controls = self.find_input_with_name(driver, 'One-line:').find_elements_by_tag_name('span')
self.assertEqual(1, len(controls))
input = [control for control in controls if control.get_attribute('class') == 'slider'][0]
@@ -235,8 +231,6 @@
self.assertEqual(5, len(commits['safari']))
self.assertEqual(5, len(commits['webkit']))
- self.toggle_drawer(driver, assert_displayed=True)
-
controls = self.find_input_with_name(driver, 'Branch').find_elements_by_tag_name('select')
self.assertEqual(1, len(controls))
Select(controls[0]).select_by_visible_text('safari-606-branch')
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/css/drawer.css b/Tools/resultsdbpy/resultsdbpy/view/static/css/drawer.css
deleted file mode 100644
index 1324f98..0000000
--- a/Tools/resultsdbpy/resultsdbpy/view/static/css/drawer.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-:root {
- --boldInverseColor: var(--black);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --boldInverseColor: var(--white);
- }
-}
-
-.drawer.left.display {
- width: 300px;
-}
-
-.drawer-control {
- left: 0;
- top: 50%;
- height: 80px;
- width: 15px;
- cursor: pointer;
- -webkit-backdrop-filter: blur(5px) brightness(88%);
- backdrop-filter: blur(5px) brightness(88%);
- position: fixed;
- transition: 0.5s;
- border: none;
- z-index: calc(var(--topZIndex) + 1);
-}
-
-.drawer-control:hover {
- background-color: rgba(157, 204, 254, 0.74902);
-}
-
-.collapsed {
- left: 0;
- background-color: var(--blurBackgroundColorGrey);
- box-shadow: 0px 0px 5px 1px var(--grey);
-}
-
-.collapsed>div {
- width: 0;
- height: 0;
- position: absolute;
- top: 32px;
- left: 2px;
- border-top: 10px solid transparent;
- border-bottom: 10px solid transparent;
- border-left: 10px solid black;
-}
-
-.extended {
- left: 285px;
- background-color: var(--blurBackgroundColor);
-}
-
-.extended>div {
- width: 0;
- height: 0;
- position: absolute;
- top: 32px;
- left: 2px;
- border-bottom: 10px solid transparent;
- border-right:10px solid black;
- border-top: 10px solid transparent;
-}
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js b/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js
index 2388b07..9de241e 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js
@@ -25,29 +25,68 @@
import {QueryModifier} from '/assets/js/common.js';
import {Configuration} from '/assets/js/configuration.js'
+function setEnableRecursive(element, state) {
+ element.disabled = !state;
+ if (!state)
+ element.classList.add("disabled");
+ else
+ element.classList.remove("disabled");
+
+ for (let node of element.children)
+ setEnableRecursive(node, state);
+}
+
function Drawer(controls = []) {
- const COLLAPSED = false;
- const EXTENDED = true;
- var drawerState = COLLAPSED;
+ const HIDDEN = false;
+ const VISIBLE = true;
+ let drawerState = VISIBLE;
+ let main = null;
+
+ const sidebarControl = document.getElementsByClassName('mobile-sidebar-control')[0];
+ sidebarControl.classList.add('display');
const drawerRef = REF.createRef({
state: drawerState,
onStateUpdate: (element, state) => {
- if (state)
- element.classList.add("display");
- else
- element.classList.remove("display");
+ if (state) {
+ element.classList.remove("hidden");
+ if (main)
+ main.classList.remove("hidden");
+ } else {
+ element.classList.add("hidden");
+ if (main)
+ main.classList.add("hidden");
+ }
+
+ for (let node of element.children) {
+ if (node.classList.contains("list"))
+ setEnableRecursive(node, state);
+ }
+ },
+ onElementMount: (element) => {
+ let candidates = document.getElementsByClassName("main");
+ if (candidates.length)
+ main = candidates[0];
+
+ sidebarControl.onclick = () => {
+ if (element.style.display)
+ element.style.display = null;
+ else
+ element.style.display = 'block';
+ }
}
});
+
const drawerControllerRef = REF.createRef({
state: drawerState,
onStateUpdate: (element, state) => {
if (state) {
- element.classList.remove("collapsed");
- element.classList.add("extended");
- } else {
- element.classList.remove("extended");
- element.classList.add("collapsed");
+ element.innerHTML = 'Collapse >';
+ element.style.textAlign = 'center';
+ }
+ else{
+ element.innerHTML = '<';
+ element.style.textAlign = 'left';
}
},
onElementMount: (element) => {
@@ -59,14 +98,14 @@
}
});
- return `<div class="drawer left under-topbar-with-actions unselectable" ref="${drawerRef}">
+ return `<div class="sidebar right under-topbar-with-actions unselectable" ref="${drawerRef}">
+ <button class="button desktop-control" ref="${drawerControllerRef}" style="width:96%; margin: 10px 2% 10px 2%;"></button>
${controls.map(control => {
return `<div class="list">
<div class="item">${control}</div>
</div>`;
}).join('')}
- </div>
- <button class="drawer-control collapsed" ref="${drawerControllerRef}"><div></div></button>`;
+ </div>`;
}
function BranchSelector(callback) {
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
index aa3b944..3db25d5 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
@@ -91,6 +91,7 @@
--sectionPaddingSize: 12px 24px;
--formLabelPadding: 14px;
--topZIndex: 100;
+ --boldInverseColor: var(--black);
}
@media screen and (min-width: 600px) and (orientation: landscape) {
@@ -122,6 +123,7 @@
--borderColorInlineElement: var(--greyDarker);
--borderColorSection: var(--blackDark);
--borderColorHard: var(--blackDarker);
+ --boldInverseColor: var(--white);
}
}
@@ -226,6 +228,7 @@
font-size: var(--largeSize);
font-weight: 400;
flex: auto;
+ overflow: hidden;
}
.header>.title>.logo, .topbar>.title>.logo {
@@ -915,6 +918,15 @@
position: fixed;
border-right: 1px solid var(--borderColorSection);
overflow-y: auto;
+ min-width: 250px;
+ background-color: var(--blurBackgroundColor);
+ -webkit-backdrop-filter: blur(5px) brightness(88%);
+ backdrop-filter: blur(5px) brightness(88%);
+ z-index: var(--topZIndex);
+ right: 0;
+}
+.sidebar.hidden {
+ display: none;
}
.sidebar>.header {
@@ -928,6 +940,14 @@
padding-left: var(--colPaddingSize);
}
+.mobile-sidebar-control {
+ display: none;
+ float: right;
+}
+.mobile-sidebar-control.display {
+ display: block;
+}
+
@media (prefers-color-scheme: dark) {
.sidebar {
background-color: var(--blurBackgroundColorDark);
@@ -953,16 +973,35 @@
overflow: auto;
}
+.main.under-topbar-with-actions {
+ margin-top: calc(12px * 2 + var(--largeSize) * 1.3 + var(--smallSize) * 1.3 + 12px * 2);
+}
+
@media screen and (min-width: 600px) and (orientation: landscape) {
.sidebar {
- width: 299px;
display: block;
+ width: 299px;
+ z-index: 0;
+ left: 0;
+ right: unset;
+ }
+ .sidebar.left.hidden {
+ display: block;
+ left: -249px;
+ }
+ .sidebar.right.hidden {
+ display: block;
+ right: -249px;
}
.sidebar.under-topbar-with-actions {
height: calc(100% - 12px * 2 - var(--largeSize) * 1.3);
bottom: 0;
}
+ .mobile-sidebar-control.display {
+ display: none;
+ }
+
.main {
margin-left: 299px;
width: calc(100% - 299px);
@@ -972,6 +1011,15 @@
margin-left: 0px;
margin-right: 299px;
}
+ .main.right.hidden {
+ margin-left: 50px;
+ width: calc(100% - 50px);
+ }
+ .main.left.hidden {
+ margin-left: 0;
+ margin-right: 50px;
+ width: calc(100% - 50px);
+ }
.main.under-topbar-with-actions {
margin-top: calc(12px * 2 + var(--largeSize) * 1.3);
@@ -980,8 +1028,19 @@
@media screen and (min-width: 768px) and (orientation: landscape) {
.sidebar {
- width: 310px;
display: block;
+ width: 310px;
+ z-index: 0;
+ left: 0;
+ right: unset;
+ }
+ .sidebar.left.hidden {
+ display: block;
+ left: -260px;
+ }
+ .sidebar.right.hidden {
+ display: block;
+ right: -260px;
}
.sidebar.under-topbar-with-actions {
height: calc(100% - 12px * 2 - var(--largeSize) * 1.3);
@@ -1004,8 +1063,7 @@
}
.sidebar.right {
- border-right: 0px;
- border-left: 1px;
+ left: unset;
right: 0;
}
@@ -1753,6 +1811,11 @@
}
}
+a.disabled {
+ color: var(--grey);
+ pointer-events: none;
+}
+
/* timeline */
.timeline {
display: flex;
@@ -2594,3 +2657,13 @@
-webkit-user-select: none;
user-select: none;
}
+
+.desktop-control {
+ display: none;
+}
+
+@media screen and (min-width: 600px) and (orientation: landscape) {
+ .desktop-control {
+ display: block;
+ }
+}
diff --git a/Tools/resultsdbpy/resultsdbpy/view/templates/base.html b/Tools/resultsdbpy/resultsdbpy/view/templates/base.html
index 25bebbb..0c0cd0e 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/templates/base.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/templates/base.html
@@ -35,7 +35,10 @@
<body>
<div class="header fixed">
<div class="title">
- <div class="text large block">{{site_title}}</div>
+ <div class="text large block" style="width: calc(100% - 44px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
+ {{site_title}}
+ </div>
+ <button style="width: 44px" class="button mobile-sidebar-control">☰</button>
</div>
<div class="actions">
<div class="list">
diff --git a/Tools/resultsdbpy/resultsdbpy/view/templates/commits.html b/Tools/resultsdbpy/resultsdbpy/view/templates/commits.html
index 1e207e3..cde3b37 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/templates/commits.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/templates/commits.html
@@ -26,7 +26,6 @@
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="assets/css/commit.css">
-<link rel="stylesheet" type="text/css" href="assets/css/drawer.css">
<script type="module">
import {REF, DOM} from '/library/js/Ref.js';
@@ -104,14 +103,17 @@
LimitSlider(() => {table.reload()}),
OneLineSwitch(),
BranchSelector(() => {table.reload()}),
-])} ${table}`);
+])}
+<div class="main left under-topbar-with-actions">
+ <div class="content">${table}</div>
+</div>`);
</script>
{% endblock %}
{% block content %}
-<div class="content" id="app">
+<div id="app">
</div>
diff --git a/Tools/resultsdbpy/resultsdbpy/view/templates/documentation.html b/Tools/resultsdbpy/resultsdbpy/view/templates/documentation.html
index eca2fc2..c097321 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/templates/documentation.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/templates/documentation.html
@@ -24,11 +24,10 @@
-->
{% extends "base.html" %}
{% block head %}
-<link rel="stylesheet" type="text/css" href="assets/css/drawer.css">
<script type="module">
-import {DOM} from '/library/js/Ref.js';
+import {DOM, REF} from '/library/js/Ref.js';
import {Expectations} from '/assets/js/timeline.js';
function jumpIdUnderHeader(id) {
@@ -495,9 +494,23 @@
}
}
+const sidebarControl = document.getElementsByClassName('mobile-sidebar-control')[0];
+sidebarControl.classList.add('display');
+
+const sidebarRef = REF.createRef({
+ onElementMount: (element) => {
+ sidebarControl.onclick = () => {
+ if (element.style.display)
+ element.style.display = null;
+ else
+ element.style.display = 'block';
+ }
+ }
+});
+
DOM.inject(
document.getElementById('app'),
- `<div class="sidebar under-topbar-with-actions">
+ `<div class="sidebar under-topbar-with-actions" ref="${sidebarRef}">
<div class="list">
${Object.keys(documentation).map((primary) => {
return `<div class="item">
diff --git a/Tools/resultsdbpy/resultsdbpy/view/templates/search.html b/Tools/resultsdbpy/resultsdbpy/view/templates/search.html
index 37ed192..63a9ade 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/templates/search.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/templates/search.html
@@ -25,7 +25,6 @@
{% extends "base.html" %}
{% block head %}
-<link rel="stylesheet" type="text/css" href="assets/css/drawer.css">
<link rel="stylesheet" type="text/css" href="assets/css/search.css">
<link rel="stylesheet" type="text/css" href="assets/css/timeline.css">
<link rel="stylesheet" type="text/css" href="assets/css/tooltip.css">
@@ -227,33 +226,37 @@
ConfigurationSelectors(() => {view.reload()}),
])}
- ${SearchBar(function () {
- const splitURL = document.URL.split('?');
- let params = queryToParams(splitURL[1]);
- if (!params.suite)
- params.suite = [];
- if (!params.test)
- params.test = [];
+ <div class="main left under-topbar-with-actions">
+ <div class="content">
+ ${SearchBar(function () {
+ const splitURL = document.URL.split('?');
+ let params = queryToParams(splitURL[1]);
+ if (!params.suite)
+ params.suite = [];
+ if (!params.test)
+ params.test = [];
- for (let i = 0; i < arguments.length; i++) {
- let needToAdd = true;
- if (!needToAdd)
- continue;
+ for (let i = 0; i < arguments.length; i++) {
+ let needToAdd = true;
+ if (!needToAdd)
+ continue;
- let child = {
- suite: arguments[i].suite,
- test: arguments[i].test,
- timeline: new TimelineFromEndpoint(`api/results/${arguments[i].suite}/${arguments[i].test}`),
- }
+ let child = {
+ suite: arguments[i].suite,
+ test: arguments[i].test,
+ timeline: new TimelineFromEndpoint(`api/results/${arguments[i].suite}/${arguments[i].test}`),
+ }
- view.ref.setState({prepending: [child]});
- params.suite.push(child.suite);
- params.test.push(child.test);
- }
- const queryString = paramsToQuery(params);
- window.history.pushState(queryString, '', splitURL[0] + '?' + queryString);
- }, SUITES)}
- ${view}`
+ view.ref.setState({prepending: [child]});
+ params.suite.push(child.suite);
+ params.test.push(child.test);
+ }
+ const queryString = paramsToQuery(params);
+ window.history.pushState(queryString, '', splitURL[0] + '?' + queryString);
+ }, SUITES)}
+ ${view}
+ </div>
+ </div>`
);
</script>
@@ -261,7 +264,7 @@
{% endblock %}
{% block content %}
-<div class="content" id="app">
+<div id="app">
</div>
{% endblock %}
diff --git a/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html b/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html
index 48d3bec..e3ff8a0 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html
@@ -25,7 +25,6 @@
{% extends "base.html" %}
{% block head %}
-<link rel="stylesheet" type="text/css" href="assets/css/drawer.css">
<link rel="stylesheet" type="text/css" href="assets/css/search.css">
<link rel="stylesheet" type="text/css" href="assets/css/timeline.css">
<link rel="stylesheet" type="text/css" href="assets/css/tooltip.css">
@@ -170,15 +169,18 @@
}),
ConfigurationSelectors(() => {view.reload()}),
])}
-${view}
-`);
+<div class="main left under-topbar-with-actions">
+ <div class="content">
+ ${view}
+ </div>
+</div>`);
</script>
{% endblock %}
{% block content %}
-<div class="content" id="app">
+<div id="app">
</div>
{% endblock %}
diff --git a/Tools/resultsdbpy/resultsdbpy/view/view_routes_unittest.py b/Tools/resultsdbpy/resultsdbpy/view/view_routes_unittest.py
index ae4d5c8..e4a24e4 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/view_routes_unittest.py
+++ b/Tools/resultsdbpy/resultsdbpy/view/view_routes_unittest.py
@@ -41,15 +41,16 @@
KEYSPACE = 'web_site_testcase_keyspace'
def toggle_drawer(self, driver, assert_displayed=None):
- driver.find_element_by_class_name('drawer-control').click()
+ sidebar = driver.find_element_by_class_name('sidebar')
+ sidebar.find_elements_by_tag_name('button')[0].click()
time.sleep(.5)
if assert_displayed:
- self.assertIn('display', driver.find_element_by_class_name('drawer').get_attribute('class'))
+ self.assertNotIn('hidden', sidebar.get_attribute('class'))
elif assert_displayed is False:
- self.assertNotIn('display', driver.find_element_by_class_name('drawer').get_attribute('class'))
+ self.assertIn('hidden', sidebar.get_attribute('class'))
def find_input_with_name(self, driver, name):
- control = [label.parent for label in driver.find_element_by_class_name('drawer').find_elements_by_tag_name('div') if label.find_element_by_tag_name('label').text == name][0]
+ control = [label.parent for label in driver.find_element_by_class_name('sidebar').find_elements_by_tag_name('div') if label.find_element_by_tag_name('label').text == name][0]
self.assertIsNotNone(control)
return control
@@ -102,7 +103,7 @@
driver.get(self.URL)
self.assertEqual(driver.title, 'Results Database')
title = driver.find_element_by_class_name('title').find_element_by_tag_name('div')
- self.assertEqual(title.text, 'Results Database')
+ self.assertEqual(title.text.lstrip().rstrip(), 'Results Database')
@WaitForDockerTestCase.mock_if_no_docker(mock_redis=FakeStrictRedis, mock_cassandra=MockCassandraContext)
@WebSiteTestCase.decorator()
