Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-17 07:52:42 +01:00
Code Issues Releases Wiki Activity

Significant cleanup of request logger and various fixes; typography, readability, usability, and performance

Browse Source
This commit is contained in:
Chris 2015-04-07 00:36:17 -06:00
parent a3bef3a1bd
commit ae4090714e
5 changed files with 74 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/css/devtool-log.css
View File

@ -4,35 +4,43 @@ body {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
font: 12px monospace; font: 12px monospace;
margin: 0; margin: 0;
overflow-x: hidden;
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
overflow: hidden;
} }
#toolbar { #toolbar {
background-color: white; background-color: rgba(238, 238, 238, 0.85);
color: #444;
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: 41px;
left: 0;
margin: 0; margin: 0;
padding: 0 1em; padding: 0 1em;
position: fixed; position: absolute;
top: 0; top: 50px;
width: 100%; left: 0;
right: 0;
z-index: 9;
border-bottom: 1px solid #ccc;
}
#toolbar > * {
display: inline-block;
vertical-align: middle;
}
#toolbar input {
padding: 5px;
} }
#toolbar .button { #toolbar .button {
background-color: white;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: inline-block;
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
} }
#toolbar .button:hover { #toolbar .button:hover {
background-color: #eee; color: #999;
} }
body.filterOff #toolbar #filterButton { body.filterOff #toolbar #filterButton {
opacity: 0.25; opacity: 0.25;
@ -40,14 +48,18 @@ body.filterOff #toolbar #filterButton {
#filterExpression.bad { #filterExpression.bad {
background-color: #fee; background-color: #fee;
} }
#maxEntries {
margin-left: 3em;
}
input:focus { input:focus {
background-color: #ffe; background-color: #ffe;
} }
#content { #content {
margin-top: 40px; position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
overflow-y: auto;
padding-top: 90px;
} }
#content table { #content table {
border: 0; border: 0;

76
src/css/devtools.css
View File

@ -5,69 +5,77 @@ body {
padding: 0; padding: 0;
} }
#toolbar { #toolbar {
background-color: #eee; background-color: rgba(238, 238, 238, 0.85);
border: none; border: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 4em;
padding: 1em; padding: 1em;
position: fixed; -moz-box-sizing: border-box;
box-sizing: border-box;
height: 50px;
position: absolute;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
z-index: 5;
} }
#toolbar > * { #toolbar > * {
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
} }
#toolbar button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 2em;
margin: 0 0 0 1em;
vertical-align: middle;
}
#pageSelector { #pageSelector {
max-width: 80%; max-width: 80%;
} }
#toolbar #refresh { #toolbar .button {
margin-left: 4px; background-color: transparent;
border: none;
cursor: pointer;
font: inherit;
margin: 0 0 0 1em;
}
#toolbar .button:hover {
color: #999;
}
#toolbar #popupToggler {
opacity: 0.4;
position: absolute;
top: 13px;
right: 13px;
z-index: 9;
font-size: 20px;
margin: 0;
}
body.popupEnabled #popupToggler {
opacity: 1;
} }
select { select {
padding: 2px 0; padding: 2px 0;
font-size: 14px; font-size: 14px;
min-width: 20em; min-width: 20em;
max-width: 40em; max-width: 40em;
border: 1px solid #ccc;
} }
select option { select option {
max-width: 40em; max-width: 40em;
} }
#popupToggler {
opacity: 0.25;
position: absolute;
right: 0;
}
body.popupEnabled #popupToggler {
opacity: 1;
}
#content { #content {
border: 0; position: absolute;
box-sizing: border-box; top: 0;
-moz-box-sizing: border-box; left: 0;
height: calc(100vh - 4em);
margin-top: 4em;
overflow-y: auto;
padding: 0;
width: 100%; width: 100%;
height: 100%;
border: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
} }
#popup { #popup {
border: 1px solid gray; border: 1px solid gray;
display: none; display: none;
position: fixed; position: fixed;
right: 2px; right: 3px;
top: calc(4em + 2px); top: 53px;
} }
body.popupEnabled #popup[src^="popup.html"] { body.popupEnabled #popup {
display: initial; display: block;
} }

6
src/devtool-log.html
View File

@ -8,9 +8,9 @@
</head> </head>
<body> <body>
<div id="toolbar"> <div id="toolbar">
<span id="reload" class="button fa">&#xf021;</span> <span id="reload" class="button"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></span>
<span id="clear" class="button fa">&#xf12d;</span> <span id="clear" class="button"><svg class="icon icon-eraser"><use xlink:href="img/icons.svg#icon-eraser"></use></svg></span>
<span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterExpression" type="text" placeholder="logFilterPrompt"> <span id="filterButton" class="button"><svg class="icon icon-filter"><use xlink:href="img/icons.svg#icon-filter"></use></svg></span><input id="filterExpression" type="text" placeholder="logFilterPrompt">
<input id="maxEntries" type="text" size="5" title="logMaxEntriesTip"> <input id="maxEntries" type="text" size="5" title="logMaxEntriesTip">
</div> </div>
<div id="content"> <div id="content">

4
src/devtools.html
View File

@ -13,8 +13,8 @@
<div id="toolbar"> <div id="toolbar">
<select id="pageSelector"></select> <select id="pageSelector"></select>
<button id="refresh" class="fa" type="button">&#xf021;</button> <span id="refresh" class="button"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></span>
<button id="popupToggler" class="fa" type="button">&#xf0c8;</button> <span id="popupToggler" class="button"><svg class="icon icon-stats"><use xlink:href="img/icons.svg#icon-stats"></use></svg></span>
</div> </div>
<iframe id="content"></iframe> <iframe id="content"></iframe>
<iframe id="popup" src=""></iframe> <iframe id="popup" src=""></iframe>

2
src/js/devtools.js
View File

@ -115,7 +115,7 @@ var resizePopup = function() {
/******************************************************************************/ /******************************************************************************/
var onPopupLoaded = function() { var onPopupLoaded = function() {
resizePopup(); setTimeout(resizePopup, 0);
if ( popupObserver !== null ) { if ( popupObserver !== null ) {
popupObserver.disconnect(); popupObserver.disconnect();