devtools-panel.html - Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome

Delta Between Two Patch Sets: devtools-panel.html

Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome (Closed)

Left Patch Set: Created Jan. 7, 2015, 1:36 p.m.

Right Patch Set: Added new request types Created Jan. 28, 2016, 7:37 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
	1 <!DOCTYPE html>

	2 <!--

	3 - This file is part of Adblock Plus <https://adblockplus.org/>,

	4 - Copyright (C) 2006-2016 Eyeo GmbH

	5 -

	6 - Adblock Plus is free software: you can redistribute it and/or modify

	7 - it under the terms of the GNU General Public License version 3 as

	8 - published by the Free Software Foundation.

	9 -

	10 - Adblock Plus is distributed in the hope that it will be useful,

	11 - but WITHOUT ANY WARRANTY; without even the implied warranty of

	12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

	13 - GNU General Public License for more details.

	14 -

	15 - You should have received a copy of the GNU General Public License

	16 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.

	17 -->

	18

1 <html>	19 <html>
Thomas Greiner 2015/01/12 10:37:54 License header and document type are missing License header and document type are missing Sebastian Noack 2015/01/12 11:55:07 You are right. I wasn't aware that we add the GPL Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > License header You are right. I wasn't aware that we add the GPL header also to HTML files. Show quoted text > and document type are missing It's optional in HTML5. And I personally prefer to omit. But it seems that we usually still specify the doctype declaration. So in favor of consistence, I added it. Thomas Greiner 2015/01/16 18:17:21 Thank you. Just one more thing: We changed the pro Show quoted text On 2015/01/12 11:55:07, Sebastian Noack wrote: > On 2015/01/12 10:37:54, Thomas Greiner wrote: > > License header > You are right. I wasn't aware that we add the GPL header also to HTML files. > > > and document type are missing > It's optional in HTML5. And I personally prefer to omit. But it seems that we > usually still specify the doctype declaration. So in favor of consistence, I > added it. Thank you. Just one more thing: We changed the protocol in the URL to "https" in the other license headers. Sebastian Noack 2015/02/04 14:17:29 Done. Show quoted text On 2015/01/16 18:17:21, Thomas Greiner wrote: > On 2015/01/12 11:55:07, Sebastian Noack wrote: > > On 2015/01/12 10:37:54, Thomas Greiner wrote: > > > License header > > You are right. I wasn't aware that we add the GPL header also to HTML files. > > > > > and document type are missing > > It's optional in HTML5. And I personally prefer to omit. But it seems that we > > usually still specify the doctype declaration. So in favor of consistence, I > > added it. > > Thank you. Just one more thing: We changed the protocol in the URL to "https" in > the other license headers. Done.
2 <head>	20 <head>

3 <link type="text/css" rel="stylesheet" href="skin/devtools-panel.css">	21 <link type="text/css" rel="stylesheet" href="skin/devtools-panel.css">

4 <script type="application/javascript" src="ext/common.js"></script>	22 <script src="ext/common.js"></script>
Thomas Greiner 2015/01/12 10:37:54 Declaring the type attribute is no longer necessar Declaring the type attribute is no longer necessary Sebastian Noack 2015/01/12 11:55:07 Done. Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > Declaring the type attribute is no longer necessary Done.
5 <script type="application/javascript" src="ext/devtools.js"></script>	23 <script src="ext/content.js"></script>

6 <script type="application/javascript" src="devtools-panel.js"></script>	24 <script src="ext/devtools.js"></script>

	25 <script src="devtools-panel.js"></script>

7 </head>	26 </head>

8 <body>	27 <body>

9 <div id="header">	28 <header>
Thomas Greiner 2015/01/12 10:37:54 What about using <header> here instead? What about using <header> here instead? Thomas Greiner 2015/01/12 10:37:54 The structure is a bit scattered so instead of he The structure is a bit scattered so instead of header - table (contains selects as well as table headers) - tr - td div#items - table - tr - td footer I'd suggest to merge the two tables into a single one header (contains selects) table - thead (contains table headers) - tr - th - tbody#items - tr - td footer Sebastian Noack 2015/01/12 11:55:07 Done. Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > What about using <header> here instead? Done. Sebastian Noack 2015/01/12 11:55:07 Initially I used that structure. But flexbox requi Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > The structure is a bit scattered so instead of > > header > - table (contains selects as well as table headers) > - tr > - td > div#items > - table > - tr > - td > footer > > I'd suggest to merge the two tables into a single one > > header (contains selects) > table > - thead (contains table headers) > - tr > - th > - tbody#items > - tr > - td > footer Initially I used that structure. But flexbox requires an additional container around the the table header and content area. Thomas Greiner 2015/01/16 18:17:21 That's a pity and seems like that's also how the D Show quoted text On 2015/01/12 11:55:07, Sebastian Noack wrote: > On 2015/01/12 10:37:54, Thomas Greiner wrote: > > The structure is a bit scattered so instead of > > > > header > > - table (contains selects as well as table headers) > > - tr > > - td > > div#items > > - table > > - tr > > - td > > footer > > > > I'd suggest to merge the two tables into a single one > > > > header (contains selects) > > table > > - thead (contains table headers) > > - tr > > - th > > - tbody#items > > - tr > > - td > > footer > > Initially I used that structure. But flexbox requires an additional container > around the the table header and content area. That's a pity and seems like that's also how the DevTools implemented it so should be fine for us as well.
10 <table>	29 <table>

	30 <colgroup>

	31 <col>

	32 <col>

	33 <col>

	34 </colgroup>

