Make sure actions are run instantly if possible

* fix 7142 search outline in chrome like browsers

* use moz-focusring only for FF, outline-initial for Chrome

* moz-focusring remove outline-offset

* remove box-sizing from base, because it's part of reset

* remove redundant box-sizing since it is part of reset

* fix distance between search input and first button to the right

core/modules/wiki.js

@@ -164,12 +164,59 @@ exports.enqueueTiddlerEvent = function(title,isDeleted) {
 			self.eventsTriggered = false;
 			if($tw.utils.count(changes) > 0) {
 				self.dispatchEvent("change",changes);
+				self.runFilteredActions();
 			}
 		});
 		this.eventsTriggered = true;
 	}
 };
 
+exports.runFilteredActions = function() {
+	if(!$tw.browser) {
+		return;
+	}
+	var self = this;
+	var now = (new Date()).getTime();
+	// Minimum interval between runs
+	this.intervalFilteredActions = this.intervalFilteredActions || 100;
+	// Time of the last run
+	this.timestampLastRunFilteredActions = this.timestampLastRunFilteredActions || now - this.intervalFilteredActions * 2;
+	// If we've run the filtered actions recently, queue another run
+	if((this.timestampLastRunFilteredActions + this.intervalFilteredActions) > now) {
+		if(!this.filterActionTimerId) {
+			this.filterActionTimerId = setTimeout(function() {
+				self.filterActionTimerId = null;
+				self.runFilteredActions();
+			},this.intervalFilteredActions);
+		}
+		return;
+	}
+	// Record the time of this run
+	this.timestampLastRunFilteredActions = now;
+	// Get the list of filtered action tiddlers and process each one
+	var filteredActions = $tw.wiki.getTiddlersWithTag("$:/tags/FilteredActions");
+	$tw.utils.each(filteredActions,function(filteredActionTitle) {
+		var tiddler = self.getTiddler(filteredActionTitle);
+		if(tiddler && tiddler.fields.filter) {
+			var results = self.filterTiddlers(tiddler.fields.filter);
+			if(results.length > 0) {
+				console.log("Executing actions",tiddler.fields.text,results)
+				self.invokeActionString(
+					tiddler.fields.text,
+					null,
+					{
+						filteredActionTitle: filteredActionTitle,
+						results: $tw.utils.stringifyList(results),
+						jsonResults: JSON.stringify(results)
+					},{
+						parentWidget: $tw.rootWidget
+					}
+				);
+			}
+		}
+	});
+}
+
 exports.getSizeOfTiddlerEventQueue = function() {
 	return $tw.utils.count(this.changedTiddlers);
 };

core/ui/AdvancedSearch/Standard.tid

@@ -39,6 +39,7 @@ caption: {{$:/language/Search/Standard/Caption}}
 </$keyboard>
 </$keyboard>
 </$keyboard>
+&#32;
 <$reveal state="$:/temp/advancedsearch" type="nomatch" text="">
 <$button class="tc-btn-invisible">
 <<cancel-search-actions>>

core/ui/SideBarSegments/search.tid

@@ -55,7 +55,7 @@ tags: $:/tags/SideBarSegment
 <$macrocall $name="keyboard-driven-input" tiddler=<<editTiddler>> storeTitle=<<searchTiddler>> 
 		selectionStateTitle=<<searchListState>> refreshTitle="$:/temp/search/refresh" type="search" 
 		tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> 
-		class="tc-popup-handle" filterMinLength={{$:/config/Search/MinLength}} inputCancelActions=<<cancel-search-actions>> 
+		class="tc-tiny-gap-right tc-popup-handle" filterMinLength={{$:/config/Search/MinLength}} inputCancelActions=<<cancel-search-actions>> 
 		inputAcceptActions=<<input-accept-actions>> inputAcceptVariantActions=<<input-accept-variant-actions>> cancelPopups="yes" 
 		configTiddlerFilter="[[$:/state/search/currentTab]!is[missing]get[text]] ~[{$:/config/SearchResults/Default}]"/>
 </form>

