chrome/browser/resources/bluetooth_internals/bluetooth_internals.html - Issue 2538653002: bluetooth: Add sidebar and page manager for chrome://bluetooth-internals.

Side by Side Diff: chrome/browser/resources/bluetooth_internals/bluetooth_internals.html

Issue 2538653002: bluetooth: Add sidebar and page manager for chrome://bluetooth-internals. (Closed)

Patch Set: Fix header width Created 4 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « chrome/browser/resources/bluetooth_internals/bluetooth_internals.css ('k') | chrome/browser/resources/bluetooth_internals/bluetooth_internals.js » ('j') | chrome/browser/resources/bluetooth_internals/bluetooth_internals.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML>	1 <!DOCTYPE HTML>

2 <html>	2 <html>

3	3

4 <!-- TODO(crbug.com/658814): Localize strings. -->	4 <!-- TODO(crbug.com/658814): Localize strings. -->

5 <head>	5 <head>

6 <meta charset="utf-8">	6 <meta charset="utf-8">

7 <meta name="viewport" content="width=device-width, initial-scale=1">	7 <meta name="viewport" content="width=device-width, initial-scale=1">

8 <title>Bluetooth Internals</title>	8 <title>Bluetooth Internals</title>

9 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">	9 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">

10 <link rel="stylesheet" href="bluetooth_internals.css">	10 <link rel="stylesheet" href="bluetooth_internals.css">

	11

11 <link rel="import" href="chrome://resources/html/cr/ui.html">	12 <link rel="import" href="chrome://resources/html/cr/ui.html">

12 <link rel="import" href="chrome://resources/html/cr/event_target.html">	13 <link rel="import" href="chrome://resources/html/cr/event_target.html">

13 <link rel="import" href="chrome://resources/html/cr/ui/array_data_model.html">	14 <link rel="import" href="chrome://resources/html/cr/ui/array_data_model.html">

	15 <link rel="import" href="chrome://resources/html/cr/ui/focus_outline_manager.h tml">

	16 <link rel="import" href="chrome://resources/html/cr/ui/overlay.html">

	17 <link rel="import" href="chrome://resources/html/cr/ui/page_manager/page_manag er.html">

	18 <link rel="import" href="chrome://resources/html/cr/ui/page_manager/page.html" >

14 <link rel="import" href="chrome://resources/html/util.html">	19 <link rel="import" href="chrome://resources/html/util.html">

15	20

16 <script src="interfaces.js"></script>	21 <script src="interfaces.js"></script>

17 <script src="adapter_broker.js"></script>	22 <script src="adapter_broker.js"></script>

18 <script src="device_collection.js"></script>	23 <script src="device_collection.js"></script>

19 <script src="device_table.js"></script>	24 <script src="device_table.js"></script>

	25 <script src="devices_view.js"></script>

	26 <script src="sidebar.js"></script>

20 <script src="bluetooth_internals.js"></script>	27 <script src="bluetooth_internals.js"></script>

21 </head>	28 </head>

22	29

23 <body>	30 <body>

24 <header>	31 <div id="menu-btn"></div>
	ortuno 2016/12/01 06:27:03 menu-btn and overlay seem really out place semanti menu-btn and overlay seem really out place semantically. I would encourage you to look at how polymer structures an app like this [1]. I looked a bit and a couple of things stand out: - The structure has more semantic meaning: header, content, and drawer. - They do some clever things with the ordering and positioning of the drawer and overlay that could simplify our css. - They don't use media queries. Have you considered using window.mediaMatches to set the classes? It would work similarly to iron-media-query [1] https://polymerelements.github.io/app-layout/templates/getting-started/ mbrunson 2016/12/02 02:31:45 - I've added semantic tags. - Changing the order Show quoted text On 2016/12/01 06:27:03, ortuno wrote: > menu-btn and overlay seem really out place semantically. I would encourage you > to look at how polymer structures an app like this [1]. I looked a bit and a > couple of things stand out: > > - The structure has more semantic meaning: header, content, and drawer. > - They do some clever things with the ordering and positioning of the drawer > and overlay that could simplify our css. > - They don't use media queries. Have you considered using window.mediaMatches > to set the classes? It would work similarly to iron-media-query > > [1] https://polymerelements.github.io/app-layout/templates/getting-started/ - I've added semantic tags. - Changing the ordering removed some CSS rules. - What's the advantage of window.matchMedia? We would still have the CSS classes to handle small screen widths in addition to new JS code to manage. Why not just let the browser handle it with media queries?
25 <div class="title">	32 <div id="sidebar">

26 Bluetooth Internals	33 <h1>Bluetooth Internals</h1>

	34 <ul role="tablist">

	35 <li class="selected" data-page-name="devices">Devices</li>
	ortuno 2016/12/01 06:27:03 Would it make sense to just set the title based on Would it make sense to just set the title based on the selected page? That way you don't have to repeat the title on each page. mbrunson 2016/12/02 02:31:45 The menu button is now a part of the page header. Show quoted text On 2016/12/01 06:27:03, ortuno wrote: > Would it make sense to just set the title based on the selected page? That way > you don't have to repeat the title on each page. The menu button is now a part of the page header. I've separated the Page concept from its contents. So, there is now a DevicesPage and a DevicesView. In the next patch, I'll make a generic Page superclass to handle setting up the header for each page.
	36 </ul>

	37 </div>

	38 <div id="overlay"></div>

	39 <div id="page-container">

	40 <div id="devices">

	41 <header>

	42 <h1>Devices</h1>

	43 </header>

27 </div>	44 </div>

28 </header>	45 </div>
	ortuno 2016/12/01 06:27:03 https://developer.mozilla.org/en-US/docs/Web/Guide https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_a... Please use elements with more semantic meaning e.g. <aside> for the sidebar, <button> for the clickable elements, etc. mbrunson 2016/12/02 02:31:45 Done. Show quoted text On 2016/12/01 06:27:03, ortuno wrote: > https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_a... > > Please use elements with more semantic meaning e.g. <aside> for the sidebar, > <button> for the clickable elements, etc. Done.
29 </body>	46 </body>

30	47

31 <template id="table-template">	48 <template id="table-template">

32 <table>	49 <table>

33 <thead>	50 <thead>

34 <tr>	51 <tr>

35 <th data-field="name_for_display">Name</th>	52 <th data-field="name_for_display">Name</th>

36 <th data-field="address">Address</th>	53 <th data-field="address">Address</th>

37 <th data-field="rssi.value">Latest RSSI</th>	54 <th data-field="rssi.value">Latest RSSI</th>

38 <th data-field="services.length">Services</th>	55 <th data-field="services.length">Services</th>

39 <th data-field="is_gatt_connected">GATT Connection State</th>	56 <th data-field="is_gatt_connected">GATT Connection State</th>

40 </tr>	57 </tr>

41 </thead>	58 </thead>

42 <tbody class="table-body">	59 <tbody>

43 </tbody>	60 </tbody>

44 </table>	61 </table>

45 </template>	62 </template>

46	63

47 </html>	64 </html>

OLD	NEW