Add AutoplayStopper v1.8.7
This commit is contained in:
BIN
AutoplayStopper/skin/IDR_CLOSE_DIALOG
Normal file
BIN
AutoplayStopper/skin/IDR_CLOSE_DIALOG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
AutoplayStopper/skin/IDR_CLOSE_DIALOG_H
Normal file
BIN
AutoplayStopper/skin/IDR_CLOSE_DIALOG_H
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 B |
1
AutoplayStopper/skin/arrow_down.svg
Normal file
1
AutoplayStopper/skin/arrow_down.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="12px" viewBox="0 0 24 12" fill="#757575"><g><path d="M 0 0 L 24 0 L 12 12 z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 150 B |
157
AutoplayStopper/skin/devtools.html
Normal file
157
AutoplayStopper/skin/devtools.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/utils.js"></script>
|
||||
<script src="/devtools.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0.5% 10%;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
color: #4c4c4c;
|
||||
}
|
||||
|
||||
label.settings-label {
|
||||
min-width: 80px;
|
||||
font-size: initial;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
div.settings-row {
|
||||
margin: 6px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input.settings-checkbox {
|
||||
align-self: flex-end;
|
||||
-webkit-margin-start: 0px;
|
||||
-webkit-margin-end: 10px;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-margin-end: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
button:not([disabled]) {
|
||||
color: #4c4c4c;
|
||||
}
|
||||
|
||||
span.input {
|
||||
min-width: 450px;
|
||||
max-width: 85%;
|
||||
border: 1px solid rgb(170, 170, 170);
|
||||
padding: 1px 2px;
|
||||
-webkit-appearance: textfield;
|
||||
font-size: 13.3333px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 17px; /* fff */
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: rgb(210, 210, 210);
|
||||
border-top-width: 0px;
|
||||
margin-bottom: 1em;
|
||||
margin-top: .9em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
margin-top: 15px; /* fff */
|
||||
}
|
||||
|
||||
#splitter {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
min-height: calc(40px + 6.5em);
|
||||
max-height: calc(100vh - 10px);
|
||||
margin-bottom: 1px;
|
||||
resize: vertical;
|
||||
background: linear-gradient(to right bottom, transparent 50%,
|
||||
rgba(0, 0, 0, 0.1) 50%) 100% 100% / 16px 15px no-repeat;
|
||||
}
|
||||
|
||||
#selector {
|
||||
height: 100%;
|
||||
width: 800px;
|
||||
color: darkslateblue;
|
||||
border: 1px solid rgb(170, 170, 170);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: rgb(170, 170, 170) auto 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="splitter">
|
||||
<div class="settings-row" style="margin:0 0px;">
|
||||
<img src="../icons/icon48.png" style="margin: 10px; height: 32px;" />
|
||||
<h2>AutoplayStopper</h2>
|
||||
<h2 id="ver" style="font-weight: 200; -webkit-margin-start: 10px; margin-inline-start: 10px;">1.0.0</h2>
|
||||
</div>
|
||||
<hr style="width: calc(100% - 2px); margin-top: 6px; margin-bottom: 0px"/>
|
||||
<h2 i18n-content="selector">Selector</h2>
|
||||
<div class="settings-row" style="height: 100%;">
|
||||
<label class="settings-label" i18n-content="text" style="margin-bottom: auto;">Text</label>
|
||||
<textarea id="selector" spellcheck="false"></textarea>
|
||||
</div>
|
||||
<div class="settings-row" style="margin-bottom: calc(.9em - 1px);">
|
||||
<label class="settings-label" i18n-content="actions">Actions</label>
|
||||
<button id="reset" i18n-content="reset">Reset</button>
|
||||
<button id="apply" disabled="" i18n-content="apply"></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="margin-top:0px"/>
|
||||
<h2 i18n-content="script">Script</h2>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" i18n-content="path">Path:</label>
|
||||
<span id="path-input" class="input" contenteditable="true" spellcheck="false"></span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" i18n-content="actions">Actions:</label>
|
||||
<button id="edit-button" i18n-content="edit">Edit</button>
|
||||
<button id="load-button" i18n-content="load">Load</button>
|
||||
<button id="export-button" i18n-content="export">Export...</button>
|
||||
<button id="path-button" i18n-content="setPath" disabled>Set Path</button>
|
||||
<button id="select-button" i18n-content="selectFile" >File...</button>
|
||||
<label id="filename" class="settings-label" style="-webkit-margin-start:10px;margin-inline-start:10px;"/>
|
||||
</div>
|
||||
<hr />
|
||||
<h2 i18n-content="userScript">User Script</h2>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" i18n-content="path">Path:</label>
|
||||
<span id="upath-input" class="input" contenteditable="true" spellcheck="false"></span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" i18n-content="actions">Actions:</label>
|
||||
<button id="uedit-button" i18n-content="edit">Edit</button>
|
||||
<button id="uload-button" i18n-content="load">Load</button>
|
||||
<button id="uexport-button" i18n-content="export">Export...</button>
|
||||
<button id="upath-button" i18n-content="setPath" disabled>Set Path</button>
|
||||
<button id="uselect-button" i18n-content="selectFile">File...</button>
|
||||
<label id="ufilename" class="settings-label" style="-webkit-margin-start:10px;margin-inline-start:10px;"/>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="settings-row">
|
||||
<input id="overwrite" class="settings-checkbox" type="checkbox" />
|
||||
<label class="settings-label" i18n-content="overwrite">Disable overwrite on update</label>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<input id="debug" class="settings-checkbox" type="checkbox" />
|
||||
<label class="settings-label" i18n-content="debug">Log debug info</label>
|
||||
</div>
|
||||
<a id="export-link" hidden="true"></a>
|
||||
</body>
|
||||
</html>
|
||||
615
AutoplayStopper/skin/options.css
Normal file
615
AutoplayStopper/skin/options.css
Normal file
@@ -0,0 +1,615 @@
|
||||
|
||||
/* chrome://resources/css/list.css */
|
||||
|
||||
list,
|
||||
grid {
|
||||
display: block;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
position: relative; /* Make sure that item offsets are relative to the
|
||||
list. */
|
||||
}
|
||||
|
||||
list > *,
|
||||
grid > * {
|
||||
-webkit-user-select: none;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid rgba(255, 255, 255, 0); /* transparent white */
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
line-height: 20px;
|
||||
margin: -1px 0;
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
position: relative; /* to allow overlap */
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
list > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
grid > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
list > [lead],
|
||||
grid > [lead] {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
list:focus > [lead],
|
||||
grid:focus > [lead] {
|
||||
border-color: hsl(214, 91%, 65%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
list > [anchor],
|
||||
grid > [anchor] {
|
||||
|
||||
}
|
||||
|
||||
list:not([disabled]) > :hover,
|
||||
grid:not([disabled]) > :hover {
|
||||
background-color: hsl(214, 91%, 97%);
|
||||
border-color: hsl(214, 91%, 85%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
list > [selected],
|
||||
grid > [selected] {
|
||||
background-color: hsl(0, 0%, 90%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
|
||||
rgba(255, 255, 255, 0));
|
||||
border-color: hsl(0, 0%, 85%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
list:focus > [selected],
|
||||
grid:focus > [selected] {
|
||||
background-color: hsl(214, 91%, 89%);
|
||||
border-color: hsl(214, 91%, 65%);
|
||||
}
|
||||
|
||||
list:focus > [lead][selected],
|
||||
list > [selected]:hover,
|
||||
grid:focus > [lead][selected],
|
||||
grid > [selected]:hover {
|
||||
background-color: hsl(214, 91%, 87%);
|
||||
border-color: hsl(214, 91%, 65%);
|
||||
}
|
||||
|
||||
list > .spacer,
|
||||
grid > .spacer {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
list :-webkit-any(
|
||||
input[type='input'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='text'],
|
||||
input[type='url']),
|
||||
list :-webkit-any(
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'],
|
||||
select):not(.custom-appearance) {
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
list input[type='text'] {
|
||||
margin-left: -4px;
|
||||
padding: 3px;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
/* chrome://resources/css/overlay.css */
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
-webkit-box-align: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-perspective: 1px;
|
||||
-webkit-transition: 200ms opacity;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
/* bottom: 50px; */
|
||||
display: -webkit-box;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.overlay.transparent .page {
|
||||
transform: scale(0.99) translateY(-20px);
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.overlay .page {
|
||||
max-height: 335.5px;
|
||||
/* display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
*/
|
||||
-webkit-border-radius: 3px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-transition: 200ms transform;
|
||||
background: white;
|
||||
box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
min-width: 400px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.overlay .page .content-area {
|
||||
-webkit-box-flex: 1;
|
||||
overflow: auto;
|
||||
overflow: overlay; /* auto */
|
||||
padding: 0px 20px 0px; /* 0px 17px 6px */
|
||||
position: relative;
|
||||
min-height: 226px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.overlay .page > .close-button {
|
||||
background-image: url(IDR_CLOSE_DIALOG);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 7px;
|
||||
width: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.overlay .page > .close-button:hover {
|
||||
background-image: url(IDR_CLOSE_DIALOG_H);
|
||||
}
|
||||
|
||||
.overlay .page > .close-button:focus:not(:hover) {
|
||||
background-image: url(IDR_CLOSE_DIALOG_H);
|
||||
filter: opacity(75%);
|
||||
}
|
||||
|
||||
div.settings-row {
|
||||
margin: 2px 18px;
|
||||
display: flex;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
label.settings-label {
|
||||
width: 130px;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.overlay .page h2 {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* chrome://settings/contentExceptions#... */
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hbox {
|
||||
-webkit-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.vbox {
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.box-align-center {
|
||||
-webkit-box-align: center;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
-webkit-box-flex: 1;
|
||||
}
|
||||
|
||||
.raw-button,
|
||||
.raw-button:hover,
|
||||
.raw-button:active {
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.page list {
|
||||
/* Min height is a multiple of the list item height (32) */
|
||||
box-sizing: content-box;
|
||||
min-height: 192px;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-list,
|
||||
.settings-list-empty {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Editable List properties */
|
||||
list > * {
|
||||
-webkit-box-align: center;
|
||||
-webkit-transition: 150ms background-color;
|
||||
border: none;
|
||||
border-radius: 0; /* TODO(dbeam): Is this necessary? */
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
list > .spacer {
|
||||
/* The above height rule should not apply to spacers. When redraw is called
|
||||
on the list they will be given an explicit element height but this ensures
|
||||
they have 0 height to begin with. */
|
||||
height: 0;
|
||||
}
|
||||
|
||||
list:not([disabled]) > :hover {
|
||||
background-color: rgb(228, 236, 247);
|
||||
}
|
||||
|
||||
/* Note: If this becomes the list style for other WebUI pages these rules can be
|
||||
* simplified (since they wont need to override other rules). */
|
||||
|
||||
list:not([has-element-focus]) > [selected],
|
||||
list:not([has-element-focus]) > [lead][selected] {
|
||||
background-color: #d0d0d0;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
list[has-element-focus] > [selected],
|
||||
list[has-element-focus] > [lead][selected],
|
||||
list:not([has-element-focus]) > [selected]:hover,
|
||||
list:not([has-element-focus]) > [selected][lead]:hover {
|
||||
background-color: rgb(187, 206, 233);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.settings-list[has-element-focus] > [lead],
|
||||
.settings-list[has-element-focus] > [lead][selected] {
|
||||
border-bottom: 1px solid rgb(120, 146, 180);
|
||||
border-top: 1px solid rgb(120, 146, 180);
|
||||
}
|
||||
|
||||
.settings-list[has-element-focus] > [lead]:nth-child(2),
|
||||
.settings-list[has-element-focus] > [lead][selected]:nth-child(2) {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.settings-list[has-element-focus] > [lead]:nth-last-child(2),
|
||||
.settings-list[has-element-focus] > [lead][selected]:nth-last-child(2) {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.settings-list[disabled] > [lead][selected],
|
||||
.settings-list[disabled]:focus > [lead][selected] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
list .deletable-item {
|
||||
-webkit-box-align: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
list .deletable-item > :first-child {
|
||||
-webkit-box-align: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-padding-end: 5px;
|
||||
-moz-padding-end: 5px;
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
list .row-delete-button {
|
||||
-webkit-transition: 150ms opacity;
|
||||
background-color: transparent;
|
||||
background-image:
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQVR42r2RsQrDMAxEBRdl8SDcX8lQPGg1GBI6lvz/h7QyRRXV0qUULwfvwZ1tenw5PxToRPWMC52eA9+WDnlh3HFQ/xBQl86NFYJqeGflkiogrOvVlIFhqURFVho3x1moGAa3deMs+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==);
|
||||
border: none;
|
||||
display: block;
|
||||
height: 16px;
|
||||
opacity: 1;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
|
||||
list:not([has-element-focus]) > *:not(:hover):not([selected])
|
||||
.row-delete-button,
|
||||
list[disabled] .row-delete-button,
|
||||
list .row-delete-button[disabled] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
list .row-delete-button:hover {
|
||||
background-image:
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAqUlEQVR4XqWRMQqEMBBF/1E8Ra6x6V3FRnS9QbCxtJg6Z7CzE9lTiIXXyUb3C8EULixDIMM8Zt4kcDfxM5A45U+cgeXnC1tREgkzAgob3hiq3CUHvGLG4FTQoSgxQGDrzN8WTLBGnx2IVDksen9GH7Z9hA5E6uxABMJyCHDMCEGHzugLQPPlBCBNGq+5YtpnGw1Bv+te15ypljTpVzdak5Opy+z+qf//zQ+Lg+07ay5KsgAAAABJRU5ErkJggg==) !important;
|
||||
}
|
||||
|
||||
list .row-delete-button:active {
|
||||
background-image:
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAQklEQVR4AWP4TwBSTQGDHcMZIIYAKA9VwRkwtINJgyCaCTAlCBaKAoQ+hFmoCqBKENKkK8C0gpAjCXuTyICiQ2QBAPSwyG3ByZlCAAAAAElFTkSuQmCC)
|
||||
,
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAA/ElEQVR4Xu3UsWrCUBiG4efGlIBoIMFbcnYolYJ3pg4iKGrGYFTRwaUFhYAekiDt0EG++X2W83N8/3J/DbwBMJJSsdQItcDY1VlCOImzq3Ed8OmicHASB3ns5KBw8VUNpDJrW7uAiJ3sbK1l0mqArpmFTUlQ5jYWZrrUAUSmT0SZm4qoA56JvVhs/5g3A7RLolA85A1ASOTye65NMxASK6syfxGITMzvMxG9CvRkliWwlOm9AsSOcitzU1NzK7mjuBkQvHtLK7iLBiB5PhttJSGpB8I8vM6kDuiHeUjoVwMfYR4SRtUAw1veIZzOjRhSBzCoyKFjgH/3K7+BHzg+Cgw0eSW3AAAAAElFTkSuQmCC)
|
||||
;
|
||||
}
|
||||
|
||||
list .static-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* outline: none; bYO! inner rect on selection*/
|
||||
}
|
||||
|
||||
list[type='text'][inlineeditable] input {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
list > :not([editing]) [displaymode='edit'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
list > [editing] [displaymode='static'] {
|
||||
/* Don't use display:none or visibility:hidden because we need to keep an
|
||||
* element focusable.
|
||||
* We shrink only height. We don't shrink width to avoid to change the size
|
||||
* of containing boxes. */
|
||||
border-bottom: 0 !important;
|
||||
border-top: 0 !important;
|
||||
height: 0 !important;
|
||||
width: auto;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
list > [editing] input:invalid {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
/* UI Controls */
|
||||
|
||||
/* LIST */ /* bYO! top level outline... */
|
||||
.settings-list[has-element-focus]:after {
|
||||
outline: 1px solid rgba(0, 128, 256, 0.5);
|
||||
outline-offset: -1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* chrome://settings/contentExceptions#... */
|
||||
|
||||
#content-settings-exceptions-area {
|
||||
min-width: 540px;
|
||||
width: 540px;
|
||||
}
|
||||
|
||||
.exception-pattern {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-margin-end: 10px;
|
||||
-moz-margin-end: 10px;
|
||||
-webkit-margin-start: 14px;
|
||||
-moz-margin-start: 14px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.exception-setting {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
select.exception-setting {
|
||||
vertical-align: middle;
|
||||
-webkit-padding-start: 3px;
|
||||
width: calc(120px + 4px);
|
||||
}
|
||||
|
||||
.overruled .exception-setting {
|
||||
width: calc(120px - 24px);
|
||||
}
|
||||
|
||||
.overruled .overruleable:focus {
|
||||
outline:auto !important;
|
||||
}
|
||||
|
||||
.overruled .overruleable {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#exception-column-headers {
|
||||
margin-left: 17px;
|
||||
-webkit-margin-start: 17px;
|
||||
display: -webkit-box;
|
||||
margin-top: 10px; /* bYO! 6 lines on FF */
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
#exception-column-headers > div {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#exception-pattern-column {
|
||||
-webkit-box-flex: 1;
|
||||
}
|
||||
|
||||
.exception-value-column-header {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
#content-settings-exceptions-area list {
|
||||
/*margin-bottom: 10px; bYO! keep list area consistent with scrolling */
|
||||
margin-top: 6px;
|
||||
}
|
||||
/****** new ui compat... ******/
|
||||
button:not(.custom-appearance) {
|
||||
--google-blue-500: #528de0; /* #3b72ce #4285f4 #0a84ff */
|
||||
font-weight: 500;
|
||||
line-height: 100%; /* 154% */
|
||||
padding: 8px 10px;
|
||||
color: white !important;
|
||||
border: 1px solid var(--google-blue-500);
|
||||
border-radius: 3px;
|
||||
box-shadow: none !important;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
button:enabled:not(.custom-appearance) {
|
||||
background: var(--google-blue-500) !important;
|
||||
}
|
||||
|
||||
button:enabled:not(.custom-appearance):focus {
|
||||
background: rgb(58, 117, 215) !important;
|
||||
}
|
||||
|
||||
select {
|
||||
--md-arrow-width: 0.9em;
|
||||
--md-arrow-offset: 0%;
|
||||
--md-select-side-padding: 3px;
|
||||
--md-select-width: 110px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
/* -webkit-margin-end: calc(-1 * var(--md-select-side-padding)); */
|
||||
/* -moz-margin-end: var(--md-select-side-padding); */
|
||||
/* -webkit-padding-end: calc(var(--md-select-side-padding) + var(--md-arrow-offset) + var(--md-arrow-width) + 3px); */
|
||||
-webkit-padding-start: var(--md-select-side-padding);
|
||||
-moz-padding-start: calc(var(--md-select-side-padding) - 1px);
|
||||
background: url(arrow_down.svg) calc(100% - var(--md-arrow-offset) - var(--md-select-side-padding)) center no-repeat !important;
|
||||
background-image: url(arrow_down.svg) !important;
|
||||
background-size: var(--md-arrow-width) !important;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 3px;
|
||||
border-bottom: 1px solid rgb(224, 224, 224);
|
||||
width: var(--md-select-width);
|
||||
/* width: calc(var(--md-select-width, 200px) + 2 * var(--md-select-side-padding)); */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: rgb(77, 144, 254);
|
||||
}
|
||||
|
||||
select.exception-setting {
|
||||
-webkit-padding-start: var(--md-select-side-padding);
|
||||
width: calc(120px + var(--md-select-side-padding));
|
||||
}
|
||||
|
||||
html > body {
|
||||
height: 376px;
|
||||
width: 500px;
|
||||
margin: 16px 40px 14px 40px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(255, 255, 255,.5);
|
||||
bottom: 0px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.overlay .page {
|
||||
max-height: 341.5px;
|
||||
box-shadow: 0 0px 1px 0px rgba(0, 0, 0, 0.2), 0 1px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
body > div:first-child {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.action-area {
|
||||
padding-top: .3em !important;
|
||||
}
|
||||
|
||||
label.settings-label {
|
||||
width: 80px;
|
||||
margin: 7px 0px;
|
||||
}
|
||||
|
||||
input.settings-checkbox ~ label.settings-label {
|
||||
-webkit-margin-start: 3px;
|
||||
-moz-margin-start: 3px;
|
||||
}
|
||||
|
||||
select ~ button.exceptions-list-button{
|
||||
-webkit-margin-start: auto;
|
||||
-moz-margin-start: auto;
|
||||
}
|
||||
|
||||
input.settings-checkbox {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
button:enabled:not(.custom-appearance):not(:focus):hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1); /* #3b72ce */
|
||||
}
|
||||
|
||||
button:disabled:not(.custom-appearance) {
|
||||
border-color: rgba(80, 80, 80, 0.1);
|
||||
}
|
||||
|
||||
list input[type="text"] {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#perms-type {
|
||||
-moz-padding-start: 3px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
124
AutoplayStopper/skin/options.html
Normal file
124
AutoplayStopper/skin/options.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link href="options.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/options.js"></script>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
width: 560px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1em 17px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
user-select: none;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: solid;
|
||||
color: #dddddd;
|
||||
border-top-width: 0px;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
margin-inline-start: initial;
|
||||
margin-inline-end: initial;
|
||||
}
|
||||
|
||||
input.settings-checkbox {
|
||||
margin: auto 1px;
|
||||
-webkit-margin-start: 0px;
|
||||
margin-inline-start: 0px;
|
||||
position: static;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center; display: block;">
|
||||
<span i18n-content="version">Version</span>
|
||||
<span id="extension-version"></span>
|
||||
</div>
|
||||
<h1> <span i18n-content="settings" style="position: relative; top: -.7em">Settings</span></h1>
|
||||
<h2 i18n-content="autoplayTabLabel">Autoplay</h2>
|
||||
|
||||
<div class="settings-row">
|
||||
<label for="autoplay-default" class="settings-label" i18n-content="defaultMode">Default Mode:</label>
|
||||
<select id="autoplay-default">
|
||||
<option i18n-content="disableAutoplay" value="2">Disable Autoplay</option>
|
||||
<option i18n-content="allowAutoplay" value="1">Allow Autoplay</option>
|
||||
</select>
|
||||
<button class="exceptions-list-button" contenttype="autoplay" i18n-content="manageExceptions">Exceptions...</button>
|
||||
</div>
|
||||
<hr />
|
||||
<h2 i18n-content="flashTabLabel">Flash</h2>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" for="flash-default" i18n-content="defaultMode">Default Mode:</label>
|
||||
<select id="flash-default">
|
||||
<option i18n-content="allowFlash" value="1">Allow Flash</option>
|
||||
<option i18n-content="disableFlash" value="2">Disable Flash</option>
|
||||
</select>
|
||||
<button class="exceptions-list-button" contenttype="flash" i18n-content="manageExceptions">Exceptions...</button>
|
||||
</div>
|
||||
<div class="overlay transparent" hidden>
|
||||
<div id="content-settings-exceptions-area" class="page">
|
||||
<button class="close-button raw-button custom-appearance"></button>
|
||||
<h2 contenttype="autoplay" i18n-content="autoplayExceptions">Autoplay exceptions</h2>
|
||||
<h2 contenttype="flash" i18n-content="flashExceptions" hidden>Flash exceptions</h2>
|
||||
<div class="content-area" tabindex="-1">
|
||||
<div id="exception-column-headers">
|
||||
<div id="exception-pattern-column" i18n-content="exceptionHostnameHeader">
|
||||
Hostname</div>
|
||||
<div id="exception-behavior-column" class="exception-value-column-header" i18n-content="exceptionBehaviorHeader">
|
||||
Behavior</div>
|
||||
</div>
|
||||
<div contenttype="autoplay">
|
||||
<list id="autoplay-list" aria-activedescendant="listitem-27" class="settings-list" inlineeditable="" mode="normal" role="list" tabindex="-1">
|
||||
<div class="spacer" style="height: 0px;"></div>
|
||||
<div role="listitem" id="listitem" class="deletable-item" aria-posinset="1" aria-setsize="3"><div><div class="exception-pattern weakrtl"><div id="perms-host" class="static-text overruleable" displaymode="static" tabindex="-1"></div><input id="perms-host-input" type="text" displaymode="edit" tabindex="0"></div><span id="perms-type" class="exception-setting overruleable" displaymode="static" tabindex="-1"></span><select id="perms-type-select" tabindex="0" class="exception-setting" aria-labelledby="exception-behavior-column" displaymode="edit"><option value="1" i18n-content="exceptionAllow">Allow</option><option value="2" i18n-content="exceptionBlock">Block</option><option value="3" i18n-content="exceptionPrompt">Block (strict)</option><option value="8" i18n-content="exceptionSession">Session</option><option value="0" i18n-content="exceptionUndefined">Undefined</option></select></div><button class="raw-button row-delete-button custom-appearance" tabindex="-1" title="Delete this item"></button></div>
|
||||
<div role="listitem" id="inputitem" selected="selected" lead="lead" class="deletable-item"><div><div class="exception-pattern weakrtl"><input id="perms-host-input" type="text" tabindex="0" placeholder="http://example.com"></div><select id="perms-type-select" tabindex="0" class="exception-setting" aria-labelledby="exception-behavior-column"><option value="1" i18n-content="exceptionAllow">Allow</option><option value="2" i18n-content="exceptionBlock">Block</option><option value="3" i18n-content="exceptionPrompt">Block (strict)</option><option value="8" i18n-content="exceptionSession">Session</option><option value="0" i18n-content="exceptionUndefined">Undefined</option></select></div><button class="raw-button row-delete-button custom-appearance" tabindex="-1" title="Delete this item" disabled=""></button></div>
|
||||
<div class="spacer" style="height: 0px;"></div>
|
||||
</list>
|
||||
</div>
|
||||
<div contenttype="flash" hidden>
|
||||
<list id="flash-list" aria-activedescendant="listitem-27" class="settings-list" inlineeditable="" mode="normal" role="list" tabindex="-1">
|
||||
<div class="spacer" style="height: 0px;"></div>
|
||||
<div role="listitem" id="listitem" class="deletable-item" aria-posinset="1" aria-setsize="3"><div><div class="exception-pattern weakrtl"><div id="perms-host" class="static-text overruleable" displaymode="static" tabindex="-1"></div><input id="perms-host-input" type="text" displaymode="edit" tabindex="0"></div><span id="perms-type" class="exception-setting overruleable" displaymode="static" tabindex="-1"></span><select id="perms-type-select" tabindex="0" class="exception-setting" aria-labelledby="exception-behavior-column" displaymode="edit"><option value="1" i18n-content="exceptionAllow">Allow</option><option value="2" i18n-content="exceptionBlock">Block</option><option value="0" i18n-content="exceptionUndefined">Undefined</option></select></div><button class="raw-button row-delete-button custom-appearance" tabindex="-1" title="Delete this item"></button></div>
|
||||
<div role="listitem" id="inputitem" selected="selected" lead="lead" class="deletable-item"><div><div class="exception-pattern weakrtl"><input id="perms-host-input" type="text" tabindex="0" placeholder="http://example.com"></div><select id="perms-type-select" tabindex="0" class="exception-setting" aria-labelledby="exception-behavior-column"><option value="1" i18n-content="exceptionAllow">Allow</option><option value="2" i18n-content="exceptionBlock">Block</option><option value="0" i18n-content="exceptionUndefined">Undefined</option></select></div><button class="raw-button row-delete-button custom-appearance" tabindex="-1" title="Delete this item" disabled=""></button></div>
|
||||
<div class="spacer" style="height: 0px;"></div>
|
||||
</list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-area" style="padding-top: .5em">
|
||||
<div class="hbox stretch">
|
||||
</div>
|
||||
<button id="exceptions-clear" style="margin-left: 20px;" i18n-content="removeAll">Remove All</button>
|
||||
<div class="action-area-right" style="-webkit-box-pack: end; display: -webkit-box;">
|
||||
<div class="button-strip" reversed="" style="position:relative; top: -1.5em; right: 19px">
|
||||
<button id="exceptions-apply" disabled i18n-content="apply">Apply</button>
|
||||
<button id="exceptions-confirm" class="default-button" i18n-content="done">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h2 i18n-content="advanced">Advanced</h2>
|
||||
<div class="settings-row">
|
||||
<input id="devtools" class="settings-checkbox" type="checkbox" />
|
||||
<label class="settings-label" i18n-content="devtools">Devtools Panel</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
53
AutoplayStopper/skin/popup.css
Normal file
53
AutoplayStopper/skin/popup.css
Normal file
@@ -0,0 +1,53 @@
|
||||
body {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.popupmenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #303942;
|
||||
background: #f9fafb;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.popupmenu .popupitem {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popupmenu .popupitem:hover {
|
||||
background: rgb(235, 235, 235); /*#565a63;
|
||||
color: white;*/
|
||||
}
|
||||
|
||||
.popupmenu .popupitem.separator {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
height: 1px;
|
||||
pointer-events: none;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.popupmenu .popupitem:not(.separator) {
|
||||
padding: 7px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.popupmenu .popupitem[checked] {
|
||||
background: rgb(80, 135, 90); /*#54975f;*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popupmenu .popupitem[checked="2"], .popupmenu .popupitem[checked="3"] {
|
||||
background: rgb(135, 80, 90); /*#54975f;*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popupmenu.restricted #allow_site, .popupmenu.restricted #allow_session, .popupmenu.restricted #disable_site {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popupmenu #allow_all[checked] {
|
||||
background: darkgray;
|
||||
}
|
||||
24
AutoplayStopper/skin/popup.html
Normal file
24
AutoplayStopper/skin/popup.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link href="popup.css" rel="stylesheet" />
|
||||
<script src="/popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="popupmenu" class="popupmenu">
|
||||
<section>
|
||||
<div id="disable_site" class="popupitem" i18n-content="disableSite" >Disable flash for %S</div>
|
||||
<div id="allow_site" class="popupitem" i18n-content="allowSite" >Allow autoplay for %S</div>
|
||||
<div id="allow_session" class="popupitem" i18n-content="allowSession" >Allow session autoplay for %S</div>
|
||||
</section>
|
||||
<div class="popupitem separator"></div>
|
||||
<section>
|
||||
<!-- <popup-item id="script">Edit script...</popup-item> -->
|
||||
<div id="allow_all" class="popupitem" i18n-content="allowAll" >Allow everywhere</div>
|
||||
<div id="settings" class="popupitem" i18n-content="settings" >Settings</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user