editions/tw5.com/tiddlers/Sample Filtered Action.tid

@@ -0,0 +1,5 @@
+title: Sample Filtered Action
+tags: $:/tags/FilteredActions
+filter: [list[$:/StoryList]match[Sample Filtered Action]]
+
+<$action-setfield $tiddler="$:/SiteTitle" text={{{ [{$:/SiteTitle}addsuffix[!]] }}}/>

editions/tw5.com/tiddlers/concepts/Railroad Diagrams.tid

@@ -15,4 +15,6 @@ In the example above, a comma appears between each occurrence of the `repeated`
 
 Characters in round boxes are literal, i.e. they denote themselves. A name in a rectangular box denotes a further railroad diagram.
 
+The TW [[Filter Syntax]] documentation makes extensive use of railroad diagrams.
+
 The railroad diagrams in ~TiddlyWiki's documentation are generated with the [[Railroad Plugin]].

editions/tw5.com/tiddlers/plugins/Railroad Plugin.tid

@@ -5,6 +5,12 @@ tags: OfficialPlugins [[Plugin Editions]]
 title: Railroad Plugin
 type: text/vnd.tiddlywiki
 
+!! Railroad Diagrams
+
+{{Railroad Diagrams}}
+
+!! Plugin
+
 {{$:/plugins/tiddlywiki/railroad/readme}}
 
-{{$:/plugins/tiddlywiki/railroad/syntax}}
+Learn more about the [[Railroad Plguin Syntax Description|$:/plugins/tiddlywiki/railroad/syntax]]

plugins/tiddlywiki/tour/tour-filtered-action.tid

@@ -0,0 +1,7 @@
+title: $:/plugins/tiddlywiki/tour/filtered-action
+tags: $:/tags/FilteredActions
+filter: [{$:/config/ShowTour}!is[blank]else[show]match[show]then[$:/state/tour/step]get[text]get[step-success-filter]] :map[subfilter<currentTiddler>] :filter[<currentTiddler>!match[]]
+
+\import [[$:/plugins/tiddlywiki/tour/variables]]
+<$action-sendmessage $message="tm-confetti-launch"/>
+<<tour-next-step>>

plugins/tiddlywiki/tour/tour-panel.tid

@@ -48,7 +48,6 @@ tags: $:/tags/PageTemplate
 <$let tour-task="">
 	<$transclude tiddler=<<currentTourStep>> mode="block"/>
 </$let>
-<$confetti/>
 <p>
 	Congratulations, you may proceed
 </p>

themes/tiddlywiki/vanilla/base.tid

@@ -71,10 +71,16 @@ $else$
 
 {{$:/themes/tiddlywiki/vanilla/reset}}
 
-*, input[type="search"] {
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
+input[type="search"] {
+	outline-offset: initial;
+}
+
+button, textarea, input, select {
+	outline-color: <<colour primary>>;
+}
+
+:-moz-focusring {
+	outline: 2px solid <<colour primary>>;
 }
 
 /*
@@ -157,7 +163,7 @@ code {
 	color: <<colour code-foreground>>;
 	background-color: <<colour code-background>>;
 	border: 1px solid <<colour code-border>>;
-	white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
+	white-space: pre-wrap;
 	padding: 0 3px 2px;
 	border-radius: 3px;
 	font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
@@ -293,10 +299,13 @@ form.tc-form-inline {
 Markdown likes putting code elements inside pre elements
 */
 pre > code {
-	padding: 0;
+	display: block;
+	padding: 0.5em;
 	border: none;
+	white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
 	background-color: inherit;
 	color: inherit;
+	overflow-x: auto;
 }
 
 /*
@@ -707,7 +716,7 @@ html body.tc-body .tc-btn-rounded:hover svg {
 }
 
 button svg.tc-image-button, button .tc-image-button img {
-	height: 1em;
+	height: auto;
 	width: 1em;
 }
 
@@ -2819,7 +2828,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 }
 
 .tc-language-chooser .tc-image-button img {
-	width: 2em;
+	width: auto;
 	vertical-align: -0.15em;
 }