MD History: Improve test helpers, update synced tabs tests to use them

chrome/browser/resources/md_history/shared_vars.html

Index: chrome/browser/resources/md_history/shared_vars.html
diff --git a/chrome/browser/resources/md_history/shared_vars.html b/chrome/browser/resources/md_history/shared_vars.html
new file mode 100644
index 0000000000000000000000000000000000000000..74b5bf7c1570c648afd03ce30afb8c46107fdd7f
--- /dev/null
+++ b/chrome/browser/resources/md_history/shared_vars.html
@@ -0,0 +1,34 @@
+<style is="custom-style">
+  :root {
+    --card-border-color: rgba(0, 0, 0, 0.14);
+    --card-box-shadow: {
+      box-shadow: 0 2px 2px rgba(0, 0, 0, .05),
+                  0 1px 4px rgba(0, 0, 0, .08),
+                  0 1px 1px rgba(0, 0, 0, .2);;
+    };
+    --card-container-filter: {
+      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .05))
+              drop-shadow(0 1px 0px rgba(0, 0, 0, .08))
+              drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
+    };
+    --card-first-last-item-padding: 8px;
+    --card-max-width: 960px;
+    --card-min-width: 550px;
+    --card-padding-between: 20px;
+    --card-padding-side: 24px;
+    --card-sizing: {
+      margin: 0 auto;
+      max-width: var(--card-max-width);
+      min-width: var(--card-min-width);
+      padding: 0 var(--card-padding-side);
+      width: calc(100% - 2 * var(--card-padding-side));
+    };
+    --first-card-padding-top: 24px;
+    --item-height: 44px;
+    --primary-text-color: #333;
+    --secondary-text-color: #757575;
+    --side-bar-width: 256px;
+    --toolbar-grouped-height: 101px;
+    --toolbar-height: 56px;
+  }
+</style>