Issue 154 - Added UI for devtools panel on Chrome

skin/devtools-panel.css

Index: skin/devtools-panel.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/skin/devtools-panel.css
@@ -0,0 +1,203 @@
+*
+{
+  font-family: 'Lucida Grande', 'Segoe UI', Tahoma, Arial, sans-serif;

[Thomas Greiner, 2015/01/12 10:37:54]

In the Networks panel they're using the following CSS for font-family. Therefore
please insert "Ubuntu" to the list before "Tahoma".

body {
    ...
    font-family: Lucida Grande, sans-serif;
    color: #222;
    ...
}

body.platform-linux {
  color: rgb(48, 57, 66);
  font-family: Ubuntu, Arial, sans-serif;
}

body.platform-mac {
  color: rgb(48, 57, 66);
  font-family: 'Lucida Grande', sans-serif;
}

body.platform-windows {
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

[Sebastian Noack, 2015/01/12 11:55:07]

Done.

+  font-size: 11px;
+  box-sizing: border-box;
+}
+
+body
+{
+  margin: 0;
+  color: #303942;
+  display: flex;

[Thomas Greiner, 2015/01/12 10:37:54]

According to http://caniuse.com/#search=flex Chrome 28 still requires the
"-webkit" prefix for flexbox properties/values.

[Sebastian Noack, 2015/01/12 11:55:07]

Yep, we are dropping support for Chrome 28 (see the other review). According to
Wladimir only 0.06% are using Chrome 28.

[Thomas Greiner, 2015/01/16 18:17:21]

Ok, thanks for the info.

+  height: 100%;
+  flex-direction: column;
+}
+
+table
+{
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+table *
+{
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td
+{
+  padding: 3px;
+  white-space: nowrap;
+}
+
+td:nth-child(2)
+{
+  border-left: 1px solid #cdcdcd;
+}
+
+#header
+{
+  overflow-y: scroll;
+  border-bottom: 1px solid #cdcdcd;
+  flex-shrink: 0;
+}
+
+/*
+ * We have to add a scrollbar to the header to have the columns there aligned
+ * with the table below. But we don't want the scrollbar to be visible there.
+ */
+#header::-webkit-scrollbar
+{
+  visibility: hidden;
+}
+
+#items
+{
+  overflow-y: scroll;
+  flex-grow: 1;
+}
+
+#items table
+{
+  line-height: 17px;
+
+  /* This background image gives every other row a gray background.
+   * This is simlar to "tr:nth-child(odd) background-color: #eee;".
+   * However, we can't do it that way, since some rows might be hidden.
+   */
+  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIABAO7u7v///ywAAAAAAQBQAAACC4SPqcsYD6OctMYCADs=);
+  background-repeat: repeat;
+}
+
+#items tr
+{
+  height: 40px;
+}
+
+#items tr[data-state=blocked]
+{
+  color: red;
+}
+
+#items tr[data-state=whitelisted]
+{
+  color: green;
+}
+
+#items[data-filter-state=blocked]       tr:not([data-state=blocked]),
+#items[data-filter-state=whitelisted]   tr:not([data-state=whitelisted]),
+#items[data-filter-type=SUBDOCUMENT]    tr:not([data-type=SUBDOCUMENT]),
+#items[data-filter-type=IMAGE]          tr:not([data-type=IMAGE]),
+#items[data-filter-type=STYLESHEET]     tr:not([data-type=STYLESHEET]),
+#items[data-filter-type=SCRIPT]         tr:not([data-type=SCRIPT]),
+#items[data-filter-type=OBJECT]         tr:not([data-type=OBJECT]),
+#items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]),
+#items[data-filter-type=POPUP]          tr:not([data-type=POPUP]),
+#items[data-filter-type=ELEMHIDE]       tr:not([data-type=ELEMHIDE]),
+#items[data-filter-type=OTHER]          tr:not([data-type=OTHER])
+{
+  display: none;
+}
+
+.changed, .unnamed
+{
+  font-style: italic
+}
+
+.request-wrapper
+{
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+tr:not(:hover) .action
+{
+  display: none;
+}
+
+.url
+{
+  width: 100%;
+}
+
+.resourceLink
+{
+  cursor: pointer;
+}
+
+.resourceLink:hover {
+  text-decoration: underline;

[Sebastian Noack, 2015/01/12 11:55:07]

I disagree. Making the document domain clickable would be confusing, since some
users might expect to get taken to the parent document.

[Thomas Greiner, 2015/01/16 18:17:21]

It already is confusing since the upper half of the cell is clickable and the
lower half isn't (try hover over the area in a row above the request type).

While my personal preference would be to therefore make the whole cell clickable
but I'd also agree to simply limiting the clickable area to the link text itself
(excluding the rest of element `div.resourceLink`).

[Sebastian Noack, 2015/02/04 14:17:29]

This changed when I addressed Sven's feedback. The type has now a separate
column.

+}
+
+.domain
+{
+  flex: 1 1px;
+}
+
+.type
+{
+  flex: 0 105px;
+}
+
+.action-wrapper
+{
+  display: flex;
+  width: 100%;
+}
+
+.action
+{
+  background: #555;
+  color: white;
+  font-style: normal;
+  border-radius: 7px;
+  padding: 2px 6px;
+  margin: auto;
+  margin-left: 5px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.filter-wrapper
+{
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.filter, .origin
+{
+  flex-grow: 1;
+}
+
+.domain, .type, .origin,
+.changed .request-wrapper,
+.changed .filter-wrapper
+{
+  opacity: 0.6;
+}
+
+#footer
+{
+  width: 100%;
+  padding: 3px;
+  border-top: 1px solid #cdcdcd;
+  flex-shrink: 0;
+}
+
+#items:not(.has-changes) + #footer
+{
+  display: none;
+}
+
+#reload
+{
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}