Merge branch 'composer' into 'mainline'

composer: Adaptive toolbar

See merge request GNOME/geary!396

desktop/org.gnome.Geary.gschema.xml

@@ -45,6 +45,12 @@
         <description>True if the folder list Paned is in the horizontal orientation.</description>
     </key>
 
+    <key name="formatting-toolbar-visible" type="b">
+        <default>true</default>
+        <summary>Show/hide formatting toolbar</summary>
+        <description>True if the formatting toolbar in the composer is shown.</description>
+    </key>
+
     <key name="messages-pane-position" type="i">
         <default>250</default>
         <summary>Position of message list pane</summary>

icons/font-color-symbolic.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" height="16" width="16">
+  <metadata id="metadata14">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs12"/>
+  <g transform="translate(-17.966098,-9.83008)" id="g851">
+    <g transform="translate(-123.0341,-347.16992)" id="g11782" style="display:inline;enable-background:new">
+      <path transform="translate(141.0002,357)" d="M 3 2 L 3 4 L 9 4 C 9.42816 4 10 4.61414 10 5 L 10 6 L 5 6 C 4.08073 6 3.2644 6.3800638 2.75 6.9648438 C 2.2356 7.5496337 2.0072819 8.2891356 2.0136719 9.0097656 C 2.0200619 9.7303856 2.2591644 10.458569 2.7714844 11.037109 C 3.2838144 11.615649 4.09172 12 5 12 L 7 12 L 7 10 L 5 10 C 4.60213 10 4.4213712 9.8843506 4.2695312 9.7128906 C 4.1176913 9.5414306 4.0161519 9.2696144 4.0136719 8.9902344 C 4.0111919 8.7108644 4.1066231 8.4503663 4.2519531 8.2851562 C 4.3972831 8.1199362 4.57764 8 5 8 L 10 8 L 10 9 L 12 9 L 12 5 C 12 3.36566 10.6802 2 9 2 L 3 2 z " style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;anonymous:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1" id="path857"/>
+    </g>
+    <rect class="success" style="opacity:1;vector-effect:none;fill:#ed333b;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" id="rect11786" width="6.9998798" height="5.9999051" x="25.966673" y="19.831032" rx="2" ry="2"/>
+  </g>
+</svg>

icons/font-size-symbolic.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="1.0beta2 (2b71d25d45, 2019-12-03)" sodipodi:docname="font-size-symbolic.svg" id="svg4" version="1.1" height="16" width="16">
+  <metadata id="metadata10">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs8"/>
+  <sodipodi:namedview inkscape:current-layer="svg4" inkscape:window-maximized="1" inkscape:window-y="0" inkscape:window-x="0" inkscape:cy="6.3588258" inkscape:cx="-0.95496834" inkscape:zoom="14.009553" showgrid="false" id="namedview6" inkscape:window-height="1016" inkscape:window-width="1920" inkscape:pageshadow="2" inkscape:pageopacity="0" guidetolerance="10" gridtolerance="10" objecttolerance="10" borderopacity="1" inkscape:document-rotation="0" bordercolor="#666666" pagecolor="#ffffff"/>
+  <g id="g11812" style="fill:#2e3436;fill-opacity:1" transform="translate(-4596.792,-4140.9136)">
+    <rect y="4147.9146" x="4597.7925" height="2" width="5.9998794" id="rect11804" style="opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
+    <rect transform="rotate(90)" style="opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" id="rect11806" width="7.9999051" height="2" x="4147.9146" y="-4601.7925"/>
+    <rect style="opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" id="rect11808" width="11.000482" height="3.0000949" x="4601.792" y="4142.9146"/>
+    <rect y="-4608.7925" x="4143.9146" height="3.0001204" width="12" id="rect11810" style="opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" transform="rotate(90)"/>
+  </g>
+</svg>

icons/meson.build

