src/main/proto/search/now/ui/piet/media_queries.proto

// Copyright 2018 The Feed Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

syntax = "proto2";

package search.now.ui.piet;

option optimize_for=LITE_RUNTIME;

option java_package = "com.google.search.now.ui.piet";
option java_outer_classname = "MediaQueriesProto";
option cc_enable_arenas = true;

// A single media query condition offers a way for a Piet renderer to decide
// whether or not to apply a particular Stylesheet, Template, ImageSource, or
// other entities based on the environment config at runtime. For example,
// adding a width-based conditional enables providing different layouts/styles
// based on the user’s device, and this can be re-evaluated entirely client-side
// e.g. if the user rotates their device so that the width changes.
// The name MediaQueryCondition derives from a similar concept for Web/CSS and
// most principles in the Piet Media Query spec are influenced by their Web
// equivalents.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
message MediaQueryCondition {
  oneof condition {
    // See the documentation for FrameWidthCondition.
    FrameWidthCondition frame_width = 1;

    // See the documentation for OrientationCondition.
    OrientationCondition orientation = 2;

    // See the documentation for DarkLightCondition.
    DarkLightCondition dark_light = 3;
  }
}

// Width of each Frame in the current Piet rendering context. For multi-column
// layouts (in which Piet is instantiated independently in more than one
// column), this refers to the width of the individual column, not the overall
// width of the containing app.
message FrameWidthCondition {
  // Width of the viewport, expressed in DP.
  optional int32 width = 1;

  // Defines how the condition match should be evaluated.
  optional ComparisonCondition condition = 2;
}

// Whether the device is oriented in portrait mode or landscape mode. This
// applies mostly to mobile devices, but it is possible also for a Web device to
// be oriented in portrait mode.
message OrientationCondition {
  enum Orientation {
    // Must not be set to UNSPECIFIED, otherwise
    // ERR_INVALID_MEDIA_QUERY_CONDITION will be raised.
    UNSPECIFIED = 0;

    // Height of the device is greater than or equal to the width of the device.
    // Default.
    PORTRAIT = 1;

    // Width of the device is greater than the height of the device.
    LANDSCAPE = 2;
  }
  optional Orientation orientation = 1;
}

// Whether the UI should use a dark theme (white/light text on a black/dark
// background) or a light theme (black/dark text on a white/light background).
message DarkLightCondition {
  enum DarkLightMode {
    // Must not be set to UNSPECIFIED, otherwise
    // ERR_INVALID_MEDIA_QUERY_CONDITION will be raised.
    UNSPECIFIED = 0;

    // Black/dark text on white/light background.
    LIGHT = 1;

    // Light/white text on black/dark background.
    DARK = 2;
  }
  optional DarkLightMode mode = 1;
}

// How a condition should be evaluated. Self-explanatory. Must not be set to
// UNSPECIFIED, otherwise ERR_INVALID_MEDIA_QUERY_CONDITION will be raised.
enum ComparisonCondition {
  UNSPECIFIED = 0;

  EQUALS = 1;

  NOT_EQUALS = 2;

  LESS_THAN = 3;

  GREATER_THAN = 4;
}