Skip to content

Commit

Permalink
Add "settings-1" experimental pages
Browse files Browse the repository at this point in the history 
- Add "settings-1" experiment, with 2 pages (including their own styles
  and scripts)
  - Set input values to ones which might be seen in MMS's settings
- Add MMS's other icons (currently unoptimised)
  • Loading branch information
@ator-dev
ator-dev committed Nov 30, 2024
1 parent f68979f commit 5b97134
Show file tree
Hide file tree
Showing 22 changed files with 2,212 additions and 0 deletions.
352 changes: 352 additions & 0 deletions experiments/settings-1/a/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="content-security-policy" content="default-src https:">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Settings (Mark My Search)</title>
<link rel="icon" href="/icons/mms.svg" sizes="any">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/experiment-specific.css">
</head>
<body>
<div class="flex-space"></div>
<form>
<div class="container-tab">
<div class="option-section">
<div class="option-label">Controls to show in the toolbar</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-0" title="">Disable research in the current tab</label>
</div>
<div>
<input id="input-0" type="checkbox" class="barControlsShown-disableTabResearch" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-1" title="">Perform a search using the current terms</label>
</div>
<div>
<input id="input-1" type="checkbox" class="barControlsShown-performSearch">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-2" title="">Toggle display of highlighting</label>
</div>
<div>
<input id="input-2" type="checkbox" class="barControlsShown-toggleHighlights" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-3" title="">Append a new term to the toolbar</label>
</div>
<div>
<input id="input-3" type="checkbox" class="barControlsShown-appendTerm" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-4" title="">Replace keywords with detected search keywords</label>
</div>
<div>
<input id="input-4" type="checkbox" class="barControlsShown-replaceTerms" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">Toolbar style and icons</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-5" title="">Display an edit button in controls with editable text</label>
</div>
<div>
<input id="input-5" type="checkbox" class="barLook-showEditIcon" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-6" title="">Display a menu button in controls with match options</label>
</div>
<div>
<input id="input-6" type="checkbox" class="barLook-showRevealIcon" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-7" title="">Font size</label>
</div>
<div>
<input id="input-7" type="text" class="barLook-fontSize" value="15px">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-8" title="">Opacity of keyword buttons</label>
</div>
<div>
<input id="input-8" type="text" class="barLook-opacityTerm" value="0.86">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-9" title="">Opacity of other buttons</label>
</div>
<div>
<input id="input-9" type="text" class="barLook-opacityControl" value="0.8">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-10" title="">Radius of rounded corners</label>
</div>
<div>
<input id="input-10" type="text" class="barLook-borderRadius" value="4px">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">Keyword highlighting method and style</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-11" title="Mark My Search has two highlighting methods. Element is a powerful variant of the model used by traditional highlighter extensions. Paint is an alternate model invented for Mark My Search.
Element
• Fairly efficient at idle time. Once highlighted, text is never re-highlighted until it changes.
• Rendering is expensive, and makes the page sluggish when there are many highlights.
• Not efficient at matching time. The page can freeze for several seconds if many highlights are inserted.
• Causes parts of webpages to look different or break.
Paint
• Not efficient at idle time. Highlight positions need to be recalculated on scrolling or layout changing.
• Smooth but CPU heavy.
• Large numbers of highlights are handled well.
• Very efficient at matching time. Matches are found instantly and almost never cause slowdown.
• Has no effect on webpages, but backgrounds which obscure highlights become hidden.">Use Element algorithm (hover for details)</label>
</div>
<div>
<input id="input-11" type="checkbox" class="highlightMethod-paintReplaceByClassic" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<!--<div class="preference-row">
<div class="preference-cell">
<label for="input-12" title="Mark My Search can highlight using experimental APIs. The behavior of this flag will change over time.
Current effects:
CLASSIC
• None.
PAINT
• Firefox: The CSS element() function is used instead of SVG rendering.
• Chromium: The CSS [Houdini] Painting API is used instead of SVG rendering.">Use experimental browser APIs (hover for details)</label>
</div>
<div>
<input id="input-12" type="checkbox" class="highlightMethod-paintUseExperimental">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>-->
<div class="preference-row">
<div class="preference-cell">
<label for="input-13" title="">Highlight color hue cycle</label>
</div>
<div>
<input id="input-13" type="text" class="highlightMethod-hues" value="300,60,110,220,30,190,0">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">Visibility when highlighting search engine keywords</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-14" title="">Highlights begin visible</label>
</div>
<div>
<input id="input-14" type="checkbox" class="showHighlights-default" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-15" title="">Highlights are always visible on search pages</label>
</div>
<div>
<input id="input-15" type="checkbox" class="showHighlights-overrideSearchPages">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">When to collapse the toolbar immediately</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-16" title="">Started from a search</label>
</div>
<div>
<input id="input-16" type="checkbox" class="barCollapse-fromSearch">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-17" title="">Started from a keyword list automatically</label>
</div>
<div>
<input id="input-17" type="checkbox" class="barCollapse-fromTermListAuto">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">Options for highlighting search engine keywords</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-18" title="">URL parameters containing keywords</label>
</div>
<div>
<input id="input-18" type="text" class="autoFindOptions-searchParams" value="search_terms,search_term,searchTerms,searchTerm,search_query,searchQuery,search,query,phrase,keywords,keyword,terms,term,text,s,q,p,k,_nkw,wd">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-19" title="">Keywords to exclude</label>
</div>
<div>
<input id="input-19" type="text" class="autoFindOptions-stoplist" value="i,a,an,and,or,not,the,that,there,where,which,to,do,of,in,on,at,too,if,for,while,is,as,isn't,are,aren't,can,can't,how,vs,them,their,theirs,her,hers,him,his,it,its,me,my,one,one's,you,your,yours">
</div>
<div>
<input type="text" disabled="">
</div>
</div>
</div>
</div>
<div class="option-section">
<div class="option-label">Matching options for new terms</div>
<div class="table-preferences">
<div class="preference-row">
<div class="preference-cell">
<label for="input-20" title="">Default case sensitivity</label>
</div>
<div>
<input id="input-20" type="checkbox" class="matchModeDefaults-case">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-21" title="">Default word stemming</label>
</div>
<div>
<input id="input-21" type="checkbox" class="matchModeDefaults-stem" checked="">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-22" title="">Default whole word matching</label>
</div>
<div>
<input id="input-22" type="checkbox" class="matchModeDefaults-whole">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-23" title="">Default diacritics matching (ignore accents)</label>
</div>
<div>
<input id="input-23" type="checkbox" class="matchModeDefaults-diacritics">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
<div class="preference-row">
<div class="preference-cell">
<label for="input-24" title="">Use custom regular expressions by default (advanced)</label>
</div>
<div>
<input id="input-24" type="checkbox" class="matchModeDefaults-regex">
</div>
<div>
<input type="checkbox" disabled="">
</div>
</div>
</div>
</div>
</div>
<button id="save">Save Changes</button>
</form>
<div class="flex-space"></div>
</body>
</html>
19 changes: 19 additions & 0 deletions experiments/settings-1/a/style/experiment-specific.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
:root {
font-family: sans-serif;
}

body {
display: flex;
}

.flex-space {
flex: 1;
}

body > form {
width: 40em;
}

#save, .preference-row :disabled {
display: none;
}
Loading

0 comments on commit 5b97134

Please sign in to comment.