@@ -6,6 +6,8 @@ icon_files = files(
   'detach-symbolic.svg',
   'text-x-generic-symbolic.svg',
   'edit-symbolic.svg',
+  'font-size-symbolic.svg',
+  'font-color-symbolic.svg',
   'format-ordered-list-symbolic.svg',
   'format-ordered-list-symbolic-rtl.svg',
   'format-text-remove-symbolic.svg',

src/client/application/application-configuration.vala

@@ -23,6 +23,7 @@ public class Application.Configuration : Geary.BaseObject {
     public const string FOLDER_LIST_PANE_POSITION_HORIZONTAL_KEY = "folder-list-pane-position-horizontal";
     public const string FOLDER_LIST_PANE_POSITION_KEY = "folder-list-pane-position";
     public const string FOLDER_LIST_PANE_POSITION_VERTICAL_KEY = "folder-list-pane-position-vertical";
+    public const string FORMATTING_TOOLBAR_VISIBLE = "formatting-toolbar-visible";
     public const string MESSAGES_PANE_POSITION_KEY = "messages-pane-position";
     public const string SEARCH_STRATEGY_KEY = "search-strategy";
     public const string SINGLE_KEY_SHORTCUTS = "single-key-shortcuts";
@@ -105,6 +106,11 @@ public class Application.Configuration : Geary.BaseObject {
         get { return settings.get_boolean(FOLDER_LIST_PANE_HORIZONTAL_KEY); }
     }
 
+    public bool formatting_toolbar_visible {
+        get { return settings.get_boolean(FORMATTING_TOOLBAR_VISIBLE); }
+        set { settings.set_boolean(FORMATTING_TOOLBAR_VISIBLE, value); }
+    }
+
     public int messages_pane_position {
         get { return settings.get_int(MESSAGES_PANE_POSITION_KEY); }
         set { settings.set_int(MESSAGES_PANE_POSITION_KEY, value); }

src/client/application/application-main-window.vala

@@ -1207,7 +1207,7 @@ public class Application.MainWindow :
             on_conversation_view_added
         );
 
-        this.conversations_paned.pack2(this.conversation_viewer, true, true);
+        this.conversations_paned.pack2(this.conversation_viewer, true, false);
 
         // Main toolbar
         this.main_toolbar = new MainToolbar(config);

src/client/components/components-reflow-box.c

@@ -0,0 +1,495 @@
+/*
+ * Copyright (C) 2020 Alexander Mikhaylenko <exalm7659@gmail.com>
+ * Copyright (C) 2020 James Westman <james@flyingpimonster.net>
+ *
+ * SPDX-License-Identifier: LGPL-2.1+
+ */
+
+#include "config.h"
+#include <glib/gi18n-lib.h>
+#include <gtk/gtk.h>
+
+
+#define COMPONENTS_TYPE_REFLOW_BOX (components_reflow_box_get_type())
+
+G_DECLARE_FINAL_TYPE (ComponentsReflowBox, components_reflow_box, COMPONENTS, REFLOW_BOX, GtkContainer)
+
+
+ComponentsReflowBox *components_reflow_box_new (void);
+
+guint components_reflow_box_get_spacing (ComponentsReflowBox *self);
+void  components_reflow_box_set_spacing (ComponentsReflowBox *self,
+                                         guint                spacing);
+
+guint components_reflow_box_get_row_spacing (ComponentsReflowBox *self);
+void  components_reflow_box_set_row_spacing (ComponentsReflowBox *self,
+                                             guint                row_spacing);
+
+
+struct _ComponentsReflowBox
+{
+  GtkContainer parent_instance;
+
+  GList *children;
+
+  guint spacing;
+  guint row_spacing;
+};
+
+G_DEFINE_TYPE (ComponentsReflowBox, components_reflow_box, GTK_TYPE_CONTAINER);
+
+enum {
+  PROP_0,
+  PROP_SPACING,
+  PROP_ROW_SPACING,
+  LAST_PROP,
+};
+
+static GParamSpec *props[LAST_PROP];
+
+
+static void
+components_reflow_box_init (ComponentsReflowBox *self)
+{
+  gtk_widget_set_has_window (GTK_WIDGET (self), FALSE);
+}
+
+static void
+components_reflow_box_get_property (GObject    *object,
+                             guint       prop_id,
+                             GValue     *value,
+                             GParamSpec *pspec)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (object);
+
+  switch (prop_id) {
+  case PROP_SPACING:
+    g_value_set_uint (value, components_reflow_box_get_spacing (self));
+    break;
+
+  case PROP_ROW_SPACING:
+    g_value_set_uint (value, components_reflow_box_get_row_spacing (self));
+    break;
+
+  default:
+    G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+  }
+}
+
+static void
+components_reflow_box_set_property (GObject      *object,
+                             guint         prop_id,
+                             const GValue *value,
+                             GParamSpec   *pspec)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (object);
+
+  switch (prop_id) {
+  case PROP_SPACING:
+    components_reflow_box_set_spacing (self, g_value_get_uint (value));
+    break;
+
+  case PROP_ROW_SPACING:
+    components_reflow_box_set_row_spacing (self, g_value_get_uint (value));
+    break;
+
+  default:
+    G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+  }
+}
+
+/**
+ * components_reflow_box_set_spacing:
+ * @self: a #ComponentsReflowBox
+ * @spacing: the spacing
+ *
+ * Sets the spacing for @self.
+ *
+ * Since: 0.0.14
+ */
+void
+components_reflow_box_set_spacing (ComponentsReflowBox *self,
+                            guint         spacing)
+{
+  if (self->spacing == spacing)
+    return;
+
+  self->spacing = spacing;
+  gtk_widget_queue_resize (GTK_WIDGET (self));
+
+  g_object_notify_by_pspec (G_OBJECT (self), props[PROP_SPACING]);
+}
+
+/**
+ * components_reflow_box_get_spacing:
+ * @self: a #ComponentsReflowBox
+ *
+ * Gets the spacing for @self.
+ *
+ * Returns: the spacing for @self.
+ *
+ * Since: 0.0.14
+ */
+guint
+components_reflow_box_get_spacing (ComponentsReflowBox *self)
+{
+  return self->spacing;
+}
+
+/**
+ * components_reflow_box_set_row_spacing:
+ * @self: a #ComponentsReflowBox
+ * @row_spacing: the row spacing
+ *
+ * Sets the row spacing for @self.
+ *
+ * Since: 0.0.14
+ */
+void
+components_reflow_box_set_row_spacing (ComponentsReflowBox *self,
+                                guint          row_spacing)
+{
+  if (self->row_spacing == row_spacing)
+    return;
+
+  self->row_spacing = row_spacing;
+  gtk_widget_queue_resize (GTK_WIDGET (self));
+
+  g_object_notify_by_pspec (G_OBJECT (self), props[PROP_ROW_SPACING]);
+}
+
+/**
+ * components_reflow_box_get_row_spacing:
+ * @self: a #ComponentsReflowBox
+ *
+ * Gets the row spacing for @self.
+ *
+ * Returns: the row spacing for @self.
+ *
+ * Since: 0.0.14
+ */
+guint
+components_reflow_box_get_row_spacing (ComponentsReflowBox *self)
+{
+  return self->row_spacing;
+}
+
+
+static void
+allocate_row (ComponentsReflowBox  *self,
+              GtkAllocation *allocation,
+              gint           y,
+              GList         *row_start,
+              GList         *next_row,
+              gint           row_height,
+              gint           extra_space,
+              gint           n_expand_children)
+{
+  gboolean rtl;
+  gint x = 0;
+  gint expand_per_child = 0;
+
+  if (row_start == NULL)
+    return;
+
+  rtl = gtk_widget_get_direction (GTK_WIDGET (self)) == GTK_TEXT_DIR_RTL;
+  if (rtl)
+    x = allocation->width;
+
+  if (n_expand_children > 0) {
+    expand_per_child = extra_space / n_expand_children;
+  } else {
+    GtkAlign align;
+    align = gtk_widget_get_halign (GTK_WIDGET (self));
+    if (align == GTK_ALIGN_CENTER) {
+      if (rtl)
+        x -= (extra_space / 2);
+      else
+        x += (extra_space / 2);
+    } else if (align == GTK_ALIGN_END) {
+      if (rtl)
+        x -= extra_space;
+      else
+        x += extra_space;
+    }
+  }
+
+  for (GList *l = row_start; l != NULL && l != next_row; l = l->next) {
+    GtkWidget *child = GTK_WIDGET (l->data);
+    int w, min_w;
+    GtkAllocation child_alloc;
+
+    if (!gtk_widget_get_visible (child))
+      continue;
+
+    gtk_widget_get_preferred_width (child, &min_w, &w);
+    w = CLAMP (w, min_w, allocation->width);
+
+    if (gtk_widget_get_hexpand (child)) {
+      w += expand_per_child;
+    }
+
+    if (rtl)
+      x -= w;
+
+    child_alloc.x = x + allocation->x;
+
+    if (rtl)
+      x -= self->spacing;
+    else
+      x += w + self->spacing;
+
+    child_alloc.y = y + allocation->y;
+    child_alloc.width = w;
+    child_alloc.height = row_height;
+
+    gtk_widget_size_allocate (child, &child_alloc);
+  }
+}
+
+static gint
+calculate_sizes (ComponentsReflowBox  *self,
+                 GtkAllocation *allocation,
+                 gboolean       dry_run)
+{
+  gint x = 0;
+  gint y = 0;
+  gint row_height = 0;
+
+  GList *row_start = self->children;
+  gint n_expand_children = 0;
+
+  for (GList *l = self->children; l != NULL; l = l->next) {
+    GtkWidget *child = GTK_WIDGET (l->data);
+    int w, h, min_w;
+
+    if (!gtk_widget_get_visible (child))
+      continue;
+
+    gtk_widget_get_preferred_width (child, &min_w, &w);
+    gtk_widget_get_preferred_height (child, NULL, &h);
+
+    w = CLAMP (w, min_w, allocation->width);
+
+    if (x + w > allocation->width) {
+      /* no more space on this row, create a new one */
+
+      /* first, do the allocations for the previous row, if needed */
+      if (!dry_run) {
+        allocate_row (self, allocation, y, row_start, l, row_height,
+                      allocation->width + self->spacing - x, n_expand_children);
+      }
+
+      /* now reset everything for the next row */
+      x = 0;
+      y += row_height + self->row_spacing;
+      row_height = 0;
+      n_expand_children = 0;
+      row_start = l;
+    }
+
+    if (gtk_widget_get_hexpand (child))
+      n_expand_children ++;
+
+    row_height = MAX (row_height, h);
+
+    x += w + self->spacing;
+  }
+
+  if (!dry_run) {
+    /* allocate the last row */
+    allocate_row (self, allocation, y, row_start, NULL, row_height,
+                  allocation->width + self->spacing - x, n_expand_children);
+  }
+
+  return y + row_height;
+}
+
+static void
+components_reflow_box_size_allocate(GtkWidget      *widget,
+                             GtkAllocation  *allocation)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (widget);
+
+  calculate_sizes(self, allocation, FALSE);
+  GTK_WIDGET_CLASS (components_reflow_box_parent_class)->size_allocate (widget, allocation);
+}
+
+static GtkSizeRequestMode
+components_reflow_box_get_request_mode(GtkWidget *widget)
+{
+  return GTK_SIZE_REQUEST_HEIGHT_FOR_WIDTH;
+}
+
+static void
+components_reflow_box_get_preferred_width(GtkWidget *widget,
+                                   gint      *minimum_width,
+                                   gint      *natural_width)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (widget);
+
+  gint min = 0;
+  gint nat = 0;
+
+  for (GList *l = self->children; l != NULL; l = l->next) {
+    GtkWidget *child = GTK_WIDGET (l->data);
+    int child_min, child_nat;
+
+    if (!gtk_widget_get_visible (child))
+      continue;
+
+    gtk_widget_get_preferred_width (child, &child_min, &child_nat);
+
+    min = MAX (min, child_min);
+    nat += child_nat + self->spacing;
+  }
+
+  /* remove the extra spacing, avoid off-by-one error */
+  if (self->children != NULL)
+    nat -= self->spacing;
+
+  if (minimum_width)
+    *minimum_width = min;
+  if (natural_width)
+    *natural_width = nat;
+}
+
+static void
+components_reflow_box_get_preferred_width_for_height (GtkWidget *widget,
+                                               gint       height,
+                                               gint      *minimum_width,
+                                               gint      *natural_width)
+{
+  components_reflow_box_get_preferred_width (widget, minimum_width, natural_width);
+}
+
+static void
+components_reflow_box_get_preferred_height_for_width (GtkWidget *widget,
+                                               gint       width,
+                                               gint      *minimum_height,
+                                               gint      *natural_height)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (widget);
+
+  GtkAllocation allocation;
+  gint h;
+
+  allocation.width = width;
+  h = calculate_sizes (self, &allocation, TRUE);
+
+  if (minimum_height)
+    *minimum_height = h;
+  if (natural_height)
+    *natural_height = h;
+}
+
+
+static void
+components_reflow_box_add (GtkContainer *container,
+                    GtkWidget    *widget)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (container);
+
+  self->children = g_list_append (self->children, widget);
+  gtk_widget_set_parent (widget, GTK_WIDGET (self));
+}
+
+static void
+components_reflow_box_remove (GtkContainer *container,
+                       GtkWidget    *widget)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (container);
+
+  gtk_widget_unparent (widget);
+  self->children = g_list_remove (self->children, widget);
+}
+
+static void
+components_reflow_box_forall (GtkContainer *container,
+                       gboolean      include_internals,
+                       GtkCallback   callback,
+                       gpointer      callback_data)
+{
+  ComponentsReflowBox *self = COMPONENTS_REFLOW_BOX (container);
+
+  // while loop instead of for loop in case the callback removes children
+  GList *l = self->children;
+  while (l != NULL) {
+    GtkWidget *child = GTK_WIDGET (l->data);
+    l = l->next;
+    callback (child, callback_data);
+  }
+}
+
+static void
+components_reflow_box_class_init (ComponentsReflowBoxClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+  GtkContainerClass *container_class = GTK_CONTAINER_CLASS (klass);
+
+  object_class->set_property = components_reflow_box_set_property;
+  object_class->get_property = components_reflow_box_get_property;
+
+  widget_class->size_allocate = components_reflow_box_size_allocate;
+  widget_class->get_request_mode = components_reflow_box_get_request_mode;
+  widget_class->get_preferred_width = components_reflow_box_get_preferred_width;
+  widget_class->get_preferred_width_for_height = components_reflow_box_get_preferred_width_for_height;
+  widget_class->get_preferred_height_for_width = components_reflow_box_get_preferred_height_for_width;
+
+  container_class->add = components_reflow_box_add;
+  container_class->remove = components_reflow_box_remove;
+  container_class->forall = components_reflow_box_forall;
+
+  /**
+   * ComponentsReflowBox:spacing:
+   *
+   * The spacing between children
+   *
+   * Since: 0.0.14
+   */
+  props[PROP_SPACING] =
+    g_param_spec_uint ("spacing",
+                       _("Spacing"),
+                       _("Spacing between children"),
+                       0,
+                       G_MAXUINT,
+                       0,
+                       G_PARAM_READWRITE | G_PARAM_EXPLICIT_NOTIFY);
+
+  /**
+   * ComponentsReflowBox:row-spacing:
+   *
+   * The spacing between rows of children
+   *
+   * Since: 0.0.14
+   */
+  props[PROP_ROW_SPACING] =
+    g_param_spec_uint ("row-spacing",
+                       _("Row spacing"),
+                       _("Spacing between rows of children"),
+                       0,
+                       G_MAXUINT,
+                       0,
+                       G_PARAM_READWRITE | G_PARAM_EXPLICIT_NOTIFY);
+
+  g_object_class_install_properties (object_class, LAST_PROP, props);
+}
+
+/**
+ * components_reflow_box_new:
+ *
+ * Create a new #ComponentsReflowBox widget.
+ *
+ * Returns: The newly created #ComponentsReflowBox widget
+ *
+ * Since: 0.0.14
+ */
+ComponentsReflowBox *
+components_reflow_box_new (void)
+{
+  return g_object_new (COMPONENTS_TYPE_REFLOW_BOX, NULL);
+}
+
+
+

