1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-29 14:17:11 +02:00

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

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

View File

@ -4,35 +4,43 @@ body {
-moz-box-sizing: border-box;
font: 12px monospace;
margin: 0;
overflow-x: hidden;
padding: 0;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
#toolbar {
background-color: white;
background-color: rgba(238, 238, 238, 0.85);
color: #444;
border: 0;
box-sizing: border-box;
height: 40px;
left: 0;
height: 41px;
margin: 0;
padding: 0 1em;
position: fixed;
top: 0;
width: 100%;
position: absolute;
top: 50px;
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 {
background-color: white;
border: none;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-size: 20px;
margin: 0;
padding: 8px;
}
#toolbar .button:hover {
background-color: #eee;
color: #999;
}
body.filterOff #toolbar #filterButton {
opacity: 0.25;
@ -40,14 +48,18 @@ body.filterOff #toolbar #filterButton {
#filterExpression.bad {
background-color: #fee;
}
#maxEntries {
margin-left: 3em;
}
input:focus {
background-color: #ffe;
}
#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 {
border: 0;

View File

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

View File

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

View File

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

View File

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