Update input action prevention settings (#2104)

* Update styles for the input action prevention modal

* Add information
This commit is contained in:
toasted-nutbread 2022-04-02 15:24:59 -04:00 committed by GitHub
parent eb80fb233b
commit 3150da92fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 6 deletions

View File

@ -2349,6 +2349,29 @@ input[type=number].dictionary-priority {
word-break: break-all; word-break: break-all;
} }
.input-prevention-option-list {
margin-top: 0.375em;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
width: 100%;
padding-left: 0.5em;
box-sizing: border-box;
}
.input-prevention-option-list-item {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
}
.input-prevention-option-list-item>:first-child {
flex: 0 0 auto;
}
.input-prevention-option-list-item>:not(:first-child) {
margin-left: 0.375em;
flex: 1 1 auto;
}
/* Environment-specific display */ /* Environment-specific display */
:root[data-browser=unknown] [data-show-for-browser], :root[data-browser=unknown] [data-show-for-browser],

View File

@ -2819,21 +2819,34 @@
<div id="input-action-prevention-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div id="input-action-prevention-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Input Action Prevention</div></div> <div class="modal-header"><div class="modal-title">Input Action Prevention</div></div>
<div class="modal-body"> <div class="modal-body">
<strong>Prevent middle mouse button actions on:</strong> <div>
<div class="flex-column-nowrap flex-column-nowrap-spaced margin-left"> Prevent middle mouse button actions on:
<label class="flex-label"> <a tabindex="0" class="more-toggle more-only" data-parent-distance="2">(?)</a>
</div>
<div class="more" hidden>
<p>
This option is used to disable the default action of the middle mouse button in different contexts.
This can be useful for preventing the scroll action that the middle mouse button is typically mapped to,
which is otherwise difficult to disable inside extension pages via other means.
</p>
<p>
<a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
</p>
</div>
<div class="input-prevention-option-list">
<label class="input-prevention-option-list-item">
<label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onWebPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onWebPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label>
<span>Webpages</span> <span>Webpages</span>
</label> </label>
<label class="flex-label"> <label class="input-prevention-option-list-item">
<label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onPopupPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onPopupPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label>
<span>Popups</span> <span>Popups</span>
</label> </label>
<label class="flex-label"> <label class="input-prevention-option-list-item">
<label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label>
<span>Search page</span> <span>Search page</span>
</label> </label>
<label class="flex-label"> <label class="input-prevention-option-list-item">
<label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchQuery"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchQuery"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label>
<span>Search query</span> <span>Search query</span>
</label> </label>