Repository: mozmeao/snippets-service

Issue:
Add dark theme preview
From firefox 68 we will be able to select between light and dark theme to preview snippets.

Related AS bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1510335

<!-- probot = {"419912":{"who":"glogiotatidis","what":"on","when":"2019-05-15T09:00:00.000Z"}} -->


Discussion:
This will be a quick fix. Let's implement it when Fx68 hits Beta 

/remind me on May 15th
@glogiotatidis set a reminder for **May 15th 2019**
ASR code landed

Resolving patch:
diff --git a/snippets/base/admin/adminmodels.py b/snippets/base/admin/adminmodels.py
--- a/snippets/base/admin/adminmodels.py
+++ b/snippets/base/admin/adminmodels.py
@@ -457,7 +457,9 @@ class ASRSnippetAdmin(admin.ModelAdmin):
         'modified',
         'uuid',
         'creator',
-        'preview_url',
+        'preview_url_light_theme',
+        'preview_url_dark_theme',
+
     )
     filter_horizontal = (
         'targets',
@@ -473,7 +475,14 @@ class ASRSnippetAdmin(admin.ModelAdmin):
 
     fieldsets = (
         ('ID', {
-            'fields': ('id', 'name', 'status', 'creator', 'preview_url')
+            'fields': (
+                'id',
+                'name',
+                'status',
+                'creator',
+                'preview_url_light_theme',
+                'preview_url_dark_theme',
+            )
         }),
         ('Content', {
             'description': (
@@ -528,16 +537,29 @@ def save_model(self, request, obj, form, change):
         statsd.incr('save.asrsnippet')
         super().save_model(request, obj, form, change)
 
-    def preview_url(self, obj):
+    def preview_url_light_theme(self, obj):
+        text = f'''
+        <span id="previewLinkUrlLight">{obj.get_preview_url()}</span>
+        <button id="copyPreviewLink" class="btn"
+                data-clipboard-target="#previewLinkUrlLight"
+                originalText="Copy to Clipboard" type="button">
+          Copy to Clipboard
+        </button>
+        '''
+        return mark_safe(text)
+    preview_url_light_theme.short_description = 'Light Themed Preview URL'
+
+    def preview_url_dark_theme(self, obj):
         text = f'''
-        <span id="previewLinkUrl">{obj.get_preview_url()}</span>
+        <span id="previewLinkUrlDark">{obj.get_preview_url(dark=True)}</span>
         <button id="copyPreviewLink" class="btn"
-                data-clipboard-target="#previewLinkUrl"
+                data-clipboard-target="#previewLinkUrlDark"
                 originalText="Copy to Clipboard" type="button">
           Copy to Clipboard
         </button>
         '''
         return mark_safe(text)
+    preview_url_dark_theme.short_description = 'Dark Themed Preview URL'
 
     def change_view(self, request, *args, **kwargs):
         if request.method == 'POST' and '_saveasnew' in request.POST:
diff --git a/snippets/base/models.py b/snippets/base/models.py
--- a/snippets/base/models.py
+++ b/snippets/base/models.py
@@ -1474,10 +1474,13 @@ def channels(self):
                     channels.append(channel)
         return set(channels)
 
-    def get_preview_url(self):
+    def get_preview_url(self, dark=False):
+        theme = 'light'
+        if dark:
+            theme = 'dark'
         url = reverse('asr-preview', kwargs={'uuid': self.uuid})
         full_url = urljoin(settings.SITE_URL, url)
-        return 'about:newtab?endpoint=' + full_url
+        return 'about:newtab?theme={}&endpoint={}'.format(theme, full_url)
 
     def get_admin_url(self, full=True):
         # Not using reverse() because the `admin:` namespace is not registered


Test patch:
diff --git a/snippets/base/tests/test_models.py b/snippets/base/tests/test_models.py
--- a/snippets/base/tests/test_models.py
+++ b/snippets/base/tests/test_models.py
@@ -456,10 +456,17 @@ def test_render_preview_only(self):
     @override_settings(SITE_URL='http://example.com')
     def test_get_preview_url(self):
         snippet = ASRSnippetFactory.create()
-        expected_result = 'about:newtab?endpoint=http://example.com'
+        expected_result = 'about:newtab?theme=light&endpoint=http://example.com'
         expected_result += reverse('asr-preview', kwargs={'uuid': snippet.uuid})
         self.assertEqual(snippet.get_preview_url(), expected_result)
 
+    @override_settings(SITE_URL='http://example.com')
+    def test_get_preview_url_dark(self):
+        snippet = ASRSnippetFactory.create()
+        expected_result = 'about:newtab?theme=dark&endpoint=http://example.com'
+        expected_result += reverse('asr-preview', kwargs={'uuid': snippet.uuid})
+        self.assertEqual(snippet.get_preview_url(dark=True), expected_result)
+
     def test_duplicate(self):
         user = UserFactory.create()
         snippet = ASRSnippetFactory.create(