src/client/composer/composer-headerbar.vala

@@ -26,10 +26,6 @@ public class Composer.Headerbar : Gtk.HeaderBar {
     [GtkChild]
     private Gtk.Label recipients_label;
     [GtkChild]
-    private Gtk.Button new_message_attach_button;
-    [GtkChild]
-    private Gtk.Box conversation_attach_buttons;
-    [GtkChild]
     private Gtk.Button save_and_close_button;
 
 
@@ -56,11 +52,6 @@ public class Composer.Headerbar : Gtk.HeaderBar {
         recipients_button.tooltip_text = tooltip;
     }
 
-    public void set_show_pending_attachments(bool show) {
-        this.new_message_attach_button.visible = !show;
-        this.conversation_attach_buttons.visible = show;
-    }
-
     internal void set_mode(Widget.PresentationMode mode) {
         switch (mode) {
         case Widget.PresentationMode.DETACHED:

src/client/composer/composer-web-view.vala

@@ -55,11 +55,16 @@ public class Composer.WebView : Components.WebView {
         public string link_url { get; private set; default = ""; }
         public string font_family { get; private set; default = "sans"; }
         public uint font_size { get; private set; default = 12; }
+        public Gdk.RGBA font_color {
+            get;
+            private set;
+            default = Util.Gtk.rgba(0, 0, 0, 1);
+        }
 
         private uint context = 0;
 
         public EditContext(string message) {
-            string[] values = message.split(",");
+            string[] values = message.split(";");
             this.context = (uint) uint64.parse(values[0]);
 
             this.link_url = values[1];
@@ -73,6 +78,10 @@ public class Composer.WebView : Components.WebView {
             }
 
             this.font_size = (uint) uint64.parse(values[3]);
+
+            Gdk.RGBA font_color = {0, 0, 0, 0};
+            font_color.parse(values[4]);
+            this.font_color = font_color;
         }
 
     }

src/client/composer/composer-widget.vala

@@ -11,6 +11,8 @@ private errordomain AttachmentError {
     DUPLICATE
 }
 
+[CCode (cname = "components_reflow_box_get_type")]
+private extern Type components_reflow_box_get_type();
 
 /**
  * A widget for editing an email message.
@@ -129,8 +131,9 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     private const string ACTION_COLOR = "color";
     private const string ACTION_INSERT_IMAGE = "insert-image";
     private const string ACTION_INSERT_LINK = "insert-link";
-    private const string ACTION_COMPOSE_AS_HTML = "compose-as-html";
+    private const string ACTION_TEXT_FORMAT = "text-format";
     private const string ACTION_SHOW_EXTENDED_HEADERS = "show-extended-headers";
+    private const string ACTION_SHOW_FORMATTING = "show-formatting";
     private const string ACTION_DISCARD = "discard";
     private const string ACTION_DETACH = "detach";
     private const string ACTION_SEND = "send";
@@ -180,12 +183,13 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         { ACTION_ADD_ORIGINAL_ATTACHMENTS, on_pending_attachments                                     },
         { ACTION_CLOSE,                    on_close                                                   },
         { ACTION_DISCARD,                  on_discard                                       },
-        { ACTION_COMPOSE_AS_HTML,          on_toggle_action, null, "true", on_compose_as_html_toggled },
+        { ACTION_TEXT_FORMAT,              null,            "s", "'html'", on_text_format             },
         { ACTION_DETACH,                   on_detach                                                  },
         { ACTION_OPEN_INSPECTOR,           on_open_inspector                  },
         { ACTION_SELECT_DICTIONARY,        on_select_dictionary                                       },
         { ACTION_SEND,                     on_send                                                    },
         { ACTION_SHOW_EXTENDED_HEADERS,    on_toggle_action, null, "false", on_show_extended_headers_toggled },
+        { ACTION_SHOW_FORMATTING,          on_toggle_action, null, "false", on_show_formatting        },
     };
 
     public static void add_accelerators(Application.Client application) {
@@ -310,6 +314,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
 
     [GtkChild]
     private Gtk.Label from_label;
+    [GtkChild] private Gtk.Box from_row;
     [GtkChild]
     private Gtk.Label from_single;
     [GtkChild]
@@ -347,8 +352,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     private EmailEntry reply_to_entry;
     private Components.EntryUndo reply_to_undo;
 
-    [GtkChild]
+    [GtkChild] private Gtk.Box subject_row;
-    private Gtk.Label subject_label;
     [GtkChild]
     private Gtk.Entry subject_entry;
     private Components.EntryUndo subject_undo;
@@ -371,21 +375,22 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     private Gtk.Widget recipients;
     [GtkChild]
     private Gtk.Box header_area;
-    [GtkChild]
+
-    private Gtk.Box insert_buttons;
+    [GtkChild] private Gtk.Button new_message_attach_button;
-    [GtkChild]
+    [GtkChild] private Gtk.Box conversation_attach_buttons;
-    private Gtk.Box font_style_buttons;
+
-    [GtkChild]
+    [GtkChild] private Gtk.Revealer formatting;
-    private Gtk.Box list_buttons;
+    [GtkChild] private Gtk.MenuButton font_button;
+    [GtkChild] private Gtk.Stack font_button_stack;
+    [GtkChild] private Gtk.MenuButton font_size_button;
+    [GtkChild] private Gtk.Image font_color_icon;
+    [GtkChild] private Gtk.MenuButton text_format_button;
+
     [GtkChild]
     private Gtk.Button insert_link_button;
     [GtkChild]
-    private Gtk.Button remove_format_button;
-    [GtkChild]
     private Gtk.Button select_dictionary_button;
     [GtkChild]
-    private Gtk.MenuButton menu_button;
-    [GtkChild]
     private Gtk.Label info_label;
 
     [GtkChild]
@@ -394,9 +399,6 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     private GLib.SimpleActionGroup composer_actions = new GLib.SimpleActionGroup();
     private GLib.SimpleActionGroup editor_actions = new GLib.SimpleActionGroup();
 
-    private Menu html_menu;
-    private Menu plain_menu;
-
     private Menu context_menu_model;
     private Menu context_menu_rich_text;
     private Menu context_menu_plain_text;
@@ -483,6 +485,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     public Widget(Application.Client application,
                           Geary.Account initial_account,
                           ComposeType compose_type) {
+        components_reflow_box_get_type();
         base_ref();
         this.application = application;
         this.account = initial_account;
@@ -551,8 +554,6 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         Gtk.Builder builder = new Gtk.Builder.from_resource(
             "/org/gnome/Geary/composer-menus.ui"
         );
-        this.html_menu = (Menu) builder.get_object("html_menu_model");
-        this.plain_menu = (Menu) builder.get_object("plain_menu_model");
         this.context_menu_model = (Menu) builder.get_object("context_menu_model");
         this.context_menu_rich_text = (Menu) builder.get_object("context_menu_rich_text");
         this.context_menu_plain_text = (Menu) builder.get_object("context_menu_plain_text");
@@ -610,7 +611,14 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         );
         this.background_work_pulse.repetition = FOREVER;
 
+        // Set the from_multiple combo box to ellipsize. This can't be done
+        // from the .ui file.
+        var cells = this.from_multiple.get_cells();
+        ((Gtk.CellRendererText) cells.data).ellipsize = END;
+
         load_entry_completions();
+
+        update_color_icon.begin(Util.Gtk.rgba(0, 0, 0, 0));
     }
 
     public Widget.from_mailbox(Application.Client application,
@@ -754,8 +762,8 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         // model and hence the menu_button constructs a new
         // popover.
         this.composer_actions.change_action_state(
-            ACTION_COMPOSE_AS_HTML,
+            ACTION_TEXT_FORMAT,
-            this.application.config.compose_as_html
+            this.application.config.compose_as_html ? "html" : "plain"
         );
 
         set_mode(DETACHED);
@@ -1146,10 +1154,16 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
                 ACTION_SHOW_EXTENDED_HEADERS, false
             );
             entries_users.change_action_state(
-                ACTION_COMPOSE_AS_HTML, this.application.config.compose_as_html
+                ACTION_TEXT_FORMAT,
+                this.application.config.compose_as_html ? "html" : "plain"
             );
         }
 
+        this.composer_actions.change_action_state(
+            ACTION_SHOW_FORMATTING,
+            this.application.config.formatting_toolbar_visible
+        );
+
         get_action(Action.Edit.UNDO).set_enabled(false);
         get_action(Action.Edit.REDO).set_enabled(false);
 
@@ -1421,10 +1435,6 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         if (this.container != null) {
             this.container.top_window.title = subject;
         }
-
-        if (this.application.config.desktop_environment != UNITY) {
-            this.header.title = subject;
-        }
     }
 
     internal void set_mode(PresentationMode new_mode) {
@@ -1435,20 +1445,17 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         case PresentationMode.DETACHED:
         case PresentationMode.PANED:
             this.recipients.set_visible(true);
-            this.subject_label.set_visible(true);
+            this.subject_row.visible = true;
-            this.subject_entry.set_visible(true);
             break;
 
         case PresentationMode.INLINE:
             this.recipients.set_visible(true);
-            this.subject_label.set_visible(false);
+            this.subject_row.visible = false;
-            this.subject_entry.set_visible(false);
             break;
 
         case PresentationMode.INLINE_COMPACT:
             this.recipients.set_visible(false);
-            this.subject_label.set_visible(false);
+            this.subject_row.visible = false;
-            this.subject_entry.set_visible(false);
             set_compact_header_recipients();
             break;
         }
@@ -1795,7 +1802,10 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
                 }
             }
         }
-        this.header.set_show_pending_attachments(manual_enabled);
+
+        this.new_message_attach_button.visible = !manual_enabled;
+        this.conversation_attach_buttons.visible = manual_enabled;
+
         return have_added;
     }
 
@@ -2114,25 +2124,23 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         action.change_state(!action.state.get_boolean());
     }
 
-    private void on_compose_as_html_toggled(SimpleAction? action, Variant? new_state) {
+    private void on_text_format(SimpleAction? action, Variant? new_state) {
-        bool compose_as_html = new_state.get_boolean();
+        bool compose_as_html = new_state.get_string() == "html";
-        action.set_state(compose_as_html);
+        action.set_state(new_state.get_string());
 
         foreach (string html_action in HTML_ACTIONS)
             get_action(html_action).set_enabled(compose_as_html);
 
         update_cursor_actions();
 
-        this.insert_buttons.visible = compose_as_html;
+        var show_formatting = (SimpleAction) this.composer_actions.lookup_action(ACTION_SHOW_FORMATTING);
-        this.font_style_buttons.visible = compose_as_html;
+        show_formatting.set_enabled(compose_as_html);
-        this.list_buttons.visible = compose_as_html;
+        update_formatting_toolbar();
-        this.remove_format_button.visible = compose_as_html;
-
-        this.menu_button.menu_model = (compose_as_html) ? this.html_menu : this.plain_menu;
 
         this.editor.set_rich_text(compose_as_html);
 
         this.application.config.compose_as_html = compose_as_html;
+        this.text_format_button.popover.popdown();
     }
 
     private void on_show_extended_headers_toggled(GLib.SimpleAction? action,
@@ -2146,11 +2154,29 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         }
     }
 
+    private void update_formatting_toolbar() {
+        var show_formatting = (SimpleAction) this.composer_actions.lookup_action(ACTION_SHOW_FORMATTING);
+        var text_format = (SimpleAction) this.composer_actions.lookup_action(ACTION_TEXT_FORMAT);
+        this.formatting.reveal_child = text_format.get_state().get_string() == "html" && show_formatting.get_state().get_boolean();
+    }
+
+    private void on_show_formatting(SimpleAction? action, Variant? new_state) {
+        bool show_formatting = new_state.get_boolean();
+        this.application.config.formatting_toolbar_visible = show_formatting;
+        action.set_state(new_state);
+
+        update_formatting_toolbar();
+    }
+
     private void on_font_family(SimpleAction action, Variant? param) {
+        string font = param.get_string();
         this.editor.execute_editing_command_with_argument(
-            "fontname", param.get_string()
+            "fontname", font
         );
-        action.set_state(param.get_string());
+        action.set_state(font);
+
+        this.font_button_stack.visible_child_name = font;
+        this.font_button.popover.popdown();
     }
 
     private void on_font_size(SimpleAction action, Variant? param) {
@@ -2164,15 +2190,35 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
 
         this.editor.execute_editing_command_with_argument("fontsize", size);
         action.set_state(param.get_string());
+
+        this.font_size_button.popover.popdown();
+    }
+
+    private async void update_color_icon(Gdk.RGBA color) {
+        var theme = Gtk.IconTheme.get_default();
+        var icon = theme.lookup_icon("font-color-symbolic", 16, 0);
+        Gdk.RGBA fg_color = Util.Gtk.rgba(0, 0, 0, 1);
+        this.get_style_context().lookup_color("theme_fg_color", out fg_color);
+
+        try {
+            var pixbuf = yield icon.load_symbolic_async(fg_color, color, null, null, null);
+            this.font_color_icon.pixbuf = pixbuf;
+        } catch(Error e) {
+            warning("Could not load icon `font-color-symbolic`!");
+            this.font_color_icon.icon_name = "font-color-symbolic";
+        }
     }
 
     private void on_select_color() {
         Gtk.ColorChooserDialog dialog = new Gtk.ColorChooserDialog(_("Select Color"),
             this.container.top_window);
         if (dialog.run() == Gtk.ResponseType.OK) {
+            var rgba = dialog.get_rgba();
             this.editor.execute_editing_command_with_argument(
-                "forecolor", dialog.get_rgba().to_string()
+                "forecolor", rgba.to_string()
             );
+
+            this.update_color_icon.begin(rgba);
         }
         dialog.destroy();
     }
@@ -2392,7 +2438,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     // the from address had to be set
     private bool update_from_field() {
         this.from_multiple.changed.disconnect(on_from_changed);
-        this.from_single.visible = this.from_multiple.visible = this.from_label.visible = false;
+        this.from_single.visible = this.from_multiple.visible = this.from_row.visible = false;
 
         // Don't show in inline unless the current account has
         // multiple email accounts or aliases, since these will be replies to a
@@ -2411,7 +2457,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
             return false;
         }
 
-        this.from_label.visible = true;
+        this.from_row.visible = true;
         this.from_label.set_mnemonic_widget(this.from_multiple);
         // Composer label (with mnemonic underscore) for the account selector
         // when choosing what address to send a message from.
@@ -2657,6 +2703,8 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
             ACTION_FONT_FAMILY, context.font_family
         );
 
+        this.update_color_icon.begin(context.font_color);
+
         if (context.font_size < 11)
             this.editor_actions.change_action_state(ACTION_FONT_SIZE, "small");
         else if (context.font_size > 20)

src/client/composer/spell-check-popover.vala

@@ -60,6 +60,8 @@ public class SpellCheckPopover {
             this.is_lang_visible = is_active || is_visible;
 
             Gtk.Box box = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 6);
+            box.margin = 6;
+            box.margin_start = 12;
 
             lang_name = Util.International.language_name_from_locale(lang_code);
             country_name = Util.International.country_name_from_locale(lang_code);
@@ -69,7 +71,6 @@ public class SpellCheckPopover {
                 label_text += " (" + country_name + ")";
             Gtk.Label label = new Gtk.Label(label_text);
             label.set_halign(Gtk.Align.START);
-            label.set_size_request(-1, 24);
 
             box.pack_start(label, false, false);
 

src/client/meson.build

@@ -37,6 +37,7 @@ geary_client_vala_sources = files(
   'components/components-inspector-system-view.vala',
   'components/components-placeholder-pane.vala',
   'components/components-preferences-window.vala',
+  'components/components-reflow-box.c',
   'components/components-search-bar.vala',
   'components/components-validator.vala',
   'components/components-web-view.vala',

src/client/util/util-gtk.vala

@@ -218,4 +218,13 @@ namespace Util.Gtk {
         return new_url;
     }
 
+    public Gdk.RGBA rgba(double red, double green, double blue, double alpha) {
+        return Gdk.RGBA() {
+            red = red,
+            green = green,
+            blue = blue,
+            alpha = alpha
+        };
+    }
+
 }

test/client/composer/composer-web-view-test.vala

@@ -35,15 +35,20 @@ public class Composer.WebViewTest : Components.WebViewTestCase<Composer.WebView>
     }
 
     public void edit_context() throws Error {
-        assert(!(new WebView.EditContext("0,,,").is_link));
+        assert(!(new WebView.EditContext("0;;;;").is_link));
-        assert(new WebView.EditContext("1,,,").is_link);
+        assert(new WebView.EditContext("1;;;;").is_link);
-        assert(new WebView.EditContext("1,url,,").link_url == "url");
+        assert(new WebView.EditContext("1;url;;;").link_url == "url");
 
-        assert(new WebView.EditContext("0,,Helvetica,").font_family == "sans");
+        assert(new WebView.EditContext("0;;Helvetica;;").font_family == "sans");
-        assert(new WebView.EditContext("0,,Times New Roman,").font_family == "serif");
+        assert(new WebView.EditContext("0;;Times New Roman;;").font_family == "serif");
-        assert(new WebView.EditContext("0,,Courier,").font_family == "monospace");
+        assert(new WebView.EditContext("0;;Courier;;").font_family == "monospace");
 
-        assert(new WebView.EditContext("0,,,12").font_size == 12);
+        assert(new WebView.EditContext("0;;;12;").font_size == 12);
+
+        assert(new WebView.EditContext("0;;;;rgb(0, 0, 0)").font_color == Util.Gtk.rgba(0, 0, 0, 1));
+        assert(new WebView.EditContext("0;;;;rgb(255, 0, 0)").font_color == Util.Gtk.rgba(1, 0, 0, 1));
+        assert(new WebView.EditContext("0;;;;rgb(0, 255, 0)").font_color == Util.Gtk.rgba(0, 1, 0, 1));
+        assert(new WebView.EditContext("0;;;;rgb(0, 0, 255)").font_color == Util.Gtk.rgba(0, 0, 1, 1));
     }
 
     public void get_html() throws GLib.Error {

test/js/composer-page-state-test.vala

@@ -127,7 +127,7 @@ class Composer.PageStateTest : Components.WebViewTestCase<Composer.WebView> {
                 Util.JS.to_string(
                     run_javascript(@"new EditContext(document.getElementById('test')).encode()")
                     .get_js_value()
-                ).has_prefix("1,url,"));
+                ).has_prefix("1;url;"));
         } catch (Util.JS.Error err) {
             print("Util.JS.Error: %s\n", err.message);
             assert_not_reached();
@@ -138,7 +138,7 @@ class Composer.PageStateTest : Components.WebViewTestCase<Composer.WebView> {
     }
 
     public void edit_context_font() throws Error {
-        string html = "<p id=\"test\" style=\"font-family: Comic Sans; font-size: 144\">para</p>";
+        string html = "<p id=\"test\" style=\"font-family: Comic Sans; font-size: 144; color: #FF7F01\">para</p>";
         load_body_fixture(html);
 
         try {
@@ -146,7 +146,7 @@ class Composer.PageStateTest : Components.WebViewTestCase<Composer.WebView> {
                 Util.JS.to_string(
                     run_javascript(@"new EditContext(document.getElementById('test')).encode()")
                     .get_js_value()
-                ) == "0,,Comic Sans,144");
+                ) == "0;;Comic Sans;144;rgb(255, 127, 1)");
         } catch (Util.JS.Error err) {
             print("Util.JS.Error: %s\n", err.message);
             assert_not_reached();

ui/composer-headerbar.ui

@@ -5,6 +5,11 @@
   <template class="ComposerHeaderbar" parent="GtkHeaderBar">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
+    <child type="title">
+      <object class="GtkBox">
+        <property name="visible">False</property>
+      </object>
+    </child>
     <child>
       <object class="GtkBox" id="detach_start">
         <property name="visible">True</property>
@@ -50,85 +55,12 @@
       </object>
     </child>
     <child>
-      <object class="GtkButton" id="new_message_attach_button">
+      <object class="GtkButton">
         <property name="visible">True</property>
         <property name="can_focus">True</property>
-        <property name="focus_on_click">False</property>
+        <property name="label">Cancel</property>
-        <property name="receives_default">False</property>
+        <property name="action_name">cmh.composer-close</property>
-        <property name="tooltip_text" translatable="yes">Attach a file</property>
-        <property name="action_name">cmh.add-attachment</property>
-        <property name="always_show_image">True</property>
-        <child>
-          <object class="GtkImage" id="new_message_attach_image">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="pixel_size">16</property>
-            <property name="icon_name">mail-attachment-symbolic</property>
-          </object>
-        </child>
       </object>
-      <packing>
-        <property name="position">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkBox" id="conversation_attach_buttons">
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkButton" id="conversation_attach_new_button">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="focus_on_click">False</property>
-            <property name="receives_default">False</property>
-            <property name="tooltip_text" translatable="yes">Attach a file</property>
-            <property name="action_name">cmh.add-attachment</property>
-            <property name="always_show_image">True</property>
-            <child>
-              <object class="GtkImage" id="conversation_attach_new_image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="pixel_size">16</property>
-                <property name="icon_name">mail-attachment-symbolic</property>
-              </object>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="conversation_attach_original_button">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="focus_on_click">False</property>
-            <property name="receives_default">False</property>
-            <property name="tooltip_text" translatable="yes">Add original attachments</property>
-            <property name="action_name">cmh.add-original-attachments</property>
-            <property name="always_show_image">True</property>
-            <child>
-              <object class="GtkImage" id="conversation_attach_original_image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="pixel_size">16</property>
-                <property name="icon_name">edit-copy-symbolic</property>
-              </object>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
-        </child>
-        <style>
-          <class name="linked"/>
-        </style>
-      </object>
-      <packing>
-        <property name="position">2</property>
-      </packing>
     </child>
     <child>
       <object class="GtkButton" id="recipients_button">

ui/composer-link-popover.ui

@@ -4,7 +4,7 @@
   <requires lib="gtk+" version="3.14"/>
   <template class="ComposerLinkPopover" parent="GtkPopover">
     <property name="can_focus">False</property>
-    <property name="position">bottom</property>
+    <property name="position">top</property>
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>

ui/composer-menus.ui

@@ -1,64 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <interface>
-  <menu id="html_menu_model">
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">S_ans Serif</attribute>
-        <attribute name="action">edt.font-family</attribute>
-        <attribute name="target">sans</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">S_erif</attribute>
-        <attribute name="action">edt.font-family</attribute>
-        <attribute name="target">serif</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">_Fixed Width</attribute>
-        <attribute name="action">edt.font-family</attribute>
-        <attribute name="target">monospace</attribute>
-      </item>
-    </section>
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">_Small</attribute>
-        <attribute name="action">edt.font-size</attribute>
-        <attribute name="target">small</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">_Medium</attribute>
-        <attribute name="action">edt.font-size</attribute>
-        <attribute name="target">medium</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Lar_ge</attribute>
-        <attribute name="action">edt.font-size</attribute>
-        <attribute name="target">large</attribute>
-      </item>
-    </section>
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">C_olor</attribute>
-        <attribute name="action">edt.color</attribute>
-      </item>
-    </section>
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">_Rich Text</attribute>
-        <attribute name="action">win.compose-as-html</attribute>
-      </item>
-    </section>
-  </menu>
-
-  <menu id="plain_menu_model">
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">_Rich Text</attribute>
-        <attribute name="action">win.compose-as-html</attribute>
-      </item>
-    </section>
-  </menu>
-
   <menu id="context_menu_model">
     <section id="context_menu_webkit_spelling"/>
     <section>

ui/composer-web-view.js

@@ -684,21 +684,24 @@ EditContext.prototype = {
         }
         this.fontFamily = fontFamily;
         this.fontSize = styles.getPropertyValue("font-size").replace("px", "");
+        this.fontColor = styles.getPropertyValue("color");
     },
     equals: function(other) {
         return other != null
             && this.context == other.context
             && this.linkUrl == other.linkUrl
             && this.fontFamily == other.fontFamily
-            && this.fontSize == other.fontSize;
+            && this.fontSize == other.fontSize
+            && this.fontColor == other.fontColor;
     },
     encode: function() {
         return [
             this.context.toString(16),
             this.linkUrl,
             this.fontFamily,
-            this.fontSize
+            this.fontSize,
-        ].join(",");
+            this.fontColor
+        ].join(";");
     }
 };