11 <tr>	35 <tr>

12 <td colspan="2">	36 <td colspan="3">

13 Show	37 Show

14 <select id="filter-state">	38 <select id="filter-state">

15 <option value="">all</option>	39 <option value="">all</option>

16 <option>blocked</option>	40 <option>blocked</option>

17 <option>whitelisted</option>	41 <option>whitelisted</option>

18 </select>	42 </select>

19 items of	43 items of

20 <select id="filter-type">	44 <select id="filter-type">

21 <option value="">any</option>	45 <option value="">any</option>

22 <option>SUBDOCUMENT</option>	46 <option>SUBDOCUMENT</option>

23 <option>IMAGE</option>	47 <option>IMAGE</option>

24 <option>STYLESHEET</option>	48 <option>STYLESHEET</option>

25 <option>SCRIPT</option>	49 <option>SCRIPT</option>

26 <option>OBJECT</option>	50 <option>OBJECT</option>

27 <option>XMLHTTPREQUEST</option>	51 <option>XMLHTTPREQUEST</option>

	52 <option>FONT</option>

	53 <option>PING</option>

28 <option>POPUP</option>	54 <option>POPUP</option>

29 <option>ELEMHIDE</option>	55 <option>ELEMHIDE</option>

30 <option>OTHER</option>	56 <option>OTHER</option>
Thomas Greiner 2015/01/12 10:37:54 I noticed that we also offer the following content I noticed that we also offer the following content types: - OBJECT_SUBREQUEST - MEDIA - FONT Any reason why not to include them? Sebastian Noack 2015/01/12 11:55:07 We don't have those types on Chrome/Opera/Safari. Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > I noticed that we also offer the following content types: > > - OBJECT_SUBREQUEST > - MEDIA > - FONT > > Any reason why not to include them? We don't have those types on Chrome/Opera/Safari.
31 </select>	57 </select>

32 type	58 type

33 </td>	59 </td>

34 </tr>	60 </tr>

35 <tr>	61 <tr>

36 <td>	62 <td>

37 <div class="request-wrapper">	63 <div class="request-wrapper">

38 <div class="url">Request</div>	64 <div class="url">Request</div>

39 <div class="domain">Document domain</div>	65 <div class="domain">Document domain</div>

40 <div class="type">Type</div>

41 </div>	66 </div>

	67 </td>

	68 <td>

	69 <div class="type">Type</div>

42 </td>	70 </td>

43 <td>	71 <td>

44 <div class="filter-wrapper">	72 <div class="filter-wrapper">

45 <div class="filter">Filter</div>	73 <div class="filter">Filter</div>

46 <div class="origin">Origin</div>	74 <div class="origin">Origin</div>

47 </div>	75 </div>

48 </td>	76 </td>

49 </tr>	77 </tr>

50 </table>	78 </table>

	79 </header>

	80 <div id="items">

	81 <table>

	82 <colgroup>

	83 <col>

	84 <col>

	85 <col>

	86 </colgroup>

	87 <tbody>

	88 </tbody>

	89 </table>

51 </div>	90 </div>

52 <div id="items">	91 <footer>

53 <table></table>

54 </div>

55 <div id="footer">
Thomas Greiner 2015/01/12 10:37:54 Same here with the <footer> tag Same here with the <footer> tag Sebastian Noack 2015/01/12 11:55:07 Done. Show quoted text On 2015/01/12 10:37:54, Thomas Greiner wrote: > Same here with the <footer> tag Done.
56 <a id="reload">Reload</a> page to see effect of filter changes	92 <a id="reload">Reload</a> page to see effect of filter changes

57 </div>	93 </footer>

	94

	95 <template>

	96 <tr>

	97 <td>

	98 <div class="request-wrapper">

	99 <div class="url"> </div>

	100 <div class="domain"></div>

	101 </div>

	102 </td>

	103 <td>

	104 <div class="type"></div>

	105 </td>

	106 <td>

	107 <div class="action-wrapper">

	108 <div class="filter-wrapper">

	109 <div class="filter"> </div>

	110 <div class="origin"> </div>

	111 </div>

	112 </div>

	113 </td>

	114 </tr>

	115 </template>

58 </body>	116 </body>

59 </html>	117 </html>

LEFT	RIGHT