Index: l10n_client.theme.inc
===================================================================
--- l10n_client.theme.inc	(revision 0)
+++ l10n_client.theme.inc	(revision 0)
@@ -0,0 +1,88 @@
+<?php
+// $Id$
+/**
+ * @file
+ * Theme implementations for the l10n_client module.
+ */
+
+/**
+ * Theme handler for theme('l10n_client_string_editor').
+ *
+ * @param String $toggle_label
+ * The label used to toggle the l10n string-editor form open and closed.
+ * @param String $string_label
+ * The label used for the column which shows the list of strings available on
+ * the page.
+ * @param String $source_label
+ * The label used for the column which shows the original string.
+ * @param String $translation_label
+ * The label used for the column which shows the translated string.
+ * @param String $string_list
+ * The list of translatable strings found on the page.
+ * @param String $l10n_search
+ * AJAX form to search within the list of translatable strings.
+ * @param String $l10n_form
+ * AJAX form to change the translation for a string.
+ * @param String $l10n_dom
+ * Hidden div which contains the raw string data.
+ */
+function theme_l10n_client_string_editor($toggle_label, $string_label, $source_label, $translation_label, $string_list, $l10n_search, $l10n_form, $l10n_dom) {
+  $output = "
+    <div id='l10n-client' class='hidden'>
+      <div class='labels'>
+        <span class='toggle'>$toggle_label</span>
+        <div class='label strings'>$string_label</div>
+        <div class='label source'>$source_label</div>
+        <div class='label translation'>$translation_label</div>
+      </div>
+      <div id='l10n-client-string-select'>
+        $string_list
+        $l10n_search
+      </div>
+      <div id='l10n-client-string-editor'>
+        <div class='source'>
+          <div class='source-text'></div>
+        </div>
+        <div class='translation'>
+          $l10n_form
+        </div>
+      </div>
+    </div>
+    $l10n_dom
+  ";
+
+  return $output;
+}
+
+/**
+ * Theme handler for theme('l10n_client_string_editor').
+ *
+ * @param Array $strings
+ * An array of translatable entries for the current page.  Each entry is an
+ * array with the keys "original", "translation", "text_group", and 
+ * "translated".
+ */
+function theme_l10n_client_string_list($strings) {
+  $select_list = array();
+
+  foreach($strings as $values) {
+    // Add a class to help identify translated strings
+    $str_class = ($values['translated']) ? 'translated' : 'untranslated';
+
+    // Use a translation if it's available.
+    $display_string = ($values['translated']) ? $values['translation'] : $values['original'];
+
+    // Try to strip the HTML tags.  If this results in an empty string, then
+    // the HTML tags will be included.
+    $string = strip_tags($display_string);
+    if(empty($string)) {
+      $string = $display_string;
+    }
+    // Truncate, encode HTML entities, and add ellipsis if too long.
+    $string = htmlspecialchars(truncate_utf8($string, 78, TRUE, TRUE), ENT_NOQUOTES, 'UTF-8', FALSE);
+
+    $select_list[] = "<li class='$str_class'>$string</li>";
+  }
+  $output = implode("\n", $select_list);
+  return "<ul class='string-list'>$output</ul>";
+}
Index: l10n_client.module
===================================================================
--- l10n_client.module	(revision 9350)
+++ l10n_client.module	(working copy)
@@ -11,7 +11,24 @@
  */
 define('L10N_CLIENT_STRINGS', 100);
 
+
 /**
+ * Implementation of hook_theme().
+ */
+function l10n_client_theme() {
+  return array(
+    'l10n_client_string_editor' => array(
+      'arguments' => array('toggle_label' => '', 'string_label' => '', 'source_label' => '', 'translation_label' => '', 'string_list' => '', 'l10n_search' => '', 'l10n_form' => '', 'l10n_dom' => ''),
+      'file' => 'l10n_client.theme.inc',
+    ),
+    'l10n_client_string_list' => array(
+      'arguments' => array('strings' => array()),
+      'file' => 'l10n_client.theme.inc',
+    ),
+  );
+}
+
+/**
  * Implementation of hook_menu().
  */
 function l10n_client_menu() {
@@ -228,32 +245,7 @@
     $translation_label = '<h2>'. t('Translation to %language', array('%language' => $language->native)) .'</h2>';
     $toggle_label = t('Translate Text');
 
-
-    $output = "
-      <div id='l10n-client' class='hidden'>
-        <div class='labels'>
-          <span class='toggle'>$toggle_label</span>
-          <div class='label strings'>$string_label</div>
-          <div class='label source'>$source_label</div>
-          <div class='label translation'>$translation_label</div>
-        </div>
-        <div id='l10n-client-string-select'>
-          $string_list
-          $l10n_search
-        </div>
-        <div id='l10n-client-string-editor'>
-          <div class='source'>
-            <div class='source-text'></div>
-          </div>
-          <div class='translation'>
-            $l10n_form
-          </div>
-        </div>
-      </div>
-      $l10n_dom
-    ";
-
-    return $output;
+    return theme('l10n_client_string_editor', $toggle_label, $string_label, $source_label, $translation_label, $string_list, $l10n_search, $l10n_form, $l10n_dom);
   }
 }
 
@@ -328,42 +320,26 @@
 
 /**
  * String selection has been moved to a jquery-based list.
- * Todo: make this a themeable function.
  */
 function _l10n_client_string_list($strings) {
   // Build a list of short string excerpts for a selectable list.
-  foreach ($strings as $values) {
-    // Add a class to help identify translated strings
-    if ($values[1] === TRUE) {
-      $str_class = 'untranslated';
-    }
-    else {
-      $str_class = 'translated';
-    }
-    // TRUE means we don't have translation, so we use the original string,
-    // so we always have the string displayed on the page in the dropdown.
-    $original = $values[1] === TRUE ? $values[0] : $values[1];
 
-    // Remove HTML tags for display.
-    $string = strip_tags($original);
+  // Each entry in the strings array has the following keys:
+  // 0: Original string.
+  // 1: Translated string (may be empty).
+  // 2: Text group.
 
-    if (empty($string)) {
-      // Edge case where the whole string was HTML tags. For the
-      // user to be able to select anything, we need to show part
-      // of the HTML tags. Truncate first, so we do not truncate in
-      // the middle of an already escaped HTML tag, thus possibly
-      // breaking the page.
-      $string = htmlspecialchars(truncate_utf8($original, 78, TRUE, TRUE), ENT_NOQUOTES, 'UTF-8');
-    }
-    else {
-      // Truncate and add ellipsis if too long.
-      $string = truncate_utf8($string, 78, TRUE, TRUE);
-    }
+  // Replace each entry with an associative array to make the data easier for
+  // theme overrides to handle.
+  foreach ($strings as $key => $values) {
+    $strings[$key]['original'] = $values[0];
+    $strings[$key]['translated'] = $values[1] !== TRUE;
+    $strings[$key]['translation'] = ($values[1] === TRUE) ? '' : $values[1];
+    $strings[$key]['text_group'] = $values[2];
 
-    $select_list[] = "<li class='$str_class'>$string</li>";
+    unset($strings[$key][0], $strings[$key][1], $strings[$key][2]);
   }
-  $output = implode("\n", $select_list);
-  return "<ul class='string-list'>$output</ul>";
+  return theme('l10n_client_string_list', $strings);
 }
 